Skip to content

Создание базовых шаблонов WordPress: Шапка, Подвал и Боковая панель с Принципом DRY

3 сентября, 2025 ·

Введение: Принцип DRY в WordPress-темах

Один из ключевых принципов хорошего программиста — DRY (Don’t Repeat Yourself) — «Не повторяйся». Представьте, что у вас на сайте 100 страниц, и вам нужно поменить логотип в шапке. Если код шапки скопирован на каждую страницу, вам придется вносить изменения 100 раз. Это неэффективно и чревато ошибками.

В WordPress эта проблема решается за счет разделения кода на повторно используемые части. Главными инструментами для этого являются файлы header.php, footer.php, sidebar.php и функции get_header(), get_footer(), get_sidebar().

Давайте разберемся, как их создавать и использовать правильно.

Что такое header.php, footer.php и sidebar.php?

Это стандартные файлы шаблонов в структуре темы WordPress, которые содержат код, общий для многих страниц вашего сайта.

  • header.php (шапка): Содержит всё, что находится в начале каждой страницы. Обычно это:
    • HTML-документ (теги <!DOCTYPE html>, <html>, <head>)
    • Мета-теги (кодировка, viewport)
    • Подключение CSS и JavaScript-файлов (через wp_head())
    • Логотип сайта
    • Главное меню навигации
    • Открывающий тег <body> и основную разметку шапки.
  • footer.php (подвал): Содержит всё, что находится в конце каждой страницы. Обычно это:
    • Копирайты, информация о компании.
    • Дополнительные меню или ссылки.
    • Подключение скриптов (например, jQuery для Bootstrap).
    • Закрывающие теги основной разметки и теги </body> и </html>.
    • Важная функция wp_footer().
  • sidebar.php (боковая панель): Содержит разметку и функционал боковой колонки (сайдбара), которая может быть на всех или на некоторых страницах.
    • Виджеты (виджет поиска, архивов, рубрик, кастомные виджеты).
    • Произвольная HTML-разметка.

Волшебные функции: get_header(), get_footer(), get_sidebar()

Эти функции — мост между вашим основным файлом шаблона (например, index.php) и частями сайта. Они делают одну простую вещь: подключают содержимое соответствующего файла в то место, где вы их вызвали.

Как работают эти функции?
Когда WordPress выполняет код в index.php и доходит до строки <?php get_header(); ?>, он делает следующее:

  1. Ищет в папке текущей темы файл header.php.
  2. Находит его и вставляет весь его код в это самое место.
  3. Продолжает выполнять остальной код index.php.

Точно так же работают get_footer() и get_sidebar().

Практикуемся: Создаем базовые шаблоны

1. Создаем header.php

Создайте в папке вашей темы файл header.php и наполните его примерно таким кодом:

php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

    <header id="site-header">
        <div class="container">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <h1><?php bloginfo( 'name' ); ?></h1>
            </a>
            <p><?php bloginfo( 'description' ); ?></p>

            <nav id="main-navigation">
                <?php
                    wp_nav_menu( array(
                        'theme_location' => 'header-menu', // Местоположение меню, которое нужно регистрировать в functions.php
                    ) );
                ?>
            </nav>
        </div>
    </header>

    <main> <!-- Открываем основной контент -->

Ключевые моменты:

  • language_attributes(): Выводит атрибуты языка для тега <html>.
  • bloginfo( 'charset' ): Выводит кодировку сайта, указанную в настройках.
  • wp_head();: Критически важная функция! Она подключает все стили и скрипты, которые требуются WordPress и плагинам для работы. Никогда не удаляйте ее.
  • body_class();: Выводит набор CSS-классов для тега <body>, которые помогают стилизовать разные типы страниц (например, .home, .page, .admin-bar).
  • home_url( '/' ): Выводит корректный URL главной страницы.
  • bloginfo( 'name' ) и bloginfo( 'description' ): Выводят название и описание сайта из настроек.
  • wp_nav_menu(): Выводит меню, созданное в админ-панели.

2. Создаем footer.php

Создайте файл footer.php:

php

    </main> <!-- Закрываем тег <main>, открытый в header.php -->

    <footer id="site-footer">
        <div class="container">
            <p>&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?>. All rights reserved.</p>
        </div>
    </footer>

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

Ключевые моменты:

  • Мы закрываем тег </main>, который был открыт в header.php. Это показывает, как шапка и подвал работают вместе.
  • wp_footer();: Вторая критически важная функция. Она нужна для подключения скриптов, которые должны грузиться в подвале сайта (например, аналитика, скрипты для виджетов). Ее отсутствие может сломать функционал плагинов и админ-бар.

3. Создаем sidebar.php (опционально)

Создайте файл sidebar.php, если в теме предусмотрена боковая панель:

php

<aside id="secondary" class="sidebar">
    <?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
        <?php dynamic_sidebar( 'main-sidebar' ); ?>
    <?php endif; ?>
</aside>

Ключевые моменты:

  • is_active_sidebar(): Проверяет, добавлены ли виджеты в область с id main-sidebar.
  • dynamic_sidebar(): Выводит все виджеты, добавленные в эту область через админ-панель «Внешний вид → Виджеты».

Собиваем всё вместе в index.php

Теперь посмотрите, как упрощается ваш главный файл index.php:

php

<?php get_header(); // Вставляем header.php ?>

    <section class="content">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <!-- Цикл WordPress: вывод контента записи -->
                <article>
                    <h2><?php the_title(); ?></h2>
                    <?php the_content(); ?>
                </article>
            <?php endwhile; ?>
        <?php endif; ?>
    </section>

    <?php get_sidebar(); // Вставляем sidebar.php (если есть) ?>

<?php get_footer(); // Вставляем footer.php ?>

Что произошло?

  • Код стал чистым, читаемым и логичным.
  • Вся служебная разметка (документ, шапка, подвал) вынесена в отдельные файлы.
  • Чтобы изменить шапку на всем сайте, теперь нужно править всего один файл — header.php.

Частые ошибки и лучшие практики

  1. Не удаляйте wp_head() и wp_footer(). Это самые распространенные ошибки новичков, ломающие внешний вид и функционал сайта.
  2. Всегда используйте body_class(). Это даст вам мощный инструмент для гибкой CSS-стилизации.
  3. Регистрируйте области для меню. Для работы wp_nav_menu()你需要 сначала зарегистрировать header-menu в файле functions.php вашей темы.
  4. Регистрируйте области для виджетов. Для работы dynamic_sidebar('main-sidebar')也同样 нужно зарегистрировать область виджетов в functions.php.

Пример регистрации в functions.php:

php

function my_theme_setup() {
    // Регистрируем меню
    register_nav_menus( array(
        'header-menu' => __( 'Header Menu', 'my-theme' ),
    ) );

    // Регистрируем сайдбар
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-theme' ),
        'id'            => 'main-sidebar',
        'description'   => __( 'Add widgets here.', 'my-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Резюме: Главные выводы

  1. Разделение — это сила. Разделение кода на логические файлы (header.php, footer.php) делает тему организованной, простой в поддержке и развитии.
  2. Функции — это клей. get_header(), get_footer(), get_sidebar() — это простые, но мощные функции, которые соединяют ваши шаблоны в единое целое.
  3. wp_head() и wp_footer() — обязательны. Они жизненно важны для корректной работы WordPress, плагинов и темы.
  4. Начните с основ. Создание этих трех файлов — это первый и самый важный шаг в создании любой темы WordPress с нуля.

Теперь ваша тема имеет прочную, легко управляемую структуру. Вы можете быть уверены, что изменение в одном месте (например, в header.php) автоматически применится ко всему сайту!

Похожие материалы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *