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

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

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

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

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 Section
Theme URI:      [IMG=http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684
Description:    Theme to support tuts+ tutorial on styling pages differently in each section of a site. Child theme for the Twenty Fifteen theme.
Author:         Rachel McCollin
Author URI:     [IMG=http://rachelmccollin.co.uk/
Template:       twentyfifteen
Version:        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.

Данная публикация представляет собой перевод статьи «Styling Sections in a Page-Based Site Differently» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню