Коли я зробив свою першу тему, внизу кожної сторінки з'являвся напис на кшталт «Сайт працює на WordPress», і я довго не розумів, звідки він узявся. Узявся він просто: у темі не було файлу footer.php, і WordPress підставляв свою стандартну заглушку. Тож розповім, що має бути в підвалі власної теми: обов'язковий виклик wp_footer(), рік і назва сайту, меню з політикою конфіденційності та області для віджетів.

Що робить footer.php

Шаблони сторінок – index.php, archive.php, search.php – закінчуються рядком get_footer(), який підключає footer.php. У ньому дві задачі:

  • вивести нижню частину сайту, однакову на всіх сторінках;
  • закрити теги, відкриті в header.php, – щонайменше <body> і <html>.

Якщо в шапці ти відкривав/ла ще якийсь загальний блок-обгортку, наприклад <div class="page">, закривати його теж тут.

Повний footer.php

<footer class="site-footer">
    <?php if ( is_active_sidebar( 'footer' ) ) : ?>
        <div class="footer-widgets">
            <?php dynamic_sidebar( 'footer' ); ?>
        </div>
    <?php endif; ?>

    <?php if ( has_nav_menu( 'footer' ) ) : ?>
        <nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer menu', 'mytheme' ); ?>">
            <?php
            wp_nav_menu( array(
                'theme_location' => 'footer',
                'container'      => false,
                'depth'          => 1,
            ) );
            ?>
        </nav>
    <?php endif; ?>

    <p class="site-info">
        &copy; <?php echo esc_html( wp_date( 'Y' ) ); ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
        <?php the_privacy_policy_link( ' &middot; ' ); ?>
    </p>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Розберімо по частинах, починаючи з найважливішого рядка.

wp_footer() – без нього ніяк

wp_footer() – це пара до wp_head() із шапки. У цьому місці WordPress і плаґіни вставляють усе, що має бути в кінці сторінки:

  • скрипти, підключені через wp_enqueue_script() з позначкою «в підвалі», – наприклад, скрипт, який ховає прелоадер;
  • верхню панель адміністратора, яку ти бачиш, коли увійшов/ла на сайт;
  • код аналітики, кнопки чатів, вікна згоди на cookies і все інше, що додають плаґіни.

Якщо забути wp_footer(), сайт ніби працює, але панель адміністратора зникає, а частина скриптів просто не підключається. Ставити його треба останнім, прямо перед </body>.

Рік і назва сайту

Рік у копірайті вписувати вручну не варто: першого січня він застаріє, і ти про це забудеш. Тому рік виводить функція wp_date( 'Y' ). Я беру саме її, а не звичну date( 'Y' ) з PHP, бо wp_date() враховує часовий пояс з налаштувань сайту. Інакше в новорічну ніч рік на сайті може змінитися на кілька годин раніше чи пізніше.

Якщо хочеш показати, з якого року працює сайт, допиши рік старту перед функцією: &copy; 2010&ndash;<?php echo esc_html( wp_date( 'Y' ) ); ?>.

bloginfo( 'name' ) виводить назву сайту з Налаштування → Загальні, а home_url( '/' ) – адресу головної, яка не зламається після переїзду на інший домен.

Посилання на політику конфіденційності

the_privacy_policy_link() виводить посилання на сторінку, вибрану в Налаштування → Конфіденційність. Якщо таку сторінку не вибрано або вона не опублікована, функція нічого не покаже. Параметр – текст перед посиланням, тут це крапка-роздільник. Посилання на політику в підвалі кожної сторінки потрібне частіше, ніж здається: його вимагають і правила приватності, і, наприклад, аудит YouTube API.

Меню в підвалі

У підвалі зручно тримати друге, коротке меню: «Про мене», «Контакти», «Політика конфіденційності». Спершу його треба зареєструвати у functions.php поруч із головним меню, яке ми додавали для шапки:

function mytheme_register_menus() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'mytheme' ),
        'footer'  => __( 'Footer Menu', 'mytheme' ),
    ) );
}

add_action( 'after_setup_theme', 'mytheme_register_menus' );

Після цього в Зовнішній вигляд → Меню з'явиться місце «Footer Menu», куди можна поставити будь-яке меню. У коді підвалу дві деталі:

  • has_nav_menu( 'footer' ) перевіряє, чи призначене меню. Без цієї перевірки WordPress, не знайшовши меню, вивів би список усіх сторінок сайту.
  • 'depth' => 1 показує лише верхній рівень, без випадних підменю, які в підвалі зазвичай ні до чого.

Атрибут aria-label на <nav> підказує програмам для незрячих, що це меню підвалу, а не головне.

Віджети в підвалі

Віджети – це блоки, які власник сайту розставляє сам в адмінці: останні записи, хмара позначок, текст «Про сайт», посилання на соцмережі. Щоб тема мала для них місце в підвалі, зареєструй область віджетів у functions.php:

function mytheme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Footer', 'mytheme' ),
        'id'            => 'footer',
        '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', 'mytheme_widgets_init' );

Функція називається register_sidebar(), хоча колонка тут ні до чого, – так історично склалося. Параметри before_ і after_ задають розмітку навколо кожного віджета і його заголовка. А в footer.php перевірка is_active_sidebar() не дає вивести порожній блок, якщо віджетів в області немає.

Щоб віджети стали в кілька колонок, які на телефоні самі складаються в одну, вистачить CSS-сітки:

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

Підвал унизу навіть на короткій сторінці

Ще одна класична проблема: на сторінці з двома рядками тексту підвал підскакує до середини екрана, а під ним біла порожнеча. Лікується кількома рядками CSS, якщо <header>, <main> і <footer> лежать прямо в <body>:

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.site-main {
    flex: 1;
}

main забирає собі все вільне місце, і підвал завжди внизу. Друге значення 100dvh враховує панель адреси в мобільних браузерах, яка то з'являється, то ховається, а старі браузери його просто пропустять і візьмуть перше.

А в блокових темах?

У блокових темах підвал – це файл parts/footer.html, зібраний із блоків, і редагується він прямо в редакторі сайту. wp_footer() там ставити не потрібно, WordPress робить це сам.

Що далі

На цьому основа класичної теми готова: шапка, шаблони сторінок і підвал. Якщо хочеш побачити всю картину разом, повернися до статті як створити тему WordPress з нуля. А щоб тема не губилася в блоковому редакторі, глянь, як підготувати класичну тему WordPress до Gutenberg.

Більше про це – за позначками Створення тем WordPress та PHP.

А що в тебе в підвалі сайту: лише копірайт чи ціле друге меню з віджетами? Пиши в коментарях 🙂