Создание простой темы для 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.
Комментарии:
Всем, кто собирается перейти на Single Page Application, но переживает, что они поссорятся с поисковыми системами. Правильно переживаете!...
17 11 2025 0:44:47
Алгоритм ссылочного ранжирования, который показывает ее значимость, в частности, для поисковиков. Важность показателя PageRank оспаривают, но до сих пор считают. Читать!...
16 11 2025 21:55:49
Нужно подобрать красивый шрифт? Готический или народный? Стандартный или фирменный? Как выбрать — рассказывает профессионал...
15 11 2025 1:22:58
Пуш для рекламных кампаний накануне праздничных распродаж...
14 11 2025 2:36:49
Пройдем вместе путь вебмастера от первых шагов и до вершины ТОПа :)...
13 11 2025 12:21:57
Что, если бы покупка в супермаркете происходила так же, как в онлайн-магазине?...
12 11 2025 14:11:59
Уверены, что аппы в украине не приносят денег? В этом кейсе мы расскажем, как увеличить доход с мобильного приложения, и поделимся результатами продвижения LeBoutique...
11 11 2025 6:39:11
Фишка, которую можно позволить себе даже когда портал продает всего несколько товаров или услуг...
09 11 2025 19:43:11
Используя для продвижения контекстную рекламу, большинство рекламодателей в Украине отдают предпочтение системе Google Ads. Директ однозначно не стоит недооценивать. Почему? Читайте в статье!...
08 11 2025 1:12:11
Рассказываем про телеграм-канал со-основателя Netpeak и чем он интересен для предпринимателей, руководителей и маркетологов....
07 11 2025 10:59:15
Все дело в формате объявлений Instant Experience с подключенным каталогом товаров. Нет, не только в нем. Узнать больше!...
06 11 2025 7:49:42
Нескучный инструктаж на примере @netpeak_ua о том, зачем компании корпоративный Twitter для продвижения контента, компании или персоны. А еще про хештеги, поиск читателей, аналитику, стиль ведения вашего микроблога, создание сообщества и акции...
05 11 2025 15:44:42
Альтернатива классическому SQL — обработка запросов из множества таблиц с помощью функций подстановки в Google BigQuery....
04 11 2025 11:55:26
Учимся выстраивать коммуникацию по специальным сценариям....
03 11 2025 19:19:11
Как Netpeak продвигал Cifrus.ru, один из ведущих магазинов цифровой техники в Москве....
02 11 2025 16:26:42
Грамотная группировка поисковых запросов позволяет максимально увеличить поисковой трафик....
01 11 2025 8:10:42
Данные, приведенные в исследовании, помогут в составлении медиапланов по продвижению в интернете. Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить....
31 10 2025 21:20:43
Дизайн макета сайта должен полностью соответствовать представлениям о готовом ресурсе. Создать его можно с помощью онлайн-сервисов, стационарных программ либо через HTML-код...
30 10 2025 4:19:18
Один из самых известных отчетов в Google ***ytics «Аудитория/Обзор». Но кроме него есть еще несколько, которые будут весьма полезны для вашего блога. Какие именно, читайте дальше....
29 10 2025 13:29:56
Обсуждаем, как попробовать инфлюенсер-маркетинг без особого бюджета...
28 10 2025 11:57:13
Украинцы хотят заниматься коммерцией. И иногда делают это очень нестандартно. Собрали для вас подборку бизнесменов с особенным мышлением....
27 10 2025 2:45:30
Чтобы увеличить продажи и улучшить их эффективность в новых условиях необходимо применять «социальные доказательства»....
26 10 2025 6:19:50
Как специалисту оптимизировать рабочее время, качественно развивать проекты и меньше нервничать...
25 10 2025 14:53:31
Как увеличить охват и видимость сайта за счет сбора семантического ядра и расширения структуры...
24 10 2025 5:12:12
Проделанные шаги и полученные результаты при раскрутке магазина великов в интернете...
23 10 2025 22:10:16
А ещё Netpeak Cluster стал инструментом и у нас появился хаб знаний на YouTube....
22 10 2025 10:11:24
Формула изменения поведения Фогга и два красочных примера инсайде....
21 10 2025 20:33:29
Пока вы не осознаете причины, почему вам выгодно не хвалить, забудьте про качественную обратную связь и максимальную включенность комaнды. Фишки управления собой, людьми и проектами....
20 10 2025 7:32:28
+ таблица с примерами использования каждой функции....
19 10 2025 9:14:51
Какими бывают формы подписки и как их используют бренды...
18 10 2025 4:42:14
Полезный и интересный контент — это лучший крючок, который помогает привлечь новых клиентов на аграрном рынке и удержать их внимание....
17 10 2025 4:40:29
О важных для разметки сайта тегах — alternate, hreflang, media, — и как их грамотно использовать при продвижении....
16 10 2025 4:25:44
Как изменилось агентство Netpeak c августа по октябрь? Читайте о семи главных нововведениях и улучшениях в работе с клиентами....
15 10 2025 1:42:33
Создать BI-систему собственного кошелька. Для ввода и хранения данных выбор стоял между Google Forms и Google Sheets или Airtable.Читайте дальше, что выбрал автор, чтобы оптимизировать расход, планировать траты на месяц и контролировать результаты в PowerBI....
14 10 2025 16:35:45
Интеграция видео в маркетинговую кампанию – решение, которое повысит ценность каждого посетителя сайта....
13 10 2025 1:32:57
Рассказывайте о развитии фирмы, ее достижениях, масштабах деятельности — это то, что нужно вашим потенциальным клиентам. Так вы повысите их лояльность. Узнать больше!...
12 10 2025 1:50:31
Продажа климатического оборудования. Кейс о проекте, который продвигался у нас на услуге «продвижение по позициям» и не демонстрировал хороших результатов как по росту трафика, так и по продажам, не смотря на высокие места в выдаче. Узнать больше!...
11 10 2025 2:36:51
Виктория Игнатьева рассказала про опыт обучения на наших курсах....
10 10 2025 7:40:52
От того, что такое оффер до лучших стратегий и избежания ошибок...
09 10 2025 17:59:20
Твиты, реплаи, ретвиты - как сделать правильные выводы из активности в Twitter? Об этом читайте в нашем посте....
08 10 2025 3:33:10
Эта история о том, как за два года комплексный подход к поисковому продвижению (SEO на этапе разработке сайта и дальнейшие действия по оптимизации) помог увеличить рост бесплатного трафика на 463% или Что делать, если SEO не приносит результаты сразу...
07 10 2025 13:38:33
Как отключить блокировку API запрещенных сервисов в скриптах R и продолжать использовать пакеты ryandexdirect, rvkstat, rmytarget, Google Sheets и BigQuery...
06 10 2025 6:15:42
СЕО of Augmented Pixels рассказал нам о принципах ведения бизнеса в Украине и США, о ненужности бизнес-планов и креативных питчей, а также о способе стать лучшим программистом...
05 10 2025 1:27:32
Помогают ли комментарии повысить эффективность рекламных постов? Единственный способ выяснить наверняка — провести A/B-тестирование в Facebook. Спойлер: тональность комментария также имеет значение в Facebook...
04 10 2025 2:50:27
Всё об оценке эффективности SEO-продвижения с инструментами и рекомендациями...
03 10 2025 5:16:36
Где искать информацию, как составить контент-план, писать тексты быстро и легко, а затем продвигать их. Собрали для вас подборку постов о разных этапах работы с контентом....
02 10 2025 13:22:22
Опыт коллег и их рекомендации — самая ценная валюта в арбитраже. Давайте объединим усилия и составим актуальный рейтинг СРА-сетей Украины....
01 10 2025 16:57:37
Панельная дискуссия, на которой специалисты представляют нестандартные идеи для привлечения трафика, продвижения проектов. Всё, что можно применить на деле. Читать!...
30 09 2025 16:42:49
Обидно терять сохраненные достижения. Почему падает трафик из поисковых систем и как это исправить...
29 09 2025 15:15:47
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
