Как создать тему для WordPress. Часть 1: файлы темы WordPress

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

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

Запись обновлена 3 сентября 2015 года.

Нам понадобится:

  1. HTML шаблон, из которого мы будем делать тему.
  2. Текстовый редактор, например, Sublime Text 2, Notepad++ или любой другой по вашему желанию (только не стандартный блокнот windows!)
  3. браузер
  4. сайт для тестирования темы
  5. немного знаний HTML, CSS, PHP
  6. терпение 😀

В качестве примера для этого урока, я сделала небольшой шаблон на бутстрапе готовый HTML-шаблон Striped от HTML5Up (демо).

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

Конечно, вы можете взять его же, или скачать любой другой CSS шаблон для сайта.

Шаг 1. Структура темы для WordPress

Если вы когда-либо редактировали файлы темы для вордпресс, то, наверное, заметили, что в разных темах есть похожие файлы. В любой теме обязательно должны быть два файла, которые лежат в корне папки с темой:

  • index.php –  основной шаблон страницы;
  • style.css – файл стилей.

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

  • header.php, для вывода шапки всех страниц;
  • sidebar.php, для вывода боковой колонки;
  • footer.php, который выводит подвал сайта;
  • page.php, шаблон для статических страниц
  • single.php, шаблон для страниц записей;
  • archive.php, шаблон архивов и рубрик;
  • comments.php, шаблон комментариев;
  • functions.php, функции темы;
  • и другие…

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

Шаг 2. Структура страницы WordPress темы

Давайте посмотрим, из чего состоит папка с HTML-шаблоном, которую мы скачали. Там есть:

  • файл index.html, это главный файл верстки, если вы откроете его в браузере, то увидите, как будет выглядеть наша тема;
  • папка css, там лежат файлы стилей;
  • также могут быть папка images, с картинками;
  • и папка js, в которой содержатся скрипты.

Сейчас откройте index.html. Если удалить оттуда все “лишнее”, для простоты понимания, структуры, то получится примерно следующее:

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

Шаг 3. Создаем файлы темы

Настало время создать файлы для темы. Создадим новую папку, и следующие пустые файлы в ней:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

В style.css добавим строки, которые помогут системе узнать, что это за тема:

Вместо Author и Author URI можете написать свое имя и сайт, а вместо Theme Name – название темы.

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

После этого нужно разнести содержимое index.html по разным файлам.

Вставьте все до тега <main class=”col-md-9″> не включительно в header.php. Это та часть, которая будет повторяться на каждой странице вверху, до записи или страницы:

Затем основное содержимое вставим в файл index.php:

Далее сделаем сайдбар sidebar.php:

И подвал footer.php

Шаг 4. Добавляем базовые функции

После этого, еще немного поработаем над файлом index.php. Как я уже говорила, это самый главный файл вашей темы. Именно в этот файл мы добавим функции для вывода на странице шапки, сайдбара и подвала. В самое начало файла вставьте функцию для вывода header.php:

И в самый конец – функции для вывода сайдбара и подвала:

Если вы взяли другой шаблон, то важно посмотреть, в каком порядке идут в index.html сайдбар и основное содержимое страницы. Возможно, get_sidebar() нужно будет вставить в начале файла, после get_header().

Также нужно внести некоторые изменения в header.php. Давайте пропишем через echo get_template_directory_uri() путь ко всем используемым скриптам и стилям:

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

Итоги части 1

Итак, мы познакомились со структурой темы для вордпресс, со структурой страницы темы, и создали основные файлы для собственной темы.

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

Вы можете скачать файлы, которые должны получиться по итогам этого урока, по этой ссылке, или посмотреть их на GitHub.

Чтобы не пропустить продолжение, подписывайтесь на RSS блога, или присоединяйтесь в фейсбуке!

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии