Как добавить боковую панель в WordPress » Полное пошаговое руководство

При создании сайта WordPress вы должны добавить боковую панель в качестве одного из разделов макета вашего сайта WordPress. Создать боковую панель на базовом HTML-сайте очень просто, так как вам просто нужно использовать теги боковой панели <aside> </aside>, но чтобы добавить боковую панель в WordPress, вам нужен другой подход.

Тег шаблона боковой панели: как боковая панель отображается в WordPress

Важно помнить, что WordPress работает с тегами шаблона, и заголовок вызывается с помощью функции get_header(), а нижний колонтитул вызывается с помощью функции get_footer(). Для боковой панели она отображается с тегом шаблона get_sidebar().

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

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

Как добавить боковую панель в WordPress шаг за шагом

Чтобы вы успешно добавили новую боковую панель в WordPress или создали собственную боковую панель в WordPress, вам необходимо выполнить следующие шаги:

1. Сначала создайте резервную копию вашей темы WordPress.
2. Создайте дочернюю тему из родительской темы WordPress, и дочерняя тема должна иметь файл functions.php
3. Внутри этого файла functions.php вашей дочерней темы вы будете использовать функцию register_sidebar() для создания боковой панели.
4. Создайте файл sidebar.php и добавьте в этот файл функцию dynamic_sidebar() с именем боковой панели, например: dynamic_sidebar('sidebar-1'), где sidebar-1 — это идентификатор боковой панели, которую вы добавили при регистрации боковой панели.
5. В файлах шаблонов вашей темы теперь вы можете вызывать боковую панель с помощью тега шаблона get_sidebar().
6. Если вы создали пользовательскую боковую панель , вы можете использовать функцию dynamic_sidebar() для ее отображения .

Анатомия боковой панели WordPress

Чтобы глубже понять, как работает боковая панель в WordPress, вам нужно узнать, как код боковой панели распределяется по разным файлам темы WordPress.

Функции боковой панели WordPress

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

• Боковая панель регистрации – register_sidebar()
• Динамическая боковая панель — dynamic_sidebar()
• Получить боковую панель – get_sidebar()

Зарегистрируйте боковую панель — Шаг первый

Эта функция register_sidebar() — первая функция, создающая боковую панель, и она находится в файле functions.php вашей темы.

Когда вы открываете файл functions.php вашей темы, вы должны увидеть эту функцию register_sidebar(), которая регистрирует различные боковые панели, отображаемые в вашей теме.

Как и в случае с темой Twenty Seventeen WordPress по умолчанию, вы можете увидеть на изображении ниже код, регистрирующий боковые панели в этой теме:

По сути, эта функция запускает все.

Зарегистрировать параметры боковой панели

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

register_sidebar( array|string $args = array() )

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

Эта функция WordPress имеет различные аргументы, которые она может принимать, это может быть либо строка PHP, либо массив PHP. Аргументы включают:

• Имя — это имя или заголовок сайдбара, это должна быть строка.
• ID — это уникальный идентификатор сайдбара, который вы будете использовать для вызова сайдбара функцией dynamic_sidebar().
• Описание — это описание боковой панели, отображаемой в интерфейсе виджетов, и это строка.
• Класс — это аргумент для добавления дополнительного класса CSS для боковой панели, который поможет вам в стилизации.
• Before_widget — это HTML-контент, который добавляется перед выводом каждой из боковых панелей.
• After_widget — это HTML-контент, который добавляется после вывода каждой из боковых панелей.
• Before_title — это содержимое HTML, которое будет добавлено к заголовку боковой панели при ее отображении, и по умолчанию обычно используется открывающий HTML-тег <h2>.
• After_title — это содержимое HTML, которое будет добавлено к заголовку боковой панели при его отображении, и по умолчанию обычно используется открывающий HTML-тег <h2>.

Эта функция добавляется в файл functions.php и регистрирует боковые панели WordPress с помощью хука действия, подобного приведенному ниже:

add_action( 'widgets_init', ' njengah_tutorial_sidebars' ' );

Чтобы зарегистрировать боковую панель, нам нужно подключиться к событию widgets_init, и у нас есть функция обратного вызова с именем по нашему выбору, например, в этом случае мы назвали функцию обратного вызова как 'njengah_tutorial_sidebars'

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

 <?php

//функция обратного вызова 

функция njengah_register_sidebar_tutorial() {
	
	//Функция регистрации боковой панели — https://developer.wordpress.org/reference/functions/register_sidebar/
	register_sidebar(
		множество(
			'name' => __('Пример боковой панели', 'textdomain'),
			'id' => 'сайдбар-1',
			'description' => __( 'Добавьте сюда виджеты, чтобы они отображались на боковой панели в сообщениях блога и на страницах архива.', 'textdomain' ),
			'before_widget' => '<section id="%1$s" class="виджет %2$s">',
			'after_widget' => '</section>',
			'before_title' => '<h2 class="widget-title">',
			'после_названия' => '</h2>',
		)
	);
	
} 

// Хук действия 

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

Динамическая боковая панель — шаг второй

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

Общее выражение функции dynamic_sidebar() выглядит следующим образом:

dynamic_sidebar( int|string $index = 1 )

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

В теме WordPress по умолчанию двадцать семнадцать, когда вы открываете файл sidebar.php, вы увидите функцию dynamic_sidebar(), как показано на изображении ниже:

В этом случае вы можете видеть, что мы передаем параметр id функции register_sidebar в функцию dynamic_sidebar , чтобы мы могли отображать эту боковую панель как боковую панель по умолчанию. Как показано на изображении ниже:

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

 <?php if ( is_active_sidebar( 'Пользовательский' ) ) : ?>
  <div ID="сайдбар">
    <?php dynamic_sidebar('Пользовательский'); ?>
   </div>
<?php конец; ?>

Как вы можете видеть, мы используем оператор if для проверки того, активна ли боковая панель, и используемая здесь функция is_active_sidebar() . Эта функция просто определяет, используется ли боковая панель, переданная в dynamic_sidebar() . Это один из условных тегов WordPress.

Получить боковую панель — шаг третий

При создании боковой панели WordPress по умолчанию в теме вам необходимо зарегистрироваться , создать файл sidebar.php и, наконец, использовать тег emplate get_sidebar() для загрузки боковой панели в шаблон.

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

get_sidebar( string $name = null )

Итак, если у вас есть боковая панель с именем « cool-sidebar », вы можете вызвать боковую панель в пользовательском шаблоне страницы следующим образом:

get_sidebar('cool-sidebar');

У вас также может быть несколько боковых панелей для каждой страницы, и вы можете использовать оператор if/else для условного отображения каждой боковой панели на разных страницах, как в этом коде, где у нас есть три боковых панели; один для главной страницы, другой для 404 и боковой панели по умолчанию:

 если ( is_home() ):

      get_sidebar('дом');

   иначе если (is_404()):

      get_sidebar('404');

   еще :

     получить_сайдбар();

конец;

Файлы боковой панели WordPress

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

• functions.php File
• sidebar.php File
• Pages Files
• Posts Files
• Custom Posts Type Files
• footer.php File
• header.php File

Код также можно добавить в плагины, где вы регистрируете и отображаете виджеты боковой панели, такие как некоторые из наиболее распространенных плагинов виджетов WordPress.

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

Как работает код боковой панели в каждом файле темы WordPress

Вкратце, три функции добавления боковой панели в WordPress размещены в каждом из этих файлов, показанных в таблице ниже соответственно:

Чтобы добавить боковую панель в WordPress, вы должны выполнить три шага, которые мы описали в этом руководстве по разработке WordPress, которое включает в себя:

• Зарегистрировать — зарегистрировать боковую панель в functions.php с помощью register_sidebar().
• Вызов боковой панели по умолчанию / пользовательской боковой панели — вызов боковой панели в файле sidebar.php для боковой панели по умолчанию, но или пользовательской боковой панели, которую вы можете вызвать в любом файле шаблона, используя dynamic_sidebar ()
• Отображение боковой панели в шаблонах постов WP . На странице, в посте и в пользовательском шаблоне страницы, а также в пользовательском шаблоне поста вы можете вызывать боковую панель с помощью тега шаблона get_sidebar().

Как добавить боковую панель в пример кода WordPress

Ниже приведен пример кода того, как добавить боковую панель по умолчанию в тему WordPress, которую мы назовем боковой панелью Njengah Tutorial.

Боковая панель регистрации

Первым шагом мы зарегистрируем его следующим образом:

 /**
* Зарегистрируйте область виджета.
*
* @ссылка https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

функция njengah_register_sidebar_tutorial() {

  //Функция регистрации боковой панели — https://developer.wordpress.org/reference/functions/register_sidebar/

  register_sidebar(

        множество(
                  'name' => __('Боковая панель учебника Njengah', 'textdomain'),
                   'id' => 'njengah-sidebar-default',
                   'description' => __( 'Добавьте сюда виджеты, чтобы они отображались на боковой панели в сообщениях блога и на страницах архива.', 'textdomain' ),
                   'before_widget' => '<section id="%1$s" class="виджет %2$s">',
                   'after_widget' => '</section>',
                   'before_title' => '<h2 class="widget-title">',
                   'после_названия' => '</h2>',
                  )
             );
    
        }

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

Результат будет виден на панели инструментов WordPress в разделе « Внешний вид» > «Виджеты» , как показано на изображении ниже:

Вызов боковой панели по умолчанию в файле Sidebar.php

В файлах sidebar.php или index мы не должны вызывать боковую панель следующим образом:

 если (! is_active_sidebar('njengah-sidebar-default')) {
   возвращение;
}

  dynamic_sidebar('njengah-sidebar-default');

Показать боковую панель

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

get_sidebar();

Подведение итогов

В этом посте мы подробно описали пошаговый подход к тому, как добавить боковую панель в тему WordPress. Подводя итог, нужно помнить, что есть только 2 или 3 шага; чтобы добавить боковую панель по умолчанию в WordPress, вам нужно зарегистрировать боковую панель в functions.php , создать файл sidebar.php, в котором вы вызываете боковую панель, зарегистрированную на первом шаге, и в шаблонах страниц или сообщений вы используете функцию get_sidebar для вызова по умолчанию боковая панель .

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

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