Это так привычно и обычно для пользователей WordPress – выбрать готовую тему и не изменяя ее, использовать для своего сайта. Разумеется, выбирают темы и из интернета, и из магазина самого WP. Но некоторые разработчики с тем же успехом создают тему самостоятельно и используют для этого самые разные инструментарии, пути и варианты. Некоторые из них совсем банальные и простые, по типу изменения в CSS-файле темы цветов или шрифтов. Другие более усложненные. Но в любом случае, поднимая вопрос о том, какую тему использовать и как, становится ясно, что вариаций и интереса не меньше, чем при работе с безопасностью CMS. Кроме того не лишним бывает помнить и о том, как же тема вообще работает и почему, изменяя CSS, настройки (бывает) не проявляются на самих страницах.

В этом материале мы посмотрим на разные вопросы, связанные с темами WP и уделим внимание некоторым моментам по работе с фреймворками. Нет, мы не будем рассматривать Redux (не путать с фреймворком JS) во всех подробностях, но вот его альтернативы могут быть весьма интересными.

Об основах в двух словах

WordPress был задуман как движок блога или как простая блоггинг-ориентированная система управления контентом. Первоначально он был выпущен в 2003 году и с тех пор пользовательская база не переставала расти. WordPress является PHP-веб-приложением, которое использует MySQL в качестве базы данных и, как правило, работает на серверных системах NGINX или Apache. Знакомо, но и это важно. Поскольку… по факту, WP,  в основном –  куча PHP файлов, которые работают вместе в виде приложения. Интерпретатор PHP использует эти файлы для создания веб-страниц для посетителей этого самого сайта. Он создает HTML, если быть более точными.

Роль шаблонов в WordPress – в создании инструкций о том, как именно должны быть структурированы, стилизованы и какое содержание должны иметь страницы HTML. Эти инструкции заключены как раз в темах. Каждая тема состоит из папки с PHP, CSS, а иногда и с файлами JavaScript. Файлы, которые каждая тема WordPress должна иметь – эдакий обязательный  минимум – style.css и index.php. Да, минимум, поэтому надеяться на какие-то серьезные возможности, анимации и прочее даже не стоит, поэтому файлов гораздо больше, которые определяют, какой должна быть верхняя часть, нижняя, боковая, отдельные категории и так далее и тому подобное.

И конечно, первое с чего начинают «новички», это использование обычной  темы, что позволяет иметь хороший фундамент для работы и не беспокоиться о необходимости кодирования с нуля. Если же появляется желание создать самостоятельно – то стартовые темы (Theme Starter) оказываются более чем востребованными. Такие темы помогают лучше понять, как вообще работает CMS, структуру, иерархию и прочая, и прочая. Среди отличных стартовых тем можно выделить Underscores, FoundationPress, UnderStrap. Иными словами: можно разбираться в CMS, а можно её просто использовать. Первое – лучше по многим причинам, но и второе имеет свои козыри.

Стартовые темы

Стартовая тема представляет собой, по сути, скелет или пустую тему WP, которая включает в себя только базовый минимум структурного кода. Это означает, что такая тема WordPress имеет некоторую основополагающую функциональность, но не предлагает никаких настроек или вообще имеет хоть какие-либо настройки. Если взять, например, любую тему из «магазина» WP и установить её, то минимальный набор настроек будет присутствовать. При желании можно купить Pro-версию или самому залезть в файлы и «поколдовать». В случае стартовых тем вы не будете иметь ровным счетом ничего. Но при этом, это очень удобная отправная точка, в которой удобно построить свою уникальную тему.

Есть несколько вариантов, когда дело доходит до выбора стартовой темы, разумеется, для возможности развивать получившееся творение в будущем, наиболее популярным (вариантом) из которых является Underscores. Проект поддерживается Automattic (создатели WordPress.com, WooCommerce, Jetpack и не только) и является основой для последних тем, что входят в дистрибутив WP по умолчанию.  Второй по популярности темой является FoundationPress от Zurb. А затем интересна и HTML5 Blank, которая обеспечивает надежную и хорошо документированную кодовую базу для разработки темы.

Underscores

Эта тема имеет, наверное, самое простое и легкое начало. Достаточно заполнить форму с данными, названием темы, авторством и тема сгенерируется в виде zip-архива. Большим плюсом является то, что можно создать и тему для интернет-магазина – WooCommerce. Это значит, что будут созданы макеты для корзин пользователей, проверка и оформление заказа и так далее.

Готовая тема имеет довольно много шаблонов, а также отдельные секции для пользовательских макетов и элементов JavaScript. Это означает, что имеющаяся структура уже полностью готова для работы, как и файлы шаблонов, которые состоят из малого количества кода в виде PHP-тегов и комментариев. В результате мы можем просто начать модифицировать, изменяя все, что нам нужно и удалять все, что нам не нужно.

Это само собой очевидно большая экономия времени, так как нам не нужно создавать каждый файл шаблона вручную. Это удобно и быстро. Нет необходимости каждый раз создавать один и тот же код для footer.php, style.css, index.php, header.php. Особенно это удобно, если у стартовой темы много макетов и вам не составляет труда их настроить и выбрать нужное.

Но если требуются действительно уникальные темы, нужно отслеживать все скрипты и прочая, и прочая, то стартовые темы – не вариант. Здесь все же требуется индивидуальный подход.

Тематические фреймворки

Подобно фреймворкам для CSS, JavaScript и PHP (о которых мы неоднократно рассказывали) тематические фреймворки предоставляют стандартный набор инструментов, которые вы, как разработчики, можете использовать при создании собственных тем. Фреймворки имеют некоторые предустановки, поэтому развивать тему становится проще; опять же экономится время и усилия. В частности, многие тематические фреймворки WordPress обладают стандартным набором функционала:

  • выбор крючков (hooks) и фильтров;
  • набор пользовательских функций;
  • пользовательские обратные вызовы;
  • интеграция и совместимость для пользовательских библиотек, таких как JQuery, и т.д.

Кроме того, фреймворки для WordPress поставляются и с некоторыми собственными дополнительными преимуществами. Очевидно, что они предназначены для того, чтобы тема создавалась быстрее и проще. Конечно, это также означает, что у вас становится меньше контроля над самой темой, чем, если бы вы сами создавали её с нуля, но в зависимости от ваших требований и уровня знаний, тематические фреймворки для новичков действительно могут оказаться полезными.

Занятно, но когда речь идет об использовании фреймворков, мало кто представляет, почему ими вообще пользуются и платят за них еще (многие имеют премиальные версии). В большинстве случаев важную роль играет брендинг. Нет, мы не углубляемся в маркетинг, но суть в том, что если создается действительно серьезный и уникальный проект, то взять готовую тему и изменить её не так просто получается. А вот фреймворки позволяют создавать действительно уникальные варианты. Например, вот два разных сайта. Их темы разные внешне, но по сути это одна – созданная StudioPress. Это: superheroteachertoolkit и owner.

Genesis

Есть довольно много тематических фреймворков WordPress на выбор, но одним из популярных является Genesis  от команды StudioPress. Он не бесплатный, но поставляется с такими функциями, как пользовательские шаблоны страниц, несколько вариантов настраиваемого макета, а также полной поддержкой Гуттенберга (да-да, новый редактор записей в WP).

Divi

Еще одним достойным премиальным вариантом является Divi от Elegant Themes. Этот фреймворк поставляется с элементами дизайна, которые можно редактировать в режиме реального времени. Здесь найдутся  настраиваемые макеты и шаблоны страниц, перемещаемые и визуально редактируемые элементы и т.д. В общем и целом, Divi является визуальным редактором рисования страницы, замаскированным под редактор для темы, позволяющим экспортировать все параметры и собрать сайт за несколько минут. Условно, конечно же, потому как создавать и перемещать каждый элемент можно долго, подыскивая наилучший вариант.

Gantry

Из бесплатных фреймворков внимания заслуживает Gantry. Это очень  дружественный и надежный  тематический фреймворк, который можно использовать не только с WordPress. Созданный RocketTheme, Gantry представляет собой, скорее, набор пользовательских расширений и макетов шаблонов, одобренных и используемых Joomla, WordPress и GravCMS.

В чем его особенность? Gantry позволяет создавать мощные темы, шаблоны пользовательского интерфейса. Он также имеет много настраиваемых готовых шаблонов и скинов, а также обладает визуально редактируемым интерфейсом, что делает жизнь для «не-кодеров» (не любителей кодирования) проще и легче.

Мысли, как итог

Мы сделали краткую экскурсию по вариантам модификаций и создания собственных тем WordPress, не останавливаясь на простом редактировании уже имеющихся наборов. Разумеется, что самым простым вариантом является создание дочерней темы, которая содержит только несколько файлов, модифицирующих некоторые аспекты существующей темы. Заниматься дублированием и изменением существующей темы удобно тогда, когда хочется изучить все её глубины и затем адаптировать под собственные нужды, без необходимости заново изобретать колесо и начинать с нуля.

Но более амбициозный вариант – закодировать всю тему с нуля. Мы только коснулись этой темы и рассмотрели часть фреймворков, что позволяют это делать. В глубины мы не будем уходить. Пока что. Но заметим, что именно фреймворки являются отличным способом ускоренного построения темы с нуля.

Знаете, но в некотором смысле, это создает круг в программировании и создании сайтов, так как некоторые из этих фреймворков предлагает работать по системе drag-and-drop и с WYSIWYG-инструментами, которые не требуют много технических знаний. То есть, в принципе, все, как и раньше, в таких редакторах как Dreamwiever, например, нужна таблица – нарисовал, картинку разместил и подвигал, ширину мышкой вправо-влево настроил и так далее. И… может быть, это действительно наиболее удобный вариант создания темы и визуального оформления сайта, если вы не хотите копаться в коде.

Тем не менее, как именно создавать тему, настраивать и использовать фреймворки или нет – решение уже остается за разработчиком, потому как разные цели требуют разных решений.

Как вам материал?