Как создать собственный виджет в WordPress с помощью дочерней темы Genesis
Опубликовано: 2018-02-15
Genesis - одна из наиболее широко используемых платформ WordPress для стилизации макетов веб-сайтов. Он популярен среди разработчиков благодаря архитектуре родительско-дочерней темы. Это позволяет им настраивать дочерние темы в соответствии с их требованиями, не затрагивая основные функции родительской темы.
В этой статье я продемонстрирую, насколько легко настроить дочернюю тему Genesis, создав 4 области виджетов внутри темы Genesis Sample, которая поставляется бесплатно с Genesis Framework.
1. Настройка среды разработки
Чтобы установить Genesis Framework, у вас должен быть установлен WordPress локально или на сервере. Я предполагаю, что вы уже установили WordPress на свой сервер, а если нет, запустите WordPress с помощью Cloudways Platform.
Теперь загрузите копию Genesis Framework и Sample Theme из StudioPress и активируйте структуру на своем веб-сайте WordPress.
Примечание. Для настройки темы Genesis я использую Sublime Text 3 в качестве текстового редактора. Однако вы можете выбрать любой другой текстовый редактор.
2. Настройка дочерней темы
Откройте тему Sample Genesis в текстовом редакторе и создайте новый файл front-page.php в корневом каталоге .
Теперь откройте файл front-page.php и добавьте следующий фрагмент.
<? php генезис ();
Это инициализирует Genesis Framework.
Образец темы не поставляется с front-page.php , поэтому я должен явно создать эту страницу, чтобы зарегистрировать области наших виджетов.
Пользовательские области виджетов
Я начну добавлять виджеты, изменив файл темы function.php, но прежде чем я начну писать код, позвольте мне объяснить внутреннюю логику.
Здесь я объявляю функцию, которая принимает массив параметров:
- id - для идентификации нашего кода.
- name - это то, что мы увидим в нашей панели управления WordPress.
- описание - это также будет отображаться на панели управления WordPress.
Примечание: «id» и «name» функции должны быть уникальными.
Теперь откройте function.php и добавьте следующие фрагменты кода в конец файла.
Для виджета слайдера
genesis_register_sidebar (массив (
'id' => 'первая-страница-1',
'name' => __ ('Виджет слайдера домашней страницы', 'genesis-sample'),
'description' => __ ('Это виджет, который отображается на первой странице.', 'genesis-sample'),
));Для виджета содержимого 1
genesis_register_sidebar (массив (
'name' => __ ('Домашний контент вверху слева', 'genesis-sample'),
'id' => 'content-1',
'description' => __ ('Верхний левый экран', 'genesis-sample'),
));Для Content Widget 2
genesis_register_sidebar (массив (
'name' => __ ('Home Content Top Middle', 'genesis-sample'),
'id' => 'content-2',
'description' => __ ('Верхний средний дом', 'genesis-sample'),
));Для Content Widget 3
genesis_register_sidebar (массив (
'name' => __ ('Домашний контент вверху справа', 'genesis-sample'),
'id' => 'content-3',
'description' => __ ('Top Right Home', 'genesis-sample'),
));Как видно ниже, я успешно создал 3 разных виджета. Теперь давайте загрузим настроенную тему в панель управления WordPress.
Обратите внимание, что виджеты можно увидеть на вкладке «Виджеты». Однако их активация никак не повлияет на интерфейс нашей темы. Это потому, что я не добавил разметку для отображения этих виджетов в нашем файле front-page.php .
Чтобы добавить разметку для отображения виджетов, я объявляю настраиваемую функцию в файле front-page.php . В этой функции я вызываю виджет по его «id», который был ранее создан в файле function.php вместе с некоторой разметкой HTML.
Хотя добавление этой функции по-прежнему ничего не даст, поскольку мы еще не прикрепили эту функцию ни к какому действию.
Для этого я объявляю действие, которое содержит перехватчик «genesis-meta», и в нем я вызываю функцию «my_homepage_setup» . В этой функции я проверяю, активна ли область виджетов. Если да, то я должен привязать этот виджет к указанному месту, а затем вызвать эту функцию виджета для отображения разметки виджета.
Теперь я добавлю следующий фрагмент кода в файл front-page.php .
Виджет слайдера
add_action ('genesis_meta', 'my_homepage_setup');
function my_homepage_setup () {
if (is_active_sidebar ('front-page-1')) {
// * Добавить виджет слайдера
add_action ('genesis_after_header', 'display_front_page_1_widget');
}
}
// Добавляем разметку для отображения виджетов слайдера.
function display_front_page_1_widget () {
genesis_widget_area ('первая страница-1', массив (
'before' => '<div class = "front-page-1-widget"> <div class = "wrap">',
'after' => '</div> </div>',
));
}Виджеты контента (1, 2 и 3)
add_action ('genesis_before_content', 'ng_home_page_widgets');
// * Добавляем домашние виджеты на место
function ng_home_page_widgets () {
если (is_front_page (''))
genesis_widget_area ('контент-1', массив (
'before' => '<div class = "треть первого hometopcol toplefthome">',
'after' => '</div>',));
если (is_front_page (''))
genesis_widget_area ('контент-2', массив (
'before' => '<div class = "одна треть hometopcol topmiddlehome">',
'after' => '</div>',));
если (is_front_page (''))
genesis_widget_area ('контент-3', массив (
'before' => '<div class = "одна треть hometopcol toprighthome">',
'after' => '</div>',));
}Наконец, немного стилей CSS внутри вашего файла style.css
Я добавляю CSS в области виджетов стиля. Однако вы можете укладывать как хотите.
Для простоты я определяю только размер и заполнение виджетов содержимого: цвет границы и фона для контейнера веб-сайта.
.first {margin-left: 0px;}
.site-container {background: #fff;}
.site-inner {padding-top: 0px;}
homecontent {
цвет: # 7e7467;
размер шрифта: 16 пикселей;
высота строки: 1,3;
коробка-тень: 1px 2px 5px 0px rgba (0, 0, 0, 1);
маржа сверху: 25 пикселей;
позиция: относительная;}
.textwidget {отступ: 12%; выравнивание текста: центр;}
.hometopcol {
маржа сверху: 0 пикселей;
высота: 280 пикселей;
border: 4px solid rgb (255,69,0);}
.widgettitle {
цвет: # c4421b;
отступ: 15px 0px 0px 15px;
border-bottom: сплошной rgba 4 пикселя (162, 152, 135, 1);
нижнее поле: 10 пикселей;
текст-преобразование: нет;
размер шрифта: 16 пикселей;}
.widgettitle: after {
содержание: " ";
позиция: абсолютная;
верх: 43px;
слева: 5 пикселей;
справа: 5 пикселей;
border: 1px solid rgba (162, 152, 135, 1);}Вернемся на сайт WordPress и посмотрим, что изменилось. В качестве виджета слайдера я буду использовать Smart Slider 3. Вы можете использовать любой виджет слайдера по вашему выбору. Для виджетов содержимого я просто буду использовать текст.
Окончательный вид
В конце этой статьи я могу создать 4 пользовательских виджета для дочерней темы Genesis Sample. По умолчанию в теме Genesis нет виджета заголовка, но теперь у меня есть собственный виджет, который можно использовать для слайдера или для отображения любой другой информации. Остальные 3 виджета контента можно использовать для выделения продуктов, услуг или любой другой функции.
После активации всех виджетов главная страница должна выглядеть примерно так:
Резюме
В начале этой статьи мы знали только, как использовать тему Genesis WordPress в качестве дочерней темы Sample, но по мере продвижения мы узнали, как создавать настраиваемые области виджетов внутри темы WordPress Genesis Sample и как размещать их в дизайне главной страницы.
Я уверен, что эта статья вселила в вас достаточно уверенности, чтобы самостоятельно настроить или создать собственную дочернюю тему Genesis. Для получения лучших практик рекомендуется проверить официальную документацию Genesis и WordPress.