• Разработка сайта на WordPress и git (github)?

    Evanre
    @Evanre
    Front-end developer
    Если чисто по коду, сам гит у меня лежит в корневой папке WordPress. `.gitignore` файл выглядит примерно вот так:
    # PHPStorm
    .idea
    
    # WordPress
    *.log
    /wp-*.php
    /index.php
    /xmlrpc.php
    /license.txt
    /readme.html
    /sitemap.xml
    /sitemap.xml.gz
    
    /backup*
    
    wp-admin/
    wp-includes/
    
    wp-content/*
    !wp-content/themes/
    wp-content/themes/*
    
    !wp-content/plugins/
    wp-content/plugins/*
    
    !wp-content/themes/ei/
    !wp-content/themes/ei-child/
    
    !wp-content/plugins/realty-export
    
    # Frontend tools
    wp-content/themes/ei-child/node_modules/

    т.е. Вы по умолчанию игнорируете все кроме того, что нужно. По мере разработке можете добавлять или убирать папки.

    По бэкапам.
    Бекап делаю через плагин BackUpWordPress (очень удобная вещь, можно делать бекапы всего сайта и базы по расписанию, Вам на почту приходит письмо с ссылкой на скачивание бекапа), экспорт базы на другой сервер делаю с помощью WP Migrate DB (он не просто заменяет пути в базе но и правит под них сериаллизованые массивы, таким образом некоторые настройки не слетают). Знаю что можно все делать через wp-cli, но он далеко не на каждом сервере стоит, и так уже привычнее. Мне обычно чтобы слить клиентский сайт для работы на локалке даже фтп не нужен, только доступ в админку.

    При работе с сервером заливаю файлы прогой WinSCP, она может как FTP так и SFTP, так же умеет синхронизировать папки (заливать только то, что изменилось), на крупных проектах настраиваю синхронизацию в PHPStorm.
    Ответ написан
    Комментировать
  • Экспорт в Avocode?

    Evanre
    @Evanre
    Front-end developer
    Старайтесь не работать с растровой графикой когда дело касается подобных элементов интерфейса. Старайтесь обходиться либо стилями CSS (ими можно сделать действительно многое), либо SVG.
    Что до вашей проблемы, то вот несколько вариантов, как ее решить:
    1. Можно сделать просто слайс, и вырезать иконку.;
    2. Экспоротните svg и, если нужно, допилите руками в иллюстраторе;
    3. Запросите иконки у дизайнера отдельно;
    4. Найдите иконку на просторах интернета.
    Ответ написан
  • Как исправить ошибку Unsafe attempt to load URL при подключении SVG?

    Evanre
    @Evanre
    Front-end developer
    Для обращения к svg через xlink:href нужен HTTP, локально не работает. Если только не встраивать svg инлайново. Другими словами, вам нужен сервер.
    Ответ написан
    Комментировать
  • Как написать masonry сетку без сторонних плагинов?

    Evanre
    @Evanre
    Front-end developer
    Если не подходят колонки, то выводите посты в 3 разных блока. Выставляете эти блоки в ряд. Все. (если нет возможности вывести блоки нужным порядком и в контейнерах, есть простенький легковесный плагин salvattore, который сделает это за вас).

    Если нужен подход как у оригинального плагина от desandro. Самостоятельно писать смысла нет. Слишком долго + требует значительных знаний js. Есть более легковесные варианты:
    Shuffle и quicksand. Они помимо самой сетки еще умеют сортировать\фильтровать элементы (как Isotope).
    Ответ написан
    Комментировать
  • Какой видеокурс по основам WordPress действительно стоит изучить?

    Evanre
    @Evanre
    Front-end developer
    Одни из лучших комплексных курсов у Teamtreehouse.com. Русскоязычные "курсы" не советую. Парни вроде webformyself занимаются продажей курсов для домохозяек типа "сайт за 20 часов", а не обучением. То же самое и на Youtube. Единственные 2 русскоязычных канала о wp которые смотрю Быть програмистом и wp-plus.
    Первый ориентируется на создание тем для Envato, правда фреймворк у него самописный и давольно старый\кривой.
    А вот wp-plus, он же CampusBoy (активный польpователь и контрибьютор ресурса wp-kama, тоже кстати советую) делает отличные видео. Не из разряда, "установите очередной плагин под мелкую фигню" (по типу WPRuse), а именно как правильно писать на WP. У него есть несколько отличных серий уроков (ContactForm7, CarbonFields и т.д.),. Канал молодой и очень маленький, но автор просто молодчина :)
    Ответ написан
    Комментировать
  • Настройка окружения для front end?

    Evanre
    @Evanre
    Front-end developer
    На хабре есть одна полезнейшая статья, на которой учился сам.
    Статья относительно старая, но именно она мне в свое время "открыла глаза". У меня на полном серьезе после ее прочтения было такое же выражения лица, как у пацана на картинке)) Прошло 2 года но моя сборка фронта принципиально не изменилась. npm, gulp, sass, и т.д. Для сборки чисто фронта использую свой Blank-project, который изначально вышел из этой статьи.

    Все зависит от поставленных задач и того, под что вы собираете фронтенд. Я например сейчас в 90% случаев собираю его под WordPress, поэтому вместо html сходу использую php и т.д..
    Ответ написан
    Комментировать
  • Верстка сайта, возможно ли так организовать структуру и переходы(в описании) ??

    Evanre
    @Evanre
    Front-end developer
    Не могу сказать точно, может такие варианты и есть, но js в любом случае нужен. Самый простой вариант сделать что-то вроде табов. При клике по ссылке прятать остальные блоки, и показывать текущий (в css по умолчанию скрываем все секции и показываем первую). Вариант на jquery:

    $('.menu-item a').on('click', function(e)) { // Событие клика по ссылке в меню
    	e.preventDefault(); // Отменияем действие ссылки по умолчанию (переход по ссылке)
    	var section = $(this).attr('href'); // id нужного контейнера (#section-1)
    	$('.sections').slideUp(); // Скрываем все секции
    	$(section).slideDown(); //Показываем нужный контейнер
            // Можно использовать любой вариант скрытия показа в jquery - slide, fade, show\hide
    });

    А вообще, будь я на вашем месте, для меня это был бы отличный случай посидеть и нормально разобраться с Ajax'ом.
    Ответ написан
    1 комментарий
  • Как грамотно сделать date- и timepicker?

    Evanre
    @Evanre Автор вопроса
    Front-end developer
    Решил проблему с помощью отличного плагина Flatpickr. Он делает именно то что мне было нужно: плагин детектит мобильные устройства и для них подставляет нативный инпут. Очень гибкие настройки, поддерживает и пикер дат и времени.
    Надеюсь, кому-то пригодится.
    Ответ написан
    Комментировать
  • Настройка ЧПУ таксономий?

    Evanre
    @Evanre
    Front-end developer
    Привет, все правильно работает, потому что у одного поста может быть много таксономий. Обычно чпу работают именно так.
    Если что, вот хорошие доки по настройке ЧПУ для Custom Post Type и Custom Taxonomy.
    Ответ написан
    Комментировать
  • Вертикальное центрирование inline-block колонок с text-align:justify в сетке (БЕЗ flexbox)?

    Evanre
    @Evanre
    Front-end developer
    Извините, а чем Вам FlexBox не угодил? Есть прекрасная сетка на нем, я даже форкнул на SASS, использую в работе ее уже год. Умеет все то, что Вам нужно и даже больше С префиксами у него сейчас отличная поддержка. Если так нужна поддержка совсем старых браузеров, есть отличный полифил для IE8-9. Все же слишком малый процент людей сейчас использует откровенно старые браузеры, чтобы ради них мучать остальных лишними костылями вроде псевдоклассов и трансформов.
    Ответ написан
    2 комментария
  • Фриланс какую лучшие выбрать?

    Evanre
    @Evanre
    Front-end developer
    Учить Английский, и идти на UpWork. Google переводчик никто не отменял.
    Ответ написан
    Комментировать
  • Можете помочь с flexbox'ом?

    Evanre
    @Evanre
    Front-end developer
    Первый рисунок это поведение флексбокса (выравнивания контента) по умолчанию (justify-content: flex-start), то что у вас получается это скорее всего justify-content: center; Чтобы получить еффект как на первом рисунке (элементы заполняли собой в ряду все пространство и выравнивались по левому краю) уберите контейнеру justify-content: center; и дайте элементам равную ширину (например если их 4шт в ряду то по 25% каждому и т.д.) либо пропишите элементам (не флекс контейнеру) свойство flex-grow: 1;. Вот ссылка на песочницу, можете поиграться в ней, помогает понять, как работает флексбокс.
    Ответ написан
    Комментировать
  • Мелкие задачи по сайтам на фрилансе, как делать правки у клиента?

    Evanre
    @Evanre
    Front-end developer
    Если правок много, то копию. Как вариант, у многих встречал, обычно есть дев версия сайта на поддомене, если нет, порекомендуйте сделать. В общем зависит от клиента, есть параноики, которые просто не дают доступы на продакшн.
    Ответ написан
    Комментировать
  • Как подгружаются изображения на adidas.ru?

    Evanre
    @Evanre
    Front-end developer
    Ничего особенного не заметил, если Вы говорите о подгрузке увеличенных изображений, то используется библиотека EasyZoom, которая использует lazy load подгрузку увеличенных изображений (в картинке помимо src с обычного размера фоткой еще передается дата атрибут с ссылкой на фотку большого размера ).
    Ответ написан
    Комментировать
  • Горизонтальное меню в одну строку смещение активного элемента относительно остальных?

    Evanre
    @Evanre
    Front-end developer
    Если делать правильно, то только с помощью бекенда. Сервер уже должен отдавать менюшку, где первым пунктом будет стоять нужная меюшка с активным классом, ну или хотя-бы просто с активным классом. Если получится второй вариант, то с помощью js просто переместить пункт в начало либо css (display: flex + order: -1). Городить костыли и определять с помощью js на какой странице Вы находитесь - не есть хорошо. Это можно сделать, но будет говнокод. Нужно больше вводных данных, ссылка, какой бекенд и т.д.
    Ответ написан
    Комментировать
  • Поиск заказов. Как вы находите что-то достойное?

    Evanre
    @Evanre
    Front-end developer
    Найдите на YouTube канал Доходный Фриланс. Многие вопросы по UpWork'у отпадут.
    Ответ написан
    Комментировать
  • Как без костылей сделать так, чтобы footer сайта всегда был внизу?

    Evanre
    @Evanre
    Front-end developer
    Тут много хаков на flexbox включая Sticky footer.
    Ответ написан
    Комментировать
  • Как лучше расхлебать заваренную кашу?

    Evanre
    @Evanre
    Front-end developer
    Извините, а в чем проблема завести новый акк? Я не спец, и не знаю как именно отлавливают мультиакк, но я не думаю что там устанавливается слежка 24\7 За каждым фрилансером.
    1. Не заходите на старый акк (или, как пишут выше, удаляете его вообще, если это возможно).
    2. Регистрируете новый.
    3. По возможности смените айпишник (это нужно уточнить у провайдера), но это не принципиально (очень много провайдеров не предоставляет реальный ip своим клиентам, под одним ip может сидеть в интернете по несколько тысяч человек, это и можете ответить Upwork'у если вдруг возникнут вопросы), главное не заходите одновременно под разными учетками.
    4. Если ставили таймтрекер, можно переустановить систему чтобы обновить идентификаторы системы, но я не знаю, есть ли подобная проверка у них.
    Ответ написан
    Комментировать
  • Авторизация/Регистрация вместо Логина использовать Номер телефона - WooCommerce?

    Evanre
    @Evanre
    Front-end developer
    На сколько мне известно, это не возможно на уровне самого WordPress. Да и не стоит этого делать, юзера всегда нужно валидировать, иначе заспамят вас. Плюс, у регистрации через имейл есть свои достоинства:
    - Вукоммерсом предусмотрена отправка уведомлений о статусе заказа на почту.
    - Базу клиентов потом можно собрать для почтовых рассылок.
    Варианты решений:
    - Используйте регистрацию через соцсети, сейчас у всех есть учетка в какой-нибудь соцсети. Например вот вариант есть.
    - Добавьте в форму регистрации поле с номером телефона (можно даже сделать обязательным и прикрутить проверку, отправляя смску с временным кодом). В дальнейшем можно собрать базу с телефонами и тоже делать рассылки.
    Ответ написан
    Комментировать
  • Как отследить логику подключения js и css в шаблоне wordpress?

    Evanre
    @Evanre
    Front-end developer
    1. ВК Аналитика настроена криво.
    2. Устраните ошибки в js коде, с ними сайт в принципе работать не будет. У меня даже прелоадер на главной не удалился.
    3. Оптимизируйте загрузку скриптов: уберите не нужное, по максимуму опустите все скрипты из шапки в футер. Читайте доки по wp. Ищите функцию wp enqueue script в теме, там есть аргумент который определяется в каком месте сайта будет грузиться скрипт, так же оберните скрипты в в условные операторы, например если скрипт нужен только на главной то используйте что-то вроде этого:
    if ( is_front_page() ) {
        wp_enqueue_script( $handle, $src, $deps, $ver );
    }


    Этот сайт Вам очень пригодится wp-kama.
    Ответ написан
    5 комментариев