Создание простой темы для 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 Ads и Яндекс.Директ в Казахстане...
18 07 2025 2:26:16
SEO-продвижение онлайн-сервиса доставки еды с новым сайтом. Цели продвижения, составление семантического ядра, формирование URL, поддомены, карточки товаров, тексты, внешняя оптимизация, дополнительные работы, а также полученные результаты...
17 07 2025 5:37:41
Новости для наших существующих и потенциальных клиентов....
16 07 2025 0:13:42
Делимся полезным скриптом — он проверяет код ответа сервера для списка страниц, до 1000 за сутки....
15 07 2025 9:40:33
Система индексирования страниц — как поисковик и его роботы разбирают перечень контента по полочкам...
14 07 2025 12:25:47
Как правильно рассчитать окупаемость рекламных кампаний SaaS-продуктов, получить по ним четкую аналитику, и что делать дальше....
13 07 2025 12:10:39
Есть офлайн-точка продаж и нужно привлечь сюда больше клиентов. Что делать? Настраиваем локальные кампании. Показываем и рассказываем, как это делать....
12 07 2025 22:36:30
Мануал для SEO-специалистов, как автоматизировать сбор данных из блока People also ask (Пользователи также ищут). Это блок, который показывается в верхней части страницы результатов поиска. Он нужен, чтобы уточнить запрос пользователя....
11 07 2025 9:15:52
Результаты кампании динамического ремаркетинга для соцсетей...
10 07 2025 16:48:57
Об особенностях реализации интернет-проектов в Великобритании, России и Казахстане и фишках успешного ведения бизнеса онлайн мы побеседовали с Владимиром Меркушевым — руководителем интернет-проектов успешной казахстанской компании Kolesa.kz....
09 07 2025 9:33:29
Какую тактику выбрать, чтобы написать внятный доклад. Хедлайнеры интернет-маркетинговых конференций делятся опытом...
08 07 2025 7:33:26
5 примеров маркетингового троллинга. Сатира, ирония, пародия — все эти приемы в рекламе помогают брендам выделиться среди конкурентов. Если их правильно использовать, конечно, это отличный способ привлечь клиентов и создать запоминающийся образ бренда...
07 07 2025 13:34:15
Почему лендинги на Тильде выгодны бизнесу, какие задачи он решает, о форматах работы по услуге, детально о ее составе и спецпредложениях от Netpeak и наших партнеров по настройке контекстной рекламы, сервисов на лендинге и даже промокод на скидку Yagla...
06 07 2025 13:32:16
Из нового исследования вы узнаете, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года...
05 07 2025 7:29:19
Будьте полезны, будьте удобны и будьте везде. Далее подробно — 18 способов собрать базу для email-рассылок. О пользе бесплатного, привлечении внимания, возможных активностях для аудитории, социальных доказательствах, предсказуемости, работе с Facebook и многом другом...
04 07 2025 2:20:10
Как владельцу стартапа пробиться сквозь сотни ежедневных сообщений, которые получает инвестор, создать эффективную цепочку писем и быть замеченным...
03 07 2025 0:37:29
Алексей Селезнев, руководитель отдела аналитики Netpeak делится статистикой по самым дорогим и самым дешевым тематикам, регионам размещения рекламы, каналам и устройствам. Узнать больше!...
02 07 2025 5:41:29
Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....
01 07 2025 3:31:27
Как с помощью GA4 анализировать рекламные кампании, лежа на диване...
30 06 2025 3:34:33
В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...
29 06 2025 17:36:52
Что делать, если вы столкнулись со спамом в отчетах Google ***ytics? Значит ли это, что кто-то имеет доступ к вашему аккаунту, или что кто-то специально влияет на данные сайта в GA? Как они это делают? И как исключить подобные данные из отчетов?...
28 06 2025 12:46:23
Что нужно учесть при создании баннеров для разных аудиторий...
27 06 2025 20:56:55
Чтобы прекратить споры о том, с какого конца разбивать яйцо, я собрал аргументы за союз SEO и PPC...
26 06 2025 12:56:21
Как Bigl.ua внедрили AMP и остались очень довольны результатом....
25 06 2025 21:31:31
Как исключить показы на нецелевых площадках в новом интерфейсе Google Ads. В конце статьи 30 000 минус-площадок, каналов YouTube, сайтов, приложений...
24 06 2025 8:12:57
HR-советы компаниям, которым нужно найти больше трех джунов в проект...
23 06 2025 14:55:58
5 мая в 17:00 — митап в Zoom с Радомиром Новковичем — фаундером RadASO и CEO Tonti Laguna Mobile....
22 06 2025 7:42:16
Иногда даже замена блока с промокодом или обновление хедера и футера способны освежить рассылки и принести продажи, заявки, повысить лояльность клиентов. Узнать больше!...
21 06 2025 10:44:26
Чем полезна вкладка Network в DevTools для SEO-специалиста...
20 06 2025 17:12:47
О возможностях нестандартного использования поисковых систем для решения важных бизнес-задач...
19 06 2025 18:20:55
Ссылки нужно не только наращивать, но и постоянно посещать и мониторить качество уже существующих....
18 06 2025 21:34:49
Пошагово подключаем скрипт проверки бюджета аккаунтов Google Ads. Скрипт отправляет уведомление на почту и в Telegram — это поможет вовремя пополнить счет. Узнать больше!...
17 06 2025 12:22:59
Список инструментов email-маркетолога для рассылок по англоязычной аудитории....
16 06 2025 7:34:25
При наложении санкций на сайт его страницы заметно понижаются в выдаче. При наличии бана ресурс полностью исчезает из поиска, включая брендовые запросы...
15 06 2025 18:37:48
Мир гаджетов на Android и IOS. ROMI (возврат маркетинговых инвестиций) по валовой прибыли: 764%....
14 06 2025 20:15:24
Как работать с негативом и что делать, чтобы его было меньше/не было вовсе....
13 06 2025 13:36:53
Алгоритм технической подготовки IP-адреса к массовым рассылкам...
12 06 2025 6:58:52
Отрывок из книги «Статистика: базовый курс в комиксах» Грейди Клейн и Алана Дебни...
11 06 2025 13:14:13
Кейс выполнимой миссии — отправили рассылку по «холодной» базе и обошли запреты почтовых сервисов на изображения 18+...
10 06 2025 13:28:28
История о предсказательной аналитике системы автоматизации маркетинга, онлайн-магазине и ненужных письмах....
09 06 2025 19:18:50
Кликбейтинг в опасности. Если хочешь узнать методы работы антикликбейт-комaнды Facebook, просто нажми на этот заголовок...
08 06 2025 21:34:40
Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....
07 06 2025 4:55:21
Что учитывать при продвижении недвижимости, клиник красоты, магазинов косметики, сайтов по продаже семян, шин?...
06 06 2025 16:59:19
Всем, кто собирается перейти на Single Page Application, но переживает, что они поссорятся с поисковыми системами. Правильно переживаете!...
05 06 2025 10:45:42
Обзор новой версии краулера Netpeak Spider 3.0, которая включает в себя около 300 изменений: от супер-фич до небольших фиксов в юзабилити....
04 06 2025 10:11:54
Человеку стало плохо, он теряет сознание. Те, кто рядом, хотят помочь, но не знают, как это сделать. Давайте разбираться....
03 06 2025 10:35:47
9 тревожных признаков того, что ваши подчиненные могут выгореть и уволиться. Обратите внимание и, возможно, не придется терять ценных для компании людей....
02 06 2025 11:33:47
Альтернатива классическому SQL — обработка запросов из множества таблиц с помощью функций подстановки в Google BigQuery....
01 06 2025 7:23:38
Киев, Одесса, Харьков, Днепр и другие города — в офис и обратно IT-специалисты добираются от 10 минут до более чем полутора часа. В дороге они слушают музыку, подкасты, читают книги. Узнать больше!...
31 05 2025 21:13:58
Как раскрутить виртуальный магазин женской одежды. Подробно рассказываем, что делали и чего достигли...
30 05 2025 11:29:58
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
