Если вам не терпится создать собственную тему WordPress, отличный способ начать — это использовать хорошо закодированный и надежный фреймворк . Фреймворки предоставляют темы WordPress с общими функциями и компонентами для создания собственных уникальных дизайнов. Это значительно ускоряет время разработки.
В этой статье я собираюсь поэкспериментировать с одним из новых ребят в блоке фреймворков WordPress — Beans , созданным Тьерри Мюллером . Джеймс Джордж также ранее освещал эту тему в SitePoint в своей статье « Знакомство с бобами» .
Подробнее о Beans Theme Framework
Beans — это бесплатный фреймворк для WordPress с открытым исходным кодом , который может похвастаться множеством потрясающих функций, которые отлично подойдут как начинающим, так и опытным разработчикам. Вот основные особенности ниже:
- Beans является мобильным , полностью отзывчивым и достаточно умным, чтобы создавать и обслуживать изображения с разрешением, наиболее подходящим для используемого устройства.
- Lean-код, кэширование, выборочная загрузка ресурсов и методы минимизации делают Beans удивительно легкой и быстрой темой загрузки . Это замечательно, когда дело доходит до рейтинга страниц Google и счастья посетителей вашего сайта.
- Внешний интерфейс UIkit придает теме чистый и современный внешний вид. Однако, если вам интересно, свяжет ли вас разработка с Beans с UIkit, не бойтесь. Beans обладает высокой гибкостью и позволяет загружать активы по мере необходимости .
Пришло время взять вашу копию Бобов и взять ее на тест-драйв.
Установка Бобов
Вы можете получить последнюю версию Бобов с веб-сайта Бина . Извлеките архивированные файлы .zip, затем скопируйте папку tm-beans каталог themes вашей установки WordPress.
Наконец, активируйте Beans на панели «Темы» и взгляните. Вот как выглядит Боб из коробки.
При просмотре на меньшем экране тема имеет красивую встроенную боковую панель вне холста .
Вы можете добавить виджеты в эту область с панели «Внешний вид»> «Виджеты» вашей установки WordPress.
Даже не касаясь строки кода, вы можете быстро добавить логотип и значок сайта на панели « Настройщик» , изменить цвет фона или добавить фоновое изображение, добавить изображение заголовка и выбрать один из следующих шести параметров макета страницы :
- Полная ширина — без боковой панели.
- Две колонки — основной контент слева, боковая панель справа.
- Два столбца — основное содержание справа, боковая панель слева.
- Три столбца — основной столбец слева, две боковые панели справа.
- Три столбца — основной столбец справа, две боковые панели слева.
- Три столбца — основной столбец посередине, одна боковая панель слева и одна справа.
С другой стороны, если вы похожи на меня и не можете устоять перед желанием взять под контроль каждый закоулок вашей темы, погружение в код — ваш следующий шаг.
Использование детской темы с бобами
Лучший способ использовать Beans — это родительская тема . Добавление изменений в дочернюю тему сохраняет их при установке обновленной версии Beans.
Загрузите копию детской темы Beans Starter и извлеките архивные файлы .zip.
Вот что вы найдете в дочерней папке Beans:
Чтобы начать, выполните следующие действия.
1. Переименуйте тему ребенка
Скорее всего, ваша тема не будет называться « Бобовые дети» . Рекомендуется переименовать папку дочерней темы с именем вашей темы.
2. Настройте комментарии заголовка WordPress в таблице стилей
Откройте style.css в редакторе кода. Чтобы сделать дочернюю тему своей собственной, добавьте сведения о своей теме в поля URI «Имя темы», «Описание», «Автор» и «Автор». Сохраните и закройте документ.
3. Настройте functions.php
Откройте functions.php в вашем редакторе кода. Первая строка кода в этом документе делает структуру Beans дочерней темой:
require_once( get_template_directory() . '/lib/init.php' );
Важно, чтобы вы не удаляли эту строку кода.
Далее вы найдете код, необходимый для постановки в UIKit-каркас Меньше файлов:
add_action( 'beans_uikit_enqueue_scripts', 'beans_child_enqueue_uikit_assets' ); function beans_child_enqueue_uikit_assets() { beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' ); }
Приведенный выше код позволяет вам быстро перезаписать переменные UIKit Less на содержание вашего сердца из дочерней темы. Если вы не хотите работать с Less, просто удалите этот код.
Наконец, приведенный ниже фрагмент ставит в style.css файл style.css дочерней темы:
add_action( 'wp_enqueue_scripts', 'beans_child_enqueue_assets' ); function beans_child_enqueue_assets() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); }
Если вы планируете использовать Less вместо простого старого CSS, удалите приведенный выше код.
Сохраните свою работу и закройте файл.
4. Активируйте тему и настройте параметры бобов.
Теперь скопируйте каталог дочерней темы в папку «Темы» вашей установки WordPress и активируйте его на панели «Внешний вид»> «Темы».
Еще одна вещь: зайдите в Appearance> Beans Settings и убедитесь, что опция Enable mode mode включена.
Это позволяет Beans скомпилировать ваш код Less на лету .
Все готово, теперь закодируйте свою дочернюю тему на основе Beans!
Изменение внешнего вида и ощущения с меньшими затратами
Настроить внешний вид вашей детской темы легко с помощью style.less . Откройте его в своем редакторе и начните переопределять некоторые переменные UIKit Less в соответствии с вашим дизайном. Вы найдете код UIKit Less внутри lib/assets/less/uikit-overwrite в родительской теме Beans.
Например, чтобы изменить цвет заголовка, перезапишите значение исходной переменной следующим образом:
@base-heading-color : #baa8da;
Теперь сохраните и обновите свою страницу. Сайт выглядит так же? Цвет заголовков вашей темы должен выглядеть примерно так:
Beans автоматически компилирует Less в CSS без каких-либо усилий с вашей стороны.
Настройка файлов шаблонов
Если вы откроете какой-либо из файлов шаблонов Beans, вы скоро заметите, что все они содержат одну строку кода. Например, вот что вы найдете в index.php :
<?php beans_load_document();
Фактически, вы настраиваете файлы шаблона Beans с помощью хуков действий в functions.php . Поначалу это звучит пугающе, но как только вы ознакомитесь с API темы, вы будете рады, что изменение короткой строки разметки не требует переопределения всего файла шаблона.
Вот несколько примеров, с которых можно начать.
Удаление CSS-классов
Допустим, вы хотите увеличить размер слогана.
Вот что вам нужно написать в functions.php :
beans_remove_attribute( 'beans_site_title_tag', 'class', 'uk-text-small' );
Сохранить и обновить. Теперь слоган должен выглядеть больше.
Что сейчас произошло?
Размер слогана ограничен классом UIKit .uk-text-small . Удаление этого класса, достигает желаемой цели. Для этого вы используете beans_remove_attribute() .
Эта функция имеет три параметра:
-
$id. Вы можете легко найти значение этого параметра, проверив целевой элемент в исходном документе. В режиме разработки Beans вставляет атрибутdata-markup-idв каждый элемент HTML. Вы используете значение этого атрибута, чтобы получить доступ к элементу в вашем коде и манипулировать им с помощью API. Для tagline значениеdata-markup-id— этоbeans_site_title_tag, которое вы добавили в качестве первого аргумента в функции выше.
-
$attribute. Это имя атрибута HTML, которым вы собираетесь манипулировать. В этом случае вы хотите удалить атрибутclassэлемента. -
$value. Это значение атрибута, который вы хотите удалить. Для этого примера это класс.uk-text-small.
Ознакомьтесь с другими функциями, связанными с HTML, чтобы узнать, как добавлять и заменять классы CSS и многое другое с помощью одной строки кода.
Добавление разметки
Вот как вы можете быстро добавить фрагмент HTML-разметки, используя хуки действий .
UIKit поставляется в комплекте с великолепно выглядящими иконками от Font Awesome . Попробуйте добавить значок часов перед каждой мета-информацией о дате публикации. Вот код для размещения в вашем файле functions.php .
beans_add_action( 'beans_post_meta_item_date_prepend_markup', 'beans_child_add_post_meta_date_icon' ); function beans_child_add_post_meta_date_icon() { ?><i class="uk-icon-clock-o uk-margin-small-right uk-text-muted"></i><?php }
В приведенном выше примере кода используется beans_post_meta_item_date_prepend_markup . Первая часть — beans_post_meta_item_date — это значение data-markup-id Beans (это можно узнать с помощью инструмента разработчика браузера для проверки исходного кода). Вторая часть — prepend_markup — это действие, которое ваша функция prepend_markup разметки prepend_markup для выполнения своей работы.
Чтобы узнать больше обо всех хуках действий, которые позволяют вам манипулировать разметкой HTML, перейдите на страницу документации по разметке и атрибутам . Здесь вы обнаружите, что к каждому фрагменту разметки с data-markup-id Beans прикреплены следующие хуки действий:
-
{$markup_id}_before_markup, срабатывает перед открывающей разметкой; -
{$markup_id}_prepend_markup, срабатывает после разметки открытия (недоступно для замкнутой разметки); -
{$markup_id}_append_markup, срабатывает перед закрывающей разметкой (недоступно для замкнутой разметки); -
{$markup_id}_afer_markup, срабатывает после закрывающей разметки.
Наконец, ваша beans_child_add_post_meta_date_icon() печатает разметку, необходимую для отображения значка.
Если вы супер разработчик WordPress, работающий над темой для распространения, вы также можете воспользоваться преимуществами Beans Actions и HTML API. Это сделает вашу тему более расширяемой таким образом, чтобы это соответствовало структуре Beans.
Например, вы можете добавить значок часов перед метаинформацией о дате публикации, как вы это сделали в примере выше, используя этот код:
beans_add_smart_action( 'beans_post_meta_item_date_prepend_markup', 'beans_child_super_dev_meta_date_icon' ); function beans_child_super_dev_meta_date_icon() { echo beans_open_markup( 'beans_child_date_icon', 'i', 'class=uk-icon-clock-o uk-margin-small-right uk-text-muted' ); echo beans_close_markup( 'beans_child_date_icon', 'i' ); }
beans_add_smart_action() нужны следующие параметры:
-
$hook. Это имя действия, к которому подключена функция обратного вызова. -
$callback. Это имя функции обратного вызова, которую вы хотите выполнить.
Пользовательская beans_child_super_dev_meta_date_icon() использует beans_open_markup() и beans_close_markup() чтобы выбросить значок часов UIKit там, где вы этого хотите.
Демо-тема: построение макета сетки домашней страницы
Загружаемая демонстрационная тема для этой статьи иллюстрирует один способ, которым вы можете полностью изменить внешний вид страницы индекса блога в Beans.
Конечный результат должен выглядеть примерно так.
Тяжелую работу выполняют все Beans и CSS-классы UIKit. Вы просто изменяете макет по умолчанию для страницы индекса блога и добавляете правильные классы UIKit CSS в разметку.
Поскольку этот макет применяется только к индексной странице блога, вы можете выбрать:
- Добавление вашего кода для макета в
functions.php. Просто оберните фрагмент внутри условного оператора, т.е.if( is_home() ) //Your code here; или - Добавление
home.phpстраницыhome.phpвhome.phpтему.
Моя демонстрационная тема содержит несколько строк кода, специфичных для страницы индекса блога, поэтому я выбрал второй вариант. Фактически, в этом конкретном случае добавление шаблона страницы предпочтительнее, чем необходимость писать одно и то же условное выражение несколько раз.
Вы можете выбрать любой вариант, который больше подходит вашему дизайну. Однако, если вы решите создать файл шаблона для вашей дочерней темы, не забудьте добавить следующую строку кода в нижней части документа:
// Load Beans document. beans_load_document();
Измените макет страницы по умолчанию на полную ширину
Макет по умолчанию для всего сайта — это макет из двух столбцов. Поэтому первым шагом является преобразование макета по умолчанию для страницы индекса блога в макет полной ширины.
Make page fullwidth as default layout in home page add_filter( 'beans_layout', 'beans_child_default_home_layout' ); function beans_child_default_home_layout() { return 'c'; }
Приведенный выше код использует хук фильтра «beans_layout`. Подключенная функция просто возвращает идентификатор для макета полной ширины, который является c .
Вы можете получить идентификатор всех параметров макета, доступных в вашей теме, на странице фрагментов кода макета Beans.
Построить сетку
Одним из способов получения мозаичного макета является добавление этого кода.
//Adjust the UKIt grid for the index posts page beans_add_attribute( 'beans_content', 'class', 'uk-grid uk-container-center' ); beans_add_attribute( 'beans_post', 'class', 'uk-width-large-1-3 uk-width-medium-1-2 uk-width-small-1-1' );
Приведенный выше фрагмент кода выполняет следующие две задачи:
- Он предназначается для разметки с помощью значения
data-markup-idдляbeans_content. Затем он превращает этот элемент в контейнер сетки, добавляя к нему класс.uk-grid; - Наконец, он нацелен на все элементы со значением
data-markup-idдляbeans_post. Он превращает эти элементы в адаптивные элементы сетки, добавляя следующие классы:.uk-width-large-1-3 .uk-width-medium-1-2 .uk-width-small-1-1. Перевод классов сетки UIKit на простой английский язык означает: отображать макет с тремя столбцами на больших экранах, макет с двумя столбцами на средних экранах и просто макет с одним столбцом на маленьких экранах.
Вот и все, поздравляю! Большая часть оставшегося кода — всего лишь немного CSS, чтобы он выглядел красиво.
Вывод
Теперь вы должны иметь представление о возможностях и возможностях Beans Framework. Куда дальше?
Вы можете:
- Погрузитесь в документацию Beans и кодовый справочник ;
- Запачкайте руки постоянно растущей библиотекой фрагментов кода ;
- Обратный инжиниринг некоторых бесплатных тем Beans Child. Начните с загружаемой демонстрационной темы для этой статьи, затем перейдите к ThemeButler, чтобы получить больше.
Beans — это относительно новый фреймворк для WordPress, поэтому, если вы столкнулись с какими-либо ошибками или у вас есть какие-то особые запросы, оставьте свое сообщение на GitHub . Если вы хотите присоединиться к растущему сообществу вокруг темы, следите за Beans в Twitter .
Почему бы не попробовать Бинса и дать мне знать, что вы думаете? С нетерпением жду ваших тем и ваших отзывов!