flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

Как правильно собрать классы для header в WordPress

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

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

// собираем классы для header
function get_skill_header_classes( $class = '' ){

	$classes = array();

	// собираем массив
	$classes[] = 'site__header';
	$classes[] = 'header';

	if ( has_custom_header() ) {
		$classes[] = 'header_background-image';
	}

	if ( true == skill_options( 'general_top_bar_display' ) ) {
		$classes[] = 'header_top-bar-active';
	}

	if ( 'header-custom' == skill_options( 'general_header_type' ) ) {
		$classes[] = 'header_custom';
	} elseif( 'header-content' == skill_options( 'general_header_type' ) ) {
		$classes[] = 'header_content';
	} elseif( 'header-logo-center' == skill_options( 'general_header_type' ) ) {
		$classes[] = 'header_logo-center';
	} else {
		$classes[] = 'header_simple';
	}

	// проверяем, приняла ли функция какие-то классы или нет
	if( $class ) {
		$classes[] = $class;
	}

	$classes = array_map( 'esc_attr', $classes );
	$classes = apply_filters( 'skill_header_classes', $classes, $class );
	return array_unique( $classes );
}

// выводим классы для header
function skill_header_classes( $class = '' ) {
	echo 'class="' . join( ' ', get_skill_header_classes( $class ) ) . '"';
}

Разберем подробнее. Сначала мы разделяем функцию на две: одна нужна для обработки, вторая для вывода. Такое деление принято в WordPress и, как правило, функции имеющие префикс get_ отвечают за обработку информации, а функции с префиксом the_ за вывод во фронтенд.

В данном случае, в функции get_skill_header_classes() мы собираем массив классов исходя из нескольких опций кастомайзера, добавляем класс, если для <header> установлен беграунд и добавляем классы, которые могут быть переданы из фронтенда. После чего мы добавляем фильтр и возвращаем уникальный массив.

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

Теперь в функции skill_header_classes() мы просто выводим их через пробел с помощью функции join().

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

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

<header id="header" <?php skill_header_classes('test-page'); ?>>

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

Как сделать фильтр

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

// фильтруем классы
add_filter( 'skill_header_classes','my_class_names' );
function my_class_names( $classes ) {

	$classes[] = 'it_is_test_page';

	return $classes;
}

Тут все просто — подключаемся к функции, получаем массив, добавляем значение и возвращаем. Если вы хотите удалить элемент массива, то вы можете использовать unset() или array_splice().

А вот так выглядит результат проделанной работы:

header classes
beget banner 480x320beget banner 728x90beget banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600jivo banner 480x320jivo banner 728x90jivo banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Как сделать webp без плагинов в WordPress

WebP — это современный формат сжатия изображений без потери качества, который напрямую влияет на скорость загрузки сайта. Конвертирование изображений из jpg и png в формат webp может дать существенный прирост в баллах по google page speed. Формат webp поддерживается большинством современных браузеров. Вы без труда можете найти плагины, которые помогут вам автоматически конвертировать изображения, добавленные…
Подробнее

Как вывести все изображения из произвольной папки без плагинов в WordPress

При разработке своих сайтов вам может понадобиться вывести галереи изображений из произвольных папок без их загрузки в библиотеку. Давайте рассмотрим пример, как это сделать с помощью шорткода: Использование: [folder-gallery path=’/data/images/’] Как видите, функция принимает путь до искомой папки (обязательно с открывающим и закрывающим слешем), в функции устанавливаются разрешенные типы изображений и формируется вывод с классами…
Подробнее

Как изменить выравнивание и размер изображения при вставке в редактор WordPress

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