Как на самом деле работают тематические рамки

Тематические рамки могут быть чрезвычайно мощными. Для нетехнических пользователей WordPress, они позволяют создать уникальный сайт, который выглядит так, как будто он работает на индивидуальную тему, а для разработчиков WordPress они могут помочь вам применить принцип СУХОЙ (не повторять себя) и дать вам возможность Быстро создавать пользовательские сайты.

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

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

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

Я потратил время на разработку двух фреймворков для использования на двух категориях клиентских сайтов, со временем разрабатывая и улучшая их, а также работал с некоторыми сторонними фреймворками. По моему опыту структура темы имеет несколько основных характеристик:

• Он состоит из родительской темы, предназначенной для использования с дочерними темами. В некоторых случаях родительская тема также может работать как отдельная тема, но в других родительская тема работает только в сочетании с дочерними темами — Кодекс WordPress определяет их как «Базовые / Начальные темы» и «Библиотеки кода» соответственно.
• Он включает в себя хуки и функции, которые могут быть использованы дочерними темами и плагинами. Ваш тематический фреймворк является основой всей экосистемы, с которой вы будете работать, и включает в себя плагины, которые подключаются к вашему фреймворку.
• Если он предназначен для пользователей, не использующих кодировку, он будет содержать страницы параметров темы, которые позволяют пользователям настраивать тему в соответствии со своими потребностями. Они могут быть обширными, включая дизайн, макет, функции, контент и многое другое. В некоторых случаях функциональность может быть предоставлена ​​с помощью Theme Customizer.
• Он может включать в себя несколько областей виджетов, так что нетехнические пользователи могут добавлять контент или код через виджеты (включая виджеты, добавленные плагинами, которые вы пишете специально для платформы).
• Он также может включать функции библиотеки сценариев, такие как слайдер jQuery или лайтбокс. В зависимости от ваших потребностей и потребностей ваших пользователей, вы можете включить их в платформу или предоставить плагины с кодом, который подключается к вашей платформе.
• Он расширяемый, с хуками, позволяющими расширить его функциональность с помощью дочерних тем или плагинов.

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

Вот что такое тематические фреймворки, но как они работают? Давайте посмотрим на элементы каркаса темы:

• Родительская тема и дополнительные дочерние темы
• Действие и фильтр крючки
• функции
• Варианты темы
• Виджеты
• Сценарии
• Продолжаемость

Родительские и детские темы

Основным компонентом каркаса темы является родительская тема. Это может быть разработано одним из двух способов:

• В качестве начальной темы, которая может работать сама по себе, может быть, с настройкой через экран настроек темы или настройщик темы. Примеры их включают Atahualpa и Thematic . Оба из них могут использоваться в качестве отдельных тем без использования дочерних тем.
• В качестве основы, добавляемой дочерней темой, без которой эта тема не будет эффективно работать на сайте. Примеры включают в себя Hybrid Core и Genesis . Они будут включать основной код, который вы обычно найдете в теме, а также ряд хуков и функций, которые могут быть использованы дочерними темами, а также плагинами. Все это включает в себя API для фреймворка.

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

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

Если вы разрабатываете свою собственную, я бы порекомендовал создать хотя бы одну «начальную» дочернюю тему, чтобы избежать повторения работы, связанной с ее настройкой для каждого проекта: вы можете решить создать несколько дочерних тем в качестве основы для различных типов проектов. Например, дочерние темы для блогов и сайтов, не относящихся к блогам.

Крючки действий и фильтров

Фреймворк темы будет включать в себя ряд хуков для дочерних тем и плагинов, которые можно использовать при добавлении собственного кода или изменении поведения темы:

• Хуки действий появятся в нескольких местах кода, что позволит вам добавлять код в файлы шаблонов с помощью функций, закодированных в платформе, которые могут быть переопределены дочерними темами, или с помощью функций, которые вы добавляете в свои дочерние темы или плагины. В моей собственной платформе тем широко используются хуки действий, предоставляя их во всех файлах шаблонов, чтобы пользователи могли перетаскивать контент, такой как области виджетов, контактные данные, кнопки призыва к действию и код, специфичный для сайта, где это необходимо.
• Фильтры можно использовать для изменения поведения сайта, использующего дочернюю тему или определенный плагин, например, для настройки циклов, внесения изменений в статический контент и т. Д. Любой статический текст (или код, вызываемый извне вашего сайта) должен быть обернут в фильтр, чтобы при необходимости его можно было изменить дочерними темами.

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

функции

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

Если у вас есть пользовательские функции, которые вы используете на нескольких клиентских сайтах, стоит добавить их в ваш фреймворк. Вам не нужно активировать все свои функции: вы можете активировать функцию из родительской темы, используя функцию add_action() на своем дочернем сайте.

Опции темы

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

Вы можете использовать настройщик темы для многих своих опций, что позволяет пользователям видеть свои изменения по мере их внесения. Я применил этот подход для фреймворка Edupress , который я разработал для школьных веб-сайтов с Марком Уилкинсоном.

Области виджетов

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

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

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

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

Сценарии

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

Опять же, это будет зависеть от вашей аудитории и ее ожидаемых потребностей: если вы просто работаете со средой, я бы порекомендовал разработать (или определить) плагины с этими сценариями и использовать их при необходимости.

Если вы включаете скрипты, стоит включить опцию активации и деактивации на экране опций вашей темы.

Продолжаемость

Если ваша платформа будет полезна для целого ряда сайтов сейчас и в будущем, вы хотите, чтобы она была расширяемой. Родительская тема, которая составляет ядро ​​фреймворка, — это просто сердце экосистемы, к которому вы и пользователи вашей темы подключитесь, чтобы добавить дополнительные опции и возможности своим сайтам. Это будет включать в себя:

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

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

Резюме

Тематические рамки являются мощным инструментом в арсенале разработчика WordPress. Как мы видели, они жизненно важны для тысяч нетехнических владельцев сайтов, которые используют их для создания собственных сайтов WordPress. Но они также являются отличным инструментом для любого разработчика, который будет создавать несколько сайтов, как для личного пользования, так и для клиентов.

Фреймворки тем имеют ряд характеристик, которые дают им такую ​​мощь: они расширяемы и гибки, и позволяют вам или вашим пользователям создавать собственные сайты с использованием дочерних тем и получать доступ к функциям и функциям, предоставляемым вашей фреймворком.

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