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

Не стал мудрить над заголовком. И так понятно, что мы снова будем создавать тему для WordPress. Предполагается, что вы уже знакомы с основами создания 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="http://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: http://pavluha.net/sozdanie-temy-dlya-wordpress.html
Description: Учебная тема от Павлухи.net
Version: 2.0
Author: Pavluha.Net
Author URI: http://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» вашего блога, активировать тему и пользоваться.

Моя тестовая тема # 2 (12.3 KiB). Скачали: 69 раз
Запись опубликована в рубрике Web-мастеринг с метками , , , . Короткая ссылка для добавления в закладки: Создание темы для WordPress #2.

31 Responses

  1. Надюша говорит:

    О, какой подробный мануал! Спасибо :) Буду теперь знать, как тему создавать собственную ;) А твоя зелёненькая тема мне очень понравилась *THUMBS UP*

  2. BloggerMen говорит:

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

    Хотя это на любителя. Некоторые принципиально не пользуются паблик шаблонами ни в каком виде.

    • Pavluha.Net говорит:

      Я на принцип не иду, но мне нравится делать темы. Тем более, большинство шаблонов можно сделать раз и на всегда (потом только вносить незначительные изменения, или юзать как есть). Большинство изменений терпят шаблоны: хедер и футер. Согласись, не очень-то трудозатратно. Зато «родное», без сомнительных скриптов и странного кода

  3. zusicks438 говорит:

    Посмотрел листинги...в принципе ничего особо сложного и нету, даже начал в какой-то степени уважать CSS.

    Шаблон правда можно использовать? :-D

    • Pavluha.Net говорит:

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

  4. Silen говорит:

    Павлуха, мне это напоминает только одно — это chocasativa. :))) У неё был почти такой же дизайн. :)

    Конечно, без картинок не фонтан, но на первый взгляд такая темка, в принципе, подойдет. Её бы только ужать в размерах до 900 пикселей, скажем. 8)

    • Pavluha.Net говорит:

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

  5. ледиольга говорит:

    Павел! Приятно познакомится!

    Блог =) супер! Очень полезный!

  6. Lis`ена говорит:

    Расскажите, как вы сделали предпросмотр темы. Пожалуйста)))))

    • Pavluha.Net говорит:

      Обязательно расскажу, Лисёна. В ближайшем посте. :) Сегодня или завтра

      • Lis`ена говорит:

        Ждуждуждужду)))) А то бложек по WP умирает(((

        Хм, все-таки остался каммент, а при постинге все время ошибку выдавало.

        • Pavluha.Net говорит:

          Уже занялся публикацией. Лисёна, вы бы очень помогли, если бы сказали, каким браузером пользовались при комментировании (когда ошибку выдавало) и какая именно ошибка была.

          Кто-то уже жаловался, но у меня ошибок не возникает, потому трудно отловить баг. *PARDON*

          • Lis`ена говорит:

            У меня FF 3.6.13

            При отправке комментария пишет, что форма пустая — ( Но через раз-же как-то

            Если еще появится сделаю скрин

          • Pavluha.Net говорит:

            Спасибо. Скорее всего, какой-то конфликт плагинов, буду проверять

  7. olvik говорит:

    Спасибо, за подробное объяснение. А, как, если не секрет, воспользоваться возможностью комментирования при отсутствии файла «comments»? А, то ввод комментариев визуально в теме предусмотрен, а на деле не выходит, сервер выдаёт ошибку 405.

  8. olvik говорит:

    О-о! В Опере комменты не принимает, а в фоксе и хроме нормально. Как исправить и для оперы тоже? Спасибо!

    • Pavluha.Net говорит:

      Спасибо за информацию, olvik.

      Пора уже третью версию создания темы WP писать :) Ну а пока я только собираюсь писать, вы можете скачать любую бесплатную тему WP (сайты с темами я упомянал в посте pavluha.net/sozdanie-temy-dlya-wordpress.html — а можете и сами нагуглить, наяндексить), из скачанной темы возьмите файл comments.php

  9. olvik говорит:

    Мне понравилась тема, которую Вы создали для блога Надюши. Тема, очень человеко дружественная, домашняя, тёплая, уютная, юзабельная и гармоничная по цвету и форме. Как человек, слегка понимающий в дизайне ( дизайнер, юзабилист ), снимаю шляпу. Кроме того, она одинаково хорошо и быстро грузится у меня и оперой, и лисой, и хромом. Значит коды хорошо оптимизированны и не зашорены. Видя всё это, и с удовольствием читая Ваш подробный мануал, и раз уж Вы советуете взять бесплатную тему из паблика, пожалуйста, посоветуйте мне конкретную тему, подходящую к любой версии WP, с сайдбарами 1 — 2, с хорошо оптимизированным кодом, который на Ваш взгляд, можно было бы взять за рабочую основу и на него уже одеть любой собственный дизайн. Я, не кодер, html и css знаю прекрасно, в php плаваю со спасательным кругом, поэтому надеюсь на Ваш профессиональный совет. Спасибо!

  10. olvik говорит:

    Да, забыл простите сказать: видимо comments.php не от всех тем можно использовать, коды видимо не стандартные у всех тем. Попалась на глаза тема avto4, с неё взял, воткнул в Вашу, перезагрузил в браузере — белый экран, удалил — перезагрузил, опять белый, к WP доступа нет, на все действия — белый экран. Посмотрел два одинаковых по названию файла от разных тем, различия в коде существенные. Поэтому и прошу Вас, как специалиста, посоветовать тему, код, которой можно смело брать за рабочий образец для любых проектов. Спасибо!

    • Pavluha.Net говорит:

      Спасибо вам за тёплые слова. И за усердность, с которой вы пытались победить мою каптчу. :) Я каптчу обязательно исправлю.

      Тему можете выбрать на этом сайте: wordpresse.ru

      Возможная причина белого экрана — вы могли сохранить файл в кодировке ANSI, а WP к этому плохо относится. Откройте файл в Notepad++ (именно плюс-плюс). В меню «Кодировки» посмотрите. Если там ANSI, то выберите пункт меню «Преобразовать в UTF-8 без BOM»

  11. olvik говорит:

    — белый экран, как я понял глюк версии WP. Стояла 2.9.2, поставил 3.0.4 — экран в норме.

    — каптчу, если есть желание, лучше вообще убрать. Минусов с ней много: замедляется работа самого движка; возрастает, правда не на много, но всё же — потребление памяти; сайт медленнее грузится в браузере; и самое главное, возникают проблемы для пользователей заходящих на сайт с PDA, как я сейчас. Мне нравится плагин beespam. Шустрый, спам сечёт реально, и для добросовестного пользователя комфортно — ни каких тебе заморочек с добавлением комментов ни с компа, ни с телефона.

    — почему прошу указать мне конкретную тему для рабочего образца. Потому, что в кодерстве, я — чайник, сам не смогу различить чистый код от Artisterа. Скачал пару простых шаблонов, посмотрел код в аналогичных по названиям файлах, а он разный, и существенно, а темы то с виду одинаковые, простенькие, без наворотов, с правым сайдбаром, и грузятся, и по времени, и по колличеству запросов к одной и той же базе, тоже по разному. Какой из двух скажите, взять за основу. Вот к Вам, как специалисту, раз Вы начали такую тему у себя на блоге, и обращаюсь за конкретным советом, а не общим. Или выложите у себя тут написанную Вами, рабочую, кроссбраузерную, под любую версию WP. Поверьте, люди спасибо скажут, Бог вознаградит, свой рейтинг и рейтинг блога резко повысите. Спасибо.

    • Pavluha.Net говорит:

      Спасибо. Вот как раз думал на счёт beespam, только название забыл. Спасибо, что напомнили.

      Сегодня занимался очередной вёрсткой, и обнаружил, что WP при отсутствии файла comments.php и некоторых других использует свои из папки wp-includes\theme-compat — посетите её и скопируйте шаблон комментариев оттуда. Хороший шаблон, поддерживает древовидные комментарии. Останется настроить только стили элементов в файле style.css.

      На на счёт файлов comments.php — это да, сильно они различаются в разных темах. Тут обычно не бывает лучше или хуже — содержимое зависит от фантазии разработчика.

      Так что попробую всю инфу собрать воедино в одном из ближайших постов

    • Pavluha.Net говорит:

      А на счёт плагина beespam — это Antispam Bee имеется ввиду?

  12. olvik говорит:

    Именно он!

  13. olvik говорит:

    Ещё один хороший плагин против спама — WP-SpamFree. Главное, чтобы ни один, ни другой не конфликтовали с другими плагинами.

  14. Abraham говорит:

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

    • Pavluha.Net говорит:

      Да, например, такую опасную вещь, как создание темы для WP, делают в основном мужчины. И им стоит быть аккуратнее в этом опасном деле...

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

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

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.