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

В свое время получил заказы на изготовление сайтов на WordPress, необходимо было в кратчайшие сроки (за вечер) создать тему из готового html шаблона. Пошел гуглить, нашел несколько статей, которые в общем-то ничему не могли научить, а просто давали общее представление о том, с чем едят темы для WP. Также наткнулся на несколько форумов, в которых все было расписано “от” и “до”, но всю информацию приходилось собирать по крупицам.

Собственно, по старой своей традиции, решил заняться самообучением: занялся раскопками стандартной темы WP. Оказалось все довольно просто – уже через пару часов необходимая мне тема была готова.

Сейчас же напишу краткий мануал о том, как самостоятельно создать тему для ставшего моим любимым движка WordPress

Итак, чтобы создать тему, нужно сделать следующие шаги:

1. Понять как там чего где подключается, что за что отвечает и из чего(каких файлов) вообще состоит тема.
2. Создать платформу, площадку для будущей темы – пустые файлы в папке с названием темы.
3. Узнать все команды WP. В шаблонах почти все действия (вывод рубрик, меток, содержания и т.д.) выполняются посредством встроенных в WP PHP функций.
4. Постепенно наполнять файлы, шаг за шагом.
5. Смотреть, что получилось, делать многочисленные правки и устранять баги.

А теперь о каждом шаге поподробней. Перед тем, как читать дальнейший материал, заранее скачайте тему: mytheme. Данная тема не содержит ничего лишнего. С удовольствием бы вставлял куски кода прямо в пост, но WP не позволяет корректно отображать большие куски в теге <pre>, и вообще очень плохо относится к вручную расставленным тегам.

Шаг 1. Что из себя представляет тема WordPress.

Тема WordPress – это набор файлов, которые подключаются один за другим в зависимости от запроса пользователя. Внутри файла содержится помесь html и php кода, html (ну и css) код отвечает за визуализацию, php – за вывод необходимого содержимого. Если пользователь кликнул в меню сайта на какую-то категорию, то будет подключен файл archive.php, который, в свою очередь, посредством специальных команд-функций (о них мы узнаем позже), подключает другие файлы: шапку, подвал сайта, блок навигации. Конечным итогом данных несложных операций является готовая страница, которая отдается пользователю.

Шаг 2. Создаем каркас нашей темы.

Наша тема будет состоять из следующий файлов:

• Название файла – что отображается:
• header.php – “шапка”.
• footer.php – “подвал”.
• index.php – главная.
• archive.php – архив.
• page.php – страница.
• single.php – одиночная запись.
• sidebar.php – блок, на котором будет выводиться навигация: категории, страницы, архив и т.д.
• comments.php – комментарии.
• search.php – результаты поиска.
• 404.php – страницы 404 ошибки (”не найдено”).
• function.php – php функции темы.
• style.css – таблицы css стилей.

Теперь давайте создадим папку с названием MyTheme и созданим в ней все файлы, перечисленные выше, просто созданим, наполнять ничем пока не надо.

Теперь копируем эту папку в wp-content/themes/ установленного WP. Наполнять содержимым эти файлы мы будет уже из панели администрирования вордпресса – Дизайн -> Выбираете только что созданную тему -> Редактировать. Редактирование из админки, на мой взгляд, является наиболее удобным, и потом, изчезает опасность слетания кодировки (при редактировании обыкновенными блокнотопдобными программами, не поддерживающими UTF-8, русские символы превращаются в крякозабру).

Итак, каркас темы у нас есть, осталось только его наполнить.

Шаг 3 и 4. Наполняем каркас нашей темы.

Этот шаг следует разделить на несколько подшагов. Сейчас я буду приводить название файла, а следом PHP функции (команды), которые отвечают за вывод того или иного содержания.

Перед дальнейшим прочтением материала, создайте простой статичный html шаблон, где будет отображено то, как будет выглядеть сайт на главной страничке.

header.php

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

Название сайта выводит функция

bloginfo('name');

За вывод описания отвечает функция

bloginfo('description');

Название сайта будет логично сделать кликабельным, тоесть сделать ссылкой на главную страницу. Ссылка на главную страницу сайта возвращается функцией

echo get_option('home');

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

В файл header.php мы также поместим технический html код . В <head> необходимо выводить заголовок (<title>) сайта. Нужный заголовок возвращается функцией

wp_title();

Также обязательной является подстановка кодировки, в которой будет отдана страница. Кодировка возвращается функцией

bloginfo('charset');

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

Готовый файл header.php у нас будет выглядеть вот так (показано ниже), там вы сможете увидеть прочие функции и на интуитивном уровне понять что за что отвечает.

Заходим через админку в редактор файла header.php, вставляем код из нужного файла архива mytheme.

footer.php

В этом файле содержится подвал сайта. На нем мы выведем название сайта и год.

Заходим через админку в редактор файла footer.php, вставляем код из нужного файла архива mytheme.

sidebar.php

Теперь давайте реализуем сайдбар, в котором будет выводиться навигация по сайту. Навигацию для простоты понимания, мы будем реализовывать посредствои виджетов.

Заранее приведу готовый sidebar.php, а потом расскажу о нем поподробнее.

<td width="20%" valign="top" id="menu">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?>
Настройте виджеты.
<?php endif; ?>
</td>

PHP код в сайдбаре создает новый блок для виджета под названием «Sidebar» (его мы установим в следующем файле), наполнить его содержимым можно в редакторе тем, в разделе виджеты. Там все должно быть понятно, позже, добавляя виджеты, вы сможете смотреть что именно добавляется на сайте с каждым новым виджетом и понять суть всего происходящего.

Для большей гибкости, навигацию часто делают не посредством виджетов, а посредством следующих функций:

wp_get_archives('type=monthly');
wp_list_pages('title_li=' . ('Страницы:'));
wp_list_categories('title_li=' . __('Категории:'));
wp_meta();

Думаю, вам должно быть интуитивно понятно, какая из функций что выводит.

functions.php

Данный файл содержит функции, которые автоматически подключаются к шаблону, а некоторые WP самостоятельно выполняет перед генерацией страницы.

В сайдбаре мы использовали виджет под названием «Sidebar», теперь необходимо его установить в functions.php. Виджеты устанавливаются функцией register_sidebar, которой в качестве параметры передается массив значений, необходимый для управления отображением блоков.

В нашем случае, чтобы установить виджет, нужно добавить в functions.php следующий код:

<?php
if(function_exists('register_sidebar')) {

	register_sidebar(
		array(
		'name'=>'Sidebar'
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
		)
	);
}
?>

Как видите, мы установили виджет под названием ‘name’=>’Sidebar’, до и после виджета нам не нужно никакого html кода, поэтому следующие 2 значения оставили пустыми, заголовок блока с элементом виджета мы помещаем в теги <h3>, что наглядно продемонстрировано в последних двух значениях.

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

index.php

Этот файл отвечает за вывод того, что пользователь видит на главной странице сайта. Сейчас мы впервые узнаем, как подключать другие шаблоны (шапку, подвал, сайдбар и т.д.). А подключаются другие шаблоны следующим образом:

Подключение шапки header.php:

get_header();

Подключение сайдбара sidebar.php:

get_sidebar();

Подключение подвала footer.php:

get_footer();

Откройте index.php из архива mytheme.

В коде index.php вы увидели некоторые новые функции. Думаю, и без разъяснения понятно, что каждая из них делает и какие параметры ей передаются. Самой важной функцией является

the_content('Читать далее');

В параметре этой функции – надпись, которая выводится в том случае, если содержание записи необходимо обрезать. Описывать остальные функции не считаю нужным, так как должно быть понятно, что, где и как. Главное – понять принцип подключения шаблонов функциями get_***();

archive.php, page.php, single.php

А теперь мы плавно переходим к следующим файлам. Во все файлы, кроме 404.php, style.css и comments.php можно вставить тот же код, что и в index.php. Да, да, тоже самое. Как так? Давайте разберемся. Все станет понятно, когда вы поглубже вникните в php код index.php. Давайте посмотрим, что же там происходит.

Мы видим <?php if (have_posts()) : ?>. Функция have_posts() возвращает true в случае, если записи по существующему критерию существуют, в противном случае возвращается false. Мы также видим, что если WordPress есть что показать, он выполняет цикл <?php while (have_posts()) : the_post(); ?>, в котором он выводит все записи, удовлетворяющий критерию. Например, если пользователь кликнул на категорию «Авто», WP вытаскивает из базы данных все записи этой категории, помещает в have_posts(), а если пользователь кликнул на какую-либо страницу, – WP вытаскивает из базы данных ту самую страницу и также помещает ее в функцию have_posts(), которую мы обходим циклом (в данном случае 1 раз) и выводим.

Если have_posts() вернет false, тоесть если ни 1 записи, подходящей под критерии нет, то отобразится

<h2 align="center">Не найдено</h2><p align="center">Извините, ничего не найдено.</p>

Если посидеть несколько минут и разобрать алгоритм, все встанет на свои места.

Хотя нет, просто код файлов page.php, single.php не полностью соответствует index.php, в эти файлы необходимо также добавить comments_template(); в то место, гле вы хотите видеть комментарии к записи. Эта функция подключает в шаблон comments.php, описанный ниже.

comments.php

Настала пора дать вам возможность самостоятельно разобраться шаблоне. К этому шаблону не будет разъяснений

Дописал через пару месяцев: добавил этот пунктик. Создание comments.php.

404.php

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

style.css

Ну а тут совсем все просто. Здесь пишем таблицы стилей, они будут автоматически подключаться к каждой странице.

Шаг 5.Делаем дополнения и правки.

У вас есть готовая тема, которую вы можете самостоятельно переделать как хотите. Там может что-то не работать, ведь писалась она на скорую руку и особо не тестировалась.

Удачи!

Добавлено неделю спустя: в этом посте (ссылка) описаны почти все функции в WordPress.