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

Добрый день! Это первый пост из серии о том, как создать собственную тему для 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 блога, или присоединяйтесь в фейсбуке!




40 комментариев к “Как создать тему для WordPress. Часть 1: файлы темы WordPress”

  1. Maks

    Отличная статья и блог понравился. Сам давно хочу расписать как делать шаблоны для WordPress, все руки не доходили. Жду следующего урока.

    Ответить
  2. Aram

    а как можно добавить функцию автоматического обновления темы?

    Ответить
  3. Вадим

    Классные уроки, спасибо круто!
    Давно ищу ответ на вопрос спрашиваю на форумах, толком никто не подсказал.

    Скажите пожалуйста есть сайт одностраничный на HTML, нужно чтоб к этому сайту можно было подключить контакт форму вордпреса, а также код с футера (от счетчиков статистики). Другими словами какой код нужно вставить в страницу этого сайта, чтоб он стал частью вордпересса?

    Ответить
    • Ирина

      Добрый день) Спасибо, я рада что вам понравилось)

      По поводу вашего вопроса. Так делать нельзя. Во-первых, потому что для работы формы и футера необходимо, чтобы страница была на PHP, а во-вторых, контактная форма будет работать только на страницах WP, так как она использует функции, которые работают только с WP. Счетчики статистики лучше просто отдельно скопировать на эту страницу.

      Ответить
      • Вадим

        1.html страницу можно переименовать php
        2.контактная форма будет работать на страницах вп, да я знаю поэтому и спросил этот вопрос (какой код прописать в шапку чтоб страница стала страницей вп?) Как пример плагин вппейдж, страницы созданные плагином есть частью вп.

        Ответить
        • Ирина

          Есть два варианта 🙂

          Лучше всего сделать из файла шаблон страницы, а потом создать страницу WP с его использованием. Если коротко, то для этого нужно в самом начале файла добавить:

          Подробнее можно почитать тут

          Второй вариант, если вы все-таки хотите использовать именно этот файл, и сделать его частью WP. Мне кажется (я не проверяла), что будет много глюков. Но если решите сделать так, то должны соблюдаться следующие условия.

          1) Обязательно нужно, чтобы страница (сам файл html, который вы переименуете в PHP) лежала в папке с темой, которая у Вас сейчас используется. Иначе WP не увидит Ваши функции, и будут PHP-ошибки. Правда в этом случае, путь к странице на сайте, которую он создает, будет вашсайт.ру/wp-content/themes/ваша-тема/ваш-файл.php (то есть чтобы попасть на эту страницу, в браузере надо будет набрать этот путь).

          2) Если такой вариант устраивает, то в файле надо дописать функции wp_header(); и wp_footer();. После этого, по идее, должно работать.

          Ответить
  4. Юрий

    Ирина, есть вопрос по файлу .js. Во-первых, никогда его не встречал в темах (в вашем образце увидел в первый раз. Во-вторых: каким редактором его открывать? Notepad++ его не открывает. Нужна какая-то специальная прога?

    Ответить
    • Ирина

      В этом файле хранятся Java-cкрипты. В некоторых темах они испольльзуются. Эту тему верстала не я, а просто взяла наиболее симпатичный бесплатный сверстанный шаблон, и стала делать из него тему. Я использую редактор Sublime text 2.

      Ответить
    • Сергей

      Не может такого быть, чтобы нотепад не смог открыть файл с расширением js. Вообще много плагинов используют скрипты. Так что нет смысла в ручную врезать этот код. Единственный файл js я держу в моих темах для коректного отображения html5 в 7-8IE, которые через этот код понимают этот язык. Без него сайт в этих недобраузерах рассыплется.

      Ответить
  5. Сергей

    Ирина, спасибо вам за внятное разъяснение, 3 часа спрашиваю гугла как верстать под вордпресс и единственное понятное и более полное руководство именно у вас. Спасибо вам за ваш труд.

    Ответить
    • Ирина

      Сергей, спасибо за комментарий, очень рада, что смогла Вам помочь 🙂 Если у Вас будут предложения, как улучшить курс, пишите 🙂

      Ответить
  6. Сергей

    Здравствуйте! Делал все по вашему уроку а стили так и не отобразились! Подскажите что делать!

    Ответить
    • Ирина

      Сергей, значит, у Вас где-то ошибка. Проверьте пути к Вашему файлу стилей, чтобы он действительно существовал в той папке, на которую вы ссылаетесь.

      Ответить
      • Димон

        Ирина, добавьте в конец статьи пару слов о том, что, если стили не применяются, надо удалить оборачивающий их тег в файле header.php

        Ответить
    • Юрий

      Тоже была эта проблема. Скорей всего Вы в файле init.js не указали новые пути для css файлов. В уроке сказано найти строку с “prefix”, я как не старался не нашёл её. Решилось всё тем, что в файле init.js я поменял все пути к css файлам как написано выше. Пример строки:
      desktop: { range: ‘737-‘, href: ‘css/style-desktop.css’ } поменял на
      desktop: { range: ‘737-‘, href: ‘/wp-content/themes/НАЗВАНИЕ ТЕМЫ/css/style-desktop.css’ }
      П\С
      Так же, само собой разумется, в каталоге с темой должны быть папки: js(скрипты), images(картинки используемые в теме), css(таблица стилей), fonts(шрифт для темы). Все это копируется из папки с загруженным шаблоном.

      Ответить
  7. Helga

    У меня тоже не хотели отображаться стили, пока не удалила тег , в который были завернуты ссылки на css-файлы.

    Ответить
  8. Дмитрий

    Спасибо за действительно полезный материал. Возможно стоит позже Вам выпустить все уроки в “одном месте”. Например, в единой PDF. Я бы с удовольствием скачал и держал под рукой когда понадобится, как пособие.

    Ответить
    • Сергей

      Поддерживаю идею.

      Ответить
      • Ирина

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

        Ответить
        • Sergei

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

          Ответить
        • Максим

          Ой… скорее бы!!! Очень хочется узреть!

          Ответить
  9. Денис

    Спасибо, за очень полезный материал. Мне очень помогло

    Ответить
  10. Николай

    Добрый день. Благодарю вас, Ирина, за столь хороший, полезный материал. В кодексе лень всё перечитывать для того, чтобы найти конкретную информацию (хотя и его изучить придётся).

    Ответить
  11. Владимир

    1. Спасибо, Ирина, за сайт, за серию статей по натяжке верстки на вордпресс!
    2. Из какой, вы, Ирина, области, гуманитарий? Я вот тоже гуманитарий, пытаюсь разобраться с вордпрессом и PHP

    3.Как то нелогично, мне кажется, вы делите index.html: в header.php правильнее было бы поместить все до body. А с body до footer – поместить в index.php?

    Ответить
    • Ирина

      Владимир, рада помочь!
      По поводу index.html: в header.php нужно разместить тот код, который повторяется вверху на всех других страницах. Этот подход позволяет следовать принципу DRY (don’t repeat yourself). То есть, если бы там было все до body, то первые теги пришлось бы копировать в каждом файле (index, single, page, category и тд). И с футером то же самое.
      Я историк.

      Ответить
      • Sergei

        Иногда приходится изворачиваться и писать header до body. Но чтобы не дублировать теги можно их поместить в отдельный файл и выводить функцией include.

        Тут однозначного решения нет. Как удобно, так и надо делать.

        Ответить
  12. Марина

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

    Ответить
  13. Иван

    Ирина, большое спасибо за четкий и структурированный разбор темы без воды! 🙂

    Ответить
  14. Сергей

    Почти никогда не использую файл sidebar. Как-то не приходится его использовать. Вообще, я темы делаю с минимальным количеством кода, затачивая их под определенный набор плагинов.

    Ответить
    • Александр

      Поддерживаю, нужно стараться использовать поменьше кода. Но в данном случае представлено создание шаблона для “всех”. Было бы не плохо проводить параллель, показывать стандартный набор кода и как его лучше обойти с помощью HTML.

      Ответить
  15. Алиса

    Подскажите, а как устанавливать эту созданную тему? Я сделала блог со своей темой, но при создании темы я не только ее редактировала, но и устанавливала плагины, добавляла статьи и меню, то есть сделала полноценный шаблонный блог. Но как его теперь можно продать? Ведь если я продам только папку с темой и человек установит ее, плагины и созданные страницы/виджеты/блоки будут ему недоступны? и как быть c бд?

    Ответить
    • Сергей

      Почему вы думаете, что ваш сайт кто-то купит?
      Тем полно. Другое дело тема на заказ для блога или сайта визитки, landing page. А делать на продажу, это как в лес дрова везти.

      Ответить
  16. Максим

    Ой… а где остальные записи по темам!? Дайте дайте дайте почитать!

    Ответить
  17. Dmitriy

    Как найти нужный блок в уже существующей теме?

    Ответить

Оставить комментарий