Создаем тему или шаблон для WordPress

Опубликовано 12.11.2017

Создание темы WordPress с нуля

У множества начинающих разработчиков на WordPress появляется вопрос о том как создать тему или шаблон для WordPress с нуля? Это может быть необходимо, если вы хотите создать сайт компании с уникальным дизайном и архитектурой. И хотя процесс создания простой темы WordPress не является слишком сложным, в этой статье мы соберем воедино все аспекты и сделаем простую тему для WordPress с нуля. Сначала мы пройдемся по требованиям и стандартам разработки тем, а затем перейдем к практике и создадим свой шаблон.

Стандарты разработки тем

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

  1. Используйте хорошо структурированный, безошибочный PHP и валидный HTML.
  2. Используйте чистый, валидный CSS.
  3. Следуйте рекомендациям по разработке дизайна и макета сайта.

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

Анатомия темы WordPress

Темы WordPress размещаются в подкаталогах директории wp-content/themes/. Подкаталог самой темы содержит все файлы таблицы стилей, файлы шаблонов и файлы дополнительных функций functions.php, файлы JavaScript и изображения. Например, тема с именем «test» будет находиться в каталоге wp-content/themes/test/. Избегайте использования номеров для имени темы, так как это помешает ее отображению в списке доступных тем.

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

  • Таблица стилей style.css, которая управляет внешним видом макетов страниц веб-сайта
  • Файлы шаблонов WordPress, которые управляют тем, как страницы сайта генерируют информацию из базы данных WordPress
  • Файл дополнительных функций functions.php

Далее рассмотрим каждый из этих пунктов и перейдем к создание темы на практике.

Создание темы для WordPress

Создайте таблицу стилей style.css

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

Теперь нам необходимо создать в этом каталоге файл стилей style.css, который будет отвечать за дизайн нашей темы, а также предоставит WordPress некоторую информацию о самой теме, в начало только что созданного файла style.css необходимо включить следующее содержимое:

/*
Theme Name: My Theme
Author: Your Name
Author URI: http://yoursite.com/
Version: 1.0
Text Domain: mytheme
*/

Theme Name это наименование вашей темы; Author это имя или компания разработчик темы; Author URI это, соответственно, адрес сайта разработчика темы; Version — версия темы, это будет важно, чтобы не запутаться в обновлениях; Text Domain это обычно наименование каталога в котором вы создали файл style.css, хотя может и отличаться, Text Domain используется для локализации темы и в целом его можно пропустить.

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

Создание functions.php

Создайте в той же директории файл functions.php и пропишите в нем следующее:

function mytheme_scripts() {
 wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

function mytheme_setup() {
 add_theme_support( 'post-thumbnails' );
 add_theme_support( 'title-tag' );
 register_nav_menus( array(
 'primary' => __( 'Primary Menu', 'mytheme' ),
 ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Довольно упрощенно, но для начала этого достаточно, здесь мы подключаем нашу таблицу стилей style.css, активируем миниатюры для записей, включаем тег title на наши страницы и регистрируем меню.

Создание файлов шаблонов

Вот перечень необходимых шаблонов для тем WordPress, создаем каждый в той же директории:

  • index.php — Основной и обязательный шаблон для тем WordPress
  • header.php — Шаблон шапки сайта
  • footer.php — Шаблон подвала сайта
  • page.php — Шаблон для страниц сайта
  • signle.php — Шаблон для записей сайта
  • archive.php — Шаблон для архивов сайт, то есть перечня всех записей
  • category.php — Шаблон для отображения записей по категориям
  • tag.php — Шаблон для отображения записей по тегам
  • 404.php — Шаблон для отображения 404 страницы сайта
  • home.php — Шаблон для главной страницы сайта, если вы выберите отображение статической страницы, то шаблон будет использован для отображения архивов записей

После создания шаблонов можно приступить к их наполнению

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
 <meta charset="utf-8">
 <?php wp_head(); ?> 
</head>
<body>
 <?php if ( has_nav_menu( 'primary' ) ) : ?>
 <nav>
 <?php
 wp_nav_menu( array(
 'theme_location' => 'primary',
 'menu_class' => 'primary-menu',
 ) );
 ?>
 </nav>
 <?php endif; ?>
 <div id="content">

Это пример шаблона header.php, конечно, вам нужно будет переделывать, но для пробной версии этого хватит.

footer.php

  </div>
 <?php wp_footer(); ?>
 </body>
</html>

Проследите здесь за тем, чтобы у вас закрывались все теги, открытые в header.php, если они не закрываются ранее в файлах шаблонов.

index.php, single.php, archive.php, page.php, category.php, home.php, tag.php

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

<?php get_header(); ?>
 <article>
 <?php
 while ( have_posts() ) : the_post();
 the_content();
 endwhile;
 ?>
 </article>
 <?php get_footer(); ?>

Все готово. Можете заходить в панель администрирования «Внешний вид» -> «Темы», где вы увидите только что созданный шаблон для WordPress.