Создание простой темы для 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.
Комментарии:
Как узнать слабые места ваших рекламных кампаний с помощью бесплатного скрипта....
01 04 2026 9:50:25
Анализ содержимого сайта показывает: Url разные, а контент страниц одинаковый. Думаете, ничего страшного? Но одинаковый контент может попасть под фильтры поисковых систем. Чтобы этого не произошло, надо знать, как избавляться от внутренних дублей...
31 03 2026 20:53:57
SEO-специалисты используют создание поддоменов, подпапок или отдельных доменов...
30 03 2026 2:53:33
Как за полгода обновить корпоративный блог, зачем это может быть нужно. О том, как начинали с сегментации, внедряли SEO-рекомендации, оптимизировали ЧПУ, трaнcлитерацию, пагинацию и структуру блога вплоть до конкретной работы со статьями, рейтингами и их страницами...
29 03 2026 12:16:26
Как нарисовать круговую или столбчатую диаграмму. Избавляемся от популярных ошибок при оформлении...
28 03 2026 18:57:59
Находим пользователей, которые не знали, что им нужен ваш товар или услуга....
27 03 2026 3:57:44
При использовании похожих инструментов важно не переборщить с количеством рекламы...
26 03 2026 8:50:56
Как использовать игровые механики для вовлечения аудитории....
25 03 2026 12:25:24
Хотите говорить с клиентами? Пишите им в телеге. Для этого важно продвижение телеграм-канала. Что и как делать для раскрутки — подробная инструкция....
24 03 2026 5:25:38
Интересные детали интерьера в офисах украинских IT-компаний: от массажного стола и тенниса до звукозаписывающей студии и корпоративной велопарковки. Читать дальше!...
23 03 2026 4:37:57
Казахстанские реалии: данные по более 1 млн кликов в 23 тематиках и 15 городах....
22 03 2026 16:26:23
Таблицы Google позволят перенести рекламную кампанию и сохранить при этом ключевые слова в разных типах соответствия. Подробный мануал — в новом посте....
21 03 2026 12:26:44
Делаем первые шаги к созданию системы email-коммуникаций бренда....
20 03 2026 0:27:17
Данные по 22,4 миллионам кликов в 46 тематиках и 392 населенных пунктах страны — собрана статистика исключительно по проектам агентства Netpeak. Узнать больше!...
19 03 2026 15:45:14
Создаём страницы, которые быстро загружаются на мобильных устройствах....
18 03 2026 17:44:52
Чтобы попасть в админку сайта, необходимо определить, какая именно CMS используется. Для этой цели подойдет ручной анализ сайта и его HTML-кода, а также онлайн-сервисы...
17 03 2026 1:39:34
Отныне мы можем настраивать показы рекламы на мужчин и женщин определенной возрастной группы....
16 03 2026 18:24:18
Семинар с примерами юзабилити решений от Twitter, Airbnb, Amazon и других компаний....
15 03 2026 8:18:43
Всё об оценке эффективности SEO-продвижения с инструментами и рекомендациями...
14 03 2026 8:19:39
Изначально необходимо планировать продолжительное сотрудничество с агентством для достижения поставленных целей. В своей стратегии мы использовали сезонность, чтобы достичь максимальных результатов для клиента...
13 03 2026 6:38:42
На этой картинке изображены два предмета. Один из них называется «буба», а второй «кики»....
12 03 2026 3:52:48
Популярные размеры баннеров. Найти самый топовый из джентльменского набора! Мы провели свое исследование....
11 03 2026 0:28:54
Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...
10 03 2026 8:29:25
Скрипт для распределения бюджета на отстающую семантику, чтобы получать больше трафика по меньшей цене...
09 03 2026 23:10:10
Как продавать новую и б/у технику, ювелирные изделия в интернете. Эксперимент показал, что в Google Shopping можно продавать не только новые товары. Узнать больше!...
08 03 2026 23:57:52
Как работать с негативом и что делать, чтобы его было меньше/не было вовсе....
07 03 2026 1:37:56
Почему соотношение данных об использовании приложения важнее, чем количество установок и удалений...
06 03 2026 16:56:28
Почему кого-то ругают за плохие тексты, а у кого-то из-за таких же текстов берет интервью Юрий Дудь? И другие особенности контента: авторское право, копирайтинг. Читать!...
05 03 2026 15:37:17
Можно ли получить больше заявок, используя динамическую подмену заголовка? Кейсы в разных тематиках...
04 03 2026 1:12:16
Следим за развитием событий и анализируем решение суда. Читать дальше!...
03 03 2026 10:32:37
В Казнете о маркетплейсе подрядчиков Naimi.kzприложении говорят все: от студентов до президента....
02 03 2026 8:28:27
Доминирование маркетплейсов и агрегаторов в Яндексе усилилось. Первый магазин появляется не раньше 5 позиции. Поэтому компания Alto подготовила пошаговое руководство - как обойти агрегаторы в выдаче....
01 03 2026 5:32:52
Как снизить цену за привлечение клиента на 50%, развивая только кампании для пользователей десктопов....
28 02 2026 23:15:10
Комaнда Serpstat проанализировала стратегии продвижения лидеров ниши онлайн-образования. Читайте о главных инсайтах в посте....
27 02 2026 17:36:45
Будь мобильным — заливай видео на Youtube с телефона...
26 02 2026 10:50:11
Инструкция для трудоголиков для тех, кто старается выполнить как можно больше заданий, а заметного прогресса при этом нет. Работать много и эффективно не всегда полезно. Если бы эффективная работа была залогом успеха, каждому хомяку воздвигли бы памятник...
25 02 2026 11:18:56
Бета-версия помогает записывать действия пользователей на сайте и благодаря этому улучшать удобство использования сайта и в перспективе растить продажи. Узнать больше!...
24 02 2026 0:39:35
Отслеживаем эффективность приложения в Search Console на примере OLX.KZ...
23 02 2026 7:46:48
О том как растут доходы при оптовой торговле женской одеждой и обувью, а траты на рекламу остаются на прежнем уровне...
22 02 2026 17:57:21
Особенности продвижения локального офлайн-бизнеса...
21 02 2026 14:37:42
Опыт, накопленный за более чем 10 лет работы в нише и упакованный в специальные предложения....
20 02 2026 8:17:17
5 примеров маркетингового троллинга. Сатира, ирония, пародия — все эти приемы в рекламе помогают брендам выделиться среди конкурентов. Если их правильно использовать, конечно, это отличный способ привлечь клиентов и создать запоминающийся образ бренда...
19 02 2026 0:32:33
3D принтер — заработок миллионеров будущего! Тех, кто сейчас смог купить и начал заниматься ими или использует их в бизнесе, ждет объемный успех через каких-нибудь 3-5 лет....
18 02 2026 14:26:26
Статистика изменений долей рынка после майского и декабрьского апдейта Google в 2020 году....
17 02 2026 12:59:28
При наложении санкций на сайт его страницы заметно понижаются в выдаче. При наличии бана ресурс полностью исчезает из поиска, включая брендовые запросы...
16 02 2026 3:37:28
Опыт коллег и их рекомендации — самая ценная валюта в арбитраже. Давайте объединим усилия и составим актуальный рейтинг СРА-сетей Украины....
15 02 2026 21:35:49
Аудит юзабилити способствует следованию современным тенденциям, пониманию целевого посетителя и увеличению конверсии....
14 02 2026 22:36:17
Apple, Google и Samsung — давайте вспомним новинки месяца....
13 02 2026 8:36:34
В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...
12 02 2026 6:30:22
Оценить эффективность рекламной кампании с учетом специфики и целей конкретного клиента помогут персональные сводки...
11 02 2026 17:30:40
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
