Подключаемые файлы 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()