Тема WordPress по умолчанию — Twenty Fifteen с фиксированной боковой панелью слева, которая превращается в верхний колонтитул в мобильном представлении, минимальной областью нижнего колонтитула, отличной графикой и красивой областью изображения.
Тема замечательная, однако мы понимаем, что пользователи хотят настроить ее и сделать это самостоятельно. Эта тема предлагает только одну боковую панель, которая в WordPress называется областью готовности к виджетам. Я покажу вам, как в WordPress добавить виджет в подвал сайта (footer.php). Добавление области виджетов в нижний колонтитул Twenty Fifteen ничем не отличается от добавления области виджетов в большинстве тем WordPress.
- Создать дочернюю тему WordPress
- # 1 Шаг: Создать каталог и файлы дочерней темы
- # 2 Шаг: Добавьте файл для области виджета нижнего колонтитула WordPress
- # 3 Шаг: Добавьте код в файлы дочерней темы, чтобы в WordPress добавить виджет
- Как добавить виджет в вордпресс
- Часто задаваемые вопросы
- В чем разница между виджетами и областью виджетов?
- Как добавить виджет wordpress только на 1 страницу?
Создать дочернюю тему WordPress
При настройке файлов шаблонов темы WordPress для создания области виджетов рекомендуется создать дочернюю тему. Все изменения будут добавлены в дочернюю тему, а не в исходную тему. Когда выйдет обновленная версия исходной темы, вы сможете обновить свою копию исходной темы и оставить свои изменения в дочерней теме без изменений.
# 1 Шаг: Создать каталог и файлы дочерней темы
В качестве первого шага создайте папку внутри папки wp-content> themes. Назовите папку «Twenty Fifteen Child», или дайте другое название — как хотите.
Необходимым файлом для работы дочерней темы является style.css. Желаемый файл — functions.php. Эти два файла должны находятся в созданной папке дочерней темы.
# 2 Шаг: Добавьте файл для области виджета нижнего колонтитула WordPress
Поскольку область виджета должна быть добавлена в нижний колонтитул темы, нам также будет необходим файл для кода нижнего колонтитула. Самый безопасный способ кодировать файл шаблона WordPress — начать с готового шаблона, затем добавить то что хотим или удалить то что не нужно.
В нашем случае возьмем (скопируем) footer.php из темы Twenty Fifteen и вставим его в нашу дочернюю тему.
# 3 Шаг: Добавьте код в файлы дочерней темы, чтобы в WordPress добавить виджет
Дочерняя тема ничего особого не делает. Работающая дочерняя тема нуждается в комментариях вверху файла style.css. Откройте style.css в вашем любимом редакторе кода и добавьте этот кусочек кода.
1 2 3 4 5 6 7 8 9 10 11 | /* Theme Name: Twenty Fifteen Child Theme URI: Description: Twenty Fifteen Child Theme Author: Author URI: Template: twentyfifteen Version: 1.0.0 Tags: light, one-column, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ |
Важной частью здесь является Template: twentyfifteen, которая сообщает WordPress имя родительской темы. Убедитесь, что имя совпадает с именем папки родительской темы — регистр букв или любые пробелы, тире, подчеркивания и т.д. Важно: всё должно точно соответствовать имени папки родительской темы.
Затем откройте файл functions.php и добавьте этот фрагмент кода.
1 2 3 4 5 6 | <? php //Импортируем родительские стили правильно и при необходимости добавляем собственные стили. function twenty_fifteen_child_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' ); |
Этот шаг не является обязательным. Тем не менее, это рекомендуется, поскольку с этим кодом дочерняя тема будет наследовать внешний вид своего родителя.
Функция, которая подключается к обработчику действий wp_enqueue_scripts ( ). Внутри функции мы подключаем таблицу стилей родительской темы с помощью функции wp_enqueue_style ( ). Это гарантирует, что дочерняя тема наследует стили своего родителя, переопределяя любое конкретное правило стиля в своем собственном файле style.css.
Наша дочерняя тема в основном закончена!
Откройте панель «Темы» в своей установке WordPress, и вы увидите готовую к использованию тему «Twenty Fifteen Child». Нажмите активировать и посетите ваш сайт. Он должен выглядеть точно так же, как и родительская тема.
Как добавить виджет в вордпресс
Теперь нам нужно добавить код для определения области виджета нижнего колонтитула. Вот фрагмент, который входит в functions.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* * Зарегистрируем область виджета нижнего колонтитула. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar */ function twentyfifteen_child_widgets_init() { register_sidebar( array( 'name' => __( 'Footer Widgets', 'twenty-fifteen-child' ), 'id' => 'sidebar-2', 'description' => __( 'Add widgets here to appear in your footer area.', 'twenty-fifteen-child' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</ aside>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</ h2>', ) ); } add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' ); |
Приведенный выше код добавляет функцию, которая регистрирует боковую панель с идентификатором sidebar-2, а затем подключает эту функцию к хуку действий widgets_init ( ) Тема Twenty Fifteen уже имеет боковую панель с идентификатором sidebar-1.
Теперь давайте добавим только что созданную боковую панель в нижний колонтитул. Открываем footer.php в редакторе кода и введите этот фрагмент чуть ниже этой строки кода: < footer id="colophon" class="site-footer" role="contentinfo">.
1 2 3 4 5 | <? php if ( is_active_sidebar( 'sidebar-2' ) ) : ?> <div class="widget-area" role="complementary"> <? php dynamic_sidebar( 'sidebar-2' ); ?> </ div> <? php endif; ?> |
Приведенный выше код сначала проверяет, есть ли в sidebar-2 какие-либо виджеты, если это так, он отображает боковую панель внутри div с классом области виджетов.
Следующее, что вам нужно сделать, это зайти на панель «Виджеты» вашего бэкэнда WordPress, найти боковую панель «Виджеты нижнего колонтитула» и добавить к ней некоторые виджеты. Сохраните виджеты по мере их добавления и проверьте результат.
В некоторых случаях вы можете увидеть, что текст слишком близко к верхней части контейнера, а нижнее поле виджетов слишком высокое. Этот небольшой фрагмент в style.css значительно улучшит внешний вид.
1 2 3 4 5 6 7 | .site-footer .widget { margin: 0; padding: 10% 20% 0; } .site-footer .widget:last-child { margin-bottom: 10%; } |
Ваш виджет нижнего колонтитула WordPress готов!
В этом посте мы увидели, как добавить новую область виджетов в footer.php WordPress темы Twenty Fifteen. Хотя мы поместили область виджетов в нижний колонтитул темы, но вы можете добавить области виджетов практически везде в теме, выполнив аналогичные шаги.
Часто задаваемые вопросы
В чем разница между виджетами и областью виджетов?
Виджеты можно добавлять, удалять и упорядочивать на панели управления виджетами. В левой части экрана раздела настроек вы увидите параметры виджета. В зависимости от того, какие плагины вы используете, вариантов может быть больше или меньше.
В правой части экрана находятся разделы для различных областей виджетов. Области виджетов полностью зависят от темы, которую вы используете, поэтому, если вы запутались, обязательно прочтите описание под каждой областью виджетов.
Как добавить виджет wordpress только на 1 страницу?
Есть несколько плагинов, которые позволяют отображать виджеты в зависимости от конкретных условий. Альтернативным решением является использование widget_display_callback:
1 2 3 4 5 6 7 | function custom_display_callback( $instance, $widget, $args ){ if( is_page( 10 ) ){ return false; } return $instance; } add_filter( 'widget_display_callback', 'custom_display_callback', 50, 3 ); |
Просто изменить идентификатор страницы WordPress в приведенном коде. Для отображения в записи замените is_page на is_single.
