Создание простой темы для WordPress > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Создание простой темы для WordPress

Создание простой темы для 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.



Комментарии:

Сколько стоил клик по рекламе Ads и Директ в Казахстане во втором квартале 2017

Хотите узнать, сколько стоит клик в вашей тематике? Как эффективно распределить рекламный бюджет? В этом исследовании я изучил, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане...

18 07 2025 2:26:16

SEO-продвижение сайта eda.ua — рост органического трафика на 331,5% за шесть месяцев

SEO-продвижение сайта eda.ua — рост органического трафика на 331,5% за шесть месяцев SEO-продвижение онлайн-сервиса доставки еды с новым сайтом. Цели продвижения, составление семантического ядра, формирование URL, поддомены, карточки товаров, тексты, внешняя оптимизация, дополнительные работы, а также полученные результаты...

17 07 2025 5:37:41

Как получить код ответа cервера для страниц сайтов прямо в доксе

Как получить код ответа cервера для страниц сайтов прямо в доксе Делимся полезным скриптом — он проверяет код ответа сервера для списка страниц, до 1000 за сутки....

15 07 2025 9:40:33

Как поисковые системы индексируют сайт

Как поисковые системы индексируют сайт Система индексирования страниц — как поисковик и его роботы разбирают перечень контента по полочкам...

14 07 2025 12:25:47

Контекстная реклама для SaaS-продукта: как легко измерять в бизнес-показателях эффективность контекстной рекламы

Как правильно рассчитать окупаемость рекламных кампаний SaaS-продуктов, получить по ним четкую аналитику, и что делать дальше....

13 07 2025 12:10:39

Как запустить локальную кампанию Google Ads — пошаговая инструкция

Как запустить локальную кампанию Google Ads — пошаговая инструкция Есть офлайн-точка продаж и нужно привлечь сюда больше клиентов. Что делать? Настраиваем локальные кампании. Показываем и рассказываем, как это делать....

12 07 2025 22:36:30

Как быстро собрать данные из блока People also ask в Google

Мануал для SEO-специалистов, как автоматизировать сбор данных из блока People also ask (Пользователи также ищут). Это блок, который показывается в верхней части страницы результатов поиска. Он нужен, чтобы уточнить запрос пользователя....

11 07 2025 9:15:52

Как продать кровати в Facebook — кейс магазина мебели matrason.ua

Результаты кампании динамического ремаркетинга для соцсетей...

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

Новая услуга по созданию лендингов на Tilda

Новая услуга по созданию лендингов на Tilda Почему лендинги на Тильде выгодны бизнесу, какие задачи он решает, о форматах работы по услуге, детально о ее составе и спецпредложениях от Netpeak и наших партнеров по настройке контекстной рекламы, сервисов на лендинге и даже промокод на скидку Yagla...

06 07 2025 13:32:16

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года Из нового исследования вы узнаете, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане в третьем квартале 2018 года...

05 07 2025 7:29:19

18 способов собрать базу подписчиков для email-рассылок

18 способов собрать базу подписчиков для email-рассылок Будьте полезны, будьте удобны и будьте везде. Далее подробно — 18 способов собрать базу для email-рассылок. О пользе бесплатного, привлечении внимания, возможных активностях для аудитории, социальных доказательствах, предсказуемости, работе с Facebook и многом другом...

04 07 2025 2:20:10

Как использовать холодную рассылку для поиска инвесторов — советы стартапам

Как владельцу стартапа пробиться сквозь сотни ежедневных сообщений, которые получает инвестор, создать эффективную цепочку писем и быть замеченным...

03 07 2025 0:37:29

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане во втором квартале 2019 года

Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане во втором квартале 2019 года Алексей Селезнев, руководитель отдела аналитики Netpeak делится статистикой по самым дорогим и самым дешевым тематикам, регионам размещения рекламы, каналам и устройствам. Узнать больше!...

02 07 2025 5:41:29

Как устроен маркетинг в OLX.ua — рассказывает Marketing Director Алексей Ломоносов

Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....

01 07 2025 3:31:27

10 шагов к статистике на блюдечке. Инструкция по настройке «Подсказок» в Google ***ytics 4

10 шагов к статистике на блюдечке. Инструкция по настройке «Подсказок» в Google ***ytics 4 Как с помощью GA4 анализировать рекламные кампании, лежа на диване...

30 06 2025 3:34:33

Продвинутый подход к работе с аудиториями Facebook

Продвинутый подход к работе с аудиториями Facebook В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...

29 06 2025 17:36:52

Как исключить спам в Google ***ytics, или Кто портит ваши данные

Как исключить спам в Google ***ytics, или Кто портит ваши данные Что делать, если вы столкнулись со спамом в отчетах Google ***ytics? Значит ли это, что кто-то имеет доступ к вашему аккаунту, или что кто-то специально влияет на данные сайта в GA? Как они это делают? И как исключить подобные данные из отчетов?...

28 06 2025 12:46:23

Как рекламировать в гугл игры мужчинам и женщинам гeймерам

Как рекламировать в гугл игры мужчинам и женщинам гeймерам Что нужно учесть при создании баннеров для разных аудиторий...

27 06 2025 20:56:55

Контекстная реклама и поисковое продвижение: мощное комбо

Контекстная реклама и поисковое продвижение: мощное комбо Чтобы прекратить споры о том, с какого конца разбивать яйцо, я собрал аргументы за союз SEO и PPC...

26 06 2025 12:56:21

Миллион сеансов в месяц на AMP-страницы в E-commerce

Миллион сеансов в месяц на AMP-страницы в E-commerce Как Bigl.ua внедрили AMP и остались очень довольны результатом....

25 06 2025 21:31:31

Как сэкономить бюджет на рекламу в Google Ads — 30 тысяч минус-площадок, каналов YouTube, сайтов, приложений

Как сэкономить бюджет на рекламу в Google Ads — 30 тысяч минус-площадок, каналов YouTube, сайтов, приложений Как исключить показы на нецелевых площадках в новом интерфейсе Google Ads. В конце статьи 30 000 минус-площадок, каналов YouTube, сайтов, приложений...

24 06 2025 8:12:57

Как проходила первая интернатура в Serpstat: опыт отдела Quality Assurance

Как проходила первая интернатура в Serpstat: опыт отдела Quality Assurance HR-советы компаниям, которым нужно найти больше трех джунов в проект...

23 06 2025 14:55:58

Как эффективно настроить рекламные кампании в Apple Search Ads — zoom-митап с Радомиром Новковичем

Как эффективно настроить рекламные кампании в Apple Search Ads — zoom-митап с Радомиром Новковичем 5 мая в 17:00 — митап в Zoom с Радомиром Новковичем — фаундером RadASO и CEO Tonti Laguna Mobile....

22 06 2025 7:42:16

Редизайн писем в email-маркетинге — на что обратить внимание

Иногда даже замена блока с промокодом или обновление хедера и футера способны освежить рассылки и принести продажи, заявки, повысить лояльность клиентов. Узнать больше!...

21 06 2025 10:44:26

Как эффективно использовать Network в Chrome DevTools

Как эффективно использовать Network в Chrome DevTools Чем полезна вкладка Network в DevTools для SEO-специалиста...

20 06 2025 17:12:47

Как использовать возможности поиска для решения бизнес-задач

Как использовать возможности поиска для решения бизнес-задач О возможностях нестандартного использования поисковых систем для решения важных бизнес-задач...

19 06 2025 18:20:55

Как обнаружить и снять лишнюю ссылочную массу

Как обнаружить и снять лишнюю ссылочную массу Ссылки нужно не только наращивать, но и постоянно посещать и мониторить качество уже существующих....

18 06 2025 21:34:49

Как настроить отправку уведомлений о состоянии бюджета аккаунтов Google Ads в Telegram и на почту

Как настроить отправку уведомлений о состоянии бюджета аккаунтов Google Ads в Telegram и на почту Пошагово подключаем скрипт проверки бюджета аккаунтов Google Ads. Скрипт отправляет уведомление на почту и в Telegram — это поможет вовремя пополнить счет. Узнать больше!...

17 06 2025 12:22:59

11 полезных сервисов для рассылки по англоязычной аудитории

11 полезных сервисов для рассылки по англоязычной аудитории Список инструментов email-маркетолога для рассылок по англоязычной аудитории....

16 06 2025 7:34:25

Как проверить сайт на бан в поисковых системах

Как проверить сайт на бан в поисковых системах При наложении санкций на сайт его страницы заметно понижаются в выдаче. При наличии бана ресурс полностью исчезает из поиска, включая брендовые запросы...

15 06 2025 18:37:48

Кейс по рекламе в прайс-агрегаторах в тематике «гаджеты и аксессуары»: ROMI 869%

Кейс по рекламе в прайс-агрегаторах в тематике «гаджеты и аксессуары»: ROMI 869% Мир гаджетов на Android и IOS. ROMI (возврат маркетинговых инвестиций) по валовой прибыли: 764%....

14 06 2025 20:15:24

Как работать с репутацией медицинского бренда в интернете — кейс Synevo

Как работать с репутацией медицинского бренда в интернете — кейс Synevo Как работать с негативом и что делать, чтобы его было меньше/не было вовсе....

13 06 2025 13:36:53

Как молодому IP-адресу пробиться в мир больших email-рассылок — греем новичка

Как молодому IP-адресу пробиться в мир больших email-рассылок — греем новичка Алгоритм технической подготовки IP-адреса к массовым рассылкам...

12 06 2025 6:58:52

Комикс о проверке гипотез и человеческом факторе

Комикс о проверке гипотез и человеческом факторе Отрывок из книги «Статистика: базовый курс в комиксах» Грейди Клейн и Алана Дебни...

11 06 2025 13:14:13

Как email-рассылки принесли ceкc-шопу 20% дохода

Как email-рассылки принесли ceкc-шопу 20% дохода Кейс выполнимой миссии — отправили рассылку по «холодной» базе и обошли запреты почтовых сервисов на изображения 18+...

10 06 2025 13:28:28

Как повысить ROMI email-маркетинга на 63%, сократив базу контактов на 40%

Как повысить ROMI email-маркетинга на 63%, сократив базу контактов на 40% История о предсказательной аналитике системы автоматизации маркетинга, онлайн-магазине и ненужных письмах....

09 06 2025 19:18:50

Кликбейт-заголовки — всё: почему лента Facebook станет лучше

Кликбейт-заголовки — всё: почему лента Facebook станет лучше Кликбейтинг в опасности. Если хочешь узнать методы работы антикликбейт-комaнды Facebook, просто нажми на этот заголовок...

08 06 2025 21:34:40

SEO для ювелирного магазина — как на 100% увеличить трафик из поисковых систем после переезда сайта

SEO для ювелирного магазина — как на 100% увеличить трафик из поисковых систем после переезда сайта Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....

07 06 2025 4:55:21

Особенности контекстной рекламы для 5 ниш бизнеса. Тематические стратегии Netpeak

Особенности контекстной рекламы для 5 ниш бизнеса. Тематические стратегии Netpeak Что учитывать при продвижении недвижимости, клиник красоты, магазинов косметики, сайтов по продаже семян, шин?...

06 06 2025 16:59:19

Как сделать SPA-сайты SEO-Friendly?

Как сделать SPA-сайты SEO-Friendly? Всем, кто собирается перейти на Single Page Application, но переживает, что они поссорятся с поисковыми системами. Правильно переживаете!...

05 06 2025 10:45:42

Обзор Netpeak Spider 3.0: краткая версия

Обзор Netpeak Spider 3.0: краткая версия Обзор новой версии краулера Netpeak Spider 3.0, которая включает в себя около 300 изменений: от супер-фич до небольших фиксов в юзабилити....

04 06 2025 10:11:54

Первая помощь в офисе — как вести себя в нештатных ситуациях

Первая помощь в офисе — как вести себя в нештатных ситуациях Человеку стало плохо, он теряет сознание. Те, кто рядом, хотят помочь, но не знают, как это сделать. Давайте разбираться....

03 06 2025 10:35:47

Как автоматизировать заботу о сотрудниках

Как автоматизировать заботу о сотрудниках 9 тревожных признаков того, что ваши подчиненные могут выгореть и уволиться. Обратите внимание и, возможно, не придется терять ценных для компании людей....

02 06 2025 11:33:47

Как обpaбатывать данные из множества таблиц в Google BigQuery

Как обpaбатывать данные из множества таблиц в Google BigQuery Альтернатива классическому 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 ::