Создание простейшей темы WordPress

Создание своей темы оформления для CMS WordPress - это несложный процесс. Для работы простейшей темы нужны всего два файла. Первый файл - "index.php", который отвечает за вывод содержимого страницы. Второй файл - "style.css", который содержит стили темы.

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

Для начала необходимо создать папку внутри директории "/wp-content/themes/". Название этой папки лучше связанное с названием нашей будущей темы, к примеру "/wp-content/themes/mytheme". Создайте такую папку.

Перейдите в только что добавленную папку и создайте в ней два файла с именами: index.php и style.css

Приступим к созданию темы с файла style.css. В этом файле содержится не только CSS код для оформления темы, но и информация о создателе темы, её названии и так далее. Напишите в этот файл следующий код:

/**
* Theme Name: Моя тема
* Author: MouseDC
*/
body {
   max-width: 800px;
   margin: 200px auto;
}
.header, .footer, .content {
   margin: 50px 0;
   text-align: center;
}

Обратите внимание на комментарии в начале файла. Эти комментарии описывают тему. Запись идёт в виде ключ (двоеточие) значение. Поле "Theme Name" является обязательным. Но так же существуют и другие поля:

/**
 * Theme Name:   Название темы
 * Theme URI:   Полная ссылка на страницу с описанием темы (к примеру, на сайте wordpress.org) 
 * Author:   Имя автора темы
 * Author URI:   Полная ссылка на сайт автора темы
 * Description:   Короткое описание темы. 
 * License:   Лицензия. Пример: "GNU General Public License 3.0"
 * License URI: Полная ссылка на. Пример: http://www.gnu.org/licenses/gpl-3.0.html
 * Tags:   Теги, по которым тему можно будет найти в каталоге WordPress. К примеру: white, mouse, yellow, cheese, grey
 * Version:     Версия темы. К примеру: 2.1.5
 */

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="<?php bloginfo('charset'); ?>">
      <title><?php echo wp_get_document_title(); ?></title>
      <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
      <?php wp_head(); ?>
   </head>
   <body>
      <header class="header">
         <h1><?php bloginfo( 'name' ); ?></h1>
         <h2><?php bloginfo( 'description' ); ?></h2>
      </header>
      <div class="content">
         <?php
            // вывод записей, если найдены
            if ( have_posts() ){
               while ( have_posts() ){
                  the_post();
                  echo '<h3><a href="'. get_permalink() .'">'. get_the_title() .'</a></h3>';
                  echo get_the_excerpt();
               }
            }else{
               echo '<p>Не найдено ни одной публикации...</p>';
            }
            ?>
      </div>
      <footer class="footer">
         Автор сайта - MouseDC.ru
      </footer>
      <?php wp_footer(); ?>
   </body>
</html>

Теперь пройдёмся по функциям из примера:

bloginfo('charset') отображает кодировку, в которой работает блог.
wp_get_document_title() - возвращает Title документа. На титульной странице это название блога. На странице с разделом - название раздела. На странице с детальным просмотром публикации - название публикации.
get_stylesheet_uri() - возвращает адрес файла style.css
wp_head() - выводит оставшиеся мета теги, служебные скрипты и ссылки на файлы. Эта функция вызывается всегда перед закрывающейся "</head>"
have_posts() - проверяет есть ли записи в текущей выборке
the_post() - распечатывает текущую запись
get_permalink() - печатает постоянную ссылку на публикацию
get_the_title() - печатает название публикации
wp_footer - печатает служебные скрипты. Эта функция вызывается всегда перед закрывающимся "</body>"

Если функция начинается с префикса "the_", то она выводит результат на страницу, распечатывает его. А если начинается с префикса "get_", то только возвращает значение.

Наша мини-тема готова. Осталось перейти в панель управления и активировать её. Для этого заходим в закладку "Внешний вид" - "Темы" и нажимаем "Активировать" напротив нашей темы. В целом, наш сайт готов. Конечно, в таком виде его практически невозможно использовать, но описанной информации должно хватить для понимания основ создания темы для WordPress.