Создание простой темы для 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.
Комментарии:
Как узнать слабые места ваших рекламных кампаний с помощью бесплатного скрипта....
01 06 2026 17:58:50
SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...
31 05 2026 12:18:41
Основные законы приняты. Что это значит?...
30 05 2026 1:46:31
Тестируем новый инструмент Яндекс.Директ — динамические объявления....
29 05 2026 5:13:31
Что, если бы покупка в супермаркете происходила так же, как в онлайн-магазине?...
28 05 2026 13:18:47
Как зарегистрироваться в приложении Facebook Business Manager и грамотно сделать и настроить аккаунт...
27 05 2026 13:57:20
О работе, креативности, мотивации и многом другом....
26 05 2026 19:26:39
Сортировка мусора, использование велосипедов вместо автомобилей, озеленение города... В Украине, как правило, так представляют экофрендли бизнес. Зарубежные компании идут дальше....
25 05 2026 11:38:58
Все успешные люди немного сомневаются в своих достижениях и рефлексируют о большом количестве ошибок. Не ок, когда сомнения затягивают и разрушают самооценку, создают постоянное напряжение. Давайте разбираться с синдромом самозванца....
24 05 2026 2:46:25
Как понять, что проект нуждается в новых текстах и сделать читателя счастливым...
23 05 2026 20:50:17
Детальная инструкция по настройке рекламы мобильного приложения в Яндекс.Директ....
22 05 2026 12:11:11
Как визуализировать данные Google BigQuery в Power BI? Пошаговая инструкция от руководителя отдела веб-аналитики Netpeak Алексея Селезнева...
21 05 2026 4:16:19
Баннерная реклама в фейсбуке. Обзор семи новых рекламных инструментов...
20 05 2026 20:51:45
Пример того, как составить маркетинговый контент-план, анализируя успешных конкурентов...
19 05 2026 9:58:15
Первая часть иллюстрированного руководства, в котором мы взяли 20 самых важных фактора ранжирования представлены с краткими иллюстрированными примерами. В этом тексте вы найдете первые 10. Узнать больше!...
18 05 2026 2:22:46
Пройдем вместе путь вебмастера от первых шагов и до вершины ТОПа :)...
17 05 2026 14:50:47
О работе внутреннего и внешнего контент-маркетолога: необходимые знания и навыки для старта, плюшки и головная боль. Все здесь....
16 05 2026 2:51:43
Образец рассылки от создателе Replyapp.io Олег Белозор, на которую ответили самые влиятельные эксперты в мире в2в продаж...
15 05 2026 12:52:11
Голосуй за первых лиц маркетинга ecommerce-проектов Украины...
14 05 2026 23:57:42
У нас было 500 вечнозеленых постов и желание понять алгоритм ленты Facebook....
13 05 2026 20:12:57
Как развить в себе такой EQ, как хочется, и далее использовать его для достижения успеха. Рецензия на книгу Дэниела Гоулмана «Эмоциональный интеллект в бизнесе»....
12 05 2026 4:59:21
Какие форматы видеорекламы логичнее купить для создания спроса на новую продукцию? Выясняем на примере кейса бренда Yves Rocher...
11 05 2026 19:48:25
Объявление в тематике автошин — отличная тема для рекламы в интернете....
10 05 2026 20:30:51
Нескучный инструктаж на примере @netpeak_ua о том, зачем компании корпоративный Twitter для продвижения контента, компании или персоны. А еще про хештеги, поиск читателей, аналитику, стиль ведения вашего микроблога, создание сообщества и акции...
09 05 2026 12:42:29
Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...
08 05 2026 0:32:54
Раскрутка музыки онлайн: способы, методы, нюансы и примеры...
07 05 2026 19:23:50
Создать BI-систему собственного кошелька. Для ввода и хранения данных выбор стоял между Google Forms и Google Sheets или Airtable.Читайте дальше, что выбрал автор, чтобы оптимизировать расход, планировать траты на месяц и контролировать результаты в PowerBI....
06 05 2026 12:19:47
Основатель сервиса мобилографии EyeEm Рамзи Ризк рассказал об особенностях своего сервиса и будущем мобильных приложений....
05 05 2026 7:51:26
PBN (Private Blog Network) — приватная/частная сеть блогов, сайты-сателлиты, сетки сайтов. Строить их долго, дорого, но это работает....
04 05 2026 21:19:41
Персональный чек-лист автора десятков рассылок: три года опыта и регулярное общение с техподдержкой почтовых сервисов. Всё о том, как не попасть в спам и как из него спасаться. А может и не всё. Можете дополнить этот пост своими фишками? Делитесь!...
03 05 2026 0:57:58
Что мы узнали после 19 миллионов показов рекламных объявлений по разным спискам ремаркетинга....
02 05 2026 18:43:48
Красивый слог и сюжет должны быть в интеpaктивной оболочке, соответствующей времени. Проект Gutenbergz идет к созданию именно такой — идеальной истории для людей XXI века. О пути к этой цели, топе App Store и успехе на Kickstarter мы поговорили с руководи...
01 05 2026 21:59:41
Как упростить знакомство клиента с компанией, продуктом или услугами....
30 04 2026 13:28:29
Как за полгода обновить корпоративный блог, зачем это может быть нужно. О том, как начинали с сегментации, внедряли SEO-рекомендации, оптимизировали ЧПУ, трaнcлитерацию, пагинацию и структуру блога вплоть до конкретной работы со статьями, рейтингами и их страницами...
29 04 2026 2:46:20
О проблеме с передачей данных об A/B-тестах в Google ***ytics...
28 04 2026 8:52:56
Распространенные ошибки в XML-фидах Google и Яндекс, CSV-фидах и как исправить их своими силами. Используем Notepad++, отладчик ленты Facebook и Excel. Узнать больше!...
27 04 2026 3:36:55
Кейс, в котором мы описываем работу с одним из наших старейших клиентов (с 2014 года) и как нам пришлось изменить устоявшийся формат работы и рекламного бюджета, чтобы соответствовать реалиям 2020 года....
26 04 2026 9:29:42
Часто руководители, которые прекрасно справляются с работой в мирное время, в период войны перестают быть эффективными. У них нет навыков кризис-менеджмента. Чтобы удержать ситуацию на плаву, кризис-менеджером должен стать главный руководитель компании....
25 04 2026 12:19:58
Direct сделал подарок всем, кто уже давно хотел увеличить привлекательность своих объявлений — добавил возможность включения видеодополнений к текстово-графическим кампаниям. Как включить новую фишку от Директа и достаточно ли она эффективна?...
24 04 2026 8:11:16
Решение для поискового продвижения крупных проектов (от 300 000 страниц)....
23 04 2026 18:43:53
Как сделать приятно подписчику в день его рождения, на Новый год и в любой другой праздник....
22 04 2026 16:54:10
Рассказываем про телеграм-канал со-основателя Netpeak и чем он интересен для предпринимателей, руководителей и маркетологов....
21 04 2026 10:50:57
Хотите узнать, сколько стоит клик в вашей тематике? Как эффективно распределить рекламный бюджет? В этом исследовании я изучил, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане...
20 04 2026 6:13:26
Чтобы привлечь представителей малого и среднего бизнеса, мы разработали стратегии по контекстной рекламе. Это открывает двери агентства Netpeak проектам с самым скромным бюджетом...
19 04 2026 8:33:10
Андреас Рётль о продвижении Journi: как трое выпускников Стэнфордского университета создали приложение для сторителлинга с 25 000 пользователями в 100 странах....
18 04 2026 21:28:12
Мнение Сергея Петренко, CEO компании Odesseya....
17 04 2026 12:16:20
В продажах лучше визуализировать путь потребителя в виде нейронных сетей....
16 04 2026 2:14:16
Портал-каталог организаций и его продвижение. В этом кейсе мы детальнее остановимся на выгодах для проекта от синергии усилий клиента и агентских специалистов по контекстной рекламе...
15 04 2026 3:40:39
Консультант по маркетингу в зоне ru Екатерина Решетило написала пост о том, как правильно настроить стратегический контент-маркетинг для долгосрочных продаж...
14 04 2026 14:45:55
Советы и даже требования SEO-специалистов к разработчикам сайтов....
13 04 2026 9:40:29
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
