Создание простой темы для 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.
Комментарии:
Междугородние перевозки и их реклама. Кейс Павла Верлана...
17 04 2026 18:24:49
Настроить контекстную рекламу для сети гипермаркетов бытовой техники и электроники Mechta.kz...
16 04 2026 1:35:33
Наш обзор кинофильма «Социальная сеть» про Facebook и Марка Цукерберга....
15 04 2026 21:54:56
22 оригинальные гипотезы для A/B-теста сайта, которые чаще всего влияют на получаемую прибыль...
14 04 2026 0:38:32
Как быстро настроить DSA с помощью Netpeak Spider. Рассмотрим подробнее «Только URL из фида страниц». Этот таргетинг помогает точнее определить целевую аудиторию и привести ее на максимально релевантные страницы сайта (к примеру, на карточку товара)....
13 04 2026 12:38:27
Настройка в четыре шага и другие отличия AdWords Express от Adwords...
12 04 2026 2:27:37
Как формируется цена на услугу онлайн-рекламы в специализированном агентстве, и на какие бюджеты предпринимателям стоит ориентироваться...
11 04 2026 6:19:27
Как автоматизировать целый участок в работе комaнды специалистов по контекстной рекламе — кейс concert.ua...
10 04 2026 23:54:11
Как новичкам в ecommerce выбрать первую CMS. Преимущества и трудности работы для крупных и небольших интернет-магазинов, русскоязычные и мультиязычные, с активной техподдержкой и без нее. Узнать больше!...
09 04 2026 12:23:33
Всё о крупной рыбе украинского интернет-маркетинга: компании, люди, кейсы в интервью с основателем Артёмом Бородатюком....
08 04 2026 7:42:28
О проблеме с передачей данных об A/B-тестах в Google ***ytics...
07 04 2026 19:13:26
Узнай, как бэкофис группы помогает развиваться компаниям, и выиграй iPhone — подбери крутое название для нашей группы....
06 04 2026 9:58:17
Руководство по переносу кампаний в новый аккаунт Рекламы...
05 04 2026 13:14:27
Создатель студии рисованных видео Денис Довгаль — о тактике видеомаркетинга и жизни в стиле «цифровых кочевников»....
04 04 2026 11:22:29
Основатель Depositphotos и Clashot Дмитрий Сергеев рассказал нам о базовых правилах ведения бизнеса на западном рынке....
03 04 2026 11:31:50
Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...
02 04 2026 23:41:59
Проверьте свою логику, находчивость и креативность...
01 04 2026 12:45:25
Взяли интервью у нашего клиента — магазина климатической техники Mircli.ru. Поговорили о том, как клиенту и подрядчику лучше взаимодействовать....
31 03 2026 11:24:14
Давайте больше не будем сливать бюджет, выбирая неправильный параметр....
30 03 2026 6:13:53
Расчет вероятности конверсии, быстрое и эффективное создание дашбордов, строение моделей KPI. Примеры аналитики кампаний с помощью Excel и Power BI от спикера 8P 2016 Максима Уварова....
29 03 2026 8:11:54
Как изменить геовыдачу с помощью настроек Google, Яндекс или специальных дополнений...
28 03 2026 23:18:11
Определение, исследование и проверка конкурентов в Similarweb — первый шаг перед запуском и масштабированием проекта...
27 03 2026 14:31:16
Что такое теневой бан, что о нем известно, как выйти из-под него. Плюс мнение SMM-эксперта Нели Серебро...
26 03 2026 2:43:59
Рассказываем, как обменять свои деньги на действительно полезные знания....
25 03 2026 17:27:18
Используйте и интерпретируйте карты знаний Netpeak Group, чтобы экономить свои силы и время на создании собственных карт с нуля. Узнать больше!...
24 03 2026 16:38:36
Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...
23 03 2026 5:38:22
Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить. В этом заключается польза данного исследования. Читать дальше!...
22 03 2026 2:26:54
Сначала учитесь, а потом идите в бизнес и предпринимательство. Бизнес — это игра, в которую играют пару тысяч лет, и здесь не нужно придумывать велосипеды. Научитесь сначала просто ездить, потом уже будете думать про кастомы....
21 03 2026 16:17:19
Интересные детали интерьера в офисах украинских IT-компаний: от массажного стола и тенниса до звукозаписывающей студии и корпоративной велопарковки. Читать дальше!...
20 03 2026 8:17:25
Опции скриншутера, которые упростят вам жизнь....
19 03 2026 21:55:48
Заказчик всегда приходит с идеей. В этой идее может быть все продумано до мелочей, а может быть только каркас. В любом случае мысли клиента следует систематизировать так, чтобы с ними было удобно работать....
18 03 2026 13:34:56
Как и зачем мигрировать со старой на новую версию API на языке R. С пакета RAdwords на rgoogleads. Руководство от Алексея Селезнева. Читать дальше!...
17 03 2026 19:27:15
Настройка целей в Google ***ytics, а также отслеживание событий....
16 03 2026 13:39:26
Мы собрали 30+ Телеграм-каналов, где вы найдете только полезную и актуальную информацию про маркетинг, SEO, SMM, веб-аналитику и развитие бизнеса...
15 03 2026 17:21:45
Как перенести сайт с http на https и сохранить трафик, потратив минимум времени....
14 03 2026 23:13:54
Используем возможности Google Cloud Platform в работе с R...
13 03 2026 0:11:25
Такое обозрение очередной новинки Google от Сергея Бахаря...
12 03 2026 19:32:23
Это не автобиографические романы, не бесплатные учебники и не подборка книжек, чтобы скачать в epub. Это интересная топ литература о маркетинге, которую мы хотим вам посоветовать....
11 03 2026 3:17:58
Не только netpeak spider. Главные детали о новой версии инструмента Netpeak Checker 3.0: парсер гугла, массовый анализ сайтов, антибан-алгоритм для прокси, шаблоны параметров и фильтров...
10 03 2026 15:40:59
Как использовать сториз для бизнеса на полную? Фишки от пpaктиков SMM-продвижения....
09 03 2026 18:11:17
За какими метриками следует пристально следить в email-рассылках...
08 03 2026 15:52:41
Полезный и интересный контент — это лучший крючок, который помогает привлечь новых клиентов на аграрном рынке и удержать их внимание....
07 03 2026 0:32:14
Как Blizzard реализует тимбилдинг, мотивирует сотрудников и превращает офис в музей...
06 03 2026 2:17:51
А сейчас про конференцию Netpeak Friends Day для друзей Netpeak Group...
05 03 2026 10:30:23
Пожар в дата-центре, неудачные обновления и то самое падение Facebook....
04 03 2026 1:27:26
Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....
03 03 2026 7:36:29
Истории бизнеса и советы от Игоря Жаданова (Readdle), Александра Галкина (Competera) и Рагнара Саас (Pipedrive)...
02 03 2026 14:17:17
Как анализировать конкуренты и делать правильные выводы для развития бизнеса....
01 03 2026 4:23:54
Информация для бизнесменов, интернет-маркетологов и всех, кто интересуется продвижением бизнеса в интернете....
28 02 2026 13:58:38
Планируете создание бизнеса, связанного с торговлей в интернете? Сначала прочитайте этот текст....
27 02 2026 13:57:51
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
