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