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

В WordPress есть 2 вида шаблонов:

1. На основе родительского шаблона. Советую тем, кто уже разбирается в WordPress и хочет научиться этому виду разработки шаблонов прочитать урок «Дочерние темы в WordPress«;
2. Создание шаблона с нуля, об этом мы и будем говорить дальше.

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

Начинаем разработку темы

Для начала разработки темы у вас должен быть уже установлен и настроен WordPress. Создайте в папке /wp-content/themes/ папку с названием вашей будущей темы. Внимание Имя папки темы должно быть латиницей и не содержать пробелов или спецсимволов, можно использовать для разделения слов символ подчеркивания. Я назову свою папку my_theme_tmp так как эту тему можно будет использовать для разработки своих собственных тем в дальнейшем.

Полный путь к теме сайта

/wp-content/themes/my_theme_tmp

После создания папки для темы вам понадобиться шаблон в формате html, с которым мы будем работать. Я для себя скачал бесплатный шаблон с сайта html5up.net, под названием Halcyonic. Вы также можете скачать шаблон с моего сайта.

После того как скачали базовый шаблон, поместите его в папку темы как показано на рисунке ниже.

Некоторые файлы по ходу разработки темы мы будем удалять или изменять.

В WordPress есть главные и второстепенные файлы, каждая тема должна иметь файл index.php и style.css. Переименуем файл index.html на index.php, а также рядом создадим файл style.css.

Чтобы наша тема была видна, и мы могли ее активировать нам необходимо разместить специальный код в файл style.css, в самый верх файла стилей.

Важно, данный файл всегда должен находиться в корне новой темы!

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

Активируем новую тему WordPress

Заходим в панель администратора и активируем новую тему.

Наша тема пока без картинки и чтобы ее добавить вам необходимо оформить картинку и разместить ее в корень темы с названием screenshot.png или screenshot.jpg. Размер картинки стандартно на данный момент 880х600 пикселей. После загрузки картинки в папку темы она автоматически подвязалась в админке.

Для работы в будущем нам также понадобиться файл functions.php, его также надо создать в папке темы. На этом пока первый урок по разработке тем для wordpress закончен, ждите новых уроков, думаю вам понравиться.