WordPress тема Twenty Seventeen. Добавить виджеты в footer

Если вы еще не создали дочернюю тему, создайте ее. Все правки ниже слетят при обновлении основной темы twentyseventeen, если будут выполнены в основной теме.

Сайдбары в консоли сайта

Добавьте в functions.php дочерней темы следующий код. У вас на странице Внешний вид->Виджеты появятся два новых сайдбара - Footer 3 и Footer 4.

function widgets_init_771820() {
    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', 'widgets_init_771820', 20, 0 );

Вывод сайдбаров в подвале

Создайте папку wp-content/themes/дочерняя-тема/template-parts/footer, а в ней файл footer-widgets.php. Вставьте в него следующий код (это модифицированный код файла wp-content/themes/twentysenteen/template-parts/footer/footer-widgets.php)

<?php
/**
 * Displays footer widgets if assigned
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */
?>
<?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; ?>

Стилизация вывода

Добавьте в style.css дочерней темы

@media screen and (min-width: 48em) {
    .site-footer .widget-column.footer-widget-1 {
        float: left;
        width: 25%;
    }
    .site-footer .widget-column.footer-widget-2 {
        float: left;
        width: 25%;
    }
    .site-footer .widget-column.footer-widget-3 {
        float: left;
        width: 25%;
    }
    .site-footer .widget-column.footer-widget-4 {
        float: left;
        width: 25%;
    }
}

Вот теперь все. Результат выглядит так