Создание простой темы для WordPress
Публикуем перевод статьи Nick La — это пособие по работе с темами WordPress. Пост был опубликован в 2011 году, но принципы и подходы, описанные в материале, до сих пор актуальны. Если у вас будут замечания и комментарии, пишите их под постом: дополним, расширим статью. Далее материал будет идти от первого лица.
Эта статья поведает вам о том, как создать самую простую тему для WordPress. Хотя Codex и предоставляет обширную документацию по этому вопросу, но мне она кажется несколько сложной для новичка. Поэтому в данном «туториале» я расскажу принципы работы тем для WordPress и покажу как адаптировать под них сырой HTML-шаблон. При этом от вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна.
1. Frontend блога
До того как мы начнём, давайте взглянем на стандартную тему WordPress и разберёмся из чего она состоит. Отметим элементы: шапка, заголовок поста, форма поиска, навигация, подвал.
Стандартный Frontpage (index.php)
Стандартный Single (single.php)
Истории бизнеса и полезные фишки
2. Photoshop-макеты
Основываясь на внешнем виде стандартной темы, разработайте Photoshop-макеты для вашего блога. Для примера я использую GlossyBlue — одну из моих бесплатных тем.
3. HTML и CSS
Когда PSD-дизайн готов, создайте HTML+CSS шаблон каждой страницы.
Зачем сперва создавать статический HTML? Главным образом это нужно потому, что это значительно упростит процесс разработки. Обычно я создаю HTML файл для каждого шаблона, проверяю их валидность (HTML и CSS разметку) во всех браузерах. После этого остаётся лишь вырезать и вставить код WordPress. Так что можно уже не беспокоиться об ошибках в HTML или CSS.
4. Как работает тема WordPress
Если вы перейдёте к папке стандартной темы (wp-content/themes/default), то увидите много php-файлов (называемых файлами шаблонов) и один файл style.css. Для формирования страницы WordPress обычно использует несколько файлов шаблонов (index.php , header.php, sidebar.php, и footer.php).
Подробнее в Codex: «Архитектура сайта» и «Иерархия шаблонов» .
5. Дублирование файлов шаблонов
Скопируйте папку HTML из GlossyBlue в папку wp-content/themes. После этого перейдите в директорию темы default, скопируйте comments.php и searchform.php в папку glossyblue.
6. Style.css
Перейдите в папку темы default, откройте файл style.css. Скопируйте закомментированный в начале файла текст и вставьте в style.css темы GlossyBlue. Если хотите, можете изменить название и данные об авторе.
7. Разделение файлов
Теперь нам нужно понять где разделить HTML-файлы на части: header.php, sidebar.php, и footer.php. На скриншоте ниже видно упрощённую версию моего index-файла, а также принцип его деления.
8. Header.php
Откройте index.html. Вам нужно вырезать участок от верха до места, где заканчивается , вставить его в новый php-файл и сохранить как header.php. Перейдите в папку темы default, откройте новый header.php. Скопируйте и замените теги, где этого требует php-код: title, link, таблицы стилей, h1 и div class=description.
Меню навигации (wp_list_pages) Замените тэги li в ul id=nav на ;
Ссылка: wp_list_pages
9. Sidebar.php
Вернитесь к index.html, вырежьте код с того места, где начинается form id=searchform и до закрытия тега div id=sidebar, поместите его в новый php-файл и сохраните как sidebar.php.
- Замените form id=searchform со всем содержимым на .
- Замените теги li категорий на
- Замените теги li архивов на
Ссылка: wp_list_categories и wp_get_archives
10. Footer.php
Вернитесь к index.html. Извлеките оттуда код от div id=footer включительно с тегом div id=footer и до конца /html затем поместите в новый footer.php.
Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.
«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы).
11. Index.php
Теперь в вашем index.html должен остаться только div id=content. Сохраните файл как index.php. Впишите строки: get_header, get_sidebar, и get_footer в том порядке, как они встречаются в шаблоне.
12. Разбор цикла
Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found».
13. Копирование цикла
Перейдите к директории темы default, откройте index.php. Скопируйте цикл из стандартного index.php в свой — между div id=content../div. После этого замените статический текст тегами шаблона WordPress: post date, title, category, comments, next и previous link.
14. Предпросмотр темы
Поздравляю! Вы создали публичную часть (основную часть шаблона). Теперь зайдите в административную панель, перейдите к закладке Design, вы должны увидеть тему GlossyBlue. Активируйте её и перейдите к публичной части, чтобы посмотреть результат в действии.
15. Single.php
Пришло время создать шаблон single.php. Если хотите, можете повторить шаги, перенося код из стандартной темы. Но мне кажется более простым использовать только что созданный index.php, сохранив его как single.php. Откройте single.php из стандартной темы и скопируйте теги шаблона в нужные места. Далее подключите comments_template. На следующем скриншоте отображены внесенные мною изменения:
16. Page.php
Теперь новый single.php сохраните с названием page.php. Уберите дату записи, форму комментариев, ссылки следующий/предыдущий. Вот, собственно, и всё — ваш шаблон page.php готов.
17. Удаление файлов HTML
Удалите все файлы HTML из папки glossyblue (они нам больше не понадобятся). Технически этого достаточно для создания базовой темы WordPress. Вы, наверное, заметили, что в стандартной теме больше PHP-файлов. Что же, на самом деле, они вам не так уж необходимы, если требуется простая тема. Например, если search.php или 404.php не будет в папке темы, WordPress автоматически использует index.php для отображения страницы. Читайте Template Hierarchy для более подробного рассмотрения.
18. Шаблон страницы WordPress
А теперь последний пример — я покажу вам как использовать Page Template для создания страницы Архива, которая будет содержать список всех записей на вашем блоге (удобно для карты сайта). Скопируйте archives.php из папки стандартной темы. Удалите ненужный код и получите что-то вроде этого:
Тут я использовал query_post (showposts=-1 означает «отобразить все записи»), чтобы перечислить все записи.
Теперь зайдите в панель администратора, создайте новую страницу и назовите её Archives. В выпадающем списке шаблонов выберите Archives.
Дополнительная литература
Просмотрите список Плагины WordPress, возможно, они покажутся вам полезными. Для более углублённого изучения читайте WordPress Theme Hacks.
Комментарии:
Чтобы прекратить споры о том, с какого конца разбивать яйцо, я собрал аргументы за союз SEO и PPC...
23 07 2026 3:20:28
История Affise от фаундера компании, рассказанная на SaaS Nation....
22 07 2026 0:48:55
Как понять, что именно нравится подписчикам в вашей рассылке...
21 07 2026 12:20:58
Трекеры теперь на любой вкус: за лидерство в сфере аналитики и трекинга в мире мобильных приложений все еще конкурируют более десяти различных систем. Как не растеряться в обилии инструментов?...
20 07 2026 4:20:29
Новая услуга от Netpeak по ведению Instagram и Facebook...
19 07 2026 3:39:13
Ежегодный прирост рынка фриланса в Украине составляет в среднем 35%. В прошлом году зарегистрировано более 200 тысяч проектов на общую сумму 385 млн гривен....
18 07 2026 18:37:50
В Netpeak появляется больше клиентов с четкими задачами по продвижению своих мобильных приложений в iOS и Android. В этом посте — кейс приложения популярной доски объявлений....
17 07 2026 0:44:43
Психологический бестселлер. Как достичь гармонии во всех делах и начать получать удовольствие от жизни, — об этом читайте в новой рецензии Константина Рябенко на книгу Михая Чиксентмихайи «Поток»....
16 07 2026 19:21:41
Обидно терять сохраненные достижения. Почему падает трафик из поисковых систем и как это исправить...
15 07 2026 18:32:18
Возможности для специалистов по рекламе в Facebook, о которых знают далеко не все. Подробности — тут....
14 07 2026 8:56:21
Чек-лист для РРС-специалистов. Всегда быстрее учиться на опыте других людей, а не набивать шишки самостоятельно. А также советы, как исправить рекламные кампании. Обо всем читайте в этой статье!...
13 07 2026 22:37:30
Почему встречаются низкие показатели переходов на сайты по всем источникам трафика? Нет рекламодателей, которые могут предложить пользователям те или иные товары и услуги....
12 07 2026 20:23:38
Атрибут rel="canonical" помогает бороться с дублированием контента и обезопасить сайт от дублирования и копирования...
11 07 2026 16:49:25
Делимся советами по оптимизации рассылок. Важны новые форматы писем, предварительное тестирование, смена тем письма, ярче CTA. Все это в сочетании с понятностью и искренностью не заставит ждать хороший CTR...
10 07 2026 7:13:11
Все успешные люди немного сомневаются в своих достижениях и рефлексируют о большом количестве ошибок. Не ок, когда сомнения затягивают и разрушают самооценку, создают постоянное напряжение. Давайте разбираться с синдромом самозванца....
09 07 2026 13:18:14
В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...
08 07 2026 18:45:46
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
07 07 2026 19:26:54
Как прокачать email, когда рассылки уже работают....
06 07 2026 2:35:47
Работа велась с конца августа прошлого года до конца декабря и включила в себя анализ рынка, конкурентов, целевой аудитории, поиск инсайта, разработку стратегии, подготовку медиаплана, создание промо-сайта и само проведение рекламной кампании, в котором б...
05 07 2026 8:42:54
Чтобы создать позитивный образ компании, бренда, персоны или работодателя в поисковых системах, нужно приложить много усилий. Но, поверьте, результат того стоит. И начать стоит с репутационного аудита....
04 07 2026 10:36:29
При выборе SEO сервиса принято ориентироваться на объем ссылочной массы, но надежен ли такой подход? Большая база не всегда значит качество содержащихся в ней данных, а количество нередко обеспечивают спамные ссылки в отчетах....
03 07 2026 12:54:24
В течение месяца нам удалось наладить рассылку с новой платформы....
02 07 2026 10:52:21
Что такое【контекстная реклама】и как ее настроить? Подробный чек-лист ✅ в блоге Netpeak ⟁ ▷ 200 ступеней рекламной кампании в Google AdWords, Яндекс.Директ ⚡...
01 07 2026 10:31:43
Создатель студии рисованных видео Денис Довгаль — о тактике видеомаркетинга и жизни в стиле «цифровых кочевников»....
30 06 2026 20:49:37
Система почтового маркетинга. Как удержать доверия подписчиков одним приветственным письмом...
29 06 2026 22:56:30
А сейчас про конференцию Netpeak Friends Day для друзей Netpeak Group...
28 06 2026 14:50:36
Private Blog Network для ниши безопасности, доставки цветов, товаров сантехники, туризма и выпекания. Сетки сайтов работают не всегда и это нормально. Узнать больше!...
27 06 2026 7:49:29
Как считать конверсии из Facebook, когда они происходят в Jivosite и Битрикс24....
26 06 2026 20:39:12
Интересные факты про Google Рекламу перевел Сергeй Бахарь для читателей нашего блога....
25 06 2026 23:55:34
Делаем первые шаги к созданию системы email-коммуникаций бренда....
24 06 2026 8:17:56
Чтобы привлечь представителей малого и среднего бизнеса, мы разработали стратегии по контекстной рекламе. Это открывает двери агентства Netpeak проектам с самым скромным бюджетом...
23 06 2026 6:40:14
Грамотно оформленные метатеги презентуют сайт, помогают пользователям быстро найти нужную информацию, а поисковым системам — повысить ресурс в выдаче...
22 06 2026 3:59:14
На третий месяц работы мы вышли на положительный ROMI, на четвертый — ROMI превысил 800%....
21 06 2026 20:16:25
В продажах лучше визуализировать путь потребителя в виде нейронных сетей....
20 06 2026 19:32:16
Кейс: как золотой корпоративный линкбилдинг помог в SEO-продвижении интернет-магазина, в котором можно заказать и купить чехлы и виниловые наклейки для смартфонов...
19 06 2026 5:13:57
Как правильно рассчитать окупаемость рекламных кампаний SaaS-продуктов, получить по ним четкую аналитику, и что делать дальше....
18 06 2026 13:14:41
Как снизить стоимость лидов путём использования новых технологий...
17 06 2026 10:47:58
Руководитель отдела HR, Ольга Пачесная, написала пост о главном — людях, которые выбрали работу в Netpeak....
16 06 2026 11:19:52
Пример пользовательских отчетов в Google ***ytics, созданных за 15 минут...
15 06 2026 10:11:23
Какие возможности дает Chrome DevTools для SEO-оптимизации...
14 06 2026 5:49:28
1 — меняй работу внутри работы, 2 — выбери то, что нравится больше всего и старайся делать это чаще, 3 — придумай себе развлечения. Подробности — в посте. Читать дальше....
13 06 2026 5:32:52
Инструмент позволяет создавать ролики длительностью от 6 до 16 секунд. Созданные видеоматериалы можно размещать не только в рекламных кампаниях, но и на сайте или в email-рассылке. ...
12 06 2026 2:39:16
Данные по 43 миллионам кликов в 27 тематиках и 391 городах страны...
11 06 2026 10:52:45
Главные вопросы при запуске и настройке любых кампаний: «чего я хочу достичь?», «помогает ли текущая кампания достичь желаемых результатов?», «влияет ли кампания на эффективность других кампаний и источников?». Узнать больше....
10 06 2026 2:41:40
Сбор ключевых запросов с помощью программы Кей Коллектор: показываем и рассказываем пошагово с демонстрацией процесса настройки с сервисом Яндекс.Вордстат. Читать дальше!...
09 06 2026 11:59:15
В Казнете о маркетплейсе подрядчиков Naimi.kzприложении говорят все: от студентов до президента....
08 06 2026 2:55:14
2013, 2014, 2015 — годы, когда конференция 8p радовала все сео-сообщество СНГ. Прошла она и в 2016 году. Мы собрали лучшие советы интернет-магазинам от экспертов и участников круглого стола на конференции 8P 2016....
07 06 2026 10:22:28
Сезонность — повторяющиеся колебания трафика сайта в зависимости от различных внешних факторов....
06 06 2026 6:19:51
Регулярный мониторинг позиций необходим для отслеживания истории их изменений после внедрения новых ключевых слов и других работ над сайтом...
05 06 2026 13:59:27
Советы от Agorapulse, Smarp, Readdle, Competera, Leadfeeder, Smartly, Toggl, Grammarly, .Io Media, MacPaw, Depositphotos, Promorepuplic, OWOX, Serpstat, Quokka и TemplateMonster для развития SaaS-продуктов...
04 06 2026 9:25:58
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
