Создание простой темы для 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.
Комментарии:
Рассказываем о том, что такое Песочница, как сюда писать и получать больше аудитории для своего бизнеса...
08 06 2026 11:18:34
Как вести рекламные кампании и что делать на разных этапах настройки. Делимся опытом: примерами, кейсами и рекомендациями. Узнать больше и настроить свои РК, как боженька!...
07 06 2026 3:24:11
Почему важно знать детали создания и защиты уникального контента? Потому что это позволит защитить ваш сайт от санкций поисковых систем из-за неуникального контента...
06 06 2026 2:38:31
Как операторы поисковых запросов Google помогают при продвижении сайта и анализе конкурентов....
05 06 2026 17:19:40
Информация о любой организации распространяется в интернете очень быстро, особенно негативная. Поэтому необходимо учиться управлять своей репутацией....
04 06 2026 16:32:33
Как диагностировать Google Panda, понять, что нужно изменить на своем сайте и сделать пользователей счастливыми....
03 06 2026 8:21:17
Сравнительная хаpaктеристика B2B и B2C. Как строятся отношения с клиентом, какой объем рынка, особенности сервиса, на чем делать акцент при создании контента. Подробнее....
02 06 2026 9:49:27
Мониторинг мобильных просмотр статистики Firebase в отчетах Google ***ytics и связь Firebase ***ytics с Google Рекламой...
01 06 2026 21:24:38
Заимствуете лучшее, коллекционируйте идеи и не откладывайте тестирование фишек в долгий ящик...
31 05 2026 1:40:45
Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...
30 05 2026 1:16:40
Предложение для крупных и средних бизнес-проектов по эффективному использованию больших бюджетов при запуске на новых рынках...
29 05 2026 20:58:51
Клиентоориентированный бизнес должен знать, чего хотят покупатели. И лучше понять это еще на этапе идеи. Как — читайте чек-лист от Влада Ноздрачева....
28 05 2026 6:20:41
Как посты и ролики Reels становятся первыми в ленте, сториз, попадают в рекомендации. Instagram впервые напрямую рассказали о том, как оценивают контент....
27 05 2026 13:48:42
Какую связь можно назвать «качественной» и как улучшить работу телефонии — советы от платформы Ringostat в новом посте....
26 05 2026 22:54:43
Бесплатный образовательный проект для предпринимателей Netpeak Cluster предлагает пять своих лучших вебинаров о нюансах онлайн-продвижения...
25 05 2026 18:35:59
Создатель студии рисованных видео Денис Довгаль — о тактике видеомаркетинга и жизни в стиле «цифровых кочевников»....
24 05 2026 21:20:13
Информация для бизнесменов, интернет-маркетологов и всех, кто интересуется продвижением бизнеса в интернете....
23 05 2026 18:42:58
Внедрение скрама, чтобы решить проблемы в управлении бизнесом, год работы на нем и отказ от методологии. Читайте об опыте Boosta, которая объединяет 9 SEO-комaнд на удаленке....
22 05 2026 12:31:51
Сезонность — повторяющиеся колебания трафика сайта в зависимости от различных внешних факторов....
21 05 2026 4:54:47
Техника безопасности по безукоризненным рекламным кампаниям...
20 05 2026 7:39:42
Охват и средняя цена за клик в самых популярных тематиках....
19 05 2026 11:56:31
Быстрый и бесплатный способ настройки целей через Google Tag Manager....
18 05 2026 13:25:12
Уже сейчас в Google Play и App Store миллионы приложений. Как сделать так, чтобы приложение получило достаточное количество установок и приносило доход? Читайте об этом далее и изучайте наглядную инфографику!...
17 05 2026 16:29:26
О методах поднять и расширить трафик рассказал руководитель internet-проекта Prom.ua Иван Портной....
16 05 2026 1:17:19
Наш результат ведения рекламных кампаний в Facebook показывает, что при правильно подобранной стратегии можно даже за короткий период в авральном режиме попасть точно в цель...
15 05 2026 20:13:15
Объясняем по пунктам, как создать и правильно настроить DSA c таргетингом на фид и содержание сайта...
14 05 2026 8:12:15
Руководство по переносу кампаний в новый аккаунт Рекламы...
13 05 2026 23:47:49
Опыт стартапа Paperform для стартаперов, которые боятся начать из-за ограниченного бюджета и/или отсутствия знаний в маркетинге. Надеемся, эта история вдохновит предпринимателей и поможет меньше сомневаться на счет запуска без бюджета....
12 05 2026 14:35:42
Сервисы для сбора поисковых фраз позволяют регулярно расширять семантическое ядро, обеспечивая сайту высокую видимость и увеличение трафика по тематическим запросам...
11 05 2026 3:53:22
Продвигаем медицинский проект. Кроме цифр рассказываем, что и как делали...
10 05 2026 3:39:26
Короткая история про одного из руководителей корпорации «Kimberly Clark». Альтернативная Википедия для тех, кто любит сторителлинг. Читать дальше!...
09 05 2026 22:30:13
Подробное руководство по настройке отслеживания событий в GA4...
08 05 2026 6:37:52
Как превратить неактивных подписчиков в вовлеченную аудиторию....
07 05 2026 7:32:33
Бизнесу следует позаботиться о том, чтобы представить отзывы на всех площадках (как минимум на тех, которые есть на трех страницах выдачи), где только может искать информацию пользователь. Узнать больше!...
06 05 2026 11:47:16
Футпринт — это признак, по которому можно спалить PBN-сетку сайтов. Это как родинки. Если взять двух парней с родинкой на щеке, то не факт, что они братья. Но если родинки совпадают на щеке, локте и колене, то тут что-то подозрительное...
05 05 2026 19:54:41
Крутые площадки для нового инструмента: контекстщикам на заметку!...
04 05 2026 18:22:30
Распределение бюджета на кампании в Google Рекламе. Обозревает Григорий Крутий....
03 05 2026 22:48:13
Проделанные шаги и полученные результаты при раскрутке магазина великов в интернете...
02 05 2026 15:49:27
Создатель сервиса Foster Кирилл Винокуров рассказал, как зарегистрировать приложение для полноценной работы с Директом....
01 05 2026 13:13:47
Если вы не можете улучшить свой уровень конверсий и поднять ставки, оптимизация показателя качества может быть вашим единственным выходом, чтобы сохранить высокий рейтинг без больших затрат. Статья, которая расставляет точки над «i»....
30 04 2026 0:37:43
Как найти тему для поста, который и в онлайн поиске будет хорошо ранжироваться, и по социалкам разойдется, и комментарии в треде обеспечит...
29 04 2026 15:46:54
Лучшие идеи круглого стола о SEO с участием Тараса Гущи, Сергея Карпенко, Алексея Чекушина, Дмитрия Шахова и других экспертов...
28 04 2026 19:20:57
Как повысить результаты продаж в режиме цейтнота. Советы новому руководителю от специалистов Netpeak Group. Больше подробностей — в посте...
27 04 2026 15:36:33
Facebook buttons. Пора поделиться самым волнующим вопросом 2011-го года...
26 04 2026 20:29:15
О важных для разметки сайта тегах — alternate, hreflang, media, — и как их грамотно использовать при продвижении....
25 04 2026 8:23:44
Агентство интернет-маркетинга Netpeak вышла на новые рекламные горизонты и приобрело 51% доли болгарской компании Optimization.bg....
24 04 2026 7:52:41
Как правильно писать нарицательное слово «интернет»....
23 04 2026 16:27:48
Знакомство с реальным и потенциальным клиентом. Как создать доверительные отношения? Для этого понадобится сделать сегментацию аудитории и определить, кто ваш покупатель: от рода занятий, до его самых сокровенных страхов. Узнайте больше!...
22 04 2026 22:12:58
Встречайте Netpeak Spider 2.1 — программу, предназначенную для обнаружения и уничтожения ошибок внутренней оптимизации сайта. Мы хотим, чтобы 4 августа 2016 года запомнилось вам как «День кроулинга»!...
21 04 2026 3:47:43
Chrome Extensions экономят время тех, кто продвигает мобильные приложения...
20 04 2026 14:27:19
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
