Есть две возможности для создания тем WordPress. Самый простой и доступный вариант – это создание дочерней темы для уже существующей. Для этого необходимо создать в обязательном порядке всего один файл – style.css, в котором располагаются стили дочерней темы. WordPress поддерживает создание дочерних тем. Файл functons.php дочерней темы загружается раньше, чем основной, а это значит, что дочерняя тема может перезаписывать функции основной темы, кроме того основная тема может объявлять хуки WordPress, которыми будут пользоваться дочерние темы. Любой файл-шаблон основной темы может быть переобъявлен в дочерней теме и тогда подгружаться будет именно он, а те файлы, которые мы не создаем, берутся из шаблона основной темы. Это очень удобно, потому что у нас уже есть работающий сайт и мы можем изменять только дизайн по своему вкусу и добавлять функциональность, не нарушая общую структуру и работу темы WordPress. Таким образом можно создавать темы, отличные по внешнему виду, но имеющие всю функциональность основной, очень быстро и без затрат лишнего времени. Во втором случае мы можем создать свою тему WordPress с нуля, именно об этом написана эта статья. Файлы шаблона WordPress условно можно разделить на три категории:
- Файлы стилей css и JavaScript файлы.
- Файлы шаблонов php.
- Файл functions.php.
Файлы стилей будут определять внешний вид сайта, js файлы добавляют динамику для страниц. Файлы шаблонов подчиняются иерархии, заданной WordPress, и служат для отображения разных частей сайт, например, можно создать отдельный шаблон для отображения записей, страниц, архивов записей, меток и так далее. В самом упрощенном случае сайт может состоять из двух файлов: основного файла стилей style.css и шаблона index.php, который будет отвечать за отображение всех страниц. Если мы добавим шаблон с именем page.php (это зарезервированное название), то при отображении страниц WordPress воспользуется именно этим шаблоном, а для записей и других страниц будет по-прежнему использовать index.php. Далее мы можем добавить шаблон для записей single.php и для категорий category.php и вот таким образом происходит сознание шаблонов для различных частей сайта. Эти названия я конечно же не придумываю, все они присутствуют в структуре WordPress и подчиняются правилам иерархии: когда WordPress хочет отобразить страницу, то сначала он ищет файл с название page.php, не найдя его, подчиняясь иерархии, он ищет следующий подходящий файл. В корне иерархии для всех страниц находится шаблон index.php. Третий тип файлов – functions.php ведет себя во многом как плагин, он подгружается всякий раз при открытии страницы сайта или административной панели WordPress. Этот файл так же может быть логически разделен на отдельные составляющие. Например, в стандартных темах есть отдельные файлы для отображения встроенных в тему виджетов, шапки сайта, настроек превью WordPress. Так же стоит иметь ввиду, что стандартные темы, которые включены в дистрибутив WordPress, обладают широкой функциональностью и могут быть использованы как пример и шаблон для изучения WordPress и создания своих тем почти с нуля, это пример хорошего тона программирования для WordPress, которому желательно придерживаться.
Простейший шаблон WordPress: создание темы WordPress с нуля
Здесь я опишу как создать тему WordPress, состоящую всего из двух файлов. Подразумевается, что Вы уже знакомы с WordPress немного.
1. Файл style.css
В этом файле нам необходимо заполнить шапку, указав уникальное название темы, описание, имя автора, сайт темы и сайт автора, а так же указать, что тема лицензирована GPL лицензией. Эта информация будет отображаться при установке темы в админке WordPress и использоваться при поиске темы в базе данных WordPress, когда мы ее туда добавим. К названию сайт WordPress.org предъявляет свои требования, кроме того, что оно должно быть уникальным, оно не должно включать слова WordPress, theme и разный SEO спам. Вообщем, название должно быть нормальным и уникальным и может включать слово wp. Кстати, я пишу WordPress именно так не случайно, везде в теме это слово должно звучать правильно, никаких сокращений и маленьких букв, это копирайт и поэтому, из уважения к WordPress, оба слова написаны с большой буквы, если Вы любите WordPress, то я предлагаю Вам всегда делать тоже самое. Минимально необходимый файл css состоит из одного описания, выглядит это примерно так:
/*
Theme Name: Simplest Site
Theme URI: //ILoveWordPress.ru/
Author: Layka
Author URI: //ILoveWordPress.ru/
Description: The 2014 simplest theme for WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: //www.gnu.org/licenses/gpl-2.0.html
Tags: black
Text Domain: simplestsite
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/2. Файл index. php
Продолжим создание темы для WordPress, нам нужно заполнить основной файл шаблона. В этом файле у нас будет находиться вся тема WordPress: шапка, подвал, подгрузка стилей, цикл WordPress, меню, навигация по записям, списки рубрик и меток, форма поиска и многое другое. Давайте по порядку, в начале файла index.php размещен комментарий, объявление доктайпа и инструкции для ie браузеров:
<?php
/**
* Файл Index.php
*
* Отображает страницы сайта, работающего на WordPress
*
* @package WordPress
* @subpackage Simplest_Site
* @since Simples Site 1.0
*/
?><
!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
Далее объявление секции head, внутри которой размещена служебная информация, мета теги, стили css (функция get_stylesheet_uri() возвращает url адрес нашего файла style.css) и в конце секции включен обязательный WordPress хук wp_head:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="//gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel='stylesheet' id='main-style' href='<?php echo get_stylesheet_uri(); ?>' type='text/css' media='all' />
<?php wp_head(); ?>
</head>Дальше открывается тело сайта тегом body, мы выводим в шаблон название сайта, форму поиска и меню:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<!-- Шапка -->
<header id="masthead" class="site-header" role="banner">
<!-- Название сайта -->
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<!--Форма поиска -->
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
<!-- Меню -->
<nav id="primary-navigation" class="site-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
</header><!-- #masthead -->Далее контент сайта выводится в основном цикле WordPress:
<div class="site-content">
<!-- Начало цикла WordPress -->
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>К основному контейнеру контента мы цепляем все классы текущей записи или страницы функцией post_class():
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>Если это избранная запись, то выделяем это:
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<div class="featured-post">
<?php _e( 'Избранная запись', '' ); ?>
</div>
<?php endif; ?>Если это запись или страница, то просто выводим заголовок, иначе это некий архив, тогда выведем заголовок в виде ссылки:
<?php if ( is_single() || is_page() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>
<h1 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo get_the_title(); ?></a>
</h1>
<?php endif; ?>Под заголовком покажем список всех категорий текущей записи и список всех меток:
<?php echo get_the_category_list(); ?>
<?php echo get_the_tag_list('', ', ');?>
</header><!-- .entry-header -->Если это результаты поиска, то отобразим только краткое описание записи:
<?php if ( is_search() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->Если это обычная страница, то отобразим контент целиком. Функция the_content выведет содержимое страницы, а под ней покажем навигацию, если эта страница состоит из нескольких частей.
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Читатать дальше.. <span class="meta-nav">→</span>', '' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'P:', '' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>Под контентом выводим дату и автора, а так же ссылку на редактирование для зарегистрированного пользователя с правами на изменение записи:
<footer class="entry-meta">
<?php printf(
__( 'Эта запись была опубликована %1$s автором %2$s.', '' ),
esc_html( get_the_date() ),
esc_html( get_the_author() )
);
?>
<?php edit_post_link( __( 'Редактировать', '' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->На этом цикл WordPress по выводу страницы заканчивается:
</article><!-- #post -->
<?php endwhile; ?>
<!-- Конец цикла WordPress -->Теперь внизу страницы прямо под контентом покажем навигацию к следующей и предыдущей записям:
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="nav-below">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Предыдущая запись', '' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'следующая запись <span class="meta-nav">→</span>', '' ) ); ?></div>
</nav><!-- #nav-below .navigation -->
<?php endif; ?>Далее идет кусочек кода, который предназначен для того случая, когда не найдены записи для отображения. То есть, на сайте нет ни одной записи или результаты поиска оказались пустыми, я не буду его сюда копировать, но он есть в исходном файле самой простейшей темы WordPress, который можно скачать в конце статьи. Ну и заканчивается файл темы объявлением подвала и традиционной ссылкой на официальный сайт WordPress.org, а перед закрывающим тегом </body> идет обязательное объявление WordPress хука wp_footer, если эти два хука (wp_head и wp_footer) не объявить, то большинство плагинов не сможет работать с сайтом, на котором установлена тема, а если Вы не знаете, что такое хуки WordPress, то прочитайте об этом по ссылке обязательно, потому что создавать темы WordPress с нуля без этого никак не удастся, ведь фильтры и действия являются основным механизмом работы WordPress. А вот и заключительный код шаблона сайта:
<!-- Подвал сайта -->
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( '//wordpress.org/', '' ) ); ?>"><?php printf( __( 'Сайт работает на %s', '' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>Я добавила немного css кода в файл style.css, чтобы придать его внешнему виду логическую структуру и в результате получился вот такой шаблон WordPress:
У нас получился простой резиновый шаблон сайта. Слева колонка с названием сайта, формой поиска и меню, справа отображается контент, а внизу подвал с надписью о WordPress.
Скачать простейший шаблон WordPress
Созданная Тема WordPress находится по этой ссылке. Архив состоит из трех файлов, к уже упомянутым ранее style.css и index.php я добавила скриншот сайта screenshot.png, его размер 880 на 660 пикселей – это рекомендуемое значение для скриншота и называться этот файл должен screenshot.png, чтобы WordPress мог распознать его и отображать в админке при выборе темы.
Чего в простейшем шаблоне WordPress нет
А теперь я перечислю, чего здесь не хватает. Это не является полным списком, просто то, что приходит сразу на ум. Простейший шаблон темы не поддерживает:
- Произвольный заголовок (в WordPress есть опция для подключения пользователем баннера, чтобы он мог сделать свой сайт уникальным);
- Миниатюру записи;
- Сайдбары для виджетов;
- Соответственно, виджеты;
- Произвольные таксономии;
- Произвольный фон;
- Дополнительные шрифты Google;
- Дополнительные настройки живого превью сайта;
- Переменная $content_width не задана;
- Перевод темы на другие языки;
- RSS;
- Иерархические меню;
- Всевозможные форматы для записей;
- Уникальные шаблоны для разных страниц.
Все выше перечисленное как и многое другое можно добавлять в шаблон WordPress, чтобы сделать его красивым, многофункциональным и дружественным к пользователю. Вместе с WordPress можно создавать шаблоны с большим количеством опций и настроек, что дает возможность пользователям этих тем настраивать свои блоги и сайты не используя css/html/php редактирование, делает WordPress простым и доступным для широкой аудитории, поэтому более 60 миллионов человек пользуются WordPress, а сама система CMS разрабатывается несколькими сотнями добровольцев и волонтеров на добровольной основе, любой желающий может помочь развитию WordPress, создав свой шаблон и разместив его на официальном сайте и вы можете стать одним из них. Примечание: данный шаблон Simplest Site не является законченным, style.css необходимо дополнить описанием стилей всех тегов.
Далее…
Добавим в новую тему шаблоны шапки, подвала, контента, записи, страницы и комментариев, чтобы он выглядел более понятно и привычно. Затем добавим файл functions.php для подключения дополнительных функций. А пока на этом закончим.