Как задавать стили для различных разделов сайта на основе статических страниц

СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ | ПОСМОТРЕТЬ Просмотр

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

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

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

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

Что вам понадобится

Для выполнения заданий данной статьи вам понадобится:

  • Установленный WordPress;
  • Редактор кодов.

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

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

Создаем тему

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

В папке wp-content/themes веб-сайта создайте новую папку и задайте для нее имя. Я назвала tutsplus-style-pages-by-section.

В данной папке создайте пустой CSS -файл под названием style.css и добавьте в него следующий программный код:

/*Theme Name: Tuts+ Style Pages by SectionTheme URI: [IMG=http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684Description: Theme to support tuts+ tutorial on styling pages differently in each section of a site. Child theme for the Twenty Fifteen theme.Author: Rachel McCollinAuthor URI:  [IMG=http://rachelmccollin.co.uk/Template:       twentyfifteenVersion:        1.0*/ @import url("../twentyfifteen/style.css");

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

Сейчас активируйте тему.

Импорт данных

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

  • Перейдите на страницу Theme Unit Test и скачайте по размещенной на ней ссылке XML-файл;
  • В панели администрирования веб-сайта перейдите в меню Инструменты> Импорт. Нажмите на соответствующую ссылку;
  • Нажмите на кнопку «Выбрать файл» и выберите файл, который вы только что скачали. Нажмите кнопку «Загрузить файл и импортировать»;
  • Далее следуйте инструкциям, а далее подождите, пока WordPress импортирует данные.

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

  • В разделе Параметра> Чтение, выберите для опции «Главная страница» статическую страницу по выбору. А для опции «Страница записей» задайте страницу «Блог«;
  • В разделе Внешний вид > Меню, выберите «Все страницы» и установите для него флажок «Меню навигации«, чтобы данное меню использовалось на веб-сайте в виде основной навигации.

Определение стилей для заданного элемента

WordPress использует тег шаблона body_class() для вывода классов в соответствии с типом отображаемой страницы. Вы добавляете этот тег в файл header.php используемой темы: тег определяет классы для элемента body в зависимости от типа страницы, которая в данный момент просматривается.

Если вы работаете с собственной темой, но ещё не добавили этот тег шаблона, то это необходимо сделать теперь. Как это сделать, вы узнаете из статьи по работе с классами и идентификаторами, генерируемыми WordPress.

При работе с дочерней темой Twenty Fifteen, данные теги добавляются автоматически.

Если открыть в браузере одну из страниц веб-сайта и при помощи инструментов для разработчиков просмотреть исходный HTML -код, то можно увидеть, что тег шаблона body_class() добавил на страницу пару классов:

Как задавать стили для разных разделов веб-сайта на основе статических страниц
Элемент body отображается с набором классов:

<body class="page page-id-1133 page-child parent-pageid-5 page-template-default logged-in admin-bar no-customize-support">

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

Мы используем два из данных классов, чтобы указать страницы в различных разделах веб-сайта: страницы, связанные с ID страницы, и родительские страницы.

Назначение стилей страниц верхнего уровня и их дочерних страниц

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

Прежде всего, нам надо определить идентификаторы страниц верхнего уровня. Для этого откройте каждую из них под логином администратора и посмотрите URL -адреса ссылок. Ссылка будет содержать текст «post=X«, где Х как раз будет уникальным идентификатором страницы. Не обращайте внимания на то, что в URL -адресе значится post(«запись«), а не «page»(фактически «страница» — это тип записей). Используйте этот идентификатор для назначения стилей.

В моем случае страницы верхнего уровня с дочерними элементами имеют идентификаторы 5 и 17, а страницы без дочерних страниц — 146, 701, 703, 733 и 735. Я собираюсь использовать один цвет для каждого из двух иерархических разделов, а другой для страниц, не имеющих дочерних элементов. Если страницы разбиты на разделы, вы можете использовать различные цвета для каждого из них.

Откройте файл CSS вашей темы и добавьте в него следующий программный код:

.page-id-5 h1,.parent-pageid-5 h1 {    color: #6cd2c8;}.page-id-17 h1,.parent-pageid-17 h1 {    color: #e5572f;}.page-id-146 h1,.page-id-701 h1,.page-id-703 h1,.page-id-733 h1,.page-id-735 h1 {    color: #933bbe;}

Обратите внимание: вам необходимо будет настроить указанные идентификаторы записей и родительских записей на значения ID веб-сайта.

Сейчас сохраните CSS и посмотрите на веб-сайт. На моем ресурсе используются разные цвета для различных разделов. Вот страница, не имеющая дочерних элементов:

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

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

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

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

Назначение стилей страниц в зависимости от категории

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

Откройте файл functions.php вашей темы и добавьте в него следующий код:

function tutsplus_add_categories_to_pages() {    register_taxonomy_for_object_type( 'category', 'page');}add_action( 'init', 'tutsplus_add_categories_to_pages');

Этот код добавляет таксономию ‘category‘ для объектов типа ‘page‘, то есть сейчас вы можете назначать категории для страниц.

Но это не значит, что тег body_class() будет отображать категории, как один из классов на странице с категориями — по умолчанию категории для страниц не назначаются.

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

function tutsplus_add_categories_to_body_class( $classes) {    if( is_page()) {              $categories = get_the_category( $post->ID);                     foreach( $categories as $category) {            $classes[] = 'category-'. $category->slug;        }    }         return $classes;     }add_filter( 'body_class','tutsplus_add_categories_to_body_class');

Таким образом, мы создаем возможность под названием tutsplus_add_categories_to_body_class() с переменной $classes. Она проверяет, находимся ли мы на странице, и если да, то создает переменную $categories, которая включает все категории, к которым принадлежит страница.

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

Сейчас попробуйте назначить категории для некоторых страниц, чтобы разбить веб-сайт на разделы. Я добавляю категории «Раздел 1», «Раздел 2» и «Раздел 3». Убедитесь, что каждая страница принадлежит только к одному разделу.

Вот как выглядят мои страницы с назначенными категориями в панели администрирования:

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

В файл CSS вашей темы добавьте следующий код, используя реальные метки slug категорий и цвета по усмотрению:

.page.category-section-1 h1 {    border-bottom: 2px solid #933bbe;    padding: 0.5em;}.page.category-section-2 h1 {    border-bottom: 2px solid #6cd2c8;    padding: 0.5em;}.page.category-section-3 h1 {    border-bottom: 2px solid #e5572f;    padding: 0.5em;}

Сейчас сохраните CSS и откройте страницу веб-сайта в браузере.

Вот моя страница из «Раздела 1»:

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

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

Заключение

Если у вас есть веб-сайт на основе иерархических статических страниц, то у вас есть и разделы, которые вы захотите оформить в индивидуальном стиле.

Из данной статьи вы узнали два способа назначения стилей для заданных страниц в разных разделах веб-сайта.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *