Как добавить несколько виджетов в подвал?

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Регистрация новых виджетов в нижнем колонтитуле
Шаг 2: Обновление шаблона нижнего колонтитула
Шаг 3: Настройка стилей с помощью CSS
Заключение

Вопрос или проблема

Я новичок в WordPress. В настоящее время я использую тему Twenty Seventeen. Я хотел бы добавить несколько виджетов в нижний колонтитул, однако WordPress ограничивает меня только двумя. Можно ли добавить еще несколько виджетов в футер? Если да, то как это сделать? Я потратил два дня на поиск ответа в интернете безрезультатно.

Я предпочел бы ответы, связанные с модификацией файлов PHP или CSS.

Заранее благодарю…

Footer 1 и Footer 2 — это боковые панели, вы можете добавить свою собственную боковую панель в functions.php или создать дочернюю тему :

function twentyseventeen_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Blog Sidebar', 'twentyseventeen' ),
    'id'            => 'sidebar-1',
    'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
) );

register_sidebar( array(
    'name'          => __( 'Footer 1', 'twentyseventeen' ),
    'id'            => 'sidebar-2',
    'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
) );

register_sidebar( array(
    'name'          => __( 'Footer 2', 'twentyseventeen' ),
    'id'            => 'sidebar-3',
    'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
) );
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

вы можете добавить столько виджетов, сколько хотите, перетаскивая их.
Шаблон, который отображается в twentyseventeen/template-parts/footer/footer-widgets.php

<?php
 if ( is_active_sidebar( 'sidebar-2' ) ||
 is_active_sidebar( 'sidebar-3' ) ) :
?>

<aside class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Footer', 'twentyseventeen' ); ?>">
    <?php
    if ( is_active_sidebar( 'sidebar-2' ) ) { ?>
        <div class="widget-column footer-widget-1">
            <?php dynamic_sidebar( 'sidebar-2' ); ?>
        </div>
    <?php }
    if ( is_active_sidebar( 'sidebar-3' ) ) { ?>
        <div class="widget-column footer-widget-2">
            <?php dynamic_sidebar( 'sidebar-3' ); ?>
        </div>
    <?php } ?>
</aside><!-- .widget-area -->

<?php endif; ?>

Ответ или решение

Введение в WordPress и освоение тем может быть немного запутанным для начинающих. Если вы используете тему Twenty Seventeen и хотите добавить несколько виджетов в нижний колонтитул, существует несколько способов, которые позволят вам достичь этого, используя PHP и CSS модификации. Давайте разберемся, как это сделать наиболее эффективно.

Шаг 1: Регистрация новых виджетов в нижнем колонтитуле

В вашей теме по умолчанию может быть ограниченное количество областей для нижнего колонтитула. Чтобы добавить больше, вам нужно зарегистрировать дополнительные боковые панели (sidebars) для виджетов в файле functions.php вашей темы. Откройте файл functions.php и добавьте следующий код:

function custom_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Footer 3', 'twentyseventeen' ),
        'id'            => 'sidebar-4',
        'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );

    register_sidebar( array(
        'name'          => __( 'Footer 4', 'twentyseventeen' ),
        'id'            => 'sidebar-5',
        'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'custom_widgets_init' );

Этот код позволяет добавить два дополнительных виджета для вашего нижнего колонтитула.

Шаг 2: Обновление шаблона нижнего колонтитула

Затем вам нужно обновить шаблон, который отвечает за отображение виджетов в нижнем колонтитуле. Это можно сделать, изменив файл footer-widgets.php, который находится в twentyseventeen/template-parts/footer/. Внесите следующие изменения:

<?php
if ( is_active_sidebar( 'sidebar-2' ) ||
     is_active_sidebar( 'sidebar-3' ) ||
     is_active_sidebar( 'sidebar-4' ) ||
     is_active_sidebar( 'sidebar-5' ) ) :
?>

<aside class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Footer', 'twentyseventeen' ); ?>">
    <?php
    if ( is_active_sidebar( 'sidebar-2' ) ) { ?>
        <div class="widget-column footer-widget-1">
            <?php dynamic_sidebar( 'sidebar-2' ); ?>
        </div>
    <?php }
    if ( is_active_sidebar( 'sidebar-3' ) ) { ?>
        <div class="widget-column footer-widget-2">
            <?php dynamic_sidebar( 'sidebar-3' ); ?>
        </div>
    <?php }
    if ( is_active_sidebar( 'sidebar-4' ) ) { ?>
        <div class="widget-column footer-widget-3">
            <?php dynamic_sidebar( 'sidebar-4' ); ?>
        </div>
    <?php }
    if ( is_active_sidebar( 'sidebar-5' ) ) { ?>
        <div class="widget-column footer-widget-4">
            <?php dynamic_sidebar( 'sidebar-5' ); ?>
        </div>
    <?php } ?>
</aside><!-- .widget-area -->

<?php endif; ?>

Этот код добавляет новые секции для дополнительных виджетов, которые вы только что зарегистрировали.

Шаг 3: Настройка стилей с помощью CSS

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

.widget-column {
    width: 25%; /* Убедитесь в делении общей ширины между всеми колонками */
    float: left;
    padding: 20px;
}

.footer-widget-1, .footer-widget-2, .footer-widget-3, .footer-widget-4 {
    /* дополнительные стили */
}

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

Заключение

Таким образом, добавление дополнительных виджетов в нижний колонтитул темы Twenty Seventeen требует изменения PHP для регистрации новых областей виджетов и модификации шаблона, а также обновления стилей CSS. Следуя этим шагам, вы сможете создать уникальный и функциональный нижний колонтитул для вашего сайта на базе WordPress. Разумеется, всегда стоит сделать резервное копирование всех изменяемых файлов, чтобы избежать потери данных.