Статьи

Добавление к классу тела в WordPress

Январь 28, 2019

В этом коротком руководстве мы рассмотрим класс тела WordPress и то, как мы можем манипулировать им с помощью вызовов основного API.

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

Класс тела: для чего он может быть использован?

Класс body в WordPress — это класс или серия классов, которые применяются к элементу тела HTML. Это полезно для применения уникальных стилей к различным областям сайта WordPress, так как классы body могут быть добавлены условно.

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

Добавление к классу тела

Нам доступно несколько методов для добавления новых классов тела в WordPress. В этом уроке будет body_class добавлении класса тела в тему (обычно определяется в header.php ) с использованием функции body_class и о добавлении классов с помощью фильтра.

Редактирование темы: передача значения класса тела

Это действительно простой способ добавить классы тела и особенно полезен, если вы создаете тему. Класс body обычно включается в тему с использованием следующего кода:

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

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

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

Это добавило бы класс тела my-class на каждую страницу вашего сайта WordPress.

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

Могут быть случаи, когда вы хотите добавить более одного класса тела. Это может быть достигнуто с помощью простого массива:

1
<body <?php body_class( array( «class-one», «class-two», «class-three» ) );

Это берет все классы в массиве и передает их функции body_class .

Условное добавление класса тела

Вы также можете условно добавить класс тела. Это легко с некоторым простым PHP. В этом примере используется условный метод WooCommerce is_shop() :

<?php if ( is_shop() ) { body_class( 'is-woocommerce-shop' ); } else { body_class(); } ?>

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

То, что делает приведенный выше код, проверяет, что первая функция возвращает true, если это правда, тогда к классу тела добавлен is-woocommerce-shop ; в противном случае, если это не так, то отображается только класс тела по умолчанию.

Добавление класса тела по фильтру

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

1
2
3
4
5
6
7
8
add_filter( ‘body_class’,’my_body_classes’ );
function my_body_classes( $classes ) {
 
    $classes[] = ‘class-name’;
     
    return $classes;
     
}

Это добавляет класс (или классы, в зависимости от вашей реализации) в массив и возвращает их.

Добавление нескольких классов тела по фильтру

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

1
2
3
4
5
6
7
8
9
add_filter( ‘body_class’,’my_body_classes’ );
function my_body_classes( $classes ) {
 
    $classes[] = ‘class-name’;
    $classes[] = ‘class-name-two’;
     
    return $classes;
     
}

Условное добавление класса тела по фильтру

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

01
02
03
04
05
06
07
08
09
10
11
12
13
add_filter( ‘body_class’,’my_body_classes’ );
function my_body_classes( $classes ) {
 
    if ( is_shop() ) {
     
        $classes[] = ‘class-name’;
        $classes[] = ‘class-name-two’;
         
    }
     
    return $classes;
     
}

Добавление класса тела на основе шаблона страницы

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

Например, шаблон страницы с именем halfhalf может иметь класс тела page-template-page-halfhalf-php — не очень.

Итак, давайте добавим новый класс, используя фильтр и условный тег WordPress:

01
02
03
04
05
06
07
08
09
10
add_filter( ‘body_class’,’halfhalf_body_class’ );
function halfhalf_body_class( $classes ) {
 
    if ( is_page_template( ‘page-halfhalf.php’ ) ) {
        $classes[] = ‘halfhalf-page’;
    }
     
    return $classes;
     
}

Это добавит halfhalf-page класса halfhalf-page если шаблон page-halfhalf.php .

Удаление класса тела

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

01
02
03
04
05
06
07
08
09
10
add_filter( ‘body_class’, ‘adjust_body_class’ );
function adjust_body_class( $classes ) {
 
    foreach ( $classes as $key => $value ) {
        if ( $value == ‘woocommerce-page’ ) unset( $classes[ $key ] );
    }
     
    return $classes;
     
}

Кредит: этот код изменен из этой статьи .

В этом примере мы перебираем массив имен классов, woocommerce-page имя класса woocommerce-page если оно существует, и затем возвращаем классы минус те, которые были удалены.

Это все люди!

В этом небольшом уроке мы рассмотрели два метода добавления в класс тела WordPress:

  1. Используя функцию body_class в теме,
  2. И с помощью фильтра.

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

52
Share: