Подключаемые файлы WordPress header.php, sidebar.php, footer.php

Подключаемые файлы: header.php, sidebar.php и footer.php

Подключаемые файлы WordPress (header.php, sidebar.php и footer.php) — это файлы которые хранят в себе HTML-код страницы отвечающий за вывод шапки сайта, сайдбара и подвала сайта. Обычно код хранящийся в данных файлах, неизменный на каждой странице сайта главной и внутренних.

В этом уроке, мы разделим с вами HTML-код файл-шаблона index.php на четыре части:

header.php - хранит код шапки сайта
sidebar.php - хранит код сайдбара сайта (боковая панель)
footer.php - хранит код подвала сайта

Четвертая часть останется в файл шаблоне index.php, это так называемый динамический контент, который меняется в зависимости от того какой файл-шаблон запущен.

Например, если открыта главная страница сайта то запускается файл-шаблон index.php в динамической контентной части при этом будет расположено 10 анонсов (кратких содержаний основных постов) постов.

Если мы кликнем по краткому содержанию поста, то перейдем на страницу с полным содержанием поста, при этом запустится файл-шаблон single.php (с которым мы познакомимся в следующих уроках).

Т.е. в четвертой части (динамический контент), контент всегда меняется: 10 анонсов постов (index.php), 1 полное описание поста (single.php), но при этом шапка сайдбар и подвал остаются не изменными и одинаковыми каккой-бы шаблон не запустился.

Есть еще несколько причин, почему нужно отделять повторяющиеся части HTML-кода от изменяющихся (динамических), но об этом мы поговорим чуть позже. Сейчас же я вам покажу как нужно разделить файл-шаблон index.php на 4 части.

HTML-код файла index.php выглядит следующим образом:

<!DOCTYPE html>
<html>
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
    </head>

    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">

            <div class="header">
                Шапка страницы сайта
            </div> <!-- .header -->
            
            <div class="main">
            
                <div class="content">
                    Основной контент страницы сайта
                </div> <!-- .content -->

                <div class="sidebar">
                    Сайдбар страницы сайта (боковая панель с виджетами)
                </div> <!-- .sidebar -->

            </div> <!-- .main -->
            
            <div class="footer">
                Подвал страницы сайта
            </div>
        
        </div> <!-- .wrapper -->
    </body>
</html>

Теперь создайте в вашей папке со своей темой, например mytheme, три файла с именами header.php, sidebar.php и footer.php, затем:

  • Вырежьте из файл-шаблона index.php, код выделенный красным цветом и вставьте в файл header.php (это будет шапка сайта)
  • Вырежьте из файл-шаблона index.php, код выделенный голубым цветом и вставьте в файл sidebar.php (это будет сайдбар сайта)
  • Вырежьте из файл-шаблона index.php, код выделенный зелёным цветом и вставьте в файл footer.php (это будет подвал сайта)

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

<div class="content">
    Основной контент страницы сайта
</div> <!-- .content -->

Т.е остался всего лишь один блок в котором у нас будет размещаться динамический контент (а если быть точнее, то Цикл WordPress, который мы изучим в следующих уроках).

Теперь нам осталось лишь подключить к файл-шаблону index.php, подключаемые файлы: header.php, sidebar.php и footer.php, за это отвечают следующие функции:

<?php get_header(); ?> - подключает файл header.php (шапка сайта)
<?php get_sidebar(); ?> - подключает файл sidebar.php (сайдбар сайта)
<?php get_footer(); ?> - подключает файл footer.php (подвал сайта)

Итого, ваш файл-шаблон index.php, теперь должен выглядеть следующим образом:

<?php get_header(); ?>

<div class="content">
    Основной контент страницы сайта
</div> <!-- .content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Читать далее: Функции WordPress wp_head() и wp_footer()


Дата публикации поста: 3 апреля 2019
Дата обновления поста: 12 июля 2015
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

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

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