Как сделать шаблон страницы wordpress

Шаблоны страниц и записей

Страницы — это один из типов постов WordPress. По умолчанию все страницы выглядят одинаково, но средствами WordPress вы можете сделать страницы вашего сайта уникальными. Например создать страницу с картой, создать HTML-карту сайта, страницу с формой, лендинги и т.д. Всё это можно реализовать при помощи шаблонов страниц вордпресс.

Кроме того, с версии WordPress 4.7 шаблоны поддерживаются всеми типами записей!

Подробное видеоруководство о том, в каких ситуациях какие PHP-шаблоны из темы WordPress задействует.

Добавить шаблон для страницы WordPress можно при её редактировании

Если вы используете не свою собственную тему, а одну из стандартных тем WordPress или установленную из интернета, то вполне возможно, что эта тема имеет несколько уже готовых шаблонов страниц.

Для того, чтобы это проверить:

1. Переходим в Страницы > Добавить новую.
2. В метабоксе «Атрибуты страницы» выбираем один из шаблонов.

Либо, если у вас используется редактор Gutenberg, то опцию выбора шаблона вы сможете найти в настройках на вкладке «Страница» справа:

Если ваша тема не имеет ни одного шаблона страниц, то выпадающий список шаблонов просто будет отсутствовать.

Опции быстрого (Свойства, Quick Edit) и массового (Bulk Edit) редактирования также имеют возможность задавать шаблоны для страниц.

Также важно отметить, что определённый шаблон можно использовать как для отдельной страницы WordPress, так и для нескольких страниц одновременно. Но опять-таки, в такой ситуации вам возможно и не нужны кастомные шаблоны, поэтому опять рекомендую вам глянуть видеоурок про иерархию PHP-файлов темы.

Как создать шаблон для страницы WordPress?

Для того, чтобы создать свой произвольный шаблон страницы WordPress, нужно сделать два шага:

1. В папке с темой создать какой-нибудь файл, так, чтобы его название не перекликалось с условными названиями файлов темы WordPress. Если не уверены, то придумайте такое название, которое кроме вас больше никому не прийдет в голову �� например misha123.php .Файл шаблона также может располагаться в папке с родительской темой, папке с дочерней темой и, начиная с версии WP 3.4, в директории темы вы можете создать любую подпапку для шаблонов страниц.
2. В начале вашего файла нужно обязательно указать название шаблона — после этого WordPress его «увидит»:

/* * Template name: Мой Супер-шаблон */

/* Template name: Мой Супер-шаблон */

Далее в шаблоне вы можете использовать абсолютно любой код, не хотите подключать get_header() и get_footer() сайта? — да пожалуйста, можете вообще просто один туда засунуть и будет норм.

Имейте ввиду, что если тему, которая стоит на вашем сайте, разрабатывали не вы, то после её обновления все ваши созданные шаблоны страниц могут исчезнуть. Поэтому, для таких целей рекомендуется создавать дочерние темы, а уже в них — шаблоны страниц WordPress.

Иерархия и порядок подключения файлов страниц

Кстати, про иерархию я уже записывал видеоурок.

Список ниже показывает приоритет задействования PHP-шаблонов файлов темы для отображения типа записей «Страницы».

1. custom-template.php (если файл шаблона существует и выставлен для данной страницы в её настройках)
2. page-.php (если существует)
3. page-.php (если существует)
4. page.php (наиболее распространённое решение практически во всех темах)
5. singular.php (если page.php не существует)
6. index.php (используется, если все вышеперечисленные файлы отсутствуют в папке с темой)

Хотите лучше разбираться в иерархии шаблонов WordPress? – Рекомендую видеоурок.

Шаблоны записей и постов произвольного типа

Блеск, теперь мы знаем, как создать шаблон для страницы WordPress, но начиная с версии движка 4.7 мы также легко можем создать шаблон записи (любого типа кстати).

Принцип точно такой же, как и для страниц, только помимо параметра Template name: , нам ещё на следующей строке нужно указать параметр Template post type: , в котором можно указать название типа поста, или несколько названий через запятую, например я захочу использовать свой шаблон и для записей и для страниц, в этом случае он будет начинаться так:

/* Template name: Отдельный шаблон записи WordPress Template post type: post, page */

Если у вас уже был какой-то шаблон для страниц и он уже использовался на сайте, то, после того, как вы захотите использовать его как шаблон записи WordPress и добавите туда параметр Template post type: , то уже существующие страницы, использующие этот шаблон не перестанут работать, однако при редактировании там уже будет указан Базовый шаблон.

А для соответствующего типа записи сразу появится возможность выбора шаблона в «Свойствах записи»:

В меню быстрого редактирования он тоже появится.

Определение используемого шаблона на странице

Окей, допустим вы используете шаблоны страниц и вам в вёрстке или в PHP-коде нужно сделать что-то особенное для этого шаблона. Как будем это делать?

Классы тега

Прежде всего давайте обратим внимание на функцию body_class(), которую я рекомендую использовать при разработке ваших тем. Да, по этой функции любой быстро определит, что сайт на WordPress, ну и что с того?

Зато эта функция очень удобна, в атрибуте class тега она выведет:

• тип текущего поста, например page ,
• ID текущего поста, например page-id- ,
• page-template , если используется произвольный шаблон страницы,
• и… сам используемый шаблон страницы! Если же никакой шаблон не используется (ну я имею используются либо page.php , либо page-.php , либо page- .php, то будет добавлен класс page-template-default .

body page-id-5 page-template-default">

Давайте разберёмся, как формируется название класса тега для произвольного шаблона страниц. Предположим мы создали шаблон digital-agency.php и поместили его в папку page-templates в нашей теме, ну типо как page-templates/digital-agency.php . В отдельную директорию шаблон помещать не обязательно, кроме того, это стало возможно начиная с версии WordPress 3.4.

В итоге в классы будут добавлены:

• page-template – то, что используется произвольный шаблон страницы,
• page-template-page-templates – page-template- ,
• page-template-digital-agency – page-template- ,
• page-template-page-templatesdigital-agency-php – название файла шаблона с расширением и с названием папки, в которой он находится.

Условный тег is_page_template()

Если же мы хотим проверить, используется ли определённый шаблон страницы WordPress внутри кода PHP, например у нас общий для всех страниц header.php , то рекомендую использовать функцию is_page_template().

Для нашего примера условие будет выглядеть следующим образом:

if( is_page_template( 'page-templates/digital-agency.php' ) ){ // да, используется этот шаблон страницы }

Хотите лучше разбираться в шаблонах WordPress? Попробуйте пройти мой видеокурс по созданию шаблона (темы) на основе готовой HTML-вёрстки.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

1. Добавить шаблон
2. Создание шаблона страницы
3. Иерархия страниц
4. Шаблоны записей
5. Определение используемого шаблона
   1. body_class()
   2. is_page_template()

   Комментарии — 11

   Виталий 18 Дек 2015
   Еще раз прочитал и просто понимаю как все легко вы описываете и находите информацию по существу
   Илья Волков 4 Апр 2016

   Я так понимаю в любом случае лучше делать «дочки», мало ли что? Наверное многие сталкиваются с проблемами недоступности части контента или урезания функционала своих плагинов/надстроек после глобальных изменений. Как минимизировать потери? Но на данный момент 4 апреля 2016 года грамотнее сначала сконфигурировать голый wp-template, если пишется тема под свои кастомные нужды? я, например, начал пользоваться http://underscores.me. Это хорошее решение или все-таки веб-разработчики полностью с нуля все создают?

   Миша 5 Апр 2016

   Если тема в дальнейшем будет обновляться, то однозначно «дочки». Разработчики чего только не мутят на самом деле. И с нуля, и на базовых темах и на на обычных темах. Но насколько знаю я, underscores — хорошее решение.

   Цифровой 1 Май 2021

   Шаблон страницы WordPress можно поместить в корень темы, а можно в директорию, но походу нельзя в директорию на уровень глубже. Как-то это можно решить?
   Для наглядности, так работает:
   тема/page-tmpl.php
   тема/шаблоны/page-tmpl.php а так нет:
   тема/шаблоны/шаблон/page-tmpl.php

   Миша 2 Май 2021
   Да, в двух вложенностях уже не будет работать. Можно только тема/шаблоны
   Марк 30 Май 2021

   Добрый день. Есть вопрос, возможно достаточный странный для уверенных пользователей Вордпресс. Заранее благодарен за ответ. Как Вы считаете..Если я разместил 20 страниц на сайте, но еще не структурировал их с точки зрения меню и навигации..Будет ли решения равнозначны с точки зрения Seo и юзабилити: Разместить в меню страницу с общим названием тематики ( например: Расписание автобусов) и с нее сделать 20 ссылок на те страницы, которые я разместил ранее.
   Разместить в меню страницу с общим названием тематики ( те же Расписание автобусов) и разместить 20 страниц как подстраницы ( пункты подменюменю) под этой страницей.
   И еще момент: Видел несколько раз что, чтобы зациклить страницу саму на себя ее помечают через # . Так вот ..не являеться ли это полной ерундой с точки зрения Seo и учетом того фактора, что я под эту страницу подвязываю еще 20 страниц ( имеется ввиду в случае с организацией меню как в моем пункте 2) Спасибо большое! У меня этот момент не складывается в голове и все тут(

   Миша 31 Май 2021

   Добрый день, Марк, Думаю тут нет правильного ответа 🙂 С точки зрения SEO, насколько я помню, лучше сделать отдельными страницами типо «Расписание автобусов в Лондоне», «Расписание автобусов в Осло» и так далее.

   Владимир 28 Сен 2021

   Здравствуйте! Для кастомным постов и архивов можно задать свои шаблоны через is_post_type_archive и is_singular. Есть ли что-то подобное для списка пользователей и отдельного пользователя? Или надо создавать страницу в админке и уже к ней привязывать шаблон страницы wordpress?

   Александр 8 Сен 2022

   Добрый день.
   Такой вопрос. Есть страница с url /news/, а есть post_type news, как в таком случае разделить шаблоны?

   Миша 14 Сен 2022

   Добрый день! Если вам нужна эта страница, то рекомендую либо отключить архивы типа записей, либо установить другой ярлык, подробнее.

   WordPress. Как создать шаблон страницы

   

   

   Этот туториал покажет, как создать новый шаблон страницы для шаблонов WordPress Cherry Framework .

   1. Войдите в админ панель WordPress.
   2. Откройте меню Страницы -> Добавить новую (Pages -> Add New) и создайте новую страницу с новым шаблоном страницы.
   3. Введите заголовок страницы и сохраните изменения. В правой колонке в панели Атрибуты страницы (Page Attributes) вы можете выбрать один из используемых в вашей теме шаблонов страницы. Вам необходимо добавить новый шаблон станицы в этот список. Все эти шаблоны находятся в папке wp-content/themes/CherryFramework на вашем сервере. Но вам необходимо добавить новый шаблон страницы в папку wp-content/themes/theme##### .
   4. Создайте новый .php файл в любом редакторе, например, Dreamweaver или Notepad++, и назовите его, например, new.php. Добавьте в этот файл следующий код:

   

6. Сохраните файл и загрузите его в папку wp-content/themes/theme##### на ваш сервер.
7. Теперь вернитесь к странице, которую вы создали в админ панели WordPress. В панели Атрибуты страницы (Page Attributes) вы можете выбрать новый шаблон страницы под названием “Пользовательский” (“Custom”).
8. Нажмите кнопку Опубликовать (Publish). Потом нажмите кнопку (Просмотреть) Preview. Страница будет чисто белой.
9. Cнова откройте файл new.php file и начните добавлять свой контент. Файл может содержать все, что вы захотите, включая неизменяемый контент или элементы макета страницы, которые будyт выводить ее контент.
10. Вы можете использовать элементы кода других шаблонов страницы из папки wp-content/themes/CherryFramework , чтобы создать специфическую страницу.
11. Давайте сначала добавим хедер и футер в новый шаблон страницы:

    

12. Если вы сохраните изменения, то сможете увидеть их на странице:
13. Теперь необходимо выбрать вид контента, который вы хотите использовать на этой странице. Допустим, у вас нет отдельного шаблона страницы для пользовательских постов “Наша команда” (“Our Team”). И вам нравится дизайн шаблона страницы Отзывов (Testimonials) и вы бы хотели использовать этот дизайн для постов “Наша команда” (“Our Team”). Для этого в меню Дизайн -> Редактор (Appearance -> Editor ) вы легко найдете файл, который содержит код шаблона страницы Отзывов (Testimonials). Его название page-testi.php.
14. Откройте этот файл для редактирования. Скопируйте только код контента, так как вы уже добавили хедер и футер (ниже приведен пример данного кода, ваш код может выглядеть иначе):

    

15. Вставьте скопированный код в файл new.php. Замените Template Name: Custom на Template Name: Team
16. И замените page-testi.php на new.php в этом коде.
17. Данный код также содержит ссылку на файл loop/loop-testi.php. Это еще один файл, который вам необходимо скопировать и редактировать. Скопируйте файл loop-testi.php из папки wp-content/themes/CherryFramework/loop и вставьте его в папку wp-content/themes/theme#####/loop (если в папке вашей темы отсутствует папка loop , вам следует создать ее). Переименуйте этот файл, например, на loop-new.php и откройте его для редактирования. Замените слово “testi” на слово “team” во всех строчках файла и сохраните изменения. (Для замены слов вы можете использовать комбинацию клавиш Control (Command) + F).
18. Когда файл loop-new.php создан и отредактирован, снова откройте файл new.php и замените loop/loop-testi.php на loop/loop-new.php в его коде. В результате ваш код будет выглядеть следующим образом:

    

19. Сохраните изменения и проверьте вашу новую страницу. Теперь она должна содержать пользовательские посты “Наша команда” (“Our Team”) с дизайном страницы Отзывов (Testimonials).

Вы также можете воспользоваться детальным видео туториалом:

Создание нового шаблона страницы в WordPress:

1) Сделайте новую страницу с именем mypage.php (либо с другим именем), можете просто скопировать и переименовать файл index.php .
2) Пропишите на самом вверху этого (пока еще пустого) файла такой код:
/*
Template Name: mypage
*/
?>
После этих строк вы можете вписывать любой код WordPress.
3) Закачайте этот файл в папку вашей темы, где лежит файл index.php .
Все готово, теперь этот шаблон страницы можно использовать!

Активация своего шаблона в WordPress

Теперь откройте любую страницу в режиме редактирования в админ панели WordPress, и там справа будет видна панель «Атрибуты страницы», где вы можете выбрать для этой страницы дизайн шаблона mypage.php :

Если эта панель невидна, то откройте ссылку «Настройки экрана», которая находится на самом вверху справа в админ панели, и поставьте галочку как показано на рисунке:

Замечание по поводу шаблонов страниц в WordPress

В WordPress таким способом можно создать несколько видов шаблонов для разных страниц сайта, например сделать один шаблон для главной страницы, а другой дизайн для обычных страниц.

Либо для страниц одной тематики установить один шаблон, а для других страниц сайта, с другой тематикой другие шаблоны.

• Лендинг пейдж
• SEO оптимизация сайта в Алматы
• Веб студия в Алматы. Студия веб дизайна в Казахстане
• Заказать доску объявлений
• Интернет реклама в Алматы
• Как открыть интернет магазин
• Как привлечь клиентов
• Сайт каталог в Алматы
• Система оплаты на сайте
• Продвижение сайта в Алматы с гарантией!
• Создание интернет магазина
• Сайт визитка в Алматы
• Поддержка сайта
• Интернеттегі жарнама
• Фирменный стиль компании
• Создание флаера
• Создание логотипа в Алматы
• Рерайтинг в Алматы
• Копирайтинг в Алматы
• Открыть магазин одежды
• Интернет магазин под ключ
• Интернет эквайринг
• Веб блог компании
• Как раскрутить сайт
• Разработка стартапа под ключ. Купить стартап или как создать стартап
• Интернет эквайринг Сбербанка или система оплаты Сбербанка
• Подключить систему оплаты на сайте в Казахстане. Интернет эквайринг
• Что такое интернет магазин
• Заказать корпоративный сайт в Алматы под ключ
• Тендер деген не? Тендерге қатысу, тендермен айналысу
• Интернет маркетинг деген не? SMM маркетинг деген не?
• Программист деген кім? Программист мамандығы
• Python тілі. Python деген не? Python жайлы қазақша сабақтар
• Стартап деген не? Стартап түрлері және стартап кезеңдері
• Лендинг деген не? Landing Page деген не?
• Веб сайт деген не? Браузер деген не? Сайт конструкторы деген не?
• Домен деген не? Хостинг деген не?
• Web сервер деген не? DNS сервер деген не?
• Что такое плагиат? Что считается плагиатом?
• Плагиат деген не?
• Что такое дропшиппинг? Дропшиппинг поставщики. Дропшиппинг в Казахстане
• Создание сайта с нуля в HTML. Создать сайт на WordPress
• Интернет маркетолог деген не? Маркетолог деген кім?
• Ссылки на сайте
• Вставка ссылок
• Обрезание картинок
• Создание визитки в Алматы
• Контекстная реклама в Гугл
• Реклама услуг в интернете
• Продажа товаров в интернете
• Презентация фирмы
• Карточка товара Wildberries
• Что такое микросайт?

Создание простой темы для 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 >

Меню навигации ( wp_list_pages ) Замените тэги li в ul > на ;

9. Sidebar.php

Вернитесь к index.html , вырежьте код с того места, где начинается form > и до закрытия тега div > , поместите его в новый php-файл и сохраните как sidebar.php .

• Замените form > со всем содержимым на .
• Замените теги li категорий на
• Замените теги li архивов на

10. Footer.php

Вернитесь к index.html . Извлеките оттуда код от div > включительно с тегом div > и до конца /html затем поместите в новый footer.php .

Недавние записи Тут я использовал query_post для отображения 5 последних записей в блоге.

«Последние комментарии» «Последние комментарии» сгенерированы плагином (включён в папку темы).

11. Index.php

Теперь в вашем index.html должен остаться только div > . Сохраните файл как index.php . Впишите строки: get_header , get_sidebar , и get_footer в том порядке, как они встречаются в шаблоне.

12. Разбор цикла

Цикл последовательно отображает записи блога в зависимости от ваших настроек. Скриншот ниже иллюстрирует его работу. Изначально цикл проверяет наличие записей и если таковых не находит, то выдает сообщение «Not Found».

13. Копирование цикла

Перейдите к директории темы default , откройте index.php . Скопируйте цикл из стандартного index.php в свой — между 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.

Работал Web developer в компании «ООО «Цитрус Дискаунт»», «Netpeak», «Infomir», Front-End Developer в компании «Ciklum Odessa», Programmer в COMODO, Web developer в компании «ООО «Цитрус Дискаунт»».

Узнайте больше

75