WordPress about page template

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

WordPress — легкий наркотик в мире веб-разработки. Многие люди, которые начинали работать с этой платформой, поначалу искали удобный (и бесплатный) способ создания простого веб-сайта. Все это можно сделать с помощью небольшого «гуглинга» и консультаций, представленных в кодексе WordPress. В общем, «я просто хотел попробовать это, и все завертелось».

Однако многие пользователи не останавливаются на простом знакомстве. Вместо этого они начинают активно пользоваться системой. Придумывают больше идей. Экспериментируют. Пробуют новые плагины. Открывают Firebug. Всё. Точка невозврата уже пройдена. Согласитесь, похоже на вашу историю? Для пользователей WordPress вполне нормально желать все больших и больших аспектов управления своим сайтом. Желать уникального дизайна, выверенной функциональности, настройки всех деталей.

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

Среди наиболее важных инструментов, касающихся полного управления сайтом, можно отметить шаблоны страниц. Они позволяют пользователям кардинально изменить дизайн и функциональность своего сайта. Хотите сделать совершенно иной хэдер для главной страницы? Легко. Дополнительный сайдбар, который будет выводиться только на странице блога? Без проблем. Уникальную страницу 404? Пожалуйста!

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

Шаблоны в WordPress

Что мы подразумеваем, когда говорим о шаблонах в контексте WordPress? Если говорить кратко, то шаблоны – это файлы, которые говорят WordPress, как нужно выводить разные типы контента.

Более подробное разъяснение: всякий раз, когда кто-либо отправляет запрос на просмотр части вашего сайта, платформа WordPress определяет, какой контент желает получить пользователь и какая часть вашего сайта должна быть выведена на экран.

Далее WordPress попытается использовать для этой части сайта самый подходящий шаблон, имеющийся в вашей теме. Какой именно — зависит от иерархии шаблонов WordPress. Как выглядит эта иерархия, вы можете видеть на скриншоте ниже.

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

Вы можете представить себе эту иерархию как дерево решений. Когда WordPress пытается решить, как вывести на экран текущую страницу, он идет вниз по иерархии шаблонов, пока не найдет первый шаблон, отвечающий запрашиваемой странице. К примеру, если кто-то пытается получить доступ к http://yoursite.com/category/news, WordPress будет искать соответствующий шаблон в таком порядке:

  1. category-.php: в данном случае category-news.php
  2. category-.php>: если ID рубрики — 5, WordPress попробует найти файл под названием category-5.php
  3. category.php
  4. archive.php
  5. index.php

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

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

Для страниц стандартным шаблоном является файл page.php. Если нет более подходящего шаблона (такого как, к примеру, archive.php для страниц архивов), WordPress будет использовать page.php для вывода контента всех страниц на вашем сайте.

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

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

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

Как изменить любую страницу в WordPress

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

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

Самый простой способ внесения изменений для отдельной страницы – это использование условных тегов в ее шаблоне. Как и предполагает название, эти теги используются для создания функций, которые выполняются только в том случае, когда условие было выполнено. В контексте шаблонов страниц это напоминает следующее: «Выполняй действие X только на странице Y».

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

Вот некоторые распространенные условные теги:

  1. is_page(). Указывает на определенную страницу. Может использоваться с ID, заголовком, а также URL/названием.
  2. is_home(): применяется к домашней странице.
  3. is_front_page(): применяется к главной странице вашего сайта, заданной в разделе «Параметры» – «Чтение».
  4. is _category(): условия для страницы рубрик. Может использоваться с ID, заголовком, URL/названием, как и тег is_page().
  5. is_single(): для отдельных записей и вложений
  6. is_archive(): условие для страниц архивов
  7. is_404(): применяется только к страницам 404

К примеру, если добавить к шаблону page.php вместо стандартного тега get_header(); следующий код, то вы получите произвольный хэдер, названный header-shop.php, при выводе страницы http://yoursite.com/products.

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

Однако условные теги не ограничиваются только одной страницей. Вы можете задавать сразу несколько условий:

В этом примере мы задали два условия, которые изменят поведение различных страниц вашего сайта. Помимо загрузки уже упомянутого выше хэдера для магазина, мы загружаем header-about.php на странице с ID 42. Для всех остальных страниц будет выведен стандартный хэдер.

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

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

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

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

Затем WordPress будет искать шаблон страниц, который включает в себя слаг рассматриваемой страницы. К примеру, если вы подключите файл page-about.php в файлах вашей темы, WordPress будет использовать этот файл для вывода вашей страницы About (О себе) или любой другой страницы, найденной по адресу http://www.yoursite.com/about.

Того же самого вы можете добиться путем указания ID вашей страницы. К примеру, если та же самая страница имеет ID 5, WordPress будет использовать шаблон page-5.php, если он существует; Это будет лишь в том случае, если отсутствуют шаблоны страниц, имеющие более высокий приоритет в иерархии.

Вы можете узнать ID любой страницы, просто наведя курсор на ее заголовок в разделе All Pages (все страницы) бэкэнда WordPress. ID будет находиться в ссылке, выведенной вашим браузером.

Привязка произвольных шаблонов страниц

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

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

Привязка произвольного шаблона страниц через редактор WordPress

В редакторе WordPress вы можете найти поле, названное Page Attributes (Атрибуты страницы). В нем содержится список Template (Шаблон).

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

Задание произвольного шаблона через быстрое редактирование

То же самое может быть сделано без обращения к редактору WordPress. Переходим в раздел All Pages и наводим курсор мыши на любой пункт из списка. На экране появится меню, которое будет включать в себя пункт Quick Edit.

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

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

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

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

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

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

Я буду использовать тему Twenty Twelve в качестве примера. Вот как выглядит стандартный шаблон страниц в ней:

Как видите, ничего интересного: обычные вызовы хэдера и футера, а также цикл посередине. Страница будет выглядеть так:

  1. Копируем и переименовываем шаблон

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

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

Лучше всего именовать файл так, чтобы он отражал суть шаблона. К примеру, my-custom-template.php. В нашем случае мы назовем его custom-full-width.php.

  1. Меняем заголовок шаблона

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

Название в Template Name будет выводиться в разделе Page Attributes на странице редактора WordPress. Убедитесь в том, что вы изменили его на свое.

Теперь пришла пора к работе с кодом шаблона. В нашем примере мы удалим сайдбар с демо-страницы.

Сделать это относительно просто – достаточно удалить get_sidebar(); из шаблона страниц. В результате этого мой шаблон получил следующий вид:

  1. Загружаем шаблон страниц

После сохранения измененного файла нам нужно загрузить его на сайт. Произвольные шаблоны страниц могут храниться в разных местах:

  • Папка с вашей активной (дочерней) темой
  • Папка с вашей основной родительской темой
  • Подпапка в папке с любой темой (как родительской, так и дочерней)

Я предпочитаю создавать папку page_templates в дочерней теме и размещать в ней все произвольные шаблоны. Так мне проще всего обращаться к измененным файлам.

Последний шаг: нам нужно активировать шаблон страниц. Как было указано ранее, делается это в секции Page Attributes → Templates в редакторе WordPress. Сохраняем, просматриваем страницу – и видим наш новый шаблон в действии (уже без сайдбара):

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

Пять разных способов использования шаблонов страниц

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

Шаблон для вывода страниц во всю ширину экрана

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

Чтобы исправить это, нам нужно поработать с CSS, особенно с этим участком:

Атрибут width задает ширину нашего контента равной 65.1042% от доступного пространства. Мы хотим увеличить это значение.

Если мы просто поменяем значение width на 100%, то в итоге все страницы нашего сайта будут выводиться во всю ширину экрана – нам это не нужно. Первый наш шаг – это изменение класса у div с в нашем произвольном шаблоне. Можно изменить его на Результат:

Теперь мы можем скорректировать CSS для нашего произвольного класса:

В итоге контент будет занимать весь экран:

Динамические страницы 404 с областями виджетов

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

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

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

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

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

В моем случае я хочу заменить форму поиска get_search_form(); в шаблоне на область виджетов. Вот как это выглядит:

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

Если теперь перейти к странице 404, мы увидим новые виджеты:

Шаблон страниц для вывода произвольных типов записей

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

Сначала мы должны создать наш произвольный тип записей. Сделать это можно вручную или через плагин. Я могу порекомендовать для этого плагин Types. Он позволит вам легко создать произвольные типы записей и произвольные поля.

Установите и активируйте Types, добавьте произвольный тип записей, сделайте его слаг «portfolio», настройте поля, которые вам требуются (к примеру, добавление миниатюры), откорректируйте другие опции и сохраните.

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

После добавления нескольких элементов в секцию portfolio нам нужно вывести их на странице сразу после основного контента.

Чтобы сделать это, мы используем дубликат page.php. Скопируем файл, назовем его portfolio-template.php и изменим его заголовок:

Однако в данном случае нам нужно будет внести некоторые изменения и в исходный шаблон. Если вы взглянете в код page.php, вы увидите, что в нем стоит вызов другого шаблона content-page.php (get_template_part( ‘content’, ‘page’ );). В этом файле нам нужен будет следующий код:

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

Чтобы вывести пункты портфолио на нашей странице, нам нужно будет добавить следующий код сразу после вызова the_content():

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

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

Теперь гораздо лучше, не находите?

Вот весь код шаблона страницы с портфолио:

Страница участников с аватарами

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

Начнем мы все с того же гибридного файла, что и ранее, и добавим к нему код для вывода списка участников.

Стандартная тема Twenty Fourteen поставляется вместе со страницей участников по умолчанию. Вы можете найти этот шаблон в папке page-templates под названием contributors.php.

Однако если вы взглянете в этот файл, вы найдете там только следующий вызов: twentyfourteen_list_authors();. Понятно, что это связано с функцией, содержащейся в файле function.php темы. Нас интересует следующий ее фрагмент:

Мы добавим его сразу под вызовом the_content() и получим следующий результат:

Теперь зададим некоторую стилизацию:

Готово. Спасибо Twenty Fourteen!

Измененная страница архивов

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

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

Мы можем добавить следующий код сразу под the_content() в наш файл, который используется для примеров:

Также понадобится некоторая стилизация для поиска:

Результат будет следующим:

Вот весь файл, чтобы вы могли понять, что к чему:

Не забудьте привязать этот шаблон к странице!

Источник

Читайте также:  Linux для asus eee pc 1001ha
Поделиться с друзьями
КомпСовет
Adblock
detector