Тема
Это главная страница руководства по созданию тем (шаблонов) для WordPress. Основная информация взята из официального руководства и из личного опыта.
Чтобы сразу посмотреть общий принцип создания темы, перейдите к части учебника: Создание самой простой темы
Что такое тема?
Тема WordPress — это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать. В других движка тему еще называют «шаблоном», но в WordPress принято говорить именно тема — theme, а не шаблон — template. Хотя и то и другое по сути одно и тоже. Таким образом, если вы меняете тему, то сайт меняет свой вид, выглядит иначе. На WordPress.org есть тысячи бесплатных тем. Несмотря на широкой выбор тем, многие предпочитают создавать свои темы. Связанно это в первую очередь с тем, что создать простую тему не сложно.
Необходимые файлы
- index.php — главный файл темы, отвечает за вывод содержимого
- style.css — главный файл стилей, отвечает за css стили
Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:
- header.php — отвечает за вывод шапки
- footer.php — отвечает за вывод подвала
- sidebar.php — отвечает за вывод боковой панели
- page.php — отвечает за вывод отдельной страницы (записи)
- и т.д. смотрите полный список.
Возможности темы
Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т.п. принято выносить в плагины.
Таким образом, тема может:
- Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
- Тема может выводить любое содержимое;
- Может указать, какой контент будет отображаться для разных пользователей;
- Может использовать любые элементы дизайна (картинки, видео).
Как и на любом сайте, тема — это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).
Чем тема отличается от плагина?
С точки зрения кода, можно сказать, ничем — в теме можно создать полноценный плагин. А вот с точки зрения логики — всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы — вывод содержимого, в том числе, этого опроса.
Таким образом, тема отвечает за показ контента на странице, а плагин нужен для реализации функционала сайта.
Никогда не добавляйте функциональность в саму тему, если только на это нет веских причин. Если это сделать, то при смене темы функциональность потеряется в месте с ней. Например, в вашей теме есть крутая фотогалерея. И если поменять тему, то эта крутая фотогалерея потеряется.
Поэтому любой функционал связанный с редактированием/добавлением содержимого сайта должен быть оформлен как плагин.
Где скачивать темы?
Каталог тем на сайте WordPress.org. — одно из самых безопасных мест, где можно скачать темы. Там все темы проверяются на соответствие требованиям и рекомендациям.
Есть и другие источники, но там темы обычно платные. Например, темы можно скачать на: Creative Market.
Старт
Теперь, когда мы разобрались в темах, можно приступать к созданию своей темы. Первым делом нужно:
- настроить локальную среду разработки.
- Затем можно посмотреть примеры WordPress-тем.
- Ну и начать разработку своей первой темы.
Этот раздел в процессе разработки. И вообще, я его начал писать и забросил, неинтересное занятие получается. Будет время, желание продолжу.
Создание темы WordPress. Натяжка HTML-вёрстки
В этом уроке мы с вами разберёмся, как создать свою тему для WordPress с нуля. Ну почти с нуля – мы же планируем натягивать на WordPress свою HTML-вёрстку.
Первым делом вам нужно будет определиться, хотите ли начинать разработку на основе стартовых тем или же полностью с нуля. Про стартовые темы мы обязательно поговорим, но я не привык их использовать, поэтому не буду использовать и в уроке тоже.
Что будет в видеоуроке?
Как вы заметили, что помимо текстового урока, тут также есть и видеоурок. Он абсолютно бесплатный, вам достаточно лишь зарегистрироваться на сайте для доступа к нему.
В видеоуроке мы сразу же начнём работать с готовой вёрсткой, которая выглядит вот так:
Для доступа к файлам вёрстки необходимо приобрести курс.
Сделаем первые шаги по натяжке этой вёрстки на WordPress, заменим статичные данные в HTML на динамичные при помощи таких функций WordPress, как wp_head(), wp_footer(), get_stylesheet_directory_uri(), get_stylesheet_uri(), bloginfo(), wp_get_document_title(), language_attributes(). Объясняю принцип действия каждой функции.
Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.
Cтартовые темы. Что это такое и для чего они нужны?
Когда мы создаёт тему с нуля, мы ручками создаёт директорию, в ней потом создаём два файла – index.php и style.css – смотрите следующий шаг.
Возможно стартовые темы придумали те люди, которые, так же как и я, не умеют создавать файлы на MacOS
Первоначально стартовые темы задуманы для упрощения этого процесса – чтобы вам вроде как пришлось меньше писать один и тот же код. Вроде как. Когда я только начинал свою карьеру в создании WordPress-тем, и когда даже не знал о существовании стартовых тем (а может их и вовсе не было), я задумывался о создании своего собственного «темплейта», то есть стартовой темы, при помощи которой я бы мог сэкономить себе время.
Сейчас в мире не существует такой стартовой темы, которая бы подошла под мои уникальные ежедневные задачи, да и как вы убедитесь в процессе этого курса, они также не подходят и для переноса вёрстки на WordPress. Опс. Меня за это захейтят.
Тем не менее, если вдруг вы приноровитесь к использованию какой-либо стартовой темы в своей работе – круто, молодцы! Я ничего не имею против, к тому же самую популярную стартовую темы Underscores разработали ребята из Automattic (компания, которая стоит за WordPress.com). Если вы почувствовали некоторый эмоциональный подтекст в моих словах, это только потому что я встречал людей, которые считают, что разрабатывать нужно ТОЛЬКО на стартовых темах, и обучаться тоже на них.
Приступаем к созданию темы. Файлы index.php и style.css
Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал kurs (очень оригинально). Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.
Если вы забыли/забили на style.css , то в админке во Внешний вид > Темы ожидайте такую ошибку:

Если же отсутствует файл index.php , то:

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

До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css , понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.
Параметры (метаданные) темы
Если вы не хотите, чтобы ваша тема так и отображалась в админке без названия и описания, давайте добавим немного информации в style.css , поместив её в комментарии CSS /* */ .
/* * Theme name: Тема для курса * Author: Миша * Author URI: https://misha.agency * Version: 1.0 */
Но дело в том, что существуют и другие параметры темы, которые вы можете использовать, вот их список:
Theme name Название темы. Description Описание темы, которое будет отображаться в админке. Version Версия темы, например 1.0 Author Тут можете указать себя и тех людей, которые вам помогали. Author URI URL на сайт автора, позволит превратить имя автора в ссылку в админке WordPress. License Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL License URI А в этом параметре указывается ссылка на страницу с лицензией. Text Domain Идентификатор локализации темы, полагаю сейчас нам это не понадобится, но позже рекомендую почитать про правильную локализацию плагинов и тем WordPress. Tags Если эта тема станет вашим будущим сайтом или сайтом вашего клиента, наиболее вероятно вам можно пропустить этот параметр, если же вы будете в дальнейшем публиковать свою тему в официальном репозитории WordPress, тогда уделите ему особое внимание. Со списком поддерживаемых тегов можно ознакомиться на официальном сайте. Template Параметр только для дочерних тем, подробнее тут.
Изображение темы
Для того, чтобы в качестве изображения темы не отображался «фотошоповский фон», мы создадим файл screenshot.png и отправим его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).
Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальной документации WP рекомендуется всё же использовать screenshot.png .
Вот что у меня получилось:

Для чего нужны wp_head() и wp_footer()
После того, как вы начинаете добавлять первый HTML в теме, то вам сразу же нужно сделать две вещи:
- Добавить функцию wp_head() перед закрывающим тегом ,
- Добавить функцию wp_footer() перед закрывающим тегом



















