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



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

Отделяем мух от котлет в контент-маркетинге

Отделяем мух от котлет в контент-маркетинге Пpaктическая информация о том, что и куда нужно постить....

28 09 2022 9:34:49

Блокировка сайтов по требованию РКН: как работают хостинги — опрос

Блокировка сайтов по требованию РКН: как работают хостинги — опрос Чтобы понять, как работает Роскомнадзор, пришлось разбираться в деталях и делать опрос по топовым хостингам. Ответы и выводы читайте в статье....

27 09 2022 10:55:35

Как добавить больше 10 филиалов в Google Business Profile

Как добавить больше 10 филиалов в Google Business Profile У вас фирма с филиалами по всей стране? Короткий инструктаж по массовой загрузке адресов...

26 09 2022 23:41:27

Системные улучшения Netpeak — демо услуг PPC, чат любителей блога и сервис поиска ошибок рекламных кампаний в Cluster

Новости, доработки и обновления в услугах, блоге, Академии блога и Кластере....

25 09 2022 1:34:52

Как получать данные от сторонних сервисов — создаем вебхук с помощью Google Apps Scripts

Как получать данные от сторонних сервисов — создаем вебхук с помощью Google Apps Scripts Всё о вебхуках. Как настроить механизм получения уведомлений о событиях с помощью функций обратных вызовов....

24 09 2022 7:31:12

Как нанять маркетолога и не уволить через месяц

Как нанять маркетолога и не уволить через месяц Краткая инструкция по поиску идеального кандидата, потому что (как видим) многим на рынке все еще сложно найти хорошего маркетолога. Да и понять, стоит ли вкладывать в сотрудника силы, время, средства с первой встречи достаточно сложно....

23 09 2022 13:52:11

Поведенческая аналитика — что мешает клиенту сделать заказ

Поведенческая аналитика — что мешает клиенту сделать заказ Анализируя поведение аудитории, вы сможете понять, почему клиенты приходят на сайт, почему уходят, и почему не делают заказы....

22 09 2022 6:58:19

Как с помощью ASO увеличить количество бесплатных установок на 25% — кейс monobank

Как с помощью ASO увеличить количество бесплатных установок на 25% — кейс monobank Нам удалось увеличить количество органических показов на 63% и установок на 25%....

21 09 2022 11:57:29

Как сделать платежи в соцсетях удобными для клиента и продавца

Как сделать платежи в соцсетях удобными для клиента и продавца Оплата покупок в Facebook и Instagram через платежные ссылки...

20 09 2022 7:53:35

Как рассчитать ROMI для большого интернет-магазина — импортируем себестоимость товаров в Google ***ytics

Как рассчитать ROMI для большого интернет-магазина — импортируем себестоимость товаров в Google ***ytics Хотите видеть в отчетах точный ROMI в разрезе рекламных кампаний, групп объявлений и ключевых слов? Импортируйте себестоимость товаров в Google ***ytics...

19 09 2022 3:42:19

Как правильно зарегистрировать сайт в поисковых системах Google, Яндекс, Bing, Mail.ru, Rambler и Yahoo

Как правильно зарегистрировать сайт в поисковых системах Google, Яндекс, Bing, Mail.ru, Rambler и Yahoo Бесплатная регистрация сайта в поисковых системах и каталогах – отличный способ увеличить объемы трафика и раскрутить собственный ресурс....

18 09 2022 23:33:11

Как продвигать бизнес в Казнете — интервью с Бауыржаном Токтагазы

Как продвигать бизнес в Казнете — интервью с Бауыржаном Токтагазы Актуальный обзор особенностей работы онлайн-проектов в Казахстане...

17 09 2022 0:23:42

Как найти PBN конкурента

Как найти PBN конкурента Как найти сетку сайтов конкурентов — рассказываем о популярных методах и секретных фишках. Бонус — инструкция по выявлению PBN конкурентов. Читать дальше!...

16 09 2022 12:38:57

Страница «о нас» — первое, что должно быть на сайте

Страница «о нас» — первое, что должно быть на сайте Красивое креативное описание страницы «о нас» — важная составляющая коммуникации с потенциальным клиентом. Покажите свою комaнду, опишите ценности и миссию. Сделайте эту страницу продающей. Узнать больше!...

15 09 2022 14:46:59

Почему отдел продаж сидит без дела. Находим решение с помощью коллтрекинга

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

14 09 2022 12:26:12

Правила преобразования фидов в Google Merchant Center

Правила преобразования фидов в Google Merchant Center Правила преобразования фидов в Google Merchant Center помогут сегментировать товары и сделать вашу рекламу более эффективной...

13 09 2022 20:27:42

Апдейты поисковых алгоритмов Google, Яндекса и ручные санкции — мануал для вебмастеров

Апдейты поисковых алгоритмов Google, Яндекса и ручные санкции — мануал для вебмастеров Почему сайт упал в выдаче и какой апдейт алгоритма поисковика на это повлиял...

12 09 2022 21:39:58

Как бренды по-злому шутят в рекламе

Как бренды по-злому шутят в рекламе 5 примеров маркетингового троллинга. Сатира, ирония, пародия — все эти приемы в рекламе помогают брендам выделиться среди конкурентов. Если их правильно использовать, конечно, это отличный способ привлечь клиентов и создать запоминающийся образ бренда...

11 09 2022 11:10:35

Как собрать ключевые запросы в Key Collector

Как собрать ключевые запросы в Key Collector Сбор ключевых запросов с помощью программы Кей Коллектор: показываем и рассказываем пошагово с демонстрацией процесса настройки с сервисом Яндекс.Вордстат. Читать дальше!...

10 09 2022 4:40:27

Что такое граббер сайтов и как с ним работать

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

09 09 2022 2:57:30

Исследование о влиянии отзывов в интернете на решение о покупке

Бизнесу следует позаботиться о том, чтобы представить отзывы на всех площадках (как минимум на тех, которые есть на трех страницах выдачи), где только может искать информацию пользователь. Узнать больше!...

08 09 2022 18:23:13

Как привлечь целевой трафик на сайт: кейсы по подбору ключевых фраз с помощью Serpstat (ex. Prodvigator)

Как привлечь целевой трафик на сайт: кейсы по подбору ключевых фраз с помощью Serpstat (ex. Prodvigator) Как использовать расширенное семантическое ядро для увеличения целевого трафика....

07 09 2022 18:13:26

Падение Facebook: о чем задуматься пользователям «больших сайтов»

Падение Facebook: о чем задуматься пользователям «больших сайтов» О чем стоит задуматься владельцам бизнеса и пользователям больших сайтов и почему Марку Цукербергу надо брать пример с телефонных сетей...

06 09 2022 23:50:52

10 онлайн способов улучшить контент

10 онлайн способов улучшить контент Как преодолеть онлайн писательский ступор, разобраться с рутиной и освободить время для экспериментов...

05 09 2022 7:58:52

Как прогнозировать трафик поисковых кампаний в Google Ads

Прогнозирование с помощью «Планировщика ключевых слов»....

04 09 2022 17:46:26

Как увеличить базу подписчиков на 100% за год — кейс domcomfort.ua

Как увеличить базу подписчиков на 100% за год — кейс domcomfort.ua Почти 50 тыс. контактов за год принесли формы подписки и регистрации....

03 09 2022 17:21:28

Как сохранить бизнес, если война. Реальная история бренда женской одежды Natali Bolgar

Как сохранить бизнес, если война. Реальная история бренда женской одежды Natali Bolgar Работать сейчас — не зазорно, а просто необходимо для страны...

02 09 2022 22:19:37

Кейс по email-маркетингу для интернет-магазина подарков — ROMI 100%

Кейс по email-маркетингу для интернет-магазина подарков — ROMI 100% Direct way. Как вложить 200 у.е. и получить 800 у.е....

01 09 2022 17:40:43

Контекстная реклама в тематике «междугородняя грузоперевозка»

Контекстная реклама в тематике «междугородняя грузоперевозка» Междугородние перевозки и их реклама. Кейс Павла Верлана...

31 08 2022 11:40:50

Как ускорить сайт с помощью сервиса CDN — краш-тест Айри

Как ускорить сайт с помощью сервиса CDN — краш-тест Айри Как трафик CDN повлиял на систему интернет-магазина — палим кейсы...

30 08 2022 6:49:21

Вакцинация от Covid-19 в Украине: как организовать для сотрудников офиса

Вакцинация от Covid-19 в Украине: как организовать для сотрудников офиса Оставить заявку на горячей линии МОЗ — это только вершина айсберга. Необходимо провести опрос среди сотрудников компании. И не один. А ещё подготовить несколько помещений для вакцинации и отдыха. Узнать больше!...

29 08 2022 17:10:43

Что такое tone of voice и как использовать голос бренда в соцсетях

То, как мы разговариваем, важно не только в жизни, но и в соцсетях. Зачем нужен tone of voice и как сделать, чтобы ваш голос отличался от других и был эффективен? Читайте наш гайд....

28 08 2022 19:14:21

Кейс по продвижению интернет-магазина отопительного оборудования: ROMI 86%

Кейс по продвижению интернет-магазина отопительного оборудования: ROMI 86% Через тернии к кейсу. SEO-продвижение интернет-магазина отопительного оборудования с оплатой за трафик...

27 08 2022 23:45:13

Как добиваться от подчинённых выполнения поручений

Как добиваться от подчинённых выполнения поручений Сотрудники на рабочем месте расслаблены, игнорируют распоряжения, а при давлении угрожают увольнением. В эту ситуацию нередко попадают руководители. Некоторые считают, что причина — выстраивание дружеских отношений с подчинёнными....

26 08 2022 13:18:48

Исследования рынка — новая услуга Netpeak

Исследования рынка — новая услуга Netpeak Предложение для крупных и средних бизнес-проектов по эффективному использованию больших бюджетов при запуске на новых рынках...

25 08 2022 9:17:24

История успеха vchasno.ua: разработали карты коммуникаций и триггерные цепочки писем

История успеха vchasno.ua: разработали карты коммуникаций и триггерные цепочки писем Готовые триггерные письма и сценарии позволяют быстро запустить триггеры после реализации технических заданий разработчиком....

24 08 2022 9:52:44

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

Как я работаю дома с двумя детьми — хроники безумного папы Опыт сотрудника отдела маркетинга Netpeak. Дочке Маше — 10 лет, сыну Егору — почти 4 года. Мы по-прежнему не очень продуктивны в таких условиях, но все же накопили больше опыта, чем те люди, которые сейчас внезапно столкнулись с удаленной работой...

23 08 2022 0:37:29

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...

22 08 2022 7:10:25

Инфографика: как именно рулит контент

Инфографика: как именно рулит контент Консультант по маркетингу в зоне ru Екатерина Решетило написала пост о том, как правильно настроить стратегический контент-маркетинг для долгосрочных продаж...

21 08 2022 7:51:20

Азы типографики — нескучно о шрифтах

Азы типографики — нескучно о шрифтах Нужно подобрать красивый шрифт? Готический или народный? Стандартный или фирменный? Как выбрать — рассказывает профессионал...

20 08 2022 14:29:11

Интервью с Владимиром Федориным

Интервью с Владимиром Федориным Сооснователь и главред Forbes Ukraine о вовлечении читателей в смысловое поле бизнеса...

19 08 2022 21:52:17

Какой сервис автоматического продвижения выбрать

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

18 08 2022 6:35:12

Как создать рекламную кампанию в Bing Ads — подробное руководство

Как создать рекламную кампанию в Bing Ads — подробное руководство Инструкция о том, как создать новую кампанию в Bing Ads или импортировать существующую из Google Рекламы? Как добавить способ оплаты? Читайте о первых шагах настройки рекламы в Bing...

17 08 2022 23:34:24

LSI-текст или SEO-текст — выживет только один

LSI-текст или SEO-текст — выживет только один Специалисты, занимающиеся seo копирайтингом, рассказывают об использовании LSI: определение текста, кол во символов, подсчет слов онлайн...

16 08 2022 10:30:18

Как использовать футпринты в SEO-продвижении

Как использовать футпринты в SEO-продвижении Футпринт — это признак, по которому можно спалить PBN-сетку сайтов. Это как родинки. Если взять двух парней с родинкой на щеке, то не факт, что они братья. Но если родинки совпадают на щеке, локте и колене, то тут что-то подозрительное...

15 08 2022 11:30:24

Как настроить таргетинг для рекламы в Instagram и Facebook

Как настроить таргетинг для рекламы в Instagram и Facebook Запускаем первую таргетированную рекламу. Мы составили инструкцию для начинающих таргетолов, а также для SMM-специалистов, которым регулярно нужно рекламировать товары и услуги. Читайте подробнее!...

14 08 2022 11:31:21

Гид по SEO для мобильных сайтов: инфографика

Гид по SEO для мобильных сайтов: инфографика Разработка, вёрстка и оптимизация мобильных версий сайтов — популярные темы последнего времени. Мы расскажем, что стоит и что не стоит делать в мобильном SEO....

13 08 2022 12:57:11

Как узнать сколько стоит ваш сайт

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

12 08 2022 3:54:56

Как стать брендом — формула Марка Эко

Как стать брендом — формула Марка Эко 10 шагов к я-бренду из книги «Я-бренд. Формула успеха». Марк вырастил свой бренд до размеров торгового бизнеса с объемами продаж в миллиарды долларов. Читайте, здесь есть и сама формула, подходящая для товара, сайта или торговли машинами...

11 08 2022 17:38:37

Что такое краулинг и как управлять роботами

Что такое краулинг и как управлять роботами Наука перехода — понятие краулинга (crawling, сканирование) сайта и принципа его работы. Виды поисковых роботов и способы их управления и другие полезные фишки в рубрике Азбука SEO на Netpeak Blog...

10 08 2022 12:21:59

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::