Создание простой темы для 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.
Комментарии:
Как правильно оптимизировать страницы пагинации, чтобы не допустить проседание целевого трафика...
15 03 2025 15:38:31
Мы решили внедрить товарные рекомендации на сайте. Они приносят дополнительно до 10% дохода....
14 03 2025 9:21:51
Придумать цепляющие заголовки для 1000 репостов в соцсетях — что можно узнать в результате анализа миллиона заголовков в блогах....
13 03 2025 11:15:49
Минимизация пропущенных звонков и ускорение обработки заявок с наглядными примерами из сервиса...
12 03 2025 0:54:54
Если вам нужно быстро изменить небольшой объем контента на сайте без доступа к CMS, можно воспользоваться GTM. Как именно, читайте дальше....
11 03 2025 17:36:42
Значит так, делаем из лимонов лимонад — «выжимаем» максимум из ошибки 404...
10 03 2025 1:27:15
Используйте эти данные в составлении медиапланов. Зная стоимость клика в тематике или регионе, коэффициент конверсии на сайте, вы можете оценить объем инвестиций в рекламу и прогнозировать стоимость конверсии. Читать дальше!...
09 03 2025 23:25:39
Быстро разогнать рекламные кампании и получить рост конверсий при повышении CPA до 100%. Как этого добиться — читайте в новом кейсе....
08 03 2025 4:42:46
Как сократить время на создание собственных отчетов, если вы работаете с большими рекламными аккаунтами...
07 03 2025 12:40:29
Работ по оптимизации всегда много, а выделить приоритеты при продвижении онлайн — непросто. Что стоит проверять и исправлять в первую очередь?...
06 03 2025 16:47:43
Главная цель инфлюенс-маркетинга — теплый и близкий контакт с аудиторией. Клиентам нравится ассоциировать продукты с живыми, знакомыми им людьми — пускай и только по интернету. Читать дальше....
05 03 2025 18:13:56
Под какие треки работают интернет-маркетологи, копирайтеры и другие специалисты digital-рынка....
04 03 2025 21:11:12
Как эффективно выйти из карантина с помощью контекстной рекламы...
03 03 2025 4:17:42
Эффективен ли ваш канал привлечения трафика? Лучше писать об этом с помощью формул...
02 03 2025 1:23:40
Бренды поделились инсайтами на ДиВи Конф — фишки от MEGOGO, Google, TikTok, Banda, McCann, I am IDEA, AIR Brands, Rocket и Фокстрот...
01 03 2025 15:51:12
Не знаешь как раскрутить сайт? Мы подготовили 11 этапов SEO-продвижения сайтов в поисковых системах....
28 02 2025 2:10:53
В Twitter удобно собрать список потенциальных клиентов, чтобы время от времени посматривать за их новостями...
27 02 2025 18:45:46
Что нужно делать на старте работ с интернет-магазином и как минимизировать риски для бизнеса онлайн, используя такие инструмента как SEO, PPC и Email-маркетинг — советы от эксперта. Читать дальше!...
26 02 2025 12:31:24
На одном из проектов был успешный рост трафика и транзакций, но в следующем месяце видимость по Яндексу снизилась до 30% и продолжала жестоко падать. ТИЦ упал с 450 до 425....
25 02 2025 22:22:29
1 — меняй работу внутри работы, 2 — выбери то, что нравится больше всего и старайся делать это чаще, 3 — придумай себе развлечения. Подробности — в посте. Читать дальше....
24 02 2025 8:45:33
Ошибки, которые допускают новички и теряют деньги, трафик, клиентов....
23 02 2025 16:44:38
«Нет, нам нужна раскрутка и точка!» Список маркетинговых пpaктически применимых фишек....
22 02 2025 3:31:14
Как специалисту с нуля обучиться контекстной рекламе и совмещать работу с хобби...
21 02 2025 10:21:42
Читайте простой мануал о том, как перейти на Universal ***ytics и не поломать весь сбор данных...
20 02 2025 14:13:19
Андрей Чумаченко про будни топ-менеджера, постановку, декомпозицию, помощь и контроль выполнения задач сотрудниками комaнд, которые входят в состав департамента маркетинга, а также о регулярных встречах и тонкостях работы. Узнать больше!...
19 02 2025 15:45:12
Ежеквартальное исследование Netpeak по стоимости клика...
18 02 2025 1:38:44
Как SQL-запросы сайтов и Google Sheets освобождают SEO-специалиста от рутины...
17 02 2025 16:43:17
Идеи, кейсы и советы от экспертов. Читайте и находите что-то для продвижения своего бизнеса. Нетривиальные идеи от признанных экспертов-пpaктиков! Рекомендуем каждому, что развивает или планирует свой бизнес в интернете!...
16 02 2025 12:55:51
И как проверить релевантность на своем сайте. Если речь идет о страницах (сайтах), подразумевается соответствие контента запросу. Чем точнее страница отвечает на запрос, решает задачу пользователя, тем (при прочих равных) выше ее позиция в поисковой выдаче....
15 02 2025 19:44:23
Советы для фрилансеров и удаленных сотрудников: как строить рабочий процесс так, чтобы он вел к максимальной эффективности. О работе со временем, перерывами, необходимости выключать уведомления, статусе задач, празднованиях побед и организации рабочей среды...
14 02 2025 16:22:41
Нужно ли начинать работу с Google Marketing Platform, и если да, то на каком этапе развития бизнеса?...
13 02 2025 22:15:26
Как зарегистрироваться в приложении Facebook Business Manager и грамотно сделать и настроить аккаунт...
12 02 2025 5:41:19
Кейсы, фишки и советы, опыт крупных брендов, маркетологов....
11 02 2025 19:59:34
Как улучшить конверсию сайта: идеи для маркетологов...
10 02 2025 5:58:57
Возможно, вы купили обувь Intertop именно после просмотра нашей рекламы....
09 02 2025 3:16:54
Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....
08 02 2025 2:52:51
Как добиться 100% пользы от контекстных объявлений с помощью расширений...
07 02 2025 17:36:21
Digital-маркетинг развивается и модернизируется: новые методы работы, инструменты и технологии. И стабильно растут требования к digital-специалистам. Чтобы оставаться в профессии, нужно мониторить тренды, отслеживать тенденции и повышать знания....
06 02 2025 14:53:18
Без понимания того, какие данные заложены в основу воронки продаж получается... — читайте в статье...
05 02 2025 11:50:51
И зачем топ-менеджерам разбираться в настройках кампаний, повышать свою техническую грамотность? Показываем на примерах и раскладываем по полочкам....
04 02 2025 1:42:21
Работающие способы повысить эффективность рекламных кампаний...
03 02 2025 0:53:27
Почему имеет смысл выбрать его, а не Google Tag Manager?...
02 02 2025 15:15:21
Исправление ошибок в тексте возможно с помощью онлайн-инструментов и стационарных программ...
01 02 2025 18:47:36
Как настроить эффективную удаленную работу: комментарии топ-менеджмента Netpeak с плюсами и минусами, личными инсайтами и рекомендациями. А также перспективы развития удаленки в комапнии. Читать дальше!...
31 01 2025 20:59:59
Как пользоваться выбором высокочастотных фраз для метатегов, чисткой мусорных фраз и как расставлять приоритеты для навигационных запросов с указанием определенного направления...
30 01 2025 11:51:42
Перевод статьи Никки Джиллиленд из Econsultancy об уроках для маркетологов про то, каким должно быть хорошее видео. Узнайте 4 правила эффективного видеоконтента прямо сейчас!...
29 01 2025 0:56:16
Расчет вероятности конверсии, быстрое и эффективное создание дашбордов, строение моделей KPI. Примеры аналитики кампаний с помощью Excel и Power BI от спикера 8P 2016 Максима Уварова....
28 01 2025 16:33:14
Четыре способа исключить нерелевантные места размещения видеорекламы, а также полезные списки минус-слов и детских YouTube-каналов....
27 01 2025 5:13:56
Спойлер: чтобы получить наилучший результат с наименьшими усилиями и затратами времени....
26 01 2025 17:10:19
Информация о любой организации распространяется в интернете очень быстро, особенно негативная. Поэтому необходимо учиться управлять своей репутацией....
25 01 2025 12:59:57
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
