Создание темы для WordPress
Представляем Вашему вниманию краткий мануал о том, как самостоятельно создать тему для ставшего многим любимым движка WordPress. Мне недавно приснился сон как я создаю тему под WordPress, но у меня ничего не получается, хотя все этапы мне знакомы, поэтому когда я проснулся решил написать эту статью. Позднее я посмотрел сонник, но к чему был этот сон я так и не по 🙂
Итак, чтобы создать тему, нужно сделать следующие шаги:
1. Понять как там чего где подключается, что за что отвечает и из чего(каких файлов) вообще состоит тема.
2. Создать платформу, площадку для будущей темы - пустые файлы в папке с названием темы.
3. Узнать все команды WP. В шаблонах почти все действия (вывод рубрик, меток, содержания и т.д.) выполняются посредством встроенных в WP PHP функций.
4. Постепенно наполнять файлы, шаг за шагом.
5. Смотреть, что получилось, делать многочисленные правки и устранять баги.
А теперь о каждом шаге поподробней. Перед тем, как читать дальнейший материал, заранее скачайте тему: mytheme. Данная тема не содержит ничего лишнего.
Шаг 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()) : ?> возвращает 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
На первых порах лучше всегда использовать стандартную форму комметариев, по этому возьмите ее из архива mytheme.
404.php
Этот файл подключается, если пользователь пришел на что-то несуществующее, например, несуществующую категориию. Сюда просто пишем любое сообщение об ошибке, если есть желание, старыми способами подключаем шапку, подвал и прочие части темы. Данный файл не обязателен!
style.css
Ну а тут совсем все просто. Здесь пишем таблицы стилей, они будут автоматически подключаться к каждой странице.
Шаг 5. Делаем дополнения и правки.
У вас есть готовая тема, которую вы можете самостоятельно переделывать и доделывать как хотите.
Источник: Блог вебмастера php.name
Предыдущие записи из рубрики `Учебник WordPress`
10 комментариев
eee, 12.12.2009 в 15:27 Короче это на новичков не расчитанно, а на кого расчитанно, тот и без этой статьи тему себе сделает, у меня не получилось.
побольше бы кода нормального, который скопировать и вставить, например заместо
wp_get_archives('type=monthly');
wp_list_pages('title_li=' . ('Страницы:'));
wp_list_categories('title_li=' . __('Категории:'));
wp_meta();
написать как это в шаблоне смотрится и это скорее пожелания чем что то еще автору блога.
я то щас полазаю да нарою себе нормальное описание как темы делать, но вот сколько нще народу тут файлов насоздает по этому описанию, которые потом никуда не прилепить это мне не известно, но скорее всего очень много, поэтому АВТОР пожалуйста распишите подробно как что и куда и где все таки взять этот function.php если он пуст в папке сайта? =)
eee, 14.12.2009 в 17:32 http://ruseller.com/lessons.php?rub=40&id=482
по ней получилось почемуто )
да я и ничего такого о том кто и что, я к тому что хорошобыт как то оформлять подоходчивее, а блог тут прикольный и нужный вверху ссылка которая мне понравилась ствтья
Andrew, 17.12.2009 в 01:34 вопросик по проще:
при создании указанного шаблона файлов, в папке с названием mythem ворд пресс выдает сообщение что шаблон поврежден и не дает его активировать/редактировать.
Что делать?
Александр, 08.01.2011 в 15:58 Не пробовали Artisteer 3.1?
Быстро, просто и качественно создает шаблон для некоторых СМС и просто в коде.
Елена, 19.07.2011 в 19:09 Я - чайник. Я не знаю даже, как создавать файл. Я не очень поняла статью.
Сергей, 24.07.2011 в 15:28 Скажите пожалуйста, как сделать в самом -самом низу сайта надпись Разрешается публикация материалов сайта с указанием активной, индексируемой ссылки
Если можно поподробнее.
С уважением, Сергей
kama, 25.07.2011 в 02:20 Сергей, откройте файл footer.php и в нужное место впишите этот текст.
Сергей, 25.07.2011 в 07:51 Вопрос к Kama и не только.
Цитирую "и в нужное место впишите этот текст".
Нельзя ли поподробнее?
Александр, 10.07.2013 в 22:10 Спасибо, хорошая статья.
eee, ну во первых эту инструкцию написал не я, как указано выше, автор инструкции - "Блог вебмастера php.name", во вторых опубликовал ее я т.к. считаю что в ней вполне доступно все описано, есть файл с примером на который также стоит обратить внимание... Например про тот же файл function.php в начале статьи написано - "данный файл не обязателен".
Если Вы найдете инструкцию по лучше и кинете на нее ссылочку, буду рад ее опубликовать...