Метóда создания шаблона или как сделать свой сайт совсем своим

Сразу хочу предупредить, что это перепечатка и ссылка на автора есть ниже. Кому-то, особенно “нетехнарю” этот материал может показаться сложным, но все таки попробуйте разобраться. А если разберетесь, то ваш электронный дневник станет поистине вашим.

Введение

Этот ebook предназначен для тех, кто занимается созданием тем или хочет сделать свой шаблон для WordPress. Есть обычный стандартный подход, по которому делается основная масса шаблонов, но он, на мой взгляд не очень практичен и отнимает больше времени, чем должен. Поэтому, я начал изучать более глубоко данную тему и, просмотря множество шаблонов и использовав разные способы при вертске этих шаблонов, я нашел для себя один очень удобный и практичный способ.

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

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

Файлы шаблона. Структура

Файлы в своем шаблоне WordPress я разделяю на 3 части: основные (1), файлы архивов, поиска и страниц (2) и универсальные файлы (3). Первая часть файлов является по сути составляющей всего шаблона, вторая часть нужна для навигации и вообщем-то опциональна (зависит от блога, сайта), а вот третья часть является самим “движком” шаблона. Ниже я привожу полный список всего, что нам понадобиться в дальнейшем. Не пугайтесь количества файлов — это нормально и Вы будете приятно удивлены во второй половине руководства.

1. Основные файлы шаблона:

• style.css — стиль оформления, сюда пишем весь css-код;
• header.php — “шапка”, то с чего начинается ваш шаблон;
• index.php — главный файл шаблона;
• single.php — файл каждого отдельного поста;
• comments.php — шаблон комментариев;
• sidebar.php — боковая панель;
• footer.php — “подвал”, который заканчивает ваш шаблон;

2. Файлы архивов, поиска и страниц:

• archive.php — файл просмотра постраничных архивов (навигационный, стр.1,2,3…);
• 404.php — ошибка 404;
• search.php — результаты поиска;
• page.php — шаблон статической страницы;

3. Универсальные файлы (за счет этих и получаем практичность верстки):

• navigation.php — файл с ссылками навигации по архивам и между постами;
• searchform.php — форма поиска, которую можно подключить где угодно;
• theloop.php – LOOP всего темплэйта, движок шаблона так сказать.

Строим шаблон. Универсальные файлы

Строение нашего шаблона я начну со стиля оформления (базовый css) и универсальных файлов, потому что они являются ключевыми во всем шаблоне. Также по ходу дела, рассказывая что и куда нужно подключать. Все необходимые комментарии приводятся прямо в листинге php-кода.

Создаем файл style.css:

/*   
Theme Name: MyBeautifulTheme
Theme URI: http://waksoft.16mb.com
Description: Practical theme from waksoft
Version: 1.0 
Author: waksoft
Author URI: http://waksoft.16mb.com
*/ 

Листинг 1. Файл style.css

Эти строки должны быть самыми первыми в файле. По этим строкам распознается Ваш шаблон в панели администрировани. Ниже можете написать любой css, как Вам угодно. Рекомендую взглянуть на CSS Garden для вдохновления.

Теперь приступим к более сложной задаче – написание LOOP WordPress. Файл theloop.php – полный листинг с комментариями и описаниями внутри:

<?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 class="entry"> 
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка для <?php 
the_title(); ?>"><?php the_title(); ?></a></h1> 
<p class="postmetadata">Опубликовано <?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 class="entry"> 
<h1>Error</h1> 
<p>Произошла ошибка. Проверьте правильность запроса.</p> 
</div> 
 
<p align="center"><?php include (TEMPLATEPATH . "/searchform.php"); ?></p> 
 
 
<?php endif; ?> 

Листинг 2. Файл theloop.php

Удобно, не правда ли? Теперь нам нужно будет подключить его везде, где это нужно. Делается это в одну строку кода. Для начала взгляните как подключаются “header”, “sidebar” и “footer”, чтобы в дальнейшем не возникало вопроса “откуда это взялось”. На подключение этих трех модулей шаблона есть 3 нужные нам WordPress функции:

<?php get_header(); ?> — подключение файла header.php 
<?php get_sidebar(); ?> — подключение файла sidebar.php 
<?php get_footer(); ?> — подключение файла footer.php 

Листинг 3. Подключение модулей

А вот следующая строка, позволит включить в любом месте любой файл из папки Вашего шаблона, например theloop.php:

<?php include (TEMPLATEPATH . '/theloop.php'); ?> 

Листинг 4. Пример включения в шаблон другого файла

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

• index.php;
• archive.php;
• 404.php;
• search.php;
• page.php

И добавте в них такой код:

<?php get_header(); ?>   
<div id=”content”> 
<?php include (TEMPLATEPATH . '/theloop.php'); ?> 
</div> 
<?php get_sidebar(); ?> 
<?php get_footer(); ?>   

Листинг 5. Структура шаблона

Не забывайте, что у нас есть еще файл навигации, который тоже должен быть универсальный и понимать когда какие ссылки показывать:

<?php  
/* навигационные ссылки в посте, показываются ссылки на следующий и предыдущий пост от того, в 
котором находимся в данный момент */ 
if (is_single()) { ?> 
<div class="navigation"> 
  <div class="alignleft"><?php previous_post('< %','','yes') ?></div> 
  <div class="alignright"><?php next_post(' % >','','yes') ?></div> 
  <div class="clear"></div> 
</div> 
<?php } else {  
/* или же показывать ссылки навигации между страницами, будь-то в архивах или просмотр отдельных 
категорий */ 
?> 
<div class="navigation"> 
  <div class="alignleft"><?php posts_nav_link('','','< Назад') ?></div> 
  <div class="alignright"><?php posts_nav_link('','Вперёд >','') ?></div> 
  <div class="clear"></div> 
</div> 
<?php } ?> 

Листинг 7. Навигация, navigation.php

Теперь LOOP включен почти во все нужные места шаблона и в дальнейшем он сам будет определять, что и где нужно вывести и показать. Но у нас остался еще single.php и комментарии. Здесь все точно также, только добавляется вызов шаблона комментариев (comments.php):

<?php get_header(); ?>   
<div id=”content”> 
<?php include (TEMPLATEPATH . '/theloop.php'); ?> 
 
<?php comments_template(); ?> 
</div> 
<?php get_sidebar(); ?> 
<?php get_footer(); ?>  

Листинг 6. Отдельный пост и включение шаблона комментариев

В качестве дополнения.

Видете как все просто и сколько времени мы сэкономили? Я уже предвижу пару очевидных вопросов, поэтому и продолжу раскрывать тему полностью.

1) Как подключить форму поиска?

Точно также как и LOOP, в листинге 4: А сама форма поиска может иметь такой вид:

<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> 

Листинг 8. Пример формы поиска (searchform.php)

2) Как быть, если нужно подключать дополнительные фичи в LOOP только для отдельного поста?

Для этого нужно использовать функцию is_single();. Вспомните подключение навигации между постами в LOOP (листинг 2). Эту функцию не обязательно использовать именно внутри LOOP.

3) Как показать что-то только на главной странице?

Пример:

<?php  
  if ( (is_home()) && !(is_page()) && !(is_single()) && !(is_search()) && !(is_archive()) && 
!(is_author()) && !(is_category()) && !(is_paged()) ) { ?>  
 
  Это увидят только на главной странице блога 
 
<?php } ?> 

Листинг 9. Показать только на главной странице блога

Подводя итог

Как Вы видете, все оказалось очень просто и компактно. Взгляните на общий размер шаблона (без графики и CSS) – это считанные килобайты. Плюсы этого метода очевидны:

• компактность;
• практичность;
• удобство;
• универсальность.

Применяя этот метод, Вы можете создавать шаблоны любой сложности. В мануале я использовал только базовые функции WordPress, поэтому этот шаблон будет работать на любой версии движка. Чтобы создать более интересный и навороченный шаблон, Вам стоит ознакомиться с WordPress Codex, где в подброностях описаны все template tags и есть множество примеров.

Полезные ссылки:

• codex.wordpress.org/ — WordPress Codex, база данных WordPress;
• https://codex.wordpress.org/Иерархия_шаблонов
• mywordpress.ru/ — русский WordPress;
• www.csszengarden.com/ — огромное количество примеров css-based сайтов;
• habrahabr.ru/post/156747/ — 30 CSS-фреймворков для адаптивного веб-дизайна;
• socialcompare.com/en/comparison/css-grids-amp-responsive-frameworks-comparison — CSS Grids & Responsive Frameworks Comparison;

Метóда создания шаблона или как сделать свой сайт совсем своим, опубликовано Вадим В. Костерин, лицензия — Creative Commons Attribution-ShareAlike 4.0 International.