Как настроить CSS для стилизации контента с помощью тегов шаблонов WordPress

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Изучение разработки WordPress - это не просто знания программирования PHP.

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

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

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

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

Добавляем в шаблон тег `body_class ()`

Первый тег - body_class (). Как вы могли догадаться, он относится к элементу body.

В файле header.php вашей темы найдите строку, которая открывает ваш элемент body:

<body>

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

1	<body <?php body_class(); ?>>

Сохраните файл и закройте его. Теперь откройте сайт и взгляните на базовый код ваших страниц.

Вот несколько примеров кода, сгенерированного на моем демо-сайте.

Во-первых, главная страница:

1	<body class="home page-template page-template-page-full-width page-template-page-full-width-php page page-id-7">

Из кода можно понять несколько вещей о странице:

Это домашняя страница.
Она использует шаблон страницы.
Это страница на полную ширину.
Это страница (а не пост или комментарий).
Её идентификатор - 7.

Этой информации даже больше, чем достаточно. Теперь посмотрим на архив категорий:

1	<body class="archive category category-basics category-154">

Это говорит нам о том, что мы находимся в архиве, что это архив категорий, и более конкретно, что это архив для «базовых» категорий с ID 154.

Скорее всего вы задаетесь вопросом, зачем все эти классы нужны: для чего нужно знать, например, класс архива, а также класс категории? Причина в том, что вы можете настроить CSS так, как вам нужно. Если вы хотите стилизовать все страницы архива, вы должны использовать archive класс. Для стилизации категории архива, используйте класс category, а вы хотите стилизовать определенную категорию, нужно назначить slug или ID.

Ну и наконец, давайте посмотрим один пост из блога:

1	<body class="post-template-default single single-post postid-3522 single-format-standard">

Теперь мы имеем еще больше информации:

Используется по умолчанию шаблон публикации..
Это один пост по типу публикации.
Его ID - 3522.
Он использует стандартный шаблон.

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

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

Добавляем теги `post_class` и `the_ID` к шаблону вашей темы

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

Вы добавляете этот код в цикл, открывая тег article для каждого поста.

Код без тегов шаблона выглядит так:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <!-- contents of loop -->
    </article>
<?php 
endwhile;
endif; ?>

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

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <!-- contents of loop -->
    </article>
<?php 
endwhile;
endif; ?>

Здесь есть два тега шаблона:

Тег the_ID () добавляет идентификатор сообщения как идентификатор в CSS, а значит, что он будет уникальным.
Тег post_class () добавляет список классов в зависимости от свойств поста, body_class () - от свойств страницы.

Давайте посмотрим на код, который они генерируют.

Во-первых, на главной странице:

1	<article id="post-7" class="post-7 page type-page status-publish has-post-thumbnail hentry">

Это нам даёт:

ID post-7, используя ID поста.
Аналогичный класс post-7.
Класс page даёт нам понять, что это страница (а не пост).
type-page говорит нам, что это тип поста «page»
status-publish сообщает, что эта страница была опубликована.
has-post-thumbnail говорит, что у этой страницы есть миниатюра (или обозначенное изображение) - вы можете их использовать для стилизации постов с миниатюрами и без них таким образом, чтобы они по-разному отображались в теме.
hentry - это класс, разработанный для стилизации в RSS-каналах.

Это те классы, которые вы бы могли использовать!

Теперь давайте посмотрим на пост со страницы архива, о которой говорилось раньше:

<article id="post-3522" class="post-3522 post type-post status-publish format-standard has-post-thumbnail hentry category-basics category-featured category-roundups tag-admin tag-content-management tag-hosting tag-installing-wordpress tag-performance tag-plugins tag-security tag-seo tag-site-management tag-themes tag-wordpress-com">

Вау! Там много чего можно использовать.

Я не собираюсь подробно перечислять весь список, но, если вобщем, у вас есть классы, относящиеся к ID поста, его типу, его статусу, категории, миниатюре поста, категориям, в которых он находится, и назначенным тегам.

Наконец, отдельный пост:

<article id="post-3522" class="post-3522 post type-post status-publish format-standard has-post-thumbnail hentry category-basics category-featured category-roundups tag-admin tag-content-management tag-hosting tag-installing-wordpress tag-performance tag-plugins tag-security tag-seo tag-site-management tag-themes tag-wordpress-com">

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

Используем генерированные стили в файле CSS

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

Общим примером является разный стиль постов из разных категорий.

Вот страница блога на моем демо-сайте:

A blog page with blue styling for titles and black for content

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

Вот CSS для категории демо-сайта:

.category-basics #content h1.page-title,
.category-basics #content h2.entry-title a:link,
.category-basics #content h2.entry-title a:visited {
    color: #48C9C8;
}
.category-basics #content article {
  border-bottom: 1px solid #48C9C8;
}

Этот код стилизирует заголовки и границы голубым оттенком на странице архива категорий:

Image: https://cms-assets.tutsplus.com/uploads/users/227/posts/32236/image/basics-category-archive.jpg

Я также стилизовал описание категории, указав синий фон и белый цвет шрифта:

.archive-meta {
    background: #21759B;
	color: #fff;
	padding: 0.2em 0.5em;
	font-weight: 400;
	font-size: 1.1em;
	overflow: auto;
}
.category-basics .archive-meta {
	background: #48C9C8;
}

Я использовал класс .archive-meta для текста и шаблона, чтобы все архивы категорий были в одном стиле. Цвет фона я добавляю только для .category-basics .archive-meta.

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

Но что, если бы я хотел стилизовать посты по категориям в основном блоге? Я бы присвоил классы, созданные тегом post_class ().

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

.blog #content .category-basics h2.entry-title a:link,
.blog #content .category-basics h2.entry-title a:visited {
    color: #48C9C8;
}
.blog #content article.category-basics {
	border-bottom: 1px solid #48C9C8;
}

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

класс blog, добавленный к элементу body тегом body_class ()
класс category-basics, добавленный к элементу статьи тегом post_class ()

После такой стилизации страница блога выглядит так:

the blog page with cyan styling added to a post from the basics category

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

Сочетание тегов шаблона WordPress и стилей CSS предоставляют большие возможности

Теперь вы знаете, как добавить в свою тему теги body_class (), post_class () и the_ID () для генерации классов и ID ваших страниц, архивов и постов.

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

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

Как настроить CSS для стилизации контента с помощью тегов шаблонов WordPress

Добавляем в шаблон тег body_class ()

Добавляем теги post_class и the_ID к шаблону вашей темы

Используем генерированные стили в файле CSS

Сочетание тегов шаблона WordPress и стилей CSS предоставляют большие возможности

Добавляем в шаблон тег `body_class ()`

Добавляем теги `post_class` и `the_ID` к шаблону вашей темы