Главная » WordPress » Документация Wordpress » wordpress создание шаблона
Распечатать статью

wordpress создание шаблона

Создание шаблона на wordpress не так проста как может показаться, помимо обычной вёрстки в нём могут присутствовать различные теги, которых наберётся больше сотни. В связи с этим можно создать шаблон, который будет иметь множество функций и проверок. Таким образом не смотря что сам процесс создания шаблона довольно трудоёмкий, есть возможность написать код вручную для изменения функций шаблона или же использование родных функций и тегов. Когда я создавал шаблон я нашёл очень скудную информацию, за исключением официального сайта, где толком не описывалось как и что сделать, как и почему работает определённый плагин, как его вызвать, поэтому я написал статью про создание шаблона на wordpress, где написал создание шаблона с комментариями и примерами. Что бы присутствовал необходимый минимум и было понятно как быстро создать шаблон, и в последствии после прочтения статьи вы с лёгкостью создавали шаблоны.

Данный шаблон я делал на версии 3.2.1

Создание страницы 404 читайте отдельно

Демо шаблона

Необходимый набор файлов, структура шаблона.

Шаблон может состоять из 9 — 20 и более файлов, всё зависит от потребностей и нужд. Большинство из них не особо нужны, в любом случае при необходимости шаблон можно расширить функционалом. Посмотреть список всех функций можно на оф сайте.

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

  1. index.php —            Главный файл шаблона, точка входа.
  2. header.php —          Шапка сайта, начало шаблона.
  3. theloop.php —         Основная часть шаблона вывод контента, комментариев.
  4. footer.php —            Футер сайта, завершение шаблона.
  5. functions.php —       Файл для настройки функций шаблона, от виджетов, до настроек в админ панеле.
  6. sidebar.php —         Панель виджетов.
  7. navigation.php —    Файл навигации по архивам и между постами.
  8. searchform.php —   Форма поиска по сайту.
  9. single.php —           Отдельный файл для просмотра статей.
  10. comments.php —    Файл комментариев, не является обязательным, но с ним можно красочно оформить шаблон.
  11. style.css —               Стили для нашего шаблона.
  12. screenshot.png —    Скриншот шаблона.

Структура шаблона wordpress

Что бы вы сами не создавали файлы я подготовил заготовку с пустыми файлами, там заполнено будет только файл style.css и папка с изображениями, а так же исходный шаблон который я сверстал на wordpress.

скачать заготовку              скачать исходный шаблон

Создание стилей шаблона style.css

Начинать мы будем со стилей шаблона, так как через стили в wordpress отображаются параметры шаблона, описание, автор, и.т.д. Я не буду приводить полный код css я приведу необходимое начало, а остальное это стили для построения шаблона. Скачать полный стиль вы можете в заготовке или в конце готовый архив с шаблоном.

Данные значения wordpress выводит в отображении параметров шаблона.

/*  
Theme Name: joomla-umnik
Theme URI: http://joomla-umnik.ru
Description: Практическое руководство по созданию шаблона
Version: 1.0
Author: joomla-umnik
Author URI: http://joomla-umnik.ru
License: GNU/GPLv3
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: Природа, универсальный, тёмный
*/
/*1. Имя автора шаблона 
2. URL адрес шаблона
3. Описание шаблона
4. Версия шаблона
5. Автор шаблона
6. Адрес сайта автора
7. Лицензия шаблона
8. Адрес лицензии, по желанию можно указать текстовый документ и положить его в корень шаблона.
9. Тэги шаблона
Сюда вносится весь css шаблона
*/

Данные шаблона wordpress

Точка входа в шаблон index.php

Основной файл шаблона через него подключаются все остальные файлы, за исключением некоторых файлов, которые wordpress сам подгружает если они есть к примеру comments.php или functions.php. Некоторые файлы вызываются родными параметрами к примеру get_header(); который вызывает header.php или подключением через include. Таким вот способом можно подключать нужные файлы в любом месте шаблона.

<!--Основной файл index.php через который подключаются все остальные файлы шаблона
своего рода точка входа в шаблон-->

<!--Подключение файла header.php get_header(); который по умолчанию идёт как шапка сайта, 
в нём располагаются описание, подключение родных скриптов и стилей-->
<?php get_header(); ?>  

<!--Подключение основного файла который выводит контент, навигацию и всё остальное,
так же можно подключить таким образом любой нужный файл.
-->
<div id="content">
<?php include (TEMPLATEPATH . '/theloop.php'); ?>
</div>

<!-- Файл get_sidebar(); sidebar.php это файл по умолчанию для создания  блоков меню виджетов плагинов,
с ним можно разбить сайт на 2 - 3 блока.

get_footer(); footer.php файл по умолчанию который является футером сайта.
-->

<?php get_footer(); ?>

Шапка шаблона header.php

Этот файл является шапкой сайта. Через него вызываются родные скрипты и стили wordpress, название сайта, параметры, язык. С помощью wp_head(); и wp_footer(); wordpress подключает дополнительные плагины, без них работа шаблона может быть некорректной.

<!--Файл шапки header.php, через него подключаются скрипты, мета теги, названия и.т.д,-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
 /*
 * Вывод тега <title> то что внесено в настройках wordpress.
 */
 global $page, $paged;

 wp_title( '|', true, 'right' );

 // Добавление названия блога
 bloginfo( 'name' );

 // Добавить описание блога для home/front страницы.
 $site_description = get_bloginfo( 'description', 'display' );
 if ( $site_description && ( is_home() || is_front_page() ) )
 echo " | $site_description";

 // Добавить номер страницы, если необходимо:
 if ( $paged >= 2 || $page >= 2 )
 echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );

 ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
 /* Добавление JavaScript на страницы с формой комментариев
 * Для поддержки сайтов с резьбовыми комментарии (если используется).
 */
 if ( is_singular() && get_option( 'thread_comments' ) )
 wp_enqueue_script( 'comment-reply' );

 /* Всегда имейте wp_head () непосредственно перед закрывающим тегом </head>
 * Теги вашей темы, или вы нарушите много плагинов, которые
 * Как правило, используют этот крючок для добавления элементов в таких <head>
 * Какие стили, скрипты, и мета-теги.
 */
 wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="dvmaincontainer">
<div id="dvtopcontainer">
<div id="dvlogocontainer">
<h1>Joomla-umnik</h1>
<h4>Тестовый шаблон wordpress</h4>
</div>
<div id="dvnavicontainer">
<img src="wp-content/themes/joomla-umnik/images/navi_left.jpg" alt="" />
<div id="tabs1" >
<ul>
<li id="current"><a href="#"><span>Домой</span></a></li>
<li><a href="#"><span>Графика</span></a></li>
<li><a href="#"><span>Софт</span></a></li>
<li><a href="#"><span>Блог</span></a></li>
<li><a href="#"><span>Выход</span></a></li>
</ul>
</div>
<img src="wp-content/themes/joomla-umnik/images/navi_right.jpg" alt="" />
</div>
</div>

Основная часть шаблона вывод контента theloop.php

Это вывод содержимого, контента, комментариев, все самого основного в wordpress. Помимо основных необходимых параметров таких как вывод контента, навигации, комментариев, можно вывести виджеты и плагины. К примеру файл sidebar.php подключается вот так get_sidebar(); и таким образом его можно подключить где угодно в шаблоне. Функция вывода блока dynamic_sidebar(2) где 2 это номер блока виджетов, подробнее об этом будет далее в в файле функции, но эту функцию можно вывести где угодно и даже в отдельном файле.

<!--Это основной файл который отображает контент в шаблоне
В него можно поместить любой код, так же можно вывести виджеты-->

<div id="dvbodycontainer">
<div id="dvbannerbgcontainer">
<div>
<div>

<!--Подключение второго блока виджетов-->
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>

</div>
</div>
<div id="dvbanner">
<img src="wp-content/themes/joomla-umnik/images/banner.jpg"  alt="" title=""/>
</div>
</div>
<div id="dvleftpanel">

<!--Выводим виджеты из sidebar.php-->
<?php get_sidebar(); ?>

</div>
<div id="dvrightpanel">
<?php if (have_posts()) :  ?>

<?php /* Подключение навигации между страницами (не показывается на главной и в отдельных постах) */ 
if ( (is_archive()) or (is_search()) or (is_paged()) or (is_category()) ) { 
/* Подключаем файл */
include (TEMPLATEPATH . '/navigation.php'); } 
?>

<?php /* Включаем сам LOOP */
while (have_posts()) : the_post(); 
?>

<?php /* Подключение навигации между постами  (должно быть внутри LOOP'а) */ 
if (is_single()) { include (TEMPLATEPATH . '/navigation.php'); } 
?>

<?php /* сам пост, включает постоянную ссылку, метаданные, счетчик комментариев и текст */ ?>
<div>
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка для <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<p>Опубликовано <?php the_time('F jS, Y') ?>. <?php comments_popup_link('Без комментов', '1 Коммент', '% Комментов'); ?> <?php edit_post_link('Редактировать', '<strong>', '</strong>'); ?></p>

<?php
/*
Самый интересный момент. Здесь при постраничном просмотре архивов или поиске 
включается функция the_excerpt (краткая выдержка из поста).
Но на главной и в отдельном посте, как и полагается полный текст поста с ссылками, картинками и т.д.
*/
?>
<?php if ( (is_archive()) or (is_search()) ) { ?>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php the_content("Читать дальше..."); ?>
<?php } ?>
<?php link_pages('<p><strong>Страницы:</strong> ', '', 'number'); ?>
</div>

<!--
<?php trackback_rdf(); ?>
-->

<?php endwhile; ?>

<?php /* Подключение навигации между страницами (показывается везде и на главной тоже) */ 
if ( (is_home() or is_archive()) or (is_search()) or (is_paged()) or (is_category()) ) { 
include (TEMPLATEPATH . '/navigation.php'); } 
?>

<?php /* в случае ошибки 404 */
else : 
?>

<div>
<h1>Error</h1>
<p>Произошла ошибка. Проверьте правильность запроса.</p>
</div>

<p align="center"><?php include (TEMPLATEPATH . "/searchform.php"); ?></p>

<?php endif; ?>

<!--Выводим комментарии-->
<?php comments_template(); ?>

<div id="righttfoot"> <img src="wp-content/themes/joomla-umnik/images/home_icon.jpg" alt="" title="" />
<p>Вернуться на главную страницу проекта.</p>
<img src="wp-content/themes/joomla-umnik/images/light.jpg" alt="" title="" />
<p>Перейти на блог сайта.</p>
<img src="wp-content/themes/joomla-umnik/images/rpt.jpg" alt="" title="" />
<p>Выйти из аккаунта.</p>
</div>
</div>
</div>

Футер сайта footer.php

Файл завершающий формирование шаблона, так же через него обязательно в конце закрывающего тега body нужно подключить родные функции wordpress wp_footer(); Больше в этом файле ничего особого нет.

<!-- Файл footer.php футер сайта, где располагаются копирайты, счётчики и закрывающие теги шаблона-->
<div id="dvfootercontainer">
<div id="foottop">
<p><span>Copyright © 20012 Joomla-umnik.ru</span> <a href="http://joomla-umnik.ru" title="joomla-umnik">joomla-umnik</a></p>
</div>
</div>
</div>
<?php
/* Всегда имейте wp_footer () непосредственно перед закрывающим тегом </body>
*  Тег вашей темы, или вы нарушите много плагинов, которые
*  Как правило, используют этот крючок для ссылки на JavaScript файлы.
*/
wp_footer();
?>
</body>
</html>

Файл исполнения функций части сайта и административной части functions.php

Этот файл необходим для вызова блоков виджетов, в нём можно создать настройки для шаблона, написать свои функции или же создать свой плагин. Спектр возможности этого файла широк, wordpress сам подгружает этот файл если он есть в шаблоне. В данном примере мы подключаем 2 блока виджетов, задаём им имена и помещаем в массив. Что бы вызвать второй виджет нам достаточно прописать его номер dynamic_sidebar(2). После написания данной функции в админке появляется меню и виджеты которые можно поместить в блок для вывода на сайт.

<?php
// Файл functions.php wordpress подключает автоматически если он присутствует в шаблоне,
// С помощье него подключаются блоки виджетов, которые можно разместить в любом месте шаблона
// Так же туда можно добавить настройки самого шаблона через админку, вообще этот файл работает как в админке
// так и на сайте. В нём можно даже написать плагин. Своего рода это сборник функций шаблона.

// Вывод первого виджета, для удобства мы каждому виджету дадим имя
// Таких блоков можно написать сколько угодно, и после вызвать в любом месте.
// name - имя
// before_widget - то, что мы выводим непосредственно перед каждым виджетом в нашем сайдбаре.
// after_widget - после виджета.
// before_title - перед заголовком виджета.
// after_title - после заголовка виджета.

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Колонка для сайдбара',
'before_widget' => '<div id="leftfoot">',
'after_widget' => '</div><br><br><br><br>',
'before_title' => '',
'after_title' => '',
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Колонка для футера',
'before_widget' => '',
'after_widget' => '<br><br>',
'before_title' => '',
'after_title' => '',
));
?>

Блок для виджетов sidebar.php

Файл который можно вызвать родным способом wordpress get_sidebar(); идеально подойдёт для 2 колонного шаблона, но я уверен что одним таким файлом вы обойтись не сможете. Вообще этот файл нужен для вывода виджетов, но не обязательно его создавать так как виджеты можно вывести в любой файл, это сделано для удобства, для разделения кода.

<!--sidebar.php Файл по умолчанию подключается в index.php  get_sidebar(); 
это блок для виджетов. В котором можно оформить виджеты, не обязательно
использовать этот файл, он нужен для отделения кода и удобства редактирования,
данный код можно вывести в любом месте шаблона-->

<!--Первая строка это начало области размещения виджетов-->
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<!--А вторая строка конец области размещения-->
<?php endif; ?>

Навигация на сайте navigation.php

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

<?php 
/* навигационные ссылки в посте, показываются ссылки на следующий и предыдущий пост от того, в котором находимся в данный момент */
if (is_single()) { ?>
<div>
<div><?php previous_post('&laquo; %','','yes') ?></div>
<div><?php next_post(' % &raquo;','','yes') ?></div>
<div></div>
</div>
<?php } else { 
/* или же показывать ссылки навигации между страницами, будь-то в архивах или просмотр отдельных категорий */
?>
<div><br><center>
<div><?php posts_nav_link('','← Предыдущие записи','') ?></div></center>
<div></div>
</div>
<?php } ?>

Поиск по сайту searchform.php

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

<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>" style="margin: 0;">

<p><input style="width: 97%; " type="text" value="введите запрос" name="s" id="s" onfocus="if (this.value == 'введите запрос') {this.value = '';}" onblur="if (this.value == '') {this.value = 'введите запрос';}" /></p>

<input type="submit" id="searchsubmit" style="display: none;" value="Search" />
</form>

Файл для отдельной статьи single.php

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

<?php get_header(); ?>  

<div id="content">
<?php include (TEMPLATEPATH . '/theloop.php'); ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Комментарии, вывод и оформление comments.php

Файл комментариев, вообще его можно и не создавать, достаточно подключить comments_template(); но вид будет у них не самый лучший. Поэтому правильно будет сделать этот файл и оформить комментарии. Так же стандартного решения по комментариям нет с ними можно творить что угодно, это лишь небольшое оформление. А так можно сделать разные проверки, условия при которых будет формироваться данный код. Я данный файл оформил для наглядности.

<!--Файл для комментариев. Вообще этот файл можно и не создавать
комментарии сформируются автоматически, но для оформления комментариев
лучше создать отдельный файл-->

<div id="comnum"><?php comments_number('Нет комментариев', '1 комментарий', 'Комментариев: % '); ?> </div>
<?php if ( $comments ) : ?>
<ol id="comlist">
<?php foreach ($comments as $comment) : ?>
<li id="comment-<?php comment_ID() ?>">
Автор: <?php comment_author_link(); ?> (<?php comment_date(); ?> в <?php comment_time(); ?>) <br />
<?php echo get_avatar($comment, 32); ?>

<div>
<span></span><span></span><span></span>
<div><table><tr><td>
<?php comment_text(); ?>
</td></tr></table>
</div>
<span></span><span></span><span></span>
</div><br>
</li>
<?php endforeach; ?>
</ol>
<?php endif; ?>

<?php if ( comments_open() ) :  //Если комментирование разрешено ?>
<?php if ( get_option( 'comment_registration' ) && !$user_ID) : //Если разрешено только для зареганных юзеров ?>
<p>Вы должны <a href="/wp-login.php">представиться</a> для оставления комментариев.</p>
<?php else : // Если разрешено для всех юзеров ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">
<?php if ( !$user_ID ) : //Выводим три поля для гостей ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Имя</small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>E-mail</small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url">Сайт</small></label></p>

<?php endif; // Конец Выводим три поля для гостей ?>
<p><textarea name="comment" id="comment" rows="8" cols="50"></textarea></p>
<p><input name="submit" type="submit" value="Отправить" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
</form>

<?php endif; //Конец Если разрешено для всех юзеров?>
<?php endif;  //Конец Если комментирование разрешено ?>

И последнее что Вам нужно сделать это скриншот шаблона, и дать ему имя screenshot.png после чего картинка отобразится в меню, размер картинки по вашему усмотрению.

Создание страницы 404 читайте отдельно

Подводя итог! Лично моё мнение что создание шаблона на wordpress гораздо проблемнее чем я ожидал, так как в нём нет какого то одного стандарта, один шаблон от другого может очень сильно отличаться по структуре и коду. Мне потребовалось на шаблон 1 день, но не просто сделать, а понять как вся эта структура работает. Так что помимо вёрстки Вам может потребоваться сделать какую либо проверку или вызвать функцию, но в целом выбор действий очень большой хоть и имеет ряд минусов.

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

Источник: joomla-umnik.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи