Создание простой темы для 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.
Комментарии:
Как сформировать правильную стратегию продвижения и сфокусировать внимание на получении прибыли...
18 04 2024 14:21:31
Можно ли получить больше заявок, используя динамическую подмену заголовка? Кейсы в разных тематиках...
17 04 2024 17:23:24
Понадобится всего пару минут, чтобы создать отчет о тратах, количестве конверсий или любых других важных показателях. Понятная инструкция для PPC-специалистов и про возможности и ограничения бесплатной версии расширения. Читайте дальше!...
16 04 2024 11:58:13
Фильтруем свой трафик от сотрудников в Google ***ytics...
15 04 2024 6:46:20
Как снизить стоимость лидов путём использования новых технологий...
14 04 2024 22:33:14
Владельцы айфонов в странах арабского мира легче расстаются с деньгами за приложения. Вот почему арабская локаль в App Store так привлекательна...
13 04 2024 17:11:15
Если вы до сих пор сомневаетесь — прекратите это и делитесь своим опытом с читателями, потенциальными клиентами, инвесторами и партнерами. Узнать больше!...
12 04 2024 17:47:33
Как изменить геовыдачу с помощью настроек Google, Яндекс или специальных дополнений...
11 04 2024 21:32:16
Много 404-страниц и ссылок на них негативно сказывается на ранжировании сайта в поисковых системах....
10 04 2024 17:31:29
Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....
09 04 2024 16:14:49
Лучшие маркетинговые ориентиры тем, кто захочет познакомиться с SEO и контекстной рекламе...
08 04 2024 12:10:16
При создании рекламы на украинском мы завоевываем большую долю рынка без повышения цены за клик....
07 04 2024 15:34:10
О чем следует позаботиться перед созданием интернет-магазина...
06 04 2024 2:55:40
Мы решили определить и раскрыть самые популярные вопросы по работе нового алгоритма Google Колибри...
05 04 2024 23:44:20
В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...
04 04 2024 15:52:34
Следим за развитием событий и анализируем решение суда. Читать дальше!...
03 04 2024 17:42:55
Что такое App Store optimization и как раскручивать мобильные приложения...
02 04 2024 20:11:20
Есть ли шанс на апелляцию...
01 04 2024 8:49:22
Мы решили узнать, как дорого обходятся рекламодателям клики по объявлениям в разных странах и тематиках, чтобы читателям блога было удобнее планировать бюджет на рекламные кампании....
31 03 2024 11:18:12
То, как мы разговариваем, важно не только в жизни, но и в соцсетях. Зачем нужен tone of voice и как сделать, чтобы ваш голос отличался от других и был эффективен? Читайте наш гайд....
30 03 2024 22:49:25
Рассказываем об интересных диджитал-специальностях и зарплатах, как обучиться этим профессиям с нуля (в том числе в зрелом возрасте) и можно ли работать удалённо....
29 03 2024 11:31:34
Новое исследование стоимости клика в Казахстане в четвертом квартале 2018 года...
28 03 2024 16:45:53
Кейс: новинки в продвижении рекламы интернет-магазина в контекстно-медийной сети Google...
27 03 2024 14:30:57
29 ноября в Киеве в UNIT.City — конференция по медицинскому маркетингу MeDiConf...
26 03 2024 3:14:53
Где найти лидера для своей инхаус-комaнды маркетологов...
25 03 2024 17:22:59
Крупным брендам не избежать негатива в сети. Но с ним можно и нужно работать. Читайте успешный кейс для DOM.RIA....
24 03 2024 20:14:30
О главном секрете поискового продвижения на основе исследования, которое проводилось в течение двух лет. Здесь отсеяны все проекты со слишком малой начальной посещаемостью и проекты с пробелами в аналитике. Узнайте больше, на чем строится рост трафика!...
23 03 2024 9:33:49
Всё что нужно знать про SMM...
22 03 2024 4:24:14
Понятные людям и роботам URL. Это уникальный набор символов, который дает возможность идентифицировать всевозможные ресурсы в интернете (страницы сайтов, файлы, изображения, видео и так далее). Чтобы узнать больше, читайте далее!...
21 03 2024 3:36:34
Как отключить блокировку API запрещенных сервисов в скриптах R и продолжать использовать пакеты ryandexdirect, rvkstat, rmytarget, Google Sheets и BigQuery...
20 03 2024 0:38:14
Ссылки называются вечными, потому что их внедряют один раз и навсегда, но это не значит, что такие ссылки однажды не удалят (что поведет к потере трафика). Узнать больше!...
19 03 2024 17:56:17
Крутые площадки для нового инструмента: контекстщикам на заметку!...
18 03 2024 17:41:37
Дмитрий Шахов, Алексей Чекушин и другие эксперты поделились своим опытом решения сложных вопросов SEO на примере больших проектов....
17 03 2024 13:24:46
Данные из контента страницы и основного заголовка h1 вместо метатега title. Что показало исследование Serpstat....
16 03 2024 13:38:11
Данные о стоимости клика в наиболее популярных рекламных интернет-площадках страны....
15 03 2024 3:39:25
Netpeak Checker – это мультифункциональный инструмент для массового анализа и сравнения сайтов, который помогает выполнять самые разнообразные задачи в области интернет-маркетинга....
14 03 2024 16:57:13
Стоит ли платить за рекламную кампанию «Медийно-контекстный баннер на поиске»?...
13 03 2024 13:28:16
Четыре способа исключить нерелевантные места размещения видеорекламы, а также полезные списки минус-слов и детских YouTube-каналов....
12 03 2024 16:57:57
Знакомство с реальным и потенциальным клиентом. Как создать доверительные отношения? Для этого понадобится сделать сегментацию аудитории и определить, кто ваш покупатель: от рода занятий, до его самых сокровенных страхов. Узнайте больше!...
11 03 2024 14:11:29
Гифка — это зациклиненное видеоизображение, рисунок-ролик, крохотный фильм, без которого трудно представить современный сайт. Как быстро создавать гифки и получать профит....
10 03 2024 9:33:45
Очередной красивый пост о продвижении платформы email и sms-рассылок — UniSender...
09 03 2024 4:44:20
Изучаем на примере тестирования товарных кампаний в момент смены логотипа и ренейминга...
08 03 2024 20:15:43
10 шагов к я-бренду из книги «Я-бренд. Формула успеха». Марк вырастил свой бренд до размеров торгового бизнеса с объемами продаж в миллиарды долларов. Читайте, здесь есть и сама формула, подходящая для товара, сайта или торговли машинами...
07 03 2024 6:27:55
14 пунктов, которые помогут вам лучше изучить свой бизнес и подготовить эффективную SMM-стратегию...
06 03 2024 18:33:37
Киев, Одесса, Харьков, Днепр и другие города — в офис и обратно IT-специалисты добираются от 10 минут до более чем полутора часа. В дороге они слушают музыку, подкасты, читают книги. Узнать больше!...
05 03 2024 3:43:55
21 апреля Google официально начнет учитывать совместимость с мобильными девайсами в качестве одного из факторов ранжирования сайта в мобильном поиске. Что это значит для владельцев сайтов и вебмастеров? Мы подготовили небольшой FAQ по теме для рубрики «SE...
04 03 2024 5:40:38
Инструкция для новичков по одновременной работе с кампаниями, а также объявлениями и группами в Яндекс.Директ...
03 03 2024 3:44:27
Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, вы можете оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...
02 03 2024 12:40:37
Как формируется цена на услугу онлайн-рекламы в специализированном агентстве, и на какие бюджеты предпринимателям стоит ориентироваться...
01 03 2024 6:12:46
Почти 50 тыс. контактов за год принесли формы подписки и регистрации....
29 02 2024 18:41:32
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
