Создание простой темы для 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.
Комментарии:
Как Bigl.ua внедрили AMP и остались очень довольны результатом....
26 04 2024 11:26:25
Мы восстановили репутацию и повысили рейтинг домена за три месяца....
25 04 2024 21:29:49
Не Google ***ytics единым...
24 04 2024 10:44:41
Первая часть иллюстрированного руководства, в котором мы взяли 20 самых важных фактора ранжирования представлены с краткими иллюстрированными примерами. В этом тексте вы найдете первые 10. Узнать больше!...
23 04 2024 22:33:46
Результаты, которых мы достигли за 2 месяца работы....
22 04 2024 6:14:49
Основные этапы раскрутки сайта. Что такое и как работает поисковая оптимизация, ее виды, особенности, преимущества...
21 04 2024 13:20:57
Как упростить работу с данными и сэкономить на оплате сервиса...
20 04 2024 3:29:25
О важных для разметки сайта тегах — alternate, hreflang, media, — и как их грамотно использовать при продвижении....
19 04 2024 12:10:16
Пишите стоимость товара под постами. Но это не универсальный совет. Если ваша ниша с длинным циклом продаж, можно сделать исключение. Что ещё нужно знать про ответ в директ? Узнать!...
18 04 2024 4:43:13
Сделать «на вчера», «внезапно», протестировать все варианты. Стоп! Остановитесь и выдохните. Be slow...
17 04 2024 6:36:26
Как Netpeak продвигал Cifrus.ru, один из ведущих магазинов цифровой техники в Москве....
16 04 2024 12:52:50
Аромамаркетинг. Почему В Нью-Йоркских магазинах Samsung пахнет медовой дыней, в British Airways — луговыми травами. Что мы знаем о восприятии нами сенсорной информации, а конкретно — ароматов. Читать дальше!...
15 04 2024 19:58:48
Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....
14 04 2024 18:49:15
Как узнавать эффективность страницы мобильного приложения в Play Маркете? Учимся работать в Google Play Developers Console....
13 04 2024 5:21:46
Чтобы попасть в админку сайта, необходимо определить, какая именно CMS используется. Для этой цели подойдет ручной анализ сайта и его HTML-кода, а также онлайн-сервисы...
12 04 2024 11:13:13
PBN (Private Blog Network) — приватная/частная сеть блогов, сайты-сателлиты, сетки сайтов. Строить их долго, дорого, но это работает....
11 04 2024 3:33:35
Как правильно распределить рекламный бюджет? Читайте топ-50 самых дорогих ключевых слов Google Рекламы в Казахстане по версии Serpstat...
10 04 2024 16:49:31
Интерфейс прикладного программирования для работы с аккаунтами десятка сайтов....
09 04 2024 18:11:17
Рассказываем, как комaнда Netpeak работала над ростом органики и повышением видимости приоритетных страниц сайта по релевантной семантике....
08 04 2024 5:28:14
Краткая инструкция по работе с обратной связью: как правильно просить и получать отзывы. Они напрямую влияют на бизнес, увеличивают конверсию и выгодно выделяют вас на фоне конкурентов. Как это использовать? Читайте дальше!...
07 04 2024 4:25:17
Звук телефонного звонка важен и для пользователя интернета. Как точно рассчитать полученную прибыль и рентабельность инвестиций в рекламу...
06 04 2024 3:10:15
Как бесплатно отключить смс уведомление. Плюс — подсказки для маркетологов: как снизить негативное отношение к бренду. То есть, как красиво предоставить возможность отписаться от смс клиентам, и не слить бюджет на ненужные сообщения. Узнать больше!...
05 04 2024 17:38:18
Запускаем первую таргетированную рекламу. Мы составили инструкцию для начинающих таргетолов, а также для SMM-специалистов, которым регулярно нужно рекламировать товары и услуги. Читайте подробнее!...
04 04 2024 23:10:15
Сет по контекстной рекламе в тематике «разработка программного обеспечения»: снижение стоимости клика на 89%....
03 04 2024 3:21:16
Футпринт — это признак, по которому можно спалить PBN-сетку сайтов. Это как родинки. Если взять двух парней с родинкой на щеке, то не факт, что они братья. Но если родинки совпадают на щеке, локте и колене, то тут что-то подозрительное...
02 04 2024 3:40:54
Раскрываем тайны показателя качества в рекламе гугл с помощью API...
01 04 2024 18:40:20
Короткий кейс и рекомендации по защите аккаунта от взлома....
31 03 2024 10:33:48
Есть ли шанс на апелляцию...
30 03 2024 9:27:32
Как Netpeak работал с сайтом филиала крупного бренда и добился результатов, несмотря на то, что сервера проекта находятся в другой стране....
29 03 2024 1:22:15
Топ-8 ошибок новичков в Google Рекламе: как сэкономить деньги при планировании рекламной кампании....
28 03 2024 12:23:36
Отслеживание конверсий: покупка, подписка на рассылку, отправка контактных данных и другое....
27 03 2024 7:10:49
Какая интересная и трэшовая реклама встречалась в соцсетях в январе 2021-го? Давайте смотреть...
26 03 2024 12:38:21
Большой проект Джима Коллинза и его комaнды. Одна из лучших книг в нашей библиотеке. Всем рекомендуется к прочтению!...
25 03 2024 13:49:36
Под какие треки работают интернет-маркетологи, копирайтеры и другие специалисты digital-рынка....
24 03 2024 23:44:40
Мануал для SEO-специалистов, как автоматизировать сбор данных из блока People also ask (Пользователи также ищут). Это блок, который показывается в верхней части страницы результатов поиска. Он нужен, чтобы уточнить запрос пользователя....
23 03 2024 6:51:51
Открытие проверенных действий по увеличению продаж...
22 03 2024 1:37:50
О работе, креативности, мотивации и многом другом....
21 03 2024 4:34:10
Как подготовиться и сделать из интервью полноценную историю, которая будет интересна аудитории...
20 03 2024 8:27:16
Почему в высококонкурентных тематиках важно оптимизировать поведенческие показатели...
19 03 2024 3:45:55
Среди интернет-маркетологов существует мнение, что медийная реклама — не перформанс-инструмент. То есть не приносит прямые конверсии. Когда медийные кампании продают — кейс центра тюнинга автомобилей премиум класса....
18 03 2024 19:46:20
Главная цель инфлюенс-маркетинга — теплый и близкий контакт с аудиторией. Клиентам нравится ассоциировать продукты с живыми, знакомыми им людьми — пускай и только по интернету. Читать дальше....
17 03 2024 13:32:59
Наличие или отсутствие в карточках отзывов о товарах интернет магазина сказывается на продажах, а также оказывает влияние на SEO. Об этом, а также о пользе автоматизированного сбора отзывов о товарах мы расскажем в этой статье....
16 03 2024 4:11:27
На третий месяц работы мы вышли на положительный ROMI, на четвертый — ROMI превысил 800%....
15 03 2024 5:52:21
Грамотная группировка поисковых запросов позволяет максимально увеличить поисковой трафик....
14 03 2024 2:29:42
Агентство интернет-маркетинга Netpeak вышла на новые рекламные горизонты и приобрело 51% доли болгарской компании Optimization.bg....
13 03 2024 0:14:50
Новости агентства Netpeak за предыдущий квартал. Появление отдела веб-аналитики. Открыли услугу «Создание и ведение блогов». Добавили мультивалютность. Глобально изменили скрипт Netpeak X-Reference. Запустили серию писем. Что еще?...
12 03 2024 20:35:29
По-настоящему работающих идей не так много, поэтому не стоит бояться творчески заимствовать лучшие наработки и адаптировать их....
11 03 2024 16:34:43
Агентство Netpeak закрыло сделку по покупке агентства мобильного маркетинга Радомира Новковича RadASO....
10 03 2024 1:25:45
Данные, приведенные в исследовании, помогут в составлении медиапланов по продвижению в интернете. Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить....
09 03 2024 5:40:42
Как использовать расширенное семантическое ядро для увеличения целевого трафика....
08 03 2024 2:43:14
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
