Создание простой темы для 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.
Комментарии:
Определяем, кто из mail подписчиков предан вашему бренду по-настоящему....
07 06 2023 19:12:15
Образ гармонии, почерк и потребности — рецензия на книгу Яна Чихольда «Облик книги»....
06 06 2023 9:53:38
Как трафик CDN повлиял на систему интернет-магазина — палим кейсы...
05 06 2023 8:59:19
Статья будет полезна небольшим агентствам, которые мечтают работать с заграничными клиентами. Зачем нужно выходить за рубеж, если и в своей стране все идет неплохо, да и вообще — нет времени на продвижение на незнакомом рынке? Давайте разбираться вместе!...
04 06 2023 9:33:51
Наталья Воскобойникова из контент-студии WordFactory решила дать четкую хаpaктеристику потенциальному заказчику гостевых постов. Если хотя бы один ваш ответ на вопросы в этом посте отрицательный, стоит найти другие тактики продвижения своего проекта....
03 06 2023 12:16:45
Дублирование контента на разных сайтах, ориентированных на рынки разных стран, например, на публику Канады...
02 06 2023 4:18:58
Распространенные ошибки продвижения B2B-компаний + стратегии того, как наращивать число активных подписчиков и потенциальных клиентов....
01 06 2023 13:44:28
Как работать с Facebook ***ytics — бесплатным инструментом с богатым инструментарием и лучшей из всех существующих решений интеграцией с платформой Facebook...
31 05 2023 20:55:59
Экс-CEO, а теперь просто сотрудник и «волшебник страны Moz» Рэнд Фишкин поделился с читателями блога рассказом о своем видении будущего SEO, перспективах анонимизации сети и причудах американских клиентов....
30 05 2023 18:25:51
Больше пятисот человек из Украины, России, Болгарии и Казахстана. Я зашел в зал и увидел толпу каких-то гопарей и воровайок родом из 90-х, а само помещение было оформлено под свадьбу. Выпьем за молодых!...
29 05 2023 4:14:38
Оживший бар. О том, как один украинский бренд за полтора месяца получил более 4 000 фанов!...
28 05 2023 15:48:33
Сотрудник Google расскажет о том, как присоединиться к протесту, не навредив сайту....
27 05 2023 7:35:30
В статье коротко о способах объединения данных из разных источников для создания отчётов...
26 05 2023 5:24:52
Давайте больше не будем сливать бюджет, выбирая неправильный параметр....
25 05 2023 1:38:10
Что, если бы покупка в супермаркете происходила так же, как в онлайн-магазине?...
24 05 2023 23:39:19
Как отслеживать конверсии при многокaнaльном взаимодействии покупателя с вашим сайтом? Читайте далее...
23 05 2023 14:12:31
Брендовые или витальные запросы содержат только название компании или бренда, без дополнительных уточнений...
22 05 2023 5:21:55
Возможности для специалистов по рекламе в Facebook, о которых знают далеко не все. Подробности — тут....
21 05 2023 14:48:27
Откуда берутся установки и стоит ли тратить деньги на покупку мотивов...
20 05 2023 16:39:51
Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....
19 05 2023 1:52:57
Работать сейчас — не зазорно, а просто необходимо для страны...
18 05 2023 18:58:26
Джефф Безос, Стив Джобс, Билл Гeйтс, Джимм Керри и другие. Собрали для вас подборку крутых выступлений людей, которые знают, как добиться ... в общем-то, всего. Читайте их основные тезисы, а главное — послушайте....
17 05 2023 13:45:26
Что нужно, чтобы реклама в интернете приносила прибыль....
16 05 2023 18:42:23
Как использовать расширенное семантическое ядро для увеличения целевого трафика....
15 05 2023 23:42:23
Эффективность продвинутой сегментации стала заметна уже в первый месяц ее функционирования....
14 05 2023 0:20:47
Для одной компании смена description это что-то пустяковое. Здесь же — настоящий бренд-менеджмент....
13 05 2023 3:48:54
Как упростить работу с данными и сэкономить на оплате сервиса...
12 05 2023 6:15:23
Private Blog Network для ниши безопасности, доставки цветов, товаров сантехники, туризма и выпекания. Сетки сайтов работают не всегда и это нормально. Узнать больше!...
11 05 2023 5:18:30
Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....
10 05 2023 18:55:45
Nommi — сокращение от nomadic MiFi: роутер для современных цифровых кочевников...
09 05 2023 5:37:37
Когда саппорт-отдел не справляется, подключайте к работе ПланФикс и Телеграм....
08 05 2023 12:40:57
Как определить и повысить качество парсинга ключевых слов — лайфхак с применением Microsoft Excel....
07 05 2023 22:29:48
Что делать, когда не получается заставить себя написать статью или кейс...
06 05 2023 17:14:19
Как избежать скликивания — инструкция...
05 05 2023 18:40:14
Руководитель отдела HR, Ольга Пачесная, написала пост о главном — людях, которые выбрали работу в Netpeak....
04 05 2023 23:18:34
Как завоевать Instagram, задавая правильные цели и вопросы. Также в статье делимся табличкой лучшего времени постинга для различных тематических публикаций. Узнать больше!...
03 05 2023 20:18:36
Такое обозрение очередной новинки Google от Сергея Бахаря...
02 05 2023 13:45:48
Цели у личных сайтов могут быть разные, но в первую очередь они помогают рассказать историю о специалисте...
01 05 2023 2:51:43
Что такое ускоренные мобильные страницы и как их посмотреть в Google ***ytics...
30 04 2023 14:33:23
О построении персональных рекомендаций для интернет-магазина, используя технику со-визитов....
29 04 2023 2:21:39
Ежегодно в конце ноября начинается ажиотаж вокруг «огромных» скидок на Черную пятницу. Во всем мире этого дня ждут и готовятся покупать выгоднее. Но так ли это на самом деле?...
28 04 2023 21:43:47
Делимся фишками, которые облегчат работу как новичкам, так и специалистам....
27 04 2023 2:33:23
Важный вопрос, если вы рассчитываете на вирусный эффект своих рекламных идей....
26 04 2023 12:18:28
Мнение Сергея Петренко, CEO компании Odesseya....
25 04 2023 7:46:12
Отчет «Многокaнaльные последовательности» в Google ***ytics помогает оценить влияние каждого канала, сделать выводы о работе рекламных кампаний — понять их вклад и участие в цепочке до совершения конверсии. Показываем на примере....
24 04 2023 15:25:11
Вам нужно приложение или мобильная версия сайта? Как вы собираетесь монетизировать приложение? И другие важные вопросы, на которые нужно ответить до разработки....
23 04 2023 21:34:24
Все про kpi охват в социальных медиа или как оценивать эффективность работы SMM-специалиста?...
22 04 2023 14:26:40
Кейс, в котором мы описываем работу с одним из наших старейших клиентов (с 2014 года) и как нам пришлось изменить устоявшийся формат работы и рекламного бюджета, чтобы соответствовать реалиям 2020 года....
21 04 2023 3:16:20
Аналитик Netpeak Алексей Селезнев рассказал, как составить и пользоваться сводными таблицами онлайн в excel и за считанные секунды выделить нужные для анализа данные из десятков тысяч строк в отчетах Google ***ytics...
20 04 2023 8:22:39
Человеку стало плохо, он теряет сознание. Те, кто рядом, хотят помочь, но не знают, как это сделать. Давайте разбираться....
19 04 2023 16:50:48
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
