Создание темы для WordPress #2

Не стал мудрить над заголовком. И так понятно, что мы снова будем создавать тему для WordPress. Предполагается, что вы уже знакомы с основами создания WordPress тем, потому здесь уже будем делать конкретную, практичную и даже красивую тему. Чего говорить, можете сразу оценить — так будет выглядеть тема:

Конечно, на такой миниатюре трудно оценить всю прелесть темы. Потому посмотрите тему в работе на моём блоге: учебная тема на Pavluha.Net.

Когда налюбуетесь и протестируете новую тему, в исходный интерфейс блога Pavluha.Net можно будет переключиться этой ссылкой.

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

Хотите научиться делать такие же темы, и даже лучше? Тогда — вперёд!

Создание темы для WordPress начинаем с запуска Денвера и открытия в Notepad++ (или создания) следующих файлов:

• style.css
• index.php
• header.php
• footer.php
• sidebar.php
• functions.php

Как я уже говорил, если что-то не понятно, читайте мой первый урок по созданию тем WP, ссылка на который была в начале поста.

Опачки! Появились новые файлы, ведь в прошлый раз мы задействовали только index.php и style.css. Незамедлительно поясняю назначение остальных файлов. header.php — этот файл содержит «шапку» сайта. В этот файл включается верхняя часть страницы: заголовок, описание сайта и верхнее меню (страницы блога). footer.php — нижняя часть сайта: тут часто находятся счётчики и копирайты. sidebar.php — боковая колонка, где будут отображаться виджеты. functions.php — функциональный файл темы. В данном случае он необходим, чтобы подключить в теме поддержку виджетов.

Теперь смотрим, какие изменения претерпел наш индексный файл:

<?php get_header() ?>

<?php get_sidebar() ?>

<div id="blog_content">
<?php if (have_posts()) : while (have_posts()) : the_post() ?>
	<div class="post_meta">
	<h2><?php the_title() ?></h2>
	<span class="pm-date"><?php the_time(' j F Y') ?></span>
	<?php $categories = get_the_category_list(', ');
	if ($categories) echo '<span class="pm-category">Рубрика: ',$categories,'</span>' ?>
	<?php the_tags('<span class="pm-labels">Метки: ', ', ', '</span>') ?>
	<?php edit_post_link('Правка', '<span class="pm-edit">', '</span>'); ?>
	</div><!-- /post_meta -->
	<div class="post_preview">
	<?php the_content('Читать далее...') ?>
	<p class="post_comments"><?php comments_popup_link('Комментировать', '1 комментарий', 'Комментарии (%)', '', 'Комментарии отключены') ?></p>
	<?php comments_template(); ?>
	</div><!-- /post_preview -->
<?php endwhile; ?>
<div class="Nav"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { posts_nav_link(' - ','« Назад','Вперед »'); } ?></div>
<div style="clear:both; zoom:1"></div>
<? else : ?>
Извините, такого не найдено
<?php endif; ?>

</div><!-- /blog_content -->
<?php get_footer() ?>

Где же наши теги html, head, body? Теперь они перекочевали в «футер» и «хедер». Теперь у нас тут только то, что нужно для отображения контентной части страниц и записей. Разбираем код посстрочно:

• 1 — Подключаем код «шапки».
• 3 — Подключаем код сайдбара.
• 6-20 — Цикл, в котором отображается список постов, либо тело поста, либо тело страницы.
• 8 — Заголовок поста (страницы).
• 9 — Дата публикации.
• 10-11 — Список категорий. Как известно, у страниц категорий нет, потому сначала список категорий загружается в переменную $categories, а затем уже, если список не пустой, отображается на странице.
• 12 — Список меток. Если меток нет, не выведется ничего.
• 13 — Ссылка на правку поста для администратора. Для незалогиненного пользователя не отображается.
• 16 — Вывод текста поста. Если запрашивается пост или страница, текст будет выведен целиком, иначе лишь до тега more, после чего будет вставлена ссылка «Читать далее...».
• 17 — Ссылка на комментарии, в тексте которой также отображается количество комментариев.
• 18 — Вывод самих комментариев, если запрошенная страница это предполагает.
• 21 — Вывод постраничной навигации. Если не используется плагин WP-PageNavi, выводятся ссылки «Назад», «Вперёд».
• 22 — А эта модная штучка нужна для того, чтобы нижеследующий HTML-текст не обтекал элементы поста, которым задано обтекание (например, рисунки с выравниванием по левому или правому краю).
• 24 — Заглушка на случай, если будет запрошена несуществующая страница, либо результат поиска поиска по блогу не вернёт ни единого поста.
• 29 — Подключаем код «подвала».

На этом всё по файлу index.php. Если что-то не ясно, срочно пишите в комментарии.
Файл шапки (header.php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
<head>
	<title><?php wp_title() ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="<?php bloginfo('rss2_url') ?>" />
	<?php wp_head(); ?>
</head>
<body>
<div id="blog_maket">
<div id="blog_header">
	<a href="<?php bloginfo('siteurl') ?>"><?php bloginfo('name') ?></a>
	<?php bloginfo('description') ?>
</div><!-- /blog_header -->
<div id="main_menu">
	<ul><li<?= is_home() ? ' class="current_page_item"' : '' ?>>
	<a href="<?php bloginfo('siteurl'); ?>">Главная</a>
	</li>
	<?php wp_list_pages ('title_li=') ?></ul>
</div><!-- /main_menu -->

И снова построчный разбор, насколько это необходимо. Конечно, не буду второй раз объяснять то, что было в первом уроке по созданию темы WordPress (ссылка в начале поста).

• 7 — Вставка ссылки в шапку на RSS блога. В дизайне это отображено не будет, но в адресной строке браузера появится иконка RSS, позволяющая подписаться на обновления блога. И, что ещё более важно, эта ссылка поможет поисковым роботам следить за обновлениями блога.
• 8 — Функция, позволяющая движку WP и плагинам вставлять по необходимости мета-данные (они не отображаются на странице, но позволяют поисковым роботам лучше ориентироваться в содержимом блога).
• 13 — Вывод заголовка блога со ссылкой на главную страницу сайта. Текст заголовка настраивается в админке.
• 14 — Вывод описания блога, которое также настраивается в админке.
• 17-19 — Вывод ссылки на главную страницу блога в меню страниц. Если главная страница (is_home) активна, то ссылке будет присовоен класс current_page_item. Ну не эстет ли я!
• 20 — Список страниц блога. Функции передаётся атрибут «title_li=», чтобы у списка не отображался заголовок (По умолчанию отображается заголовок «Страницы»).

Далее ещё проще. Файл «подвала» (footer.php):

<div id="blog_footer">
	<?php bloginfo('name') ?> © 2010<?= date('Y')>2010 ? date('-Y') : '' ?>.
	Тема оформления: <a href="https://pavluha.net">Pavluha.Net</a>
</div><!-- /blog_footer -->
</div><!-- /blog_maket -->

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

И всего лишь. Как вы уже заметили, к закрывающим тегам div я подписываю, какой именно слой закрывается. Это значительно упрощает чтение кода при сложной структуре.

Тут, думаю, лишь 2 момента стоит пояснить. В строке 2 выводится надпись, типа: Pavluha.Net © 2007—2010. Если ваш блог создан не в 2010 году, исправьте в этой строке два числа «2010» на ваш год создания. В этом году предложенный здесь код будет выводить «... © 2010», в следующем выведет «... © 2010—2011» без всякого вашего вмешательства. Надеюсь, принцип понятен.

В 7 строке таинственная функция wp_footer — это чисто технический момент. В этом месте некоторые плагины будут при необходимости выводить тот код, который нужно выводить внизу страницы. Обычно это JavaScript код, для правильного функционирования которого необходим вывод ниже других элементов страницы.

Sidebar.php. Опровергая поговорку «дальше в лес — больше дров»:

<div id="blog_sidebar">
	<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
	Вы можете использовать виджеты. Настройте виджеты в админ-панели.
	<?php endif ?>
</div><!-- blog_sidebar -->

Происходит вывод виджетов после проверки того, что тема действительно поддерживает виджеты — так, для порядка. Если ни один виджет в админ-панели не подключен, выводится лишь соответствующее текстовое уведомление.

Но этого не достаточно, чтобы заявить, что теперь наша тема поддерживает виджеты. А нужно ещё вот что.

Файл functions.php.

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array (
		'before_widget' => '<div class="widget">',
		'after_widget' => '</div>',
		'before_title' => '<div class="widget_title">',
		'after_title' => '</div>'
	));
?>

Вот как раз последний штрих для того, чтобы динамический сайдбар заработал. Здесь мы указываем код, который будет до и после каждого виджета, а также коды до и после заголовков виджета. Так мы сможем управлять внешним видом этих элементов, задавая стили классов.

А теперь модернизированный файл стилей (style.css):

/*
Theme Name: My Best Theme
Theme URI: https://pavluha.net/sozdanie-temy-dlya-wordpress.html
Description: Учебная тема от Павлухи.net
Version: 2.0
Author: Pavluha.Net
Author URI: https://pavluha.net/
*/
#blog_header, #main_menu, #blog_content, #blog_footer {
	padding: 10px;
}
body {
	font: 16px 'Trebuchet MS';
	margin: 0; padding: 0;
	background: #6c6;
}
a {
	color: #060;
}
a:hover {
	text-decoration: none;
	color: #0c0;
}
img.alignleft { float: left; margin: 5px }
img.alignright { float: right; margin: 5px }
#blog_maket { min-width: 850px; width: 100% }
#blog_header, #blog_footer {
	background: #393;
	color: yellow;
	font: bold italic 17px 'Trebuchet MS';
}
#blog_header a {
	text-decoration: none;
	font: bold italic 34px 'Trebuchet MS';
	color: #ff0;
	margin-right: 20px;
}
#main_menu ul {
	margin: 0; padding: 0;
}
#main_menu li {
	display: inline;
	margin: 5px 20px 5px 5px;
}
#main_menu a {
	text-decoration: none;
	color: #fff;
	font: bold 17px 'Trebuchet MS';
	border-bottom: 3px dotted #fff;
}
#main_menu a:hover, #main_menu .current_page_item a {
	border: 0;
	color: #ff6;
}
#main_menu {
	background: #6c6;
}
#blog_content {
	margin-right: 270px;
	background: #fff;
	padding-bottom: 0;
}
#blog_sidebar {
	float: right;
	width: 250px;
	background: #6c6;
	padding: 0 10px;
}
.widget {
	background: #cfc;
	padding: 5px;
	margin-bottom: 10px;
}
.widget_title {
	font: bold italic 19px 'Trebuchet MS';
	text-align: center;
	color: #060;
	margin: 5px 0;
}
.widget ul {
	margin: 0; padding: 0;
	list-style: none;
}
#blog_footer {
	text-align: center;
	clear: both;
}
#blog_footer a {
	color: #fff;
}
.post_meta h2 {
	background: #ff9;
	padding: 5px 20px; margin: 0 0 7px 0;
	border: 2px solid #ff6;
	border-radius: 25px 0; -moz-border-radius: 25px 0;
	-webkit-border-radius: 25px 0; -khtml-border-radius: 25px 0;
	color: #060;
	font: bold italic 25px 'Trebuchet MS';
}
.post_meta  span {
	font: bold italic 17px 'Trebuchet MS';
	padding: 0 20px 0 30px;
}
.post_meta  span a {
	text-decoration: none;
	border-bottom: 2px dotted #6c6;
}
.post_meta  span a:hover {
	border: 0;
}
.pm-date { background: url('images/date.png') no-repeat }
.pm-category { background: url('images/file.png') no-repeat }
.pm-labels { background: url('images/edit.png') no-repeat }
.pm-edit { background: url('images/logoff.png') no-repeat }
.more-link {
	display: block;
	clear: both;
	padding: 5px;
	background: #cfc;
	font: italic 17px 'Trebuchet MS';
	color: #393;
}
.post_comments {
	background: url('images/message.png') right center no-repeat;
	text-align: right;
	padding-right: 30px;
	clear: both;
}
.post_preview {
	margin-bottom: 20px;
	overflow: hidden;
	zoom: 1;
}
.Nav {
	text-align: center;
	padding: 10px 0;
	overflow: hidden;
	zoom: 1;
}

Тут воздержусь от объяснений. Откройте справочник по CSS, и большинство вопросов отпадут сами собой. Тем не менее, вопросы по существу в комментариях приветствуется.

Это не последний пост по созданию своих тем для WordPress. Здесь описан лишь необходимый рабочий минимум. Дальше вас ожидают «фишки» и красота. Не забудьте подписаться на обновления, чтобы ничего не пропустить.

Да, скачать всё здесь описанное в виде архива темы можно по ссылке ниже. Архив можно распаковать в папку «wp-content\themes» вашего блога, активировать тему и пользоваться.