Дополнительный шаблон страницы wordpress. Создание шаблона страницы. Практический пример создания шаблона страниц

Дополнительный шаблон страницы wordpress. Создание шаблона страницы. Практический пример создания шаблона страниц

28.04.2019

Типы постов на WordPress являются самым широким полем деятельности для разработчиков. Изначально WordPress включает в себя 5 основных типов постов: запись, страница, вложение, ревизия и навигационное меню.

Записи и страницы являются основными типами постов для размещения контента на сайте. И между ними есть несколько отличий.

Записи , как правило, отображаются в обратном порядке на главной странице блога, а страницы отображаются без даты публикации. Категории и тэги также могут быть привязаны к записям, а к страницам нет (хоть и это можно сделать в настройках).

Страницы можно структурировать по порядку. Это особо полезно для организации контента для владельцев сайта и посетителей.

Дизайн страниц так же легко можно изменить, если использовать различные шаблоны страниц. Они позволят изменить стиль любой страницы на вашем сайте.

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

Почему бы не использовать разные шаблоны страниц?

В темах WordPress обычно используется шаблон page.php , который определяет стиль всех страниц сайта. Большинство разработчиков тем создают шаблон начальной страницы по такому же принципу. В этом шаблоне отображается контент страницы и по умолчанию определяется, какие элементы дизайна будут на ней присутствовать (например, шапка, сайдбар, футер, прочее).

По умолчанию шаблон страницы (page.php) настроен таким образом, что весь необходимый контент отображается на странице.

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

Наиболее известный пользовательский шаблон страницы - это Archive (шаблон архивной страницы archive.php ). Он есть во многих темах WordPress и содержит весь контент сайта, который разделен на страницы, категории, тэги, даты архивов, авторские архивы.

Многие шаблоны архивов также отображают полный список записей в блоге и поле для поиска записей на сайте. По сути, шаблон архива - это карта сайта, с помощью которой пользователь может найти то, что ищет.

В темах можно найти и другие типы шаблонов страниц, как например:

  • Контактную форму
  • Страницы без сайдбара (боковой панели)
  • Лендинговую страницу (посадочную страницу)
  • Индекс блога

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

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

Добавить шаблон для страницы очень просто. В редакторе страницы справа вы увидите окошко (виджет) под названием «Атрибуты страницы ». Оно размещено под окошком «Опубликовать ».

В атрибутах страницы можно выбрать родительскую страницу и порядок ее размещения на сайте в соответствующем поле. А опция между ними позволяет изменить шаблон. Все что нужно сделать - это выбрать шаблон для страницы и обновить ее.

Шаблон также можно изменить другим способом - через список всех страниц. Нужно только нажать на «Свойства ».

Затем изменить шаблон в опциях меню справа.

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

Создаем базовый шаблон страницы для сайта

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

Нужно только использовать код page.php уже существующего шаблона темы в качестве основы для нового шаблона страницы. К примеру, вы используете старую стандартную тему Twenty Twelve . Файл page.php имеет следующий код:

Можно использовать этот код для создания шаблона новой страницы. Для этого нужно только убедиться, что комментарий к коду размещен вверху нового файла. Это определит данный файл как шаблон страницы:

/* Template Name: My Custom Page Template */

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

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

В стандартном шаблоне сайдбар страницы отображается с правой стороны:

Стандартный шаблон страницы в теме Twenty Twelve

Создать шаблон новой страницы без сайдбара просто.

Для начала нужно создать новый файл, используя любой текстовый редактор (Блокнот или Notepad++ подойдет). Его можно назвать как-то по-простому, например, nosidebar-page.php или full-page.php (о названиях файлов поговорим немного позже). Затем загрузите файл на ваш сайт таким образом, чтобы он находился рядом с файлом page.php.

По сути, наш шаблон - это шаблон от page.php темы Twenty Twelve, только с удаленным кодом .

Он выглядит так:

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

Но это еще не все. Пока мы только удалили сайдбар. Нам нужно сделать так, чтоб контент размещался по всей ширине страницы . А пока он занимает только две третьих страницы:

Если вы посмотрите на код нашего шаблона, то увидите, что основная часть контента находится под действием определенного класса CSS:

За стиль основной части контента отвечает вторая часть class="site-content" . Если проверить файл стилей (style.css ) темы, то можно заметить, что этот класс находится почти в самом низу:

Site-content { float: left; width: 65.104166667%; }

Для того чтобы расширить контент на всю страницу, нам нужно изменить ширину области контента с 65% на 100% . Но не нужно изменять класс контента сайта, т.к. он по-прежнему используется в других шаблонах, как например, стандартная страница page.php и шаблон записей single.php . Изменение цифры процента для контента сайта повлияет на все записи и страницы на вашем сайте, которые занимают всю ширину страницы.

Поэтому нам нужно создать новый класс, который употребляется специально для страниц с полной шириной:

Site-content-fullwidth { float: left; width: 100%; }

После обновления файла style.css с вышеуказанным классом нам нужно изменить наш шаблон с полной шириной страницы и быть уверенными, что мы создали ссылку на класс CSS с шириной в 100%:

Наш финальный шаблон будет выглядеть так:

Этот обновленный шаблон подтверждает, что контент на нашем сайте будет отображаться на всю страницу:

Теперь контент на сайте отображается по всей странице

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

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

Согласно WordPress Template Hierarchy , WordPress отображает шаблоны для страницы в следующем порядке:

  • Пользовательский шаблон (Custom Template)
  • page-{slug}.php
  • page-{id}.php
  • page.php
  • index.php

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

Этот порядок означает, что на WordPress всегда будет отображаться шаблон для страницы, если он был прикреплен к ней. Если к странице не был добавлен ни один из шаблонов, то WordPress будет искать page-{slug}.php.

Если шаблон page-{slug}.php не найден, WordPress ищет шаблон по ID страницы. К примеру, если ID страницы = 15, то WordPress будет искать шаблон страницы с названием 15.php.

Если шаблон не привязан к странице и нет совпадений с ID страницы, то WordPress ищет по стандартному шаблону страницы page.php. И если страницы шаблона page.php не существует, то для поиска используется index.php.

Многие разработчики называют свои шаблоны тем, используя формат page-name.php. К примеру, шаблон страницы контактов называют page-contact.php. По большому счету вы можете давать шаблонам названия на свое усмотрение и использовать любые конфигурации, будь то page-name.php, name-page.php или name.php. В любом случае, в будущем вы сможете эти названия изменить.

Те, кто пробовал хоть раз создавать темы или ковыряться в их коде, знают, что за стиль всех страниц сайта отвечает шаблон «page.php ». Зачастую в этом файле выводятся блоки, которые одинаковые и на записях, и в архивах и т.д. WordPress дает возможность создавать свои собственные шаблоны страниц . А это, в свою очередь, означает, что можно выйти за рамки стандартного дизайна. Объясняю. Например, в своем созданном шаблоне страниц можно убрать сайтбар или поменять месторасположение блоков, сделать другую шапку или поменять абсолютно весь дизайн. Также благодаря созданию собственных шаблонов есть возможность создать одностраничники (лендингпейдж).

Итак, с помощью личного шаблона страниц можно:
- убрать или добавить сайдбар, подвал, шапку;
- изменить дизайн шапки, подвала, сайдбара;
- создать страницу регистрации или формы связи, встроенную в дизайн;
- внедрить какой-нибудь скрипт (JavaScript, php и другие);
- оригинально оформить страницы

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

Способ№1

○ Создание своего шаблона

Чтобы создать свой шаблон страницы на WordPress, сделайте вот такие действия:
- откройте ваш блог/сайт через FTP. Для этого воспользуйтесь такими программами, как или

Откройте файлы темы (wp-content/themes/Ваша-тема/ )

Скачайте файл «page.php » и откройте его с помощью , а потом вставьте в самое начало файла вот такой код:

Естественно, название «новая страница для сайт » меняете на свое
Этим кодом мы сообщили WordPress о создании индивидуального шаблона под именем «новая страница для сайт ».

Для примера, чтобы вы увидели разницу, удалите сайтбар. Для этого в коде найдите и удалите вот такое:

А сам файл сохраните как «page-no-sidebars.php ».
Залейте новый созданный файл «page-no-sidebars.php » через FTP ко всем файлам темы.

○ Подключение нового шаблона к странице

В админке WordPress на любой уже созданной странице (или на той, которую вы создадите) с правой стороны найдите пункт «Шаблон ». Вот в этом пункте выберите ваше название нового шаблона страницы (в моем случае это «новая страница для сайт »):

Сохраняйте и смотрите результат.

Способ №2

Способ №2 отличается от Способа №1 тем, что следует называть файл конкретным названием:

Page-{слаг-страницы}.php

Например: page-contact.php

Page-{ID-страницы}.php

Например: page-12.php

Объясняю.

При создании страницы автоматически ей присваивается url-адрес. Его можно изменить так, как вам удобно, рекомендую использовать плагин rustolat ():

Значит, если УРЛ страницы у меня «proba », тогда файл, который мне нужно создать для этой страницы будет вот таким:

page-proba .php

Если УРЛ страницы была бы «contact », тогда файл для этой страницы был бы вот таким:

page-contact .php

Файл заливаете через FTP ко всем файлам темы. Проверяйте, все должно работать.

Недостаток Способа №2 в том, что файл создается только для одной страницы, все остальные будут стандартными.

Это все! Теперь вы сможете создать для любой страницы уникальный дизайн.

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

Зачастую, при использовании WordPress , необходимо создавать настраиваемый шаблон для страницы. Наверняка вы могли заметить, что многие сайты на WordPress имеют разные макеты для разных страниц. Пользовательская страница позволяет вам создавать разный внешний вид для обычных страниц в WordPress. Если вы новичок в WP и никогда не делали этого раньше, не бойтесь - создание настраиваемого шаблона страницы для вашего сайта проще, чем вы думаете.

Большинство тем для WP содержат файл страницы (page.php) , который содержит шаблон страницы по умолчанию, используемый на каждой странице, если не указан конкретный тип. Если вам нужна страница с другим макетом или форматом, чем шаблон страницы по умолчанию, необходимо создать собственный тип шаблона. При разработке шаблонов для WP необходимы базовые знания HTML, CSS и PHP. Однако, вы можете воспользоваться готовыми темами WordPress - www.inbenefit.com , если не обладаете нужными навыками.

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

Чтобы создать собственный шаблон, вам понадобится текстовый редактор. Для Windows можно использовать обычный блокнот. В противном случае вам понадобится какая-нибудь простая система редактирования, например FileZilla или Dreamweaver. В любом случае выполните следующие действия:

Если вы зайдете на страницу в браузере, то увидите пустое место. Это связано с тем, что в созданном вами файле нет кода, чтобы сообщить WordPress, как отображать контент. Теперь в игру вступают ваши навыки HTML, PHP и CSS.

Подготовка шаблона

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

Один простой способ начать с работать с шаблонами - скопировать основную информацию из файла page.php в тему, которую вы используете. Это даст вам отправную точку и может быть полезно, когда вы впервые научитесь программировать. Выполните следующие шаги:


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

Это работает для постов в WordPress?

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

Это повлияет на что-либо еще на сайте WordPress?

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

Есть ли альтернатива для создания макетов без кодирования?

Можно создать собственный макет, не предпринимая шагов для создания уникального шаблона. Вы можете использовать такой плагин, как Page Builder от SiteOrigin, который дает вам возможность настраивать уникальный макет при использовании виджетов внутри самого содержимого. Для тех, у кого нет навыков программирования, это может быть лучшей альтернативой.

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

Пользовательские страницы могут иметь разные цели: от рекламы продукта или услуги до создания целевой страницы, идеально подходящей для различных кампаний.

Шаблоны для Страниц в WordPress предназначены для того чтобы придать индивидуальный вид вашим страницам. Чаще всего все страницы имеют один шаблон, либо вариант шаблона с сайдбаром и без него. Согласитесь, этого мало для полета фантазии. В этом уроке мы рассмотрим как лучше всего создавать свои шаблоны для страниц.

Что такое шаблоны страниц

Тема в WordPress может иметь несколько разных шаблонов для вывода страниц, записей, архивов и так далее. Среди шаблонов мы рассматриваем сейчас шаблоны для Страниц. При создании Страницы в WordPress можно выбрать специальный шаблон для неё:

Разные темы могут предоставлять разные шаблоны страниц, например шаблон для страницы во всю ширину экрана (без боковой колонки), с левой боковой колонкой вместо правой и прочее. Отсутствие этой опции при редактировании страниц означает, что тема не объявила дополнительные шаблоны.

Шаблоны страниц можно использовать более чем для одной страницы, а некоторые темы создают вполне специфические шаблоны, предназначенные для использования всего один раз.

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

При использовании дочерней темы вы можете так же размещать шаблоны страниц в корневой директории или субдиректории, а если выйдет обновление для родительской темы, то ваши файлы не пострадают.

Когда не следует использовать шаблоны страниц

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

В WordPress есть вспомогательная функция body_class() , которая используется в большинстве существующих тем. С помощью классов выводимых данной функцией, вы можете изменить стиль одной любой страницы используя CSS код:

/* Спрятать боковую колонку на странице 123 */ body.page-id-123 #secondary { display: none; }

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

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

Иногда возникает необходимость в создании новой страницы сайта с новыми возможностями. Например, для создания сервиса проверки тИЦ и PR сайтов, установка и работа которого были описаны в статье « ». Возможности стандартных страниц WordPress не безграничны, и исполнение скриптов на них не предусмотрено, поэтому и придумали умные программисты такой ход – создать новый шаблон страницы, который будет «резиновым», то есть – будет иметь возможность для наполнения его любым функционалом.

Создание нового шаблона темы – не Бог весть какая задача, но для тех, кто с этим сталкивается впервые, этот процесс может представлять определенные трудности. Итак, с чего начинать? Все по-порядку – все файла вашей темы лежат в директории wp-content/themes/тема сайта/. Все процедуры можно производить через админпанель и редактор текста, например, тот же Блокнот или Notepad+. Выберите для создания нового шаблона страницы файл page.php – это пример вашей стандартной страницы темы.

В текстовом редакторе создайте новый файл, который и будет новым шаблоном страницы – к примеру, nov.php, и скопируйте в него все содержимое файла темы page.php – это будет скелет новой страницы. Потом мы его сможем наполнить так, как нам захочется.

Стандартный файл страницы содержит в себе обращение к заголовку сайта, подвалу, сайдбару или нескольким (если шаблон темы имеет их несколько), и собственно к содержимому страницы, а также вывод комментариев и другие полезности. Но для того, чтобы организовать новый шаблон, необходимо указать следующий код в самом верху страницы nov.php:

Имя необязательно писать с большой буквы. Потом, если вы решите, что некоторые элементы страницы вам не нужны (например — строчки , , ), их можно будет убрать. Но это уже относится к формированию дизайна страницы. Мы же сейчас занимаемся грязной работой. То есть – при помощи строк обращений к тем или иным функциям можно до неузнаваемости изменить основной шаблон страницы.

Но как сделать, чтобы эта страница выполняла те или иные вспомогательные функции, то есть, для нее – основные? Необходимо указать действие, которое эта страница будет выполнять, то есть – перенаправлять функцию на ту страницу шаблона, которая занимается исполнение скрипта. На языке программистов это называется «include». Для нас это будет строка , где путь TEMPLATEPATH.»/mmouse-whois.php обозначает путь к файлу, который представляет собой сервис whois – проверка имен домена. Можно организовывать любое исполнение скриптов – опросы, счетчики и т.д.

Вмоем случае на странице nov.php исполняется две функции. То есть, если взять один из примеров – то файл mmouse-whois.php исполняет проверку домена по адресу ресурса, а файл pagenavi.php проверяет занятость домена по IP-адресу клиента. То есть – на странице nov.php исполняется сразу две функции. Но для такой работы вашей новой страницы требуется наличие в директории темы таких файлов, то есть – вам нужно их туда закачать.

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

Вот и создан ваш новый шаблон темы. Видоизменять его вы можете, как вам будет угодно – убрать или добавить сайдбар, установить новый файл заголовка темы или преобразовать подвал файла. Но это уже тема для другой статьи. А для примера, приведенного выше, существующая и работающая и работающая страница выглядит так:



© 2024 beasthackerz.ru - Браузеры. Аудио. Жесткий диск. Программы. Локальная сеть. Windows