Body class

При создании тем WordPress, вам может понадобится определять какие-либо стили css или действия jQuery в зависимости от того, с какого браузера или операционной системы (ОС) зашел пользователь. WordPress может сделать это за вас. В этой статье будет показано, как добавить название браузера и ОС в  WordPress body class.

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

Первое что нужно для этого сделать — добавить следующий код в файл темы functions.php или файл вашего плагина:

function mv_browser_body_class($classes) {   global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;   if($is_lynx) $classes[] = 'lynx';   elseif($is_gecko) $cla.    
ses[] = 'osx'; } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) { $classes[] = 'linux'; } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) { $classes[] = 'windows'; } return $classes; } add_filter('body_class','mv_browser_body_class');

Первая часть кода определяет браузер пользователя и добавляет его в массив $classes. Вторая часть определяет ОС пользователя и также добавляет его в массив $slasses. Последняя строка — это использование фильтра body_class, к которому прикрепляется функция.

На этом по идее все. Еще один момент который вам нужно проверить, у тега body должна вызываться функция  body_class(), выглядит это так:

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

Если вы работаете с готовым правильно-созданным шаблоном или со стартовой темой (фреймворком) вроде: Whiteboard, то вам не нужно беспокоиться о наличии функции в boby теге — она там уже есть.

После того, как код установлен вы должны увидеть браузер и ОС в атрибуте class тега body, для этого откройте исходный код и попробуйте найти там подобную строку. Имейте ввиду, что браузер и ОС это не единственные классы, которые будут показаны:


<boby class=»home blog full-width chrome windows«>

Теперь вы можете стилизовать контент под разные браузеры и операционные системы или использовать их как селекторы в jQuery коде. Надеюсь эта статья поможет вам в определении браузера и ОС.

Также хочу обратить ваше внимание, что в WordPress (как мы видим по коду) есть глобальные переменные, которые определяются в зависимости от того с какого браузера или устройства идет просмотр сайта: $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;. Эти переменные можно использовать и в других функция и целях.

 

www.wp-info.ru

Классы и синтаксис body_class():

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

Если в вашем шаблоне имеется данная функция, то в результирующем HTML коде страницы увидите что-то вроде:

Body class

По логике, в принципе, понятно, что в теге body отображаются классы используемого шаблона (post-template-default), единичного поста (single single-post), формата записи (single-format-standard) и показатель залогиненного юзера (logged-in).

На самом деле таких значений body_class в WordPress очень много. Приведу парочку основных примеров, где они выводятся:


  • На специфических типах страниц: главной, поиске, прикрепленных файлах, 404 ошибке — home, blog, search, error404, attachment, search-results, attachmentid-{id} и др.
  • В постах блога (с указанием типов и ID конкретных записей) — single-post, single-format-{$post_format}, single-{$post_type}, postid-{ID}.
  • В обычных страницах, где кроме ID и шаблона можно заменить информацию о родительстких/дочерних элементах: page, page-id-{ID}, page-child, parent-pageid-{ID}, page-template-{name}.
  • В архивах категорий, тегов, дат, авторов: category, category-{id/slug}, tag, tag-{id/slug}, author, author-{nicename}, date, term-{id/slug} и т.п.
  • При постраничном разбиении: есть главные классы paged paged-{number}; отдельные варианты для каждой сущности category-paged-{number}, tag-paged-{number}, search-paged-{number}, author-paged-{number}, а также значения single-paged-{number}, page-paged-{number} при разбиении записей на страницы. 

Принцип использования body_class в WordPress

Рассмотрим самый простой способ внедрения функции: идем в файл шаблона header.php, находите тег body и заменяете его на следующую конструкцию:

Сохраняете. Теперь, если посмотреть HTML код сайта, то увидите вывод соответствующих классов. Откроем какую-то страницу (page) и с помощью CSS изменим базовый шрифт на зеленый курсив.

Body class

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

Он сработает для текстового наполнения в блоке контента только(!) на странице с ID = 878. Помимо этого допускается также обработка следующих вариантов:

Добавление своих классов

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

Либо вставляете сразу несколько:

Полезно также рассмотреть использование условного оператора в данной конструкции. Например, есть какая-то оригинальная ситуация, которую WP система автоматически не анализирует, но вы хотите ее «обыграть». Допустим, нужно выводить свои классы только в Woocommerce магазине, тогда пригодится следующий код:


Здесь условный оператор is_shop выполняет проверку соответствует ли текущая страница магазину, и если это так, дополнительно отображает значение wooshop-active, в противном случае — добавляет class=»noshop» к основным. Внимание! Этот код лишь для наглядности работы, в данном модуле уже встроена обработка события, и он по умолчанию выводит в body специальное значение is-woocommerce-shop.

Вставка body_class через фильтр

У функции имеется возможность влиять на ее работу через специальный фильтр. Это позволяет вносить изменения из сторонних плагинов или через файл functions.php. Давайте рассмотрим те же 3 задачи по добавлению своего класса через фильтр. Для одного элемента код:

Для нескольких:

С условным оператором:

Дополнительные сниппеты по body_class

Перед финалом покажу еще парочку ситуаций, когда данная функция нам пригодится.

Удаление лишнего класса

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


Внимание! Здесь текст «home» нужно поменять на то значение, которое хотите удалить. Самый простой вариант когда это может быть нужно — если в сверстанном шаблоне такое же название используется в других элементах страницы, и вы не хотите чтобы из-за базовых функций WP «слетело» все оформление.

Добавить категорию товара Woocommerce в body

Пример взят отсюда, и пригодится в версии модуля 2.6.x (возможно в старших эту фишку встроили в ядро):

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

В любом случае, думаю, основной принцип внедрения body_class в WordPress вы уловили и дальше будете сами модифицировать код, добавляя другие условные операторы. Напоследок хочется заметить, что есть еще похожая функция post_class, которая вставляет классы для постов/записей — используется как в единичном отображении, так и в цикле.

Все вопросы по применению body_class в WordPress сайтах или дополнения по теме, пишем ниже.

wordpressinside.ru

Использование body_class()

Большинство тем для WordPress уже используют функцию body_class()
, поэтому в самих шаблонах темы менять ничего не придется. Если вы разрабатываете собственную тему для WordPress, то функцию body_class() необходимо использовать внутри тега <body>:

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

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

<?php $classes = array( 'foo', 'bar', 'baz' ); ?>  <body <?php body_class( $classes ); ?> >  

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

Классы

На данный момент функция body_class() поддерживает больше 50 типов классов. В этом разделе мы рассмотрим самые интересные и популярные. Полный перечень и логику выбора классов вы можете посмотреть в файле ядра wp-includes/post-template.php.

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

/* Красный фон на странице с результатами поиска */  body.search {   background: red;  }  

Классы single и page

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

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

body.single h1,  body.page h1 {   font-size: 150%;  }  

Класс single-{post_type} используется для одиночных записей определенного типа, и может быть полезным для тех, кто использует произвольные типы записей.

Классы postid-* и page-id-*

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

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

body.page-id-123 #secondary,  body.page-id-456 #secondary {   display: none;  }  

Классы archive, home и blog

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

В случае с архивами есть также следующие классы:


  • date используется при отображении архивов по датам
  • post-type-archive-{post_type} для архивов определенного типа записей
  • author для архива одного автора
  • author-{id} и author-{name} для архива определенного автора по его идентификатору или имени пользователя
  • tag-{id} и tag-{slug} для архивов по меткам
  • category-{id} и category-{slug} для архивов по категориям
  • term-{id} и term-{slug} для архивов по термину из произвольной таксономии

Например изменить фоновый цвет навигационного меню в зависимости от текущей категории:

body.category-politics #menu-primary { background: blue; }  body.category-business #menu-primary { background: red; }  body.category-technology #menu-primary { background: green; }  

Классы logged-in и admin-bar

Класс logged-in используется тогда, когда текущий посетитель выполнил вход. Класс admin-bar появляется при отображении верхней панели WordPress. Изменить цвет фона виджета подписки для вошедших пользователей можно следующим образом:

body.logged-in .widget-area .widget_subscribe {   background: yellow;  }  

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

add_filter( 'show_admin_bar', '__return_false' );  

Фильтр body_class

Как мы уже упомянули, в функции body_class()
есть специальный фильтр, который позволяет плагинам WordPress изменять список используемых классов.

Например, чтобы не использовать класс logged-in не зависимо от того, выполнил ли пользователь вход, мы можем использовать следующий код в нашем плагине:

function my_body_class_filter( $classes ) {   if ( $key = array_search( 'logged-in', $classes ) )   unset( $classes[ $key ] );     return $classes;  }  add_filter( 'body_class', 'my_body_class_filter' );  

Мы можем также добавить новый класс к списку, например произвольное поле текущей одиночной записи:

function my_body_class_filter( $classes ) {   if ( is_single() )   $classes[] = sanitize_html_class( get_post_meta( get_the_ID, 'my-custom-key', true ) );     return $classes;  }  add_filter( 'body_class', 'my_body_class_filter' );  

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

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

Подробнее о функциях body_class() и post_class(), и полный перечень всех возможных классов, вы можете узнать в файле ядра wp-includes/post-template.php. Если у вас возникнут вопросы или трудности при работе с данными функциями — оставьте комментарий.

wpmag.ru

The following is a guest post by Trishah Woolley. Over the years, Trishah has collected a ton of code snippets that do the job of adding IDs and classes based on some variable information, like the URL or data from WordPress. Each of these snippets were either collected from documentation or a similar online resource, or written by Trishah based on standard features of the language and API’s involved.

Over the time I have been doing WordPress web design, there are occasions when I have needed to add an ID or class to the <body> tag. For example: This often happens when integrating 3rd party software into WordPress that creates its own pages that WordPress doesn’t recognize. Or I need more nuanced classes for the site design I’m creating.

To change the look of these pages in a way that the styles are applied just to that page, we need a way to target just that page or category of pages. Below are some of the ways I have found helpful to add IDs and classes to the <body> of both non-WordPress (but still PHP) and WordPress pages.

PHP Variations

#01 — Add ID from the URL

This will strip the forward-slash, `.php`, and the `?pg=`, from the URL and use the rest as an ID. Change the array to match your particular situation.

<?php   $page = str_replace(array('/', '.php', '?pg='), '', $_SERVER['REQUEST_URI']);   $page = $page ? $page : 'default';     /* Sanitize $page! */    ?>    <body id="<?php echo $page ?>">

Example:

http://domain.com/directory/test.php?pg=12345

Becomes:

<body id="directorytest12345">

#02 — Add ID and Class from URL

This looks for the `?` in the URL and turns what comes before it into an ID and what comes after it into a class.

<?php   list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);   $page = str_replace(array('/', '.php'), '', $page);   $class = str_replace(array('='), '', $class);   /* Sanitize $page and $class! */  ?>    <body id="<?php echo $page ?>" class="<?php echo $class ?>">

Example:

http://domain.com/directory/test/?pg=12345

Becomes:

<body id="directorytest" class="12345">

#03 — Add ID from file name

This removes the `.php` and uses the file name as the ID:

<body id="<?=basename($_SERVER['PHP_SELF'],'.php')?>">

Example:

http://domain.com/directory/test.php

Becomes:

<body id="test">

#04 — Add ID from First Level Directory

This will grab the first level directory and use it as the ID.

$url = explode('/', $_SERVER['REQUEST_URI']);   $dir = $url[1] ? $url[1] : 'home';  ?>    <body id="<?php echo $dir ?>">

Example:

http://domain.com/directory1/directory2/test.php

Becomes:

<body id="directory1">

WordPress Variations

WordPress has a native function for applying classes to the body:

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

Which results in output like this, depending on what page you are on:

<body class="single single-post postid-245501 single-format-standard">

But you can still do more, like combine it with techniques from above and add classes of your own.

#05 — WordPress: Add a Class to Default Body Class

Add your own class to the ones generated by WordPress with this:

<body <?php body_class('class-one ); ?>>

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in class-one">

#06 — WordPress: Add Multiple Classes to Default Body Class

You can add multiple classes like this:

<?php body_class(array("class-one", "class-two", "class-three")); ?>

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in class-one class-two class-three">

#07 — WordPress: Add ID and Class to Body Tags

This just may be my favorite! It does the same as the one above but adds the new class to the WordPress’ body_class:

list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);  $page = str_replace(array('/', '.php'), '', $page);  $class = str_replace(array('='), '', $class);  ?>    <body id="<?php echo $page ?>" <?php if (function_exists('body_class')) body_class($class ); ?>>

Example:

http://domain.com/directory/test/?pg=12345

Becomes:

<body id="directorytest" and class="page page-id-2 page-parent page-template-default logged-in 12345">

#08 — WordPress: Use the Slug

<body id="<?php echo $post->post_name; ?>">

Example:

http://domain.com/category1/slug/

Becomes:

<body id="slug">

#09 — WordPress: Conditionally Add Extra Classes

This adds a body class to the ones generated by WordPress with conditional if() logic. For example, here we’re using the is_shop() boolean logic provided by WooCommerce:

<body <?php if (is_shop()) { body_class('shop'); } else { body_class(); } ?>>

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in shop">

#10 — WordPress: Add the Slug to the Body Class Defaults

We can also alter the output of the body_class() function by filtering it. We could do this in `functions.php` or our own functionality plugin.

Here we’ll add the slug:

function add_slug_body_class( $classes ) {  global $post;   if (isset($post)) {   $classes[] = $post->post_type . '-' . $post->post_name;   }   return $classes;  }  add_filter('body_class', 'add_slug_body_class');

Example:

http://domain.com/category/page-slug/

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in page-slug">

#11 — WordPress: Add to Body Class using function.php Filter

Add the following to functions.php:

function my_body_classes( $classes ) {   $classes[] = 'class1';   return $classes;  }  add_filter('body_class', 'my_body_classes');

Then it would output like this, just calling body_class() directly without doing anything else:

<body class="page page-id-2 page-parent page-template-default logged-in my_body_classes">

#12 — WordPress: Raw Filtering of Function using Functions.php

This is how you would add a single class of any name:

function my_body_classes( $classes ) {   $classes[] = 'class1';   return $classes;  }  add_filter('body_class', 'my_body_classes');

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in class1">

#13 — WordPress: Raw Filtering of Function using Functions.php to Add Multiple Classes, Conditionally

function my_body_classes( $classes ) {   $classes[] = 'class1';   if (is_shop()) {   $classes[] = 'shop';   }   return $classes;  }  add_filter('body_class', 'my_body_classes');

Becomes this on a non-shop page:

<body class="page page-id-2 page-parent page-template-default logged-in class1">

Becomes this if the logic comes out true, i.e., on a shop page:

<body class="page page-id-2 page-parent page-template-default logged-in class1 shop">

#14 WordPress: Remove Classes from Default Output using functions.php

With this you can remove classes from body_class():

function adjust_body_class($classes) {   foreach ($classes as $key => $value) {   if ($value == 'class-to-remove') unset($classes[$key]);   }   return $classes;  }  add_filter('body_class', 'adjust_body_class');

If we started with this:

<body class="page page-id-2 page-parent page-template-default logged-in">

And removed «page-parent», we’d get this:

<body class="page page-id-2 page-template-default logged-in">

#15 WordPress: Add the Category

Adds the category to body_class():

function add_category_name($classes = '') {   if (is_single()) {   $category = get_the_category();   $classes[] = 'category-'.$category[0]->slug;   }   return $classes;  }  add_filter('body_class','add_category_name');

Example URL:

http://domain.com/category1/post-title/ 

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in category1">

#16 WordPress: Add the Category via functions.php Filter

You can also do it via filter:

function add_category_to_single($classes) {   if (is_single()) {   global $post;   foreach((get_the_category($post->ID)) as $category) {   // add category slug to the $classes array   $classes[] = $category->category_nicename;   }   }   // return the $classes array   return $classes;  }  add_filter('body_class', 'add_category_to_single');

Example URL:

http://domain.com/category1/post-title/ 

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in category1">

#17 WordPress: Add Browser Class Name

WordPress provides some Global Variables including booleans values on what browser is in use. You can add those to the body class as well:

function browser_body_class($classes) {   global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;     if ($is_lynx) $classes[] = 'lynx';   elseif ($is_gecko) $classes[] = 'gecko';   elseif ($is_opera) $classes[] = 'opera';   elseif ($is_NS4) $classes[] = 'ns4';   elseif ($is_safari) $classes[] = 'safari';   elseif ($is_chrome) $classes[] = 'chrome';   elseif ($is_IE) $classes[] = 'ie';   else $classes[] = 'unknown';     if ($is_iphone) $classes[] = 'iphone';   return $classes;  }  add_filter('body_class', 'browser_body_class');

Example with Chrome:

<body class="page page-id-2 page-parent page-template-default logged-in chrome">

Careful not to rely on these for important functionality! User agent testing, as this uses, is known for causing more problems than it solves.

css-tricks.com

What admin body classes available by default?

Not like the frontend, where we have to add body_class() function to <body> tag, it’s not required us to do anything in the backend. WordPress automatically adds classes for us (it sounds obviously because we can’t change admin files).

Looks at the code of admin-header.php, we know what classes are available. I won’t post that piece of code here because you can see it yourself. I summarize all classes available in the list below:

  • $hook_suffix
  • folded
  • auto-fold
  • admin-bar
  • rtl
  • branch-$wp_version
  • version-$wp_version
  • admin-color-$scheme
  • locale-$locale
  • mobile
  • no-customize-support

Note: PHP variables in the list are sanitized, I put them in raw format to easy to understand.

And here is the code WordPress use to display admin body classes:

<body class="wp-admin wp-core-ui no-js <?php echo apply_filters( 'admin_body_class', '' ) . " $admin_body_class"; ?>"> 

In my opinion, all of these classes are not useful for us, except the first one: $hook_suffix which tells us about the current page. If you want to find what $hook_suffix is for your current admin page, try my Inspector plugin.

How to use admin body class to style a particular admin page?

Assume that we want to style the Add New/Edit Post page: highlight the title field. To make everything clear, I will make a small plugin to do this.

1. Enqueue the CSS file for admin

As I said above, we use only 1 CSS file for all admin pages, so we’ll do like this (put this in the main PHP file of the plugin):

add_action( 'admin_enqueue_scripts', 'rw_add_admin_style' ); function rw_add_admin_style() {  wp_enqueue_style( 'rw-admin-style', plugins_url( 'admin-style.css', __FILE__ ) ); } 

2. Add CSS for targeted page

We’ll use the $hook_suffix to get the body classes of the page we want to style. In this case, they’re .post-new-php (for Add New page) and .post-php (for Edit page) (note again: class = $hook_suffix sanitized). Knowing the body classes, our CSS is straight forward (put it in the admin-style.css in the plugin folder):

.post-new-php #titlediv #title, .post-php #titlediv #title {  border: 2px solid #f33;  background: #ff9; } 

After doing this, activate the plugin and you’ll see this:

Admin Body Class

You can grab the full plugin here.

How to add body classes in WordPress admin

As mentioned above, the list of admin body classes is not useful for users. They’re made for something like responsive admin in WordPress, or detecting handheld devices. At the point of view of users, we need better classes to style pages.

In the example above, we know how to style the Add New page. But what we did will be applied to all custom post types. Now you want to do that for only tutorial post type (for ex.), what will you do? You’re going to add more classes to body!

WordPress uses a filter admin_body_class to let us add more classes to the admin body. The default value of this filter is empty string which means no additional classes. We want to add post type to admin body classes, so we’ll do this:

add_filter( 'admin_body_class', 'rw_admin_body_class' ); function rw_admin_body_class( $classes ) {  $screen = get_current_screen();  if ( 'post' == $screen->base )  $classes .= ' ' . $screen->post_type;  return $classes; } 

It’s worth noting that the admin_body_class accepts a string as an argument, not like body_class in the front end which accepts an array.

Here I use the current screen object to make sure we’re on the Add New / Edit Post page. This is a simple application of the screen object that I wrote about in another post: How to get admin screen information.

Now, we can change our CSS to style only tutorial post type:

.post-new-php.tutorial #titlediv #title, .post-php.tutorial #titlediv #title {  border: 2px solid #f33;  background: #ff9; } 

Other applications

Style posts in specific category

To do that, we’re going add categories to body classes:

add_filter( 'admin_body_class', 'rw_admin_body_class' ); function rw_admin_body_class( $classes ) {  if ( 'post' != $screen->base )  return $classes;   global $post;  $cats = wp_get_post_categories( $post->ID, array( 'fields' => 'all' ) );  $cats = wp_list_pluck( $cats, 'slug' );  foreach ( $cats as $cat )  {  $classes .= ' category-' . $cat;  }   return $classes; } 

Now you have category-$slug as a class name

Style posts which have specific term

Similar to the example above, we’ll add terms to body classes:

add_filter( 'admin_body_class', 'rw_admin_body_class' ); function rw_admin_body_class( $classes ) {  if ( 'post' != $screen->base )  return $classes;   global $post;  $terms = wp_get_post_terms( $post->ID, 'my_taxonomy', array( 'fields' => 'all' ) );  $terms = wp_list_pluck( $terms, 'slug' );  foreach ( $terms as $term )  {  $classes .= ' my_taxonomy-' . $term;  }   return $classes; } 

Now you have my_taxonomy-$slug as a class name.

Style custom post types differently in All Posts page

For different post types, you may want to add more columns to All Posts page like thumbnails, excerpt, custom meta, etc. Thus, changing column width is needed and admin body class is useful then. You might find it useful if you want to style with different colors / font size for text, links, background etc.

So, we can add custom post type to body class to indicate which post type we have on that page:

add_filter( 'admin_body_class', 'rw_admin_body_class' ); function rw_admin_body_class( $classes ) {  $screen = get_current_screen();  if ( 'edit' == $screen->base )  $classes .= ' ' . $screen->post_type;  return $classes; } 

Now you can style with CSS:

.edit-php.{$post_type} some_selectors {  // Anything here } 

Conclusion

The examples above partially reveal the useful applications of admin body classes. You can customize body classes using screen object as I shown above or using global $post or any of $_POST, $_GET variables. That means there’s no limit adding custom classes to body tag in WordPress admin. Thus, styling or customizing admin pages is now easy with just one CSS file!

deluxeblogtips.com

Определяем браузер

В body_class можно указать класс название браузера с которого посещают сайт. Для того, например, чтобы учесть при оформлении какие-либо особенности браузера. В файл functions.php

// Определение браузера посетителя - вывод класса в body  add_filter('body_class','browser_body_class'); function browser_body_class($classes) { global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;   if($is_lynx) $classes[] = 'lynx'; elseif($is_gecko) $classes[] = 'gecko'; elseif($is_opera) $classes[] = 'opera'; elseif($is_NS4) $classes[] = 'ns4'; elseif($is_safari) $classes[] = 'safari'; elseif($is_chrome) $classes[] = 'chrome'; elseif($is_IE) $classes[] = 'ie'; else $classes[] = 'unknown';   if($is_iphone) $classes[] = 'iphone'; return $classes; }

Добавить название категорий записи (без приставки cat-)

// добавка названий категорий в виде классов в функции body class и post class 	function category_id_class($classes) { 		global $post; 		foreach((get_the_category($post->ID)) as $category) 			$classes[] = $category->category_nicename; 			return $classes; 	} 	//add_filter('post_class', 'category_id_class'); 	add_filter('body_class', 'category_id_class');

Категории товаров в body_class

Чтобы категории товаров прописывались в body_class нужно в functions.php поместить следующий код

function category_id_class($classes) { 		global $post; 		foreach((get_the_terms( $post->ID, array( 'taxonomy' => 'product_cat'	) )) as $term) 			$classes[] = $term->slug; 			return $classes; 	} 	//add_filter('post_class', 'category_id_class'); 	add_filter('body_class', 'category_id_class');

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

/* Фон для разделов woocommerce */  .tea .bg {  background-image: url('http://hq-wallpapers.ru/wallpapers/15/hq-wallpapers_ru_abstraction3d_70270_1920x1440.jpg'); }  .woocommerce.tea div.product .product_title { background-color: #BFF51A; }  .laminat .bg {  background-image: url('http://i0.wp.com/thewombsauna.com/wp-content/uploads/2013/08/white-wood-wall-texture-wallpaper.jpg'); }	  .woocommerce.laminat div.product .product_title {  background-color: #71AB15;  color: #FFFFFF; }  .compact-disc .bg {  background-image: url('http://wallpaperindex.com/wallpapers/357/41-399975.jpg'); }	  .woocommerce.compact-disc div.product .product_title {  background-color: #1D2347;  color: #fff; }

opttour.ru

Очень часто дизайнеры тем придумывают новый функционал. Они ищут навороченные фильтры для WordPress и хуки для выполнения задачи, в то время как им на самом деле требуется простейший CSS. WordPress по-умолчанию генерирует множество классов CCS. (шпаргалка по стандартным стилям CSS). Одной из областей этих классов CSS являются стили класса body. В этой статье мы объясним WordPress body class 101 и поделимся некоторыми полезными подсказками и фишками для начинающих дизайнеров тем.

Что такое WordPress Body Class?

Body Class (body_class) — это функция WordPress, которая предоставляет элементу body различные классы, и поэтому авторы тему могут стилизировать свои сайты достаточно эффективно с помощью CSS. Тег HTML body присутствует в большинстве случаев в вашем файле header.php, который загружается на каждой странице. При разработке темы вы можете прикрепить функцию body_class к вашему элементу body следующим образом:

  <body <?php body_class($class); ?>>  

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

  .rtl {}  .home {}  .blog {}  .archive {}  .date {}  .search {}  .paged {}  .attachment {}  .error404 {}  .single postid-(id) {}  .attachmentid-(id) {}  .attachment-(mime-type) {}  .author {}  .author-(user_nicename) {}  .category {}  .category-(slug) {}  .tag {}  .tag-(slug) {}  .page-parent {}  .page-child parent-pageid-(id) {}  .page-template page-template-(template file name) {}  .search-results {}  .search-no-results {}  .logged-in {}  .paged-(page number) {}  .single-paged-(page number) {}  .page-paged-(page number) {}  .category-paged-(page number) {}  .tag-paged-(page number) {}  .date-paged-(page number) {}  .author-paged-(page number) {}  .search-paged-(page number) {}  

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

Как использовать WordPress Body Class

В большинстве случаев WordPress body class — это самое простое решение, которое игнорируют дизайнеры тем. Включая и нас. Около года назад нам нужно было стилизировать элемент меню WordPress, которое было только на определенной странице. Мы решили глубже вникнуть в суть проблемы и найти фильтр для добавления специального класса навигации в элемент меню, который будет добавлен с использованием условных операторов. Например, если это страница записи, тогда добавляем класс «Blog» к элементам меню. После того, как мы потратили множество времени на изучение всего того и написали статью об этом, один из наших пользователей указал нам на то, что мы могли сделать это просто, с использованием существующего класса body:

  .single #navigation .leftmenublog div{display: inline-block !important;}  

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

Мы никогда не чувствовали себя так глупо прежде. И с тех пор, мы всегда проверяем, возможно ли решить поставленную задачу с помощью класса body, прежде чем начинать изучать проблему более детально.

Приведем еще один пример. Однажды один из пользователей поинтересовался способом изменять логотип сайта в зависимости от рубрики сайта. Большинство шаблонов, в том числе и его, загружают логотип с помощью CSS (#header .logo). Мы предложили ему использовать класс body .category-slug для изменения логотипа, таким вот образом:

  .category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}  .category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}    

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

Для WooCommerce это решение будет выглядеть следующим образом:

  .term-toys #header .logo{background: url(logo-toys.png) no-repeat !important;}  

Код для functions.php:

  add_filter( 'body_class', 'output_product_cat_on_body' );     function output_product_cat_on_body( $classes ) {  if ( is_singular( 'product' ) ) {  global $post;     $terms = get_the_terms( $post->ID, 'product_cat' );     foreach ( $terms as $term )  $classes[] = 'term-' . $term->slug;  }  return $classes;  }  

Как добавить произвольный класс Body

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

В виду того, что классы body зависят от темы, вам необходимо будет написать собственную функцию в ваш файл functions.php:

  function my_class_names($classes) {  	// добавляем 'class-name' к массиву $classes  	$classes[] = 'test-class-name';  	// возвращаем массив $classes  	return $classes;  }    //Теперь добавляем тестовый класс к фильтру  add_filter('body_class','my_class_names');  

Код выше добавляет класс “test-class-name” к тегу body на каждой странице вашего сайта. Неплохо, да? Реальная мощь этой функции в условных тегах (conditional tags). Вы можете добавить класс АБВ только на страницы записей и т.д. Давайте возьмем этот пример и применим его к реальной ситуации.

Продолжение статьи читайте по ссылке WordPress Body Class 101: Советы и рекомендации для разработчиков темы. Часть 2

wpincode.com

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

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

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

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

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

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

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

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

  • .alignnone
  • .aligncenter
  • .alignright
  • .alignleft

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

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

  • .size-full
  • .size-large
  • .size-medium
  • .size-thumbnail

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ‘class’ => ‘ ‘
  • ‘before_widget’ => ‘id=»%1$s»>’

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Например:

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

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

Данная публикация представляет собой перевод статьи «Working with Classes and IDs Generated By WordPress» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector