Создание простой темы для 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.
Комментарии:
История Affise от фаундера компании, рассказанная на SaaS Nation....
16 07 2026 4:42:13
Про мобильный дизайн. С красивой и понятной презентацией внутри....
15 07 2026 21:55:39
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
14 07 2026 1:11:43
Как SQL-запросы сайтов и Google Sheets освобождают SEO-специалиста от рутины...
13 07 2026 4:48:30
История создания и развития холдинга «Choco Family» помогает понять масштабы онлайн-рынка Казахстана, найти точки роста для собственного бизнеса в Казнете. Каково быть пионером ecommerce в стране? Чем казахстанский рынок ecommerce отличается от Рунета и Уанета? Читать!...
12 07 2026 15:53:48
Пример удачной рекламы. История о том, как маленький региональный магазин может получать хорошую прибыль с прайс-агрегаторов...
11 07 2026 2:44:38
Твиты, реплаи, ретвиты - как сделать правильные выводы из активности в Twitter? Об этом читайте в нашем посте....
10 07 2026 0:14:55
Новые тактики в рекламных кампаниях, SMM и PR, которые использует бизнес в новых условиях...
09 07 2026 2:18:29
95% заполняемости коливингов для сервиса аренды жилья....
08 07 2026 15:52:24
Обойдемся без теории, зато покажем пример SEO-аудита...
07 07 2026 11:55:43
Любопытная подборка "маленьких" гигантов: компании и сервисы, чья аудитория превышает 10 миллионов пользователей, а также несколько интересных фактов о каждом из них. Узнать больше!...
06 07 2026 7:53:59
Не можете найти нужны отчёт в Google ***ytics? Или хотите ускорить поиск нужных данных и отчётов. В помощь ⏩ Обзор к Google ***ytics Intelligence....
05 07 2026 1:14:43
От наличия отзывов зависит решение клиента купить товар или заказать услугу. Как правильно работать с репутацией? Разбираемся...
04 07 2026 15:47:39
Chrome Extensions экономят время тех, кто продвигает мобильные приложения...
03 07 2026 23:35:46
Сколько прибыли вы не получили в Google Ads из-за нехватки бюджета или низкого рейтинга ключевых слов. Метод покажется сложным, но в дальнейшем вы сможете бесплатно обновлять данные и контролировать потери показов и дохода по всем рекламным кампаниям...
02 07 2026 14:53:41
На украинском рынке услуг велик выбор качественных платформ. Главное понимать, как правильно проводить миграцию....
01 07 2026 3:33:45
Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....
30 06 2026 16:40:33
Как Bigl.ua внедрили AMP и остались очень довольны результатом....
29 06 2026 5:38:52
Делимся итогами продвижения телеграм-канала «Артём Бородатюк» за 2021 год...
28 06 2026 5:41:21
Советы от Agorapulse, Smarp, Readdle, Competera, Leadfeeder, Smartly, Toggl, Grammarly, .Io Media, MacPaw, Depositphotos, Promorepuplic, OWOX, Serpstat, Quokka и TemplateMonster для развития SaaS-продуктов...
27 06 2026 1:18:19
Адвент-календарь, конкурсы и викторины, праздничные линейки товаров, подборки подарков для родных и близких, опросы, тесты и другие интересности. Используйте, если нужны идеи и вдохновение....
26 06 2026 22:44:52
Что такое идеальное время доставки почты и как его использовать для повышения кликабельности email-кампаний....
25 06 2026 2:50:21
Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....
24 06 2026 6:58:49
Как помешать фейковым 404 страницам испортить статистику вашего сайта?...
23 06 2026 18:40:39
Подробнейшая статья об эффективном использовании ремаркетинга. Мотаем на ус!...
22 06 2026 1:21:38
PBN (Private Blog Network) — приватная/частная сеть блогов, сайты-сателлиты, сетки сайтов. Строить их долго, дорого, но это работает....
21 06 2026 9:34:56
Как написать годный кейс и победить страх чистого листа...
20 06 2026 4:33:45
Мария Гoлyб устала отвечать на вопрос «Какие преимущества PPC-отдела в Netpeak?» и решила написать об этом пост....
19 06 2026 10:49:49
Как уменьшить время ответа сервера и повысить общий показатель скорости загрузки сайта...
18 06 2026 11:12:22
Как обезопасить себя от интернет-пиратов и защитить авторское право онлайн....
17 06 2026 4:57:30
Правильное распределение кодов ответов сервера позволяет поисковым системам экономить ресурсы на работу с сайтом. Поисковые роботы будут получать только необходимую информацию...
16 06 2026 22:31:48
Есть восхитительная возможность продвинуть видео на YouTube с минимальными финансовыми потерями!...
15 06 2026 4:25:32
Не Google единым. Нужные и важные знания по Яндекс.Вебмастер....
14 06 2026 17:59:41
14 пунктов, которые помогут вам лучше изучить свой бизнес и подготовить эффективную SMM-стратегию...
13 06 2026 9:40:11
Лучшие идеи круглого стола о SEO с участием Тараса Гущи, Сергея Карпенко, Алексея Чекушина, Дмитрия Шахова и других экспертов...
12 06 2026 10:39:30
Объявление или кабинет блокируют из-за эмоджи. Что делать?...
11 06 2026 4:43:56
Сегодня именно тот день, когда пора решиться и отправить своё резюме в нашу компанию....
10 06 2026 20:18:57
Вести бизнес в интернете с помощью развлекательного сайта, СМИ, узкоспециализированного портала вполне реально. Правда, нужно знать, как на них заpaбатывать....
09 06 2026 14:45:17
Рекламные заголовки в гугл адвордс так и пестрят предложениями контекстной рекламы бесплатно — вы когда-нибудь задумывались о том, откуда берутся эти «подарки»?...
08 06 2026 10:58:18
Нет прокрастинации! Советы для личной эффективности от руководителя двух стартапов...
07 06 2026 3:37:54
Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...
06 06 2026 11:53:33
Создатель сервиса Foster Кирилл Винокуров рассказал, как зарегистрировать приложение для полноценной работы с Директом....
05 06 2026 15:47:31
3 часто задаваемых вопроса о раскрутке сайтов об эффективной организации SEO своими силами, способах проверки оптимизации сайта и о том, как быстро можно увидеть эффект от SEO. Узнайте больше!...
04 06 2026 19:43:47
Сайту нужны внешние ссылки на сторонних ресурсах. Они могут повлиять на ранжирование вашего ресурса и трафик, а один из методов их получить — аутрич....
03 06 2026 0:34:55
Как настроить программу Obsidian для удобной и быстрой работы по системе Zettelkasten....
02 06 2026 15:47:38
Миссия компании: делимся опытом создания и реализации в компании с 300 сотрудниками...
01 06 2026 10:34:50
Услуга уровня элит-класса в конкурентной нише и не в самом простом для продвижения регионе. Рассказываем, как привели целевой трафик по минимальной цене. Узнать!...
31 05 2026 10:53:25
Определение, исследование и проверка конкурентов в Similarweb — первый шаг перед запуском и масштабированием проекта...
30 05 2026 21:29:36
29 ноября в Киеве в UNIT.City — конференция по медицинскому маркетингу MeDiConf...
29 05 2026 15:43:31
Как с помощью GA4 анализировать рекламные кампании, лежа на диване...
28 05 2026 15:56:45
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
