Статьи

Создание темы WordPress из статического HTML — Добавление виджетов

Январь 29, 2019

Из этой серии вы узнали, как преобразовать статический файл HTML в тему WordPress и отредактировать файл заголовка.

Итак, вы:

  • подготовил вашу разметку для WordPress
  • преобразовал ваш HTML в PHP и разбил ваш файл на файлы шаблонов
  • отредактировал таблицу стилей и загрузил вашу тему в WordPress
  • добавил цикл в ваш индексный файл
  • добавлены метатеги, хук wp_head и заголовок и описание сайта в ваш заголовочный файл
  • добавлено меню навигации.

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

Что вам нужно

  • ваш редактор кода по вашему выбору
  • браузер для тестирования вашей работы
  • установка WordPress, локальная или удаленная
  • Если вы работаете локально, вам понадобится MAMP, WAMP или LAMP, чтобы запустить WordPress.
  • Если вы работаете удаленно, вам понадобится FTP-доступ к вашему сайту и учетная запись администратора в вашей установке WordPress.

1. Регистрация виджетов

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

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

Откройте свой файл functions.php , затем добавьте следующий код перед строкой в ​​самом конце, которая читает ?> :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function wptutsplus_widgets_init() {
 
    // In header widget area, located to the right hand side of the header, next to the site title and description.
    register_sidebar( array(
        ‘name’ => ‘In Header Widget Area’,
        ‘id’ => ‘in-header-widget-area’,
        ‘description’ => ‘A widget area located to the right hand side of the header, next to the site title and description.’,
        ‘before_widget’ => ‘<div class=»widget-container %2$s» id=»%1$s»>’,
        ‘after_widget’ => ‘</div>’,
        ‘before_title’ => ‘<h3 class=»widget-title»>’,
        ‘after_title’ => ‘</h3>’,
    ) );
 
    // Sidebar widget area, located in the sidebar.
    register_sidebar( array(
        ‘name’ => ‘Sidebar Widget Area’,
        ‘id’ => ‘sidebar-widget-area’,
        ‘description’ => ‘The sidebar widget area’,
        ‘before_widget’ => ‘<div class=»widget-container %2$s» id=»%1$s»>’,
        ‘after_widget’ => ‘</div>’,
        ‘before_title’ => ‘<h3 class=»widget-title»>’,
        ‘after_title’ => ‘</h3>’,
    ) );
 
}
add_action( ‘widgets_init’, ‘wptutsplus_widgets_init’ );
?>

Это регистрирует две области виджетов: одну в заголовке и другую в самой боковой панели. Параметры register_sidebar() :

  • name — уникальное имя для области виджетов, которое будет отображаться на экране администратора виджетов.
  • id — уникальный идентификатор для области виджетов, который вы вскоре будете использовать для добавления своей области виджетов в правильное место в вашей теме.
  • description — описание для отображения на экране администратора виджетов.
  • before_widget — разметка, предшествующая каждому виджету в области виджетов. Это помогает с укладкой.
  • after_widget — разметка для каждой области виджета. Убедитесь, что вы закрыли все элементы, которые открыли, используя параметр before_widget
  • before_title — разметка перед заголовком каждого виджета — я добавил элемент h3 с классом, который помогает со стилем.
  • after_title — разметка, чтобы закрыть все элементы, которые вы открыли перед заголовком виджета.

Теперь сохраните ваш файл функций.

Если вы откроете администратора сайта, то увидите, что теперь у вас есть доступ к странице администратора виджетов , на которой добавлены две области виджетов:

создание-WordPress-тема-из-статики-HTML-виджеты-экран, прежде чем

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

2. Добавление областей виджетов в ваши файлы шаблонов

Сначала я добавлю область виджета для заголовка, а затем боковую панель.

Добавление области виджета в заголовок

Откройте файл header.php и найдите следующий код:

1
2
3
4
5
<aside class=»header widget-area half right» role=»complementary»>
  <div class=»widget-container»>
    This will be a widget area in the header — address details (or anything else you like) goes here.
  </div><!— .widget-container —>
</aside><!— .half right —>

Замените это на это:

1
2
3
4
5
<?php if ( is_active_sidebar( ‘in-header-widget-area’ ) ) { ?>
  <aside class=»in-header widget-area half right» role=»complementary»>
    <?php dynamic_sidebar( ‘in-header-widget-area’ );
  </aside>
<?php } ?>

Сохраните файл.

Добавление области виджетов боковой панели

Теперь откройте sidebar.php вашей темы и найдите этот код:

01
02
03
04
05
06
07
08
09
10
11
</pre>
<aside class=»sidebar widget-area one-third right» role=»complementary»>
  <div class=»widget-container»>
    <h3 class=»widget-title»>A Sidebar Widget</h3>
      This is a sidebar widget — in your WordPress theme you can set these up to display across your site.
  </div><!— .widget-container —>
  <div class=»widget-container»>
    <h3 class=»widget-title»>Another Sidebar Widget</h3>
      A second sidebar widget — maybe you could use a plugin to display a social media feed, or simply list your most recent posts.
  </div><!— .widget-container —>
</aside>

Замените его следующим:

1
2
3
4
5
<?php if ( is_active_sidebar( ‘sidebar-widget-area’ ) ) { ?>
  <aside class=»sidebar widget-area one-third right» role=»complementary»>
    <?php dynamic_sidebar( ‘sidebar-widget-area’ );
  </aside>
<?php } ?>

Наконец, сохраните файл.

3. Добавление виджетов через администратор виджетов

Последний этап — добавить некоторые виджеты через экран администрирования виджетов. Я собираюсь добавить два виджета в область виджета заголовка:

  • текстовый виджет с контактными данными
  • окно поиска

И я добавлю два виджета на боковую панель:

  • виджет «Последние сообщения»
  • виджет «Мета»

Как только я это сделаю, мой экран администратора «Виджетов» будет выглядеть так:

создание-WordPress-тема-из-статики-HTML-виджеты-экрана после

Наконец, если я открою свой сайт в своем браузере, я увижу виджеты, заполненные в теме:

создание-WordPress-тема-из-статики-HTML-виджеты-в-теме

Надо еще поработать над стилизацией — например, панель поиска немного широка, но контент там есть. Теперь у вас есть области виджетов в вашей теме!

Резюме

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

Примеры включают в себя:

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

В следующем уроке вы завершите файл footer.php в своей теме, добавив область виджетов в «толстый нижний колонтитул», плюс колофон для информации об авторских правах и wp_footer действия wp_footer .

Ресурсы

35
Share: