Создание простой темы для 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.
Комментарии:
Как операторы поисковых запросов Google помогают при продвижении сайта и анализе конкурентов....
02 11 2026 2:48:34
Cafe case. Знакомство аудитории с только что открывшимся заведением: online + offline....
01 11 2026 21:56:23
Мы достигли поставленных на старте продвижения целей: вернули потерянный трафик, получили дальнейший рост видимости сайта и увеличили доход....
31 10 2026 10:53:48
Результаты четвертого опроса среди IT-специалистов по уровню зарплат интернет-маркетологов с интересными итогами от количества участников до самой высокооплачиваемой должности и среднего опыта в рынке. Узнайте больше!...
30 10 2026 6:19:14
Сотрудник Google расскажет о том, как присоединиться к протесту, не навредив сайту....
29 10 2026 20:25:47
Что делать контент-маркетологам, когда все тексты в интернете начнут генерировать боты? Спойлер: обновлять старый контент....
28 10 2026 15:16:25
Стоит ли платить за рекламную кампанию «Медийно-контекстный баннер на поиске»?...
27 10 2026 13:59:36
SEO-специалисты используют создание поддоменов, подпапок или отдельных доменов...
26 10 2026 22:13:15
Учимся выстраивать коммуникацию по специальным сценариям....
25 10 2026 8:52:27
Виктория Игнатьева опубликовала новый кейс по продвижению интернет-магазина детской одежды, обуви и товаров: ROMI (возврат маркетинговых инвестиций) 319%....
24 10 2026 0:51:31
Краткое сравнение двух инструментов и третьего на закуску....
23 10 2026 2:49:25
Помимо полезного и качественного продукта, услуги, компании нужен мощный маркетинг. И возможно это только благодаря хорошему директору по маркетингу. Только так это работает. Кто лучшие в этой нише в Казахстане? Узнать!...
22 10 2026 1:39:53
Как протестировать MVP мобильного приложения, получить обратную связь и сформировать гипотезы...
21 10 2026 3:15:38
Уроки, написанные понятным и доступным языком экспертами по контекстной рекламе, поисковому продвижению, SMM....
20 10 2026 5:34:18
Мы восстановили репутацию и повысили рейтинг домена за три месяца....
19 10 2026 20:25:30
Какие регионы и тематики наиболее выгодно продвигать в каждом из представленных рекламных сервисов, где наибольшая доля мобильного трафика, и другая полезная статистика....
18 10 2026 16:30:57
В Twitter удобно собрать список потенциальных клиентов, чтобы время от времени посматривать за их новостями...
17 10 2026 11:44:42
Netpeak Checker – это мультифункциональный инструмент для массового анализа и сравнения сайтов, который помогает выполнять самые разнообразные задачи в области интернет-маркетинга....
16 10 2026 8:36:38
Рекомендации от Google для бизнеса о поведении в период распространения коронавируса....
15 10 2026 4:45:27
Дизайн макета сайта должен полностью соответствовать представлениям о готовом ресурсе. Создать его можно с помощью онлайн-сервисов, стационарных программ либо через HTML-код...
14 10 2026 0:11:28
Case по продвижению в Instagram. В любой непонятной ситуации — масштабируйте рекламные инструменты...
13 10 2026 5:47:55
При встрече со сложностями, когда мозг говорит вам «стоп, у тебя не получится, не пытайся даже», победа достается тому, кто это предупреждение игнорирует....
12 10 2026 0:15:56
Как и зачем отслеживать конверсии с тегом Google Рекламы...
11 10 2026 3:53:48
Инструкция по созданию изображений для сториз, email-рассылок и объявлений в соцсетях...
10 10 2026 4:51:57
Изучаем на примере тестирования товарных кампаний в момент смены логотипа и ренейминга...
09 10 2026 11:36:56
Аналитик Алексей Селезнев описал простой алогритм прогнозирования поисковой активности пользователей в Яндексе....
08 10 2026 6:24:45
Наука перехода — понятие краулинга (crawling, сканирование) сайта и принципа его работы. Виды поисковых роботов и способы их управления и другие полезные фишки в рубрике Азбука SEO на Netpeak Blog...
07 10 2026 21:36:16
Денис Бигус, Bihus.info: с 13 до 457 000 подписчиков на YouTube за четыре года....
06 10 2026 0:34:43
Таблицы Google позволят перенести рекламную кампанию и сохранить при этом ключевые слова в разных типах соответствия. Подробный мануал — в новом посте....
05 10 2026 12:47:36
Есть восхитительная возможность продвинуть видео на YouTube с минимальными финансовыми потерями!...
04 10 2026 21:53:33
Данные, приведенные в исследовании, помогут в составлении медиапланов по продвижению в интернете. Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить....
03 10 2026 21:21:52
Пpaктическая информация о том, что и куда нужно постить....
02 10 2026 8:55:55
Почему дешевый копирайт не подходит для текстов карточки товара...
01 10 2026 11:19:28
Понятные людям и роботам URL. Это уникальный набор символов, который дает возможность идентифицировать всевозможные ресурсы в интернете (страницы сайтов, файлы, изображения, видео и так далее). Чтобы узнать больше, читайте далее!...
30 09 2026 10:42:32
Образец чек-листа по созданию форм заказа на сайте интернет-магазина...
29 09 2026 23:14:13
Статья будет полезна небольшим агентствам, которые мечтают работать с заграничными клиентами. Зачем нужно выходить за рубеж, если и в своей стране все идет неплохо, да и вообще — нет времени на продвижение на незнакомом рынке? Давайте разбираться вместе!...
28 09 2026 12:27:34
Как бесплатно пользоваться преимуществами, особенностями и дополнительными инструментами сервиса...
27 09 2026 13:40:49
Facebook + Instagram, Business Manager + основная бизнес-страница на Facebook, BM + рекламный аккаунт и так далее....
26 09 2026 11:38:21
Подкаст — это аудиозапись в повествовательном, музыкальном, юмористическом формате. Создается с целью рекламы, увеличения потока посетителей на сайт и роста почитателей определенного продукта...
25 09 2026 1:52:18
Грамотно оформленные метатеги презентуют сайт, помогают пользователям быстро найти нужную информацию, а поисковым системам — повысить ресурс в выдаче...
24 09 2026 17:44:27
Объявление или кабинет блокируют из-за эмоджи. Что делать?...
23 09 2026 0:43:30
Как упростить работу с данными и сэкономить на оплате сервиса...
22 09 2026 19:34:37
Суперспособности фрилансера: как понять свою прокрастинацию, распознать мошенников и решать проблемы, связанные с удалёнкой...
21 09 2026 7:50:30
Доля органического трафика увеличилась с 14% до 44%, а небрендового — на 184%....
20 09 2026 3:58:33
Четыре способа исключить нерелевантные места размещения видеорекламы, а также полезные списки минус-слов и детских YouTube-каналов....
19 09 2026 0:15:37
Такое обозрение очередной новинки Google от Сергея Бахаря...
18 09 2026 23:46:24
Всё о вебхуках. Как настроить механизм получения уведомлений о событиях с помощью функций обратных вызовов....
17 09 2026 17:57:12
Цели у личных сайтов могут быть разные, но в первую очередь они помогают рассказать историю о специалисте...
16 09 2026 17:18:28
Простые пошаговые советы о том, как самому сделать верстку шаблона Wordpress. От вас не требуется знание PHP, но хорошо если вы владеете Photoshop и CSS для создания дизайна. Узнать больше!...
15 09 2026 2:12:50
Особенности продвижения в нише аренды автомобилей по материалам кейсов наших коллег...
14 09 2026 21:48:47
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
