Создание тела, шапки, сайдбара и подвала сайта

Для простоты и удобства в WordPress предусмотрено разделение кода сайта на несколько файлов, каждый из которых отвечает за определенные зоны темы.

Далее рассмотрим как создать и наполнить файлы header.php, index.php, sidebar.php и footer.php для обеспечения верной организации кода темы сайта.

Важно помнить, что файлы header.php, sidebar.php, footer.php, на данный момент, будут одинаковы для всего сайта, поэтому размещайте в них только динамические данные.

Файл header.php - шапка сайта

В файле header.php чаще все хранится верхняя часть разметки темы сайта и содержимое тега <head>.

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

touch /var/www/example.ru/www/wp-content/themes/travelblog/header.php

Заполним его минимально необходимым содержимым для темы блога о путешествиях.

<!DOCTYPE html>
<!-- Указываем язык темы сайта -->
<html <?php language_attributes(); ?>>
<head>
	<!-- Указываем тип кодировки страницы -->
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" width="device-width">
	<!-- Выводим название сайта -->
	<title><?php bloginfo('name'); ?></title>
	<?php
		// Подключаем заголовочные файлы (js, css) для установленных плагинов,
		// а также дополнительные мета теги 
		wp_head();
	?>
</head>
<!-- Добавляем динамические CSS классы для тега <body>
     Классы могут меняться в зависимости от типа страницы сайта -->
<body <?php body_class(); ?>>
	<div class="main-container">
	<header class="main-header">
		<div class="main-header__logo">
			<!-- Указываем ссылку на домашнюю страницу -->
			<a href="<?php home_url(); ?>">
				<!-- Выводим логотип, который хранится в каталоге img в корне темы -->
				<img src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="<?php bloginfo('name'); ?>">
			</a>
		</div>
	</header>

<!DOCTYPE html>

<head>

<?php

// Подключаем заголовочные файлы (js, css) для установленных плагинов,

// а также дополнительные мета теги

wp_head();

</head>

<!-- Добавляем динамические CSS классы для тега <body>

Классы могут меняться в зависимости от типа страницы сайта -->

</a>

</div>

</header>

Файл index.php - тело сайта

index.php является файлом шаблоном для всех страниц сайта (если не используются другие шаблоны).

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

Если сайт будет содержать разные по формату страницы, то в таком случае файл index.php не понадобится. Вместо него будут создаваться отдельные файлы шаблоны для каждого из типов страниц.

Создадим index.php и сделаем в нем вывод списка постов.

touch /var/www/example.ru/www/wp-content/themes/travelblog/index.php

<?php
	// Добавляем содержимое файла header.php 
	get_header();
	// Добавляем содержимое файла sidebar.php
	get_sidebar();
?>
<div class="content">
	<div class="posts-list">
		<div class="posts-list_head-wrapper">
			<h1 class="posts-list_head">Заметки путешественника</h1>
		</div>
		<?php
	// Если в нашем блоге имеются посты, то выводим их поочередно.
	if(have_posts()){
		while (have_posts()) {
			the_post();
?>
		<article class="post-preview">
			<a href="<?php the_permalink(); ?>">
				<h2 class="post-preview__head"><?php the_title(); ?></h2>
			</a>
			<p class="post-preview__excerpt"><?php the_excerpt(); ?></p>
		</article>
<?php
		}
	} else { // Если постов нет
		echo "Данный раздел находится в разработке.";
	}
?>
	</div> <!-- .posts-list -->
</div> <!-- .content -->
<?php
	// Добавляем содержимое файла footer.php 
	get_footer();
?>

<?php

// Добавляем содержимое файла header.php

get_header();

// Добавляем содержимое файла sidebar.php

get_sidebar();

<h1 class="posts-list_head">Заметки путешественника</h1>

</div>

<?php

// Если в нашем блоге имеются посты, то выводим их поочередно.

if(have_posts()){

while (have_posts()) {

the_post();

</a>

</article>

<?php

}

} else { // Если постов нет

echo "Данный раздел находится в разработке.";

}

</div>

</div>

<?php

// Добавляем содержимое файла footer.php

get_footer();

Файл sidebar.php - сайдбар сайта

sidebar.php предназначен для разметки боковой колонки, отделенной от основного контента.

Важно понимать, что sidebar.php никак не влияет на расположение блоков. Добиваться бокового расположения сайдбара необходимо с помощью CSS.

Простой пример содержимого sidebar.php.

touch /var/www/example.ru/www/wp-content/themes/travelblog/sidebar.php

<div class="sidebar">
	<div class="country-list__wrapper">
		<div class="country-list__head-wrapper">
			<h3 class="country-list__head">Направления</h3>
		</div>
		<ul class="country-list">
			<li><a href="#">Антарктика</a></li>
			<li><a href="#">Средиземье</a></li>
			<li><a href="#">Азия</a></li>
			<li><a href="#">Каррибы</a></li>
			<li><a href="#">Европа</a></li>
		</ul>
	</div>
</div>

<h3 class="country-list__head">Направления</h3>

</div>

<li><a href="#">Антарктика</a></li>

<li><a href="#">Средиземье</a></li>

<li><a href="#">Каррибы</a></li>

<li><a href="#">Европа</a></li>

</ul>

</div>

Файл footer.php - подвал сайта

В footer.php содержатся закрывающиеся теги, которые были открыты в файле header.php.

Также в footer.php можно добавить разметку для дополнительного контента.

touch /var/www/example.ru/www/wp-content/themes/travelblog/footer.php

<footer class="footer">
	<div class="copyright">
		<!-- Выводим имя сайта -->
		<?php bloginfo("name"); ?>
		-
		<!-- Выводим описание сайта -->
		<?php bloginfo('description'); ?>
		&copy;
		<!-- Указываем текущий год -->
		<?php echo date("Y"); ?>
	</div>
</footer>
<?php
	// Подключаем файлы js для установленных плагинов,
	// которые должны загружаться после загрузки самой страницы.
 	wp_footer();
 ?>
</div> <!-- .layout -->
</body>
</html>

<?php bloginfo("name"); ?>

<?php bloginfo('description'); ?>

<?php echo date("Y"); ?>

</div>

</footer>

<?php

// Подключаем файлы js для установленных плагинов,

// которые должны загружаться после загрузки самой страницы.

wp_footer();

</div>

</body>

</html>

Создание новой темы сайта для WordPress

Подключение css и js файлов в WordPress