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



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

Engagement Rate в email-маркетинге: что это, как посчитать и повысить

Engagement Rate в email-маркетинге: что это, как посчитать и повысить Определяем, кто из mail подписчиков предан вашему бренду по-настоящему....

07 06 2023 19:12:15

Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе»

Ян Чихольд: «Неправда, что о вкусах не спорят, если речь идет о хорошем вкусе» Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....

06 06 2023 9:53:38

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

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

05 06 2023 8:59:19

Как маркетинговому агентству выйти на зарубежный рынок. Опыт ADINDEX

Статья будет полезна небольшим агентствам, которые мечтают работать с заграничными клиентами. Зачем нужно выходить за рубеж, если и в своей стране все идет неплохо, да и вообще — нет времени на продвижение на незнакомом рынке? Давайте разбираться вместе!...

04 06 2023 9:33:51

5 вопросов: нужно ли вам статейное продвижение

Наталья Воскобойникова из контент-студии WordFactory решила дать четкую хаpaктеристику потенциальному заказчику гостевых постов. Если хотя бы один ваш ответ на вопросы в этом посте отрицательный, стоит найти другие тактики продвижения своего проекта....

03 06 2023 12:16:45

Дублирование контента на сайтах, ориентированных на разные страны

Дублирование контента на сайтах, ориентированных на разные страны Дублирование контента на разных сайтах, ориентированных на рынки разных стран, например, на публику Канады...

02 06 2023 4:18:58

Как продвигаться в Instagram, если у вас B2B-бизнес

Как продвигаться в Instagram, если у вас B2B-бизнес Распространенные ошибки продвижения B2B-компаний + стратегии того, как наращивать число активных подписчиков и потенциальных клиентов....

01 06 2023 13:44:28

Facebook ***ytics — подробное руководство по настройке

Как работать с Facebook ***ytics — бесплатным инструментом с богатым инструментарием и лучшей из всех существующих решений интеграцией с платформой Facebook...

31 05 2023 20:55:59

Рэнд Фишкин: о трендах SEO и работе волшебника страны Moz

Рэнд Фишкин: о трендах SEO и работе волшебника страны Moz Экс-CEO, а теперь просто сотрудник и «волшебник страны Moz» Рэнд Фишкин поделился с читателями блога рассказом о своем видении будущего SEO, перспективах анонимизации сети и причудах американских клиентов....

30 05 2023 18:25:51

Культурный шок, Горько 3, или Зимний корпоратив Netpeak Group

Культурный шок, Горько 3, или Зимний корпоратив Netpeak Group Больше пятисот человек из Украины, России, Болгарии и Казахстана. Я зашел в зал и увидел толпу каких-то гопарей и воровайок родом из 90-х, а само помещение было оформлено под свадьбу. Выпьем за молодых!...

29 05 2023 4:14:38

Кейс по SMM в тематике «алкогольные напитки»: «Пригласи 10 друзей — получи бутылку шампанского»

Кейс по SMM в тематике «алкогольные напитки»: «Пригласи 10 друзей — получи бутылку шампанского» Оживший бар. О том, как один украинский бренд за полтора месяца получил более 4 000 фанов!...

28 05 2023 15:48:33

Как правильно «закрывать» свой сайт

Как правильно «закрывать» свой сайт Сотрудник Google расскажет о том, как присоединиться к протесту, не навредив сайту....

27 05 2023 7:35:30

Как объединять данные при создании отчета в Data Studio

Как объединять данные при создании отчета в Data Studio В статье коротко о способах объединения данных из разных источников для создания отчётов...

26 05 2023 5:24:52

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

Давайте больше не будем сливать бюджет, выбирая неправильный параметр....

25 05 2023 1:38:10

Онлайн-покупка в реальной жизни

Онлайн-покупка в реальной жизни Что, если бы покупка в супермаркете происходила так же, как в онлайн-магазине?...

24 05 2023 23:39:19

Атрибуция Facebook: для чего нужна и как настроить

Атрибуция Facebook: для чего нужна и как настроить Как отслеживать конверсии при многокaнaльном взаимодействии покупателя с вашим сайтом? Читайте далее...

23 05 2023 14:12:31

Что такое брендовые запросы и нужно ли крутить по ним контекстную рекламу

Что такое брендовые запросы и нужно ли крутить по ним контекстную рекламу Брендовые или витальные запросы содержат только название компании или бренда, без дополнительных уточнений...

22 05 2023 5:21:55

Рекламный кабинет в Facebook — пять фишек для упрощения работы

Рекламный кабинет в Facebook — пять фишек для упрощения работы Возможности для специалистов по рекламе в Facebook, о которых знают далеко не все. Подробности — тут....

21 05 2023 14:48:27

Что такое мотивированные установки и стоит ли тратить на них деньги

Что такое мотивированные установки и стоит ли тратить на них деньги Откуда берутся установки и стоит ли тратить деньги на покупку мотивов...

20 05 2023 16:39:51

Генерируем прорывные идеи по Люку Уильямсу

Генерируем прорывные идеи по Люку Уильямсу Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....

19 05 2023 1:52:57

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

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

18 05 2023 18:58:26

«Волшебный пинок»: вдохновение от знаменитостей. 11 мотивирующих речей

«Волшебный пинок»: вдохновение от знаменитостей. 11 мотивирующих речей Джефф Безос, Стив Джобс, Билл Гeйтс, Джимм Керри и другие. Собрали для вас подборку крутых выступлений людей, которые знают, как добиться ... в общем-то, всего. Читайте их основные тезисы, а главное — послушайте....

17 05 2023 13:45:26

Контекстная реклама в Netpeak: 14 закулисных фишек агентства

Контекстная реклама в Netpeak: 14 закулисных фишек агентства Что нужно, чтобы реклама в интернете приносила прибыль....

16 05 2023 18:42:23

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

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

15 05 2023 23:42:23

Как подключение CDP может увеличить доход от триггерных писем до 50% — кейс Office-Expert.kz

Как подключение CDP может увеличить доход от триггерных писем до 50% — кейс Office-Expert.kz Эффективность продвинутой сегментации стала заметна уже в первый месяц ее функционирования....

14 05 2023 0:20:47

Как международному бренду занять свое место на новом рынке и в перегретой нише — SEO-кейс Domino’s Pizza

Как международному бренду занять свое место на новом рынке и в перегретой нише — SEO-кейс Domino’s Pizza Для одной компании смена description это что-то пустяковое. Здесь же — настоящий бренд-менеджмент....

13 05 2023 3:48:54

Партиционирование таблиц в Google BigQuery — понятная инструкция

Партиционирование таблиц в Google BigQuery — понятная инструкция Как упростить работу с данными и сэкономить на оплате сервиса...

12 05 2023 6:15:23

Продвижение с PBN - кейсы и антикейсы. Без успешного успеха

Продвижение с PBN - кейсы и антикейсы. Без успешного успеха Private Blog Network для ниши безопасности, доставки цветов, товаров сантехники, туризма и выпекания. Сетки сайтов работают не всегда и это нормально. Узнать больше!...

11 05 2023 5:18:30

Как настроить максимально объективную веб-аналитику и отладить работу отдела контекстной рекламы? Мануал не для чайников

Как настроить максимально объективную веб-аналитику и отладить работу отдела контекстной рекламы? Мануал не для чайников Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....

10 05 2023 18:55:45

От идеи роутера для цифровых кочевников до продаж на Amazon — история Nommi и фаундеров компании

От идеи роутера для цифровых кочевников до продаж на Amazon — история Nommi и фаундеров компании Nommi — сокращение от nomadic MiFi: роутер для современных цифровых кочевников...

09 05 2023 5:37:37

Как автоматизировать работу комaнды поддержки — кейс Netpeak Cluster и ПланФикс

Как автоматизировать работу комaнды поддержки — кейс Netpeak Cluster и ПланФикс Когда саппорт-отдел не справляется, подключайте к работе ПланФикс и Телеграм....

08 05 2023 12:40:57

Как работать с ключевыми словами в Excel

Как работать с ключевыми словами в Excel Как определить и повысить качество парсинга ключевых слов — лайфхак с применением Microsoft Excel....

07 05 2023 22:29:48

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

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

06 05 2023 17:14:19

Как не слить бюджет на клики? Все, что нужно знать о кликфроде

Как не слить бюджет на клики? Все, что нужно знать о кликфроде Как избежать скликивания — инструкция...

05 05 2023 18:40:14

Почему Netpeak стал лидером среди IT-работодателей Украины

Почему Netpeak стал лидером среди IT-работодателей Украины Руководитель отдела HR, Ольга Пачесная, написала пост о главном — людях, которые выбрали работу в Netpeak....

04 05 2023 23:18:34

Как продвигать личный бренд в Instagram в 2021?

Как продвигать личный бренд в Instagram в 2021? Как завоевать Instagram, задавая правильные цели и вопросы. Также в статье делимся табличкой лучшего времени постинга для различных тематических публикаций. Узнать больше!...

03 05 2023 20:18:36

Google Ads: Планировщик рекламных кампаний в контекстно-медийной сети Google

Такое обозрение очередной новинки Google от Сергея Бахаря...

02 05 2023 13:45:48

Лучшие персональные сайты маркетологов

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

01 05 2023 2:51:43

Как отслеживать ускоренные мобильные страницы (AMP) в Google ***ytics

Что такое ускоренные мобильные страницы и как их посмотреть в Google ***ytics...

30 04 2023 14:33:23

Как работают персональные рекомендации

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

29 04 2023 2:21:39

Почему не стоит покупать в Черную пятницу

Почему не стоит покупать в Черную пятницу Ежегодно в конце ноября начинается ажиотаж вокруг «огромных» скидок на Черную пятницу. Во всем мире этого дня ждут и готовятся покупать выгоднее. Но так ли это на самом деле?...

28 04 2023 21:43:47

Восемь советов успешного запуска рекламной кампании в myTarget

Восемь советов успешного запуска рекламной кампании в myTarget Делимся фишками, которые облегчат работу как новичкам, так и специалистам....

27 04 2023 2:33:23

Про social insight, как один из базовых пунктов брифа

Про social insight, как один из базовых пунктов брифа Важный вопрос, если вы рассчитываете на вирусный эффект своих рекламных идей....

26 04 2023 12:18:28

Xsolla — антикейс с увольнением 150 сотрудников. И при чем здесь пунктуация

Xsolla — антикейс с увольнением 150 сотрудников. И при чем здесь пунктуация Мнение Сергея Петренко, CEO компании Odesseya....

25 04 2023 7:46:12

Анализ эффективности кампаний рекламной сети Яндекса с помощью отчета по многокaнaльным последовательностям

Отчет «Многокaнaльные последовательности» в Google ***ytics помогает оценить влияние каждого канала, сделать выводы о работе рекламных кампаний — понять их вклад и участие в цепочке до совершения конверсии. Показываем на примере....

24 04 2023 15:25:11

Мобильное приложение для бизнеса: на что обратить внимание до того, как заплатить разработчику

Мобильное приложение для бизнеса: на что обратить внимание до того, как заплатить разработчику Вам нужно приложение или мобильная версия сайта? Как вы собираетесь монетизировать приложение? И другие важные вопросы, на которые нужно ответить до разработки....

23 04 2023 21:34:24

KPI в социальных медиа

KPI в социальных медиа Все про kpi охват в социальных медиа или как оценивать эффективность работы SMM-специалиста?...

22 04 2023 14:26:40

Как увеличить доход на 500% и не «сломать» долю рекламных расходов — кейс Беккер

Кейс, в котором мы описываем работу с одним из наших старейших клиентов (с 2014 года) и как нам пришлось изменить устоявшийся формат работы и рекламного бюджета, чтобы соответствовать реалиям 2020 года....

21 04 2023 3:16:20

Как построить сводные таблицы в Excel, LibreOffice, OpenOffice и таблицах Google

Как построить сводные таблицы в Excel, LibreOffice, OpenOffice и таблицах Google Аналитик Netpeak Алексей Селезнев рассказал, как составить и пользоваться сводными таблицами онлайн в excel и за считанные секунды выделить нужные для анализа данные из десятков тысяч строк в отчетах Google ***ytics...

20 04 2023 8:22:39

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

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

19 04 2023 16:50:48

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