Article class post html

Работа с классами и идентификаторами, генерируемыми WordPress

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

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

Я буду работать с тремя областями применения:

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

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

Что вам потребуется для выполнения этого урока

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

• Установленная и настроенная система WordPress;
• Тема WordPress, которую вы сможете редактировать.

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

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

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

На основе вашего выбора WordPress присваивает тегу загруженных изображений различные классы.

Классы выравнивания могут быть следующими:

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

Для размера изображения добавляются следующие классы:

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

Большинство тем включает в себя CSS-стили каждого из этих классов соответственно.

Например, тема Twenty Twelve включает в себя следующую таблицу стилей:

.alignleft < float: left; >.alignright < float: right; >.aligncenter < display: block; margin-left: auto; margin-right: auto; >img.alignleft < margin: 12px 24px 12px 0; margin: 0.857142857rem 1.714285714rem 0.857142857rem 0; >img.alignright < margin: 12px 0 12px 24px; margin: 0.857142857rem 0 0.857142857rem 1.714285714rem; >img.aligncenter < margin-top: 12px; margin-top: 0.857142857rem; margin-bottom: 12px; margin-bottom: 0.857142857rem; >img.size-full, img.size-large, img.header-image, img.wp-post-image

CSS-код, приведенный выше, выравнивает через классы .alignleft , .alignright или .aligncenter любой элемент (не только изображения). То есть, кроме изображений, вы можете использовать эти классы также для стиля контента.

Он также добавляет к изображениям с этими классами отступ и обеспечивает, чтобы изображения в большом и оригинальном размерах не выходили за пределы родительского контейнера: для этого используется параметр max-width: 100% .

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

Первое изображение выравнивается по правому краю; второе — по центру, оно выводится в оригинальном размере:

Добавляем собственные стили, используя данные классы и идентификаторы

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

Первое изображение на приведенном скриншоте выравнено по правому краю.

Если же размер экрана изменяется, размер самого изображения остается неизменным. Тогда текст обтекает его не слишком аккуратно:

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

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

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

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

Использование тегов шаблонов для добавления классов и идентификаторов

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

Примечание : Если вы не знакомы с тегами шаблонов, прочтите раздел Кодекса Теги шаблонов .

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

Тег шаблонов body_class()

Хорошо проработанная тема для WordPress должна содержать следующий тег в файле header.php :

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

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

Вот примеры некоторых из них:

• .home для главной страницы;
• .single-postid- когда просматривается одиночная запись, в которой идентификатор является числовым идентификатором поста;
• .archive для страниц архивов;
• .page-template—php когда используется пользовательский шаблон страницы.

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

Например, для добавления класса » hello » существует следующий код:

Разделяя записи пробелами, вы можете добавить столько классов, сколько захотите.

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

Например, в моей детской теме я создала шаблон страницы под названием page-full-width-with-sidebar.php , в котором контент выводится по всей ширине странице, а сайдбар размещается под контентом со смещением в правую сторону.

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

Используя тег body_class() , WordPress генерирует для тега класс .page-template-page-full-width-with-sidebar-php (в числе прочих классов).

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

/* структура стилей шаблона страницы с выводом контента по всей ширине и сайдбаром */ .page-template-page-full-width-with-sidebar-php .site-content, .page-template-page-full-width-with-sidebar-php .widget-area < width: 100%; clear: both; >.page-template-page-full-width-with-sidebar-php #secondary.widget-area .widget

Этот код задает ширину основного содержания и боковой панели ( #secondary ) 100% , а также устанавливает выравнивание виджетов боковой панели.

Как выглядит такая страница, показано на скриншоте ниже:

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

Теги шаблонов post_class() и post_ID()

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

Например, в теме Twenty Twelve для каждого поста цикла, заключенного в элемент , применяется эти теги:

" > // здесь располагается контент
 

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

Например, для сообщения в моем демо-сайте, относящегося к категории ‘red’ будут сгенерированы следующие классы и идентификаторы:

Вы можете использовать данные классы, чтобы задать индивидуальный стиль для записей, относящихся к разным категориям. В моем демо-сайте есть три такие категории: ‘red’ , ‘blue’ и ‘important’ .

Для назначения таких стилей добавьте в таблицу стилей темы следующий CSS-код:

/* стиль постов в категории ‘red’ */ .category-red < border-top: 2px solid #cc0000; >/* стиль постов в категории ‘blue’ */ .category-blue < border-top: 2px solid #3366ff; >/* стиль постов в категории ‘important’ */ .blog .category-important < padding-top: 2em; margin-left: 2em; >.category-important:before

Данный код добавляет стили для каждой из категорий: цветная рамка для каждой из разноцветных категорий и дополнительный отступ для категории ‘important’ .

Здесь также используется псевдо-элемент для вставки дополнительного текста перед каждым постом в категории ‘important’ .

Результат показан на скриншоте:

Использование классов и идентификаторов для виджетов и меню

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

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

Классы и идентификаторы для виджетов

Чтобы зарегистрировать область виджета, вы используете функцию register_sidebar () файла functions.php вашей темы.

Она может принимать следующие параметры:

Два из этих параметров генерируют класс и/или идентификатор:

Параметр «class» позволяет вручную задать класс для области виджета. Настройки для параметра ‘before_widget» указывают WordPress создать уникальный идентификатор для каждого виджета в области виджетов, а также ряд классов, которые будут зависеть от типа конкретного виджета.

Например, в моем демо-сайте я добавила два виджета — перечень записей и перечень страниц.

Для перечня записей выводится следующий HTML-код:

Для перечня страниц код будет выглядеть так:

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

Для этого нужно добавить следующий CSS-код в таблицу стилей темы:

/* стиль конкретного виджета */ aside.widget_pages

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

Примечание: Это работает в моем демо-сайте, потому что он использует детскую тему, разработанную на базе темы twenty twelve, в которой корректно зарегистрированы боковые панели. Если вы создаете собственную тему, то должны будете добавить тег register_sidebar () с указанными выше параметрами. Как это сделать вы можете прочесть в соответствующем разделе Кодекса .

Классы и идентификаторы для меню

Навигационные меню выводятся с помощью тега wp_nav_menu ( ) в файле header.php вашей темы. Он может иметь ряд параметров, о чем подробнее написано в статье wp_nav_menu .

Один из них добавляет классы и идентификаторы для каждого их элементов меню:

'items_wrap' => 'Данным кодом добавляется идентификатор и набор классов для каждого пункта. Классы назначаются на основании класса самого меню и его расположения на странице.

Например, когда пользователь просматривает страницу сайта, пункты меню навигации будут иметь класс .current_page_item .

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

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

/* стиль ссылок навигации в текущей странице */ .main-navigation .current_page_item a

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

Примечание : Так как я использую детскую тему twenty twelve, мне не нужно отдельно добавлять тег wp_nav_menu (), он уже присутствует в родительской теме .

Заключение

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

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

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

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

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

Возможности ограничены только вашим воображением!

Источник