Как выбрать стартовую тему WordPress для разработки?

Вы только что впервые получили крупного клиента с заказом на разработку темы WordPress. Дизайн включает 20 нестандартных шаблонов и большой набор сложных мобильных экранов. Список предстоящих задач грандиозен, а есть еще и другие клиенты. Поэтому вы хотите начать сразу же.

Итак, с чего начать? Для многих разработчиков самым эффективным решением будет использование стартовой темы WordPress. Стартовые темы обычно включают в себя базовые, необходимые файлы WordPress, которые используются во всех шаблонах (например, страницы и записи), и часто CSS фреймворки, чтобы ускорить процесс оформления стилей.

Двумя наиболее популярными CSS фреймворками, используемыми в стартовых темах WordPress, являются Bootstrap и Foundation. Bootstrap является самой популярной основой CSS на GitHub с количеством положительных отзывов более 100 000. У Foundation так же хватает симпатий, но успешность этого фреймворка пока намного меньше – около 25 000 отзывов.

Foundation выгоден из-за адаптивности, лучшей мобильной философии, минимального количества основных файлов в структуре. Он предлагает широкие возможности настроек – включая тип сетки, широкий выбор компонентов, препроцессор CSS (включая SASS), цвета, различные плагины и даже направление текста.

Если вы планируете работать с Foundation, чтобы разработать свою тему для WordPress, рассмотрите ниже три стартовые темы WordPress в связке с Foundation:

FoundationPress

FoundationPress является бесплатной стартовой темой от Оле Фредерик, соединяющей WordPress и Foundation 6 на базе SASS. Для разработчиков, которые не использовали SASS в основе фреймворка, есть руководство «FoundationPress для начинающих». Оно поможет изучить инструменты, используемые в установке и рабочем процессе, такие как git, npm, SASS и Gulp. В документации к Foundation также представлены инструкции по использованию SASS с Foundation.

Для дизайнера-разработчика FoundationPress предлагает дополнения в виде UI набора для Adobe Photoshop и XD, а также набор виджетов для Axure RP. С помощью этих программ разработчики могут быстро создавать прототипы элементов Foundation для своих проектов. Комплекты не включены в FoundationPress, но доступны за дополнительную плату.

Разработчики могут обратиться в поддержку и сообщить об ошибках на странице GitHub.

JointsWP

JointsWP – бесплатная стартовая тема WordPress, созданная цифровым агентством Materiell. Она объединяет WordPress и Foundation 6 на базе SASS или CSS по вашему выбору. В документации к JointsWP содержится основной обзор продукта, включая установку, особенности и функции.

JointsWP не предназначена быть дочерней темой, таким образом, разработчик сам принимает решение о необходимости обновления файлов темы после выхода очередного обновления. Разработчики, использующие версию CSS, могут обновиться до последней версии Foundation просто заменив файлы старой версии новыми.

Значительным преимуществом JointsWP является наличие технической поддержки. Как и в большинстве стартовых тем WordPress, разработчики могут задать вопрос или отправить отчет об ошибке на странице GitHub. Что касается других мест получения ответов на вопросы или запросы о помощи, то Joints оказывают, по крайней мере, некоторую поддержку на форумах Foundation, если разработчик маркирует свой вопрос тегом «JointsWP». Этот уровень поддержки выходит за рамки того, что предлагает большинство разработчиков стартовых тем WordPress.

Но существует еще одна относительно новая стартовая тема WordPress + Foundation:

Heisenberg

Heisenberg – свободно поставляемая, ранее внутренняя тема Zeek Interactive, объединяющая популярную _s (Underscores) тему с Foundation 6. У продукта в настоящее время небольшая популярность на GitHub, но большой потенциал. Поскольку он удовлетворяет потребности разработчиков, надеющихся использовать полностью испытанный код Underscores с Foundation 6.

Heisenberg поставляется только на основе SASS и имеет ограниченную документацию. Сообщения об ошибках или вопросы могут быть представлены на странице GitHub.

Модификация JointsWP на использование LESS вместо SASS

Если вы хотите использовать стартовую тему WordPress + Foundation, но предпочитаете LESS пре-процессору SASS, то одним из вариантов является загрузка JointsWP и модификация её для работы с LESS. Ниже приведены шаги, которые необходимо выполнить:

1. Перейдите на сайт и скачайте версию JointsWP CSS. Внесите необходимые изменения в теме на основе необходимых в вашей теме файлов и рабочих процессов.
2. Создайте новый файл в каталоге темы под названием yourfilename.less. Этот файл может быть расположен в корневом каталоге темы или в любой директории. Просто помните месторасположение файла, оно вам понадобится позже.
3. Зарегистрируйте и пропишите свой .less файл в файле function.php вашей темы. Этот код должен быть добавлен к функции, которую вы используете для прописывания ваших других файлов (CSS или JavaScript):

function yourfunction_assets() {

if (!is_admin()) { // мы не хотим, чтобы эти файлы вмешивалить в панель администратора WP

wp_enqueue_style( ‘yourname’, get_template_directory_uri() . ‘/yourfilename.less’ ); // Этот путь к файлу должен соответствовать местоположению вашего .less файла в каталоге темы

}

}

add_action( ‘wp_enqueue_scripts’, ‘yourfunction_assets’ );

Заключительный этап компиляции файла LESS в CSS зависит от вашей среды разработки:

Если вы разрабатываете темы для WordPress онлайн в среде тестирования, то можете скомпилировать LESS с помощью WP-LESS плагина сразу, как только файл .less будет правильно поставлен в очередь. Этот плагин автоматически компилирует все ваши LESS в CSS и ссылается на итоговый CSS файл. После того, как процесс разработки завершен, вы можете скопировать выведенный код CSS в style.css и отключить плагин WP-LESS. Все, ваша тема готова.

Если вы работаете на локальном хостинге, есть несколько способов скомпилировать LESS файл: онлайн-инструменты или приложения (например, CodeKit), которые компилируют LESS и SASS автоматически.

Если вы решили использовать онлайн-инструмент, который собирает ваш файл CSS фактически вручную, то вы должны будете добавить заключительный вывод CSS в вашей теме. Обратите внимание, что онлайн-компиляторы иногда могут привести к пропуску или изменению кода, поэтому внимательно проверьте окончательный CSS, прежде, чем добавить его обратно в вашу тему.

Для получения информации о компилировании в рамках приложения проверьте документацию.

С таким большим количеством вариантов, разработчикам легко начать использовать стартовые темы WordPress в связке Foundation. Начните работать над своей темой сегодня!