В этой статье рассмотрим, как создать динамический подвал (footer) для темы WordPress, который можно легко настраивать через админку и расширять по необходимости. Динамический подвал позволяет выводить виджеты, меню, произвольные поля и другую информацию, что делает сайт более гибким и удобным для администрирования.
Почему нужен динамический подвал в теме WordPress
Статичный подвал с жестко прописанным HTML-кодом быстро устаревает и требует правок в файлах темы при любом изменении. Это неудобно для сайта, которым управляют не только разработчики, но и контент-менеджеры. Динамический подвал упрощает задачу — например, можно менять контактные данные, ссылки на соцсети, вставлять виджеты без изменения кода.
Кроме того, динамический подвал помогает делать темы более универсальными и подходящими для разных проектов. Например, если вы используете тему Reboot от WPSHOP, то динамический подвал можно настроить через кастомайзер и виджеты, что облегчит поддержку сайта.
Регистрация и подключение областей виджетов для подвала
Первым делом нужно зарегистрировать области виджетов (sidebar) для подвала. Обычно делают от одной до четырех колонок. Добавим в functions.php темы следующий код:
function wp_themes_register_footer_sidebars() {
register_sidebar(array(
'name' => 'Подвал - колонка 1',
'id' => 'footer-1',
'description' => 'Первая колонка в подвале',
'before_widget' => '<div class="footer-widget">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Подвал - колонка 2',
'id' => 'footer-2',
'description' => 'Вторая колонка в подвале',
'before_widget' => '<div class="footer-widget">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
// Добавьте еще колонки по аналогии
}
add_action('widgets_init', 'wp_themes_register_footer_sidebars');Этот код создаст две области виджетов для подвала. Вы можете расширить их число по своему усмотрению.
Вывод виджетов в шаблоне footer.php
Теперь подключим виджеты в файл footer.php вашей темы, чтобы они отображались в подвале сайта. Пример кода:
<footer class="site-footer">
<div class="footer-widgets-container">
<div class="footer-widget-area">
<?php if (is_active_sidebar('footer-1')) : ?>
<?php dynamic_sidebar('footer-1'); ?>
<?php endif; ?>
</div>
<div class="footer-widget-area">
<?php if (is_active_sidebar('footer-2')) : ?>
<?php dynamic_sidebar('footer-2'); ?>
<?php endif; ?>
</div>
</div>
<p class="footer-copy">© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
</footer>Такой подход гарантирует, что если в админке WordPress в разделе «Виджеты» добавить содержимое в области footer-1 или footer-2, оно отобразится в подвале.
Добавление меню в подвал с кастомным выводом
Кроме виджетов в подвале часто нужно вывести меню с важными ссылками — например, политику конфиденциальности или контакты. Для этого зарегистрируем меню:
function wp_themes_register_footer_menu() {
register_nav_menu('footer-menu', 'Меню в подвале');
}
add_action('after_setup_theme', 'wp_themes_register_footer_menu');И подключим его в footer.php:
<nav class="footer-navigation">
<?php
wp_nav_menu(array(
'theme_location' => 'footer-menu',
'container' => false,
'menu_class' => 'footer-menu'
));
?>
</nav>Теперь в админке WordPress можно создать меню и назначить его в область «Меню в подвале».
Использование кастомайзера для управления подвалом
Для более удобного редактирования подвала можно добавить настройки в кастомайзер WordPress. Например, добавим поле для вывода контактного телефона в подвал:
function wp_themes_customize_register_footer($wp_customize) {
$wp_customize->add_section('footer_section', array(
'title' => 'Настройки подвала',
'priority' => 160,
));
$wp_customize->add_setting('footer_phone', array(
'default' => '',
'transport' => 'refresh',
'sanitize_callback' => 'sanitize_text_field',
));
$wp_customize->add_control('footer_phone_control', array(
'label' => 'Телефон в подвале',
'section' => 'footer_section',
'settings' => 'footer_phone',
'type' => 'text',
));
}
add_action('customize_register', 'wp_themes_customize_register_footer');В footer.php выведем значение так:
<div class="footer-contact-phone">
<?php echo esc_html(get_theme_mod('footer_phone', '')); ?>
</div>Это позволит в админке менять телефон без правки кода.
Примеры полезных плагинов для расширения подвала
Для расширения функционала подвала можно использовать плагины:
- WPRemark — позволяет добавлять отзывы и рейтинги, которые можно выводить в подвале для повышения доверия посетителей.
- ABC Pagination — если в подвале есть ссылки на архивы или категории, плагин поможет сделать удобную пагинацию.
- My Popup — с помощью всплывающих окон можно информировать посетителей прямо из подвала.
Все эти плагины доступны на WPSHOP.
Советы по стилизации динамического подвала
Для удобства пользователей и красивого отображения подвала стоит продумать CSS-стили:
- Используйте флексбокс или гриды для равномерного расположения колонок.
- Добавьте отступы и разделители между виджетами.
- Учтите адаптивность — на мобильных устройствах колонки обычно переходят в вертикальный порядок.
Пример простого CSS для двух колонок:
.footer-widgets-container {
display: flex;
justify-content: space-between;
padding: 20px;
background-color: #222;
color: #eee;
}
.footer-widget-area {
flex: 1;
margin: 0 10px;
}
.footer-widget-area h4 {
margin-bottom: 10px;
font-size: 16px;
}
@media (max-width: 768px) {
.footer-widgets-container {
flex-direction: column;
}
.footer-widget-area {
margin: 10px 0;
}
}Заключение: как сделать подвал эффективным и удобным
Динамический подвал — это залог удобства управления сайтом и улучшения пользовательского опыта. Используйте виджеты, меню, кастомайзер и подключайте нужные плагины, чтобы сделать подвал максимально информативным и легким в управлении. Следуйте приведенным примерам, и ваш подвал станет мощным инструментом на вашем сайте на WordPress.