В ходе нашего опыта использования WordPress мы обнаружили, что дизайнеры тем часто много думают об определенной функции. Они ищут сумасшедшие фильтры и ловушки WordPress, чтобы выполнить задачу, когда все, что им нужно, это простой CSS. По умолчанию WordPress генерирует множество CSS-классов. Шпаргалка по WordPress CSS. Одним из этих классов CSS являются стили класса тела. В этой статье мы расскажем о классе тела WordPress 101 и поделимся некоторыми полезными советами и рекомендациями для начинающих дизайнеров тем.
Что такое WordPress Body Class?
Body Class (body_class) – это функция WordPress, которая предоставляет элементу тела различные классы, чтобы авторы тем могли эффективно создавать свои веб-сайты с помощью CSS. HTML-тег body в основном присутствует в файле header.php, который загружается на каждую страницу. При кодировании темы вы можете прикрепить функцию body_class к элементу body следующим образом:
>
Добавив этот маленький элемент, вы можете легко изменять внешний вид каждой страницы с помощью CSS. В зависимости от типа загружаемой страницы WordPress автоматически добавляет соответствующий класс. Например, если вы находитесь на странице файла, WordPress автоматически добавит класс файла в элемент body, если вы решите его использовать. Это делается почти для каждой страницы. Вот несколько примеров общих классов, которые WordPress может добавить:
.rtl {}
.Домой {}
.Blog {}
.archive {}
.meeting {}
.искать {}
.paged {}
.attachment {}
, Ошибка 404 {}
, просто postid- (id) {}
.attachmentid- (id) {}
.adjunto- (mime type) {}
.author {}
.author- (имя пользователя) {}
.category {}
.category- (slug) {}
.тег {}
.tag- (slug) {}
.page-parent {}
.page-child pai-pageid- (id) {}
.page-template page-template- (имя файла модели) {}
.Результаты поиска {}
.search-no-results {}
.Logged {}
.paginated- (номер страницы) {}
.single-paged- (номер страницы) {}
.page-paged- (номер страницы) {}
.category-paged- (номер страницы) {}
.tag-paged- (номер страницы) {}
.date-paged- (номер страницы) {}
.author-paginado- (номер страницы) {}
.search-paged- (номер страницы) {}
Как видите, имея такую мощную функцию под рукой, вы можете полностью настроить свою страницу WordPress, используя только CSS. Вы можете настроить страницы профиля конкретного автора, файлы на основе даты и т. Д. Так как и когда вы будете использовать это?
Как использовать WordPress Body Class
В большинстве случаев класс тела WordPress является простым решением, которое дизайнеры тем часто игнорируют. Да, это касается и нас. Около года назад нам нужно было создать пункт меню WordPress, который был бы только на определенной странице. Мы решили сделать подробный поиск, чтобы найти фильтр для добавления специального класса навигации к пунктам меню, которые будут добавлены с помощью условного оператора. Например, если это одна страница, добавьте класс «Блог» в пункты меню. Потратив все время на расшифровку всего этого и написание поста об этом, один из наших пользователей отметил, что мы могли бы легко сделать это с существующим классом тела следующим образом:
.single #navigation .leftmenublog div {view: блок в строке! важный;}
Предупреждение: как вы используете класс .single body, который добавляется ко всем отдельным страницам сообщений.
Мальчик, разве мы не чувствуем себя глупо после этого? С тех пор мы сделали заметку, чтобы узнать, можно ли что-то сделать с классом тела, прежде чем копать глубже.
Чтобы привести другой пример. Когда пользователь обратился к нам и спросил, как изменить логотип на своем сайте в соответствии со страницей категории. Большинство дизайнов тем, включая ваш, загружали логотип с помощью CSS (#header .logo). Мы предлагаем, как использовать класс тела .category-slug, чтобы изменить свой логотип следующим образом:
.category-Council # header .logo {background: url (images / logo-Council.png) без повторов! важный;}
.category-health #header .logo {background: url (images / logo-health.png) не повторять! важный;}
У этого нового дизайнера тем же моментом, что и у нас. К счастью, вы сейчас учитесь использовать класс тела в дизайне своих тем. Но подождите, это становится еще более мощным, потому что есть способ добавлять собственные классы тела, используя фильтр. Давайте посмотрим, как это сделать.
Добавить пользовательские классы тела
В WordPress есть фильтр, который можно использовать для добавления пользовательских классов тела при необходимости. Мы покажем вам, как добавить класс тела с помощью фильтра, прежде чем показывать сценарий конкретного случая использования, чтобы каждый мог находиться на одной странице.
Поскольку классы тела относятся к конкретной теме, вам нужно написать пользовательскую функцию в вашем файле functions.php, например:
Функция My_class_names ($ classes) {
// добавляем имя класса в массив $ classes
$ classes () = ‘имя класса теста’;
// возвращаем массив $ classes
вернуть $ классы;
}
// Теперь добавляем тестовый класс в фильтр
add_filter (‘body_class’, ‘my_class_names’);
Приведенный выше код добавит класс «test-class-name» в тег body на всех страницах вашего сайта. Это не так плохо, не так ли? Истинная сила этой функции заключается в условных метках. Вы можете добавить класс XYZ только на отдельных страницах и т. Д. Давайте возьмем этот пример и применим его к реальному сценарию использования.
Добавить класс категории на отдельные страницы сообщений
Предположим, вы хотите настроить отдельные страницы сообщений для каждой категории. В зависимости от типа настройки вы можете использовать классы тела для этого. Для простоты предположим, что вы хотите изменить цвет фона страницы в зависимости от категории отдельных сообщений. Вы можете сделать это, добавив классы категорий в представления на одной странице поста. Вставьте следующую функцию в файл functions.php вашей темы:
// добавляем имена нишевых категорий в класс тела
category_id_class ($ classes) функция {
$ глобальная почта;
foreach ((get_the_category ($ post-> ID)) как $ категория)
$ classes () = $ category-> category_nicename;
вернуть $ классы;
}
add_filter (‘body_class’, ‘category_id_class’);
Приведенный выше код добавит класс категории к вашему телу для уникальных постов. Затем вы можете использовать классы CSS, чтобы создать его так, как вам нравится.
Добавьте слаг страницы в класс body ваших тем WordPress
Вставьте следующий код в файл functions.php вашей темы:
// Класс тела слаг-страницы
add_slug_body_class ($ classes) function {
$ глобальная почта;
if (isset ($ post)) {
$ classes () = $ post-> post_type. ‘-‘. $ post-> post_name;
}
вернуть $ классы;
}
add_filter (‘body_class’, ‘add_slug_body_class’);
Прочитайте нашу статью о слаге на странице класса тела, где объясняется, зачем нам это нужно.
Обнаружение браузера и специфичные для браузера классы тела
Иногда может потребоваться наличие специальных стилей CSS, чтобы все работало правильно в определенных браузерах (СОВЕТ: Internet Explorer). Ну, Натан Райс предложил очень интересное решение, которое добавляет определенные классы браузера к классу тела на основе браузера, в котором пользователь посещает сайт.
Все, что вам нужно сделать, это вставить следующий код в файл functions.php:
Таким образом, вы можете использовать классы, такие как:
.ie .navigation {здесь что-то появляется}
Если есть небольшое поле или проблема с заполнением, это очень быстрый способ исправить это.
Больше вариантов использования:
Вероятно, мы можем перечислить много других вариантов использования, но не будем, иначе эта статья выйдет из-под контроля. Основная цель состояла в том, чтобы помочь разработчикам новых тем понять основные концепции класса тела WordPress и его преимущества. Варианты использования ограничены вашим воображением. Мы видели, как разработчики бизнес-тем (Genesis) использовали классы тела, чтобы предлагать различные варианты дизайна. Например, полный макет страницы, содержимое боковой панели, боковая панель содержимого и т. Д. Делая это, пользователь может легко изменить макет своей страницы, не беспокоясь о проблемах внешнего вида, так как это уже исправлено в CSS.0
Мы видели, как некоторые разработчики добавляли HTTP-запросы для загрузки файлов CSS для различных цветовых схем, которые они предлагают. Во многих случаях изменения также очень малы. Нет точки загрузки 3 таблицы стилей, когда работа может быть выполнена. Просто используйте класс тела для этого.
Я надеюсь, что эта статья была полезна для вас. Мы будем рады услышать ваши мысли о классе тела и о том, как вы использовали его в прошлом или планируете сделать это в будущем.
