Как добавить дополнительный класс хедеру на определенных страницах?

Ссылка скопирована
CSS PHP WordPress
1 ответ

Всем привет!
Ситуация следующая.

Есть хедер в файле header.php
Вызываю его <?php get_header(); ?>

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

Как вариант создать файл header-black.php
куда поместить код хедера
И на нужных страницах вызывать его с помощью <?php get_header('black'); ?>

Возможно есть какой-то более правильный способ добавить класс хедеру на определенных страницах?
Чтобы не создавать дополнительный header-black.php ради дополнительного класса, который определяет одну строчку CSS кода.

Дополнительно:

Ответы:

&lt;?php $class = ''; if ( 'определенная страница' == true ) {     $class = ' header_black'; } ?&gt;  &lt;div class="header&lt;?= $class ?&gt;"&gt;     &lt;!-- содержимое --&gt; &lt;/div&gt;  &lt;style&gt; .header_black {     background: #000; } &lt;/style&gt;

&lt;?php $class = ''; if ( 'определенная страница' == true ) { $class = ' header_black'; } ?&gt; &lt;div class="header&lt;?= $class ?&gt;"&gt; &lt;!-- содержимое --&gt; &lt;/div&gt; &lt;style&gt; .header_black { background: #000; } &lt;/style&gt;

Как добавить дополнительный класс хедеру на определенных страницах?

Посмотрите как работают функции WordPress body_class() и post_class(). По аналогии вы можете создать свою функцию header_class() с нужными вам условиями, пример:

if ( ! function_exists( 'get_header_class' ) ) {  	/** 	 * Get classes for header container. 	 * 	 * @param string $class Additional header classes. 	 * 	 * @return array 	 */ 	function get_header_class( $class = '' ) {  		// Add elements to array. 		$classes   = array(); 		$classes[] = 'header';  		if ( has_custom_header() ) { 			$classes[] = 'header_background-image'; 		}  		if ( is_admin_bar_showing() ) { 			$classes[] = 'is_wpadminbar'; 		}  		if ( is_category( 'example' ) ) { 			$classes[] = 'header_example'; 		}  		// Check the function has accepted any classes. 		if ( isset( $class ) &amp;&amp; ! empty( $class ) ) { 			if ( is_array( $class ) ) { 				$classes = array_merge( $classes, $class ); 			} elseif ( is_string( $class ) ) { 				$classes = array_merge( $classes, explode( ' ', $class ) ); 			} 		}  		$classes = apply_filters( 'get_header_class', $classes ); 		$classes = array_unique( (array) $classes );  		return $classes; 	} }  if ( ! function_exists( 'header_class' ) ) {  	/** 	 * Display classes for header container. 	 * 	 * @param string $class Additional header classes. 	 * @param bool   $echo  Echo or return header classes. 	 * 	 * @return string|void 	 */ 	function header_class( $class = '', $echo = true ) {  		$classes = get_header_class( $class );  		if ( $echo ) { 			echo 'class="' . esc_attr( implode( ' ', $classes ) ) . '"'; 		} else { 			return 'class="' . esc_attr( implode( ' ', $classes ) ) . '"'; 		} 	} }

if ( ! function_exists( 'get_header_class' ) ) { /** * Get classes for header container. * * @param string $class Additional header classes. * * @return array */ function get_header_class( $class = '' ) { // Add elements to array. $classes = array(); $classes[] = 'header'; if ( has_custom_header() ) { $classes[] = 'header_background-image'; } if ( is_admin_bar_showing() ) { $classes[] = 'is_wpadminbar'; } if ( is_category( 'example' ) ) { $classes[] = 'header_example'; } // Check the function has accepted any classes. if ( isset( $class ) &amp;&amp; ! empty( $class ) ) { if ( is_array( $class ) ) { $classes = array_merge( $classes, $class ); } elseif ( is_string( $class ) ) { $classes = array_merge( $classes, explode( ' ', $class ) ); } } $classes = apply_filters( 'get_header_class', $classes ); $classes = array_unique( (array) $classes ); return $classes; } } if ( ! function_exists( 'header_class' ) ) { /** * Display classes for header container. * * @param string $class Additional header classes. * @param bool $echo Echo or return header classes. * * @return string|void */ function header_class( $class = '', $echo = true ) { $classes = get_header_class( $class ); if ( $echo ) { echo 'class="' . esc_attr( implode( ' ', $classes ) ) . '"'; } else { return 'class="' . esc_attr( implode( ' ', $classes ) ) . '"'; } } }

Использование:

&lt;header id="header" &lt;?php header_class(); ?&gt; aria-label="&lt;?php _ex( 'Site header', 'aria-label', 'themename' ); ?&gt;"&gt; 	&lt;!-- ... --&gt; &lt;/header&gt;

&lt;header id="header" &lt;?php header_class(); ?&gt; aria-label="&lt;?php _ex( 'Site header', 'aria-label', 'themename' ); ?&gt;"&gt; &lt;!-- ... --&gt; &lt;/header&gt;

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Мария Код Ответ

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

Если в шаблоне есть тег хедера, можно сделать так:

$header_classes = ['site-header'];
 
if (is_front_page()) {
    $header_classes[] = 'site-header--home';
}
 
if (is_page(['contacts', 'about'])) {
    $header_classes[] = 'site-header--inner';
}
 
if (is_singular('product')) {
    $header_classes[] = 'site-header--product';
}
?&gt;
 
&lt;header class="&lt;?php echo esc_attr(implode(' ', $header_classes)); ?&gt;"&gt;

$header_classes = ['site-header']; if (is_front_page()) { $header_classes[] = 'site-header--home'; } if (is_page(['contacts', 'about'])) { $header_classes[] = 'site-header--inner'; } if (is_singular('product')) { $header_classes[] = 'site-header--product'; } ?&gt; &lt;header class="&lt;?php echo esc_attr(implode(' ', $header_classes)); ?&gt;"&gt;

Если нужно по ID страницы:

if (is_page(123)) {
    $header_classes[] = 'site-header--landing';
}

if (is_page(123)) { $header_classes[] = 'site-header--landing'; }

Если тема уже использует body_class(), иногда достаточно добавить класс к body и писать CSS от него:

.page-id-123 .site-header {
    background: transparent;
}

.page-id-123 .site-header { background: transparent; }

Это самый безопасный вариант, если не хочется трогать header. WordPress сам добавляет классы вроде home, page-id-123, single-product, tax-product_cat. Отдельный класс на header нужен только если стили или JS завязаны именно на этот элемент.

Для одной строчки CSS отдельный header-black.php действительно не нужен. Самый нормальный вариант — добавить класс на <body> или на wrapper хедера по условию. В WordPress уже есть фильтр body_class, и он как раз предназначен для таких случаев.

add_filter('body_class', function ($classes) {
    if (is_page(['contacts', 'about']) || is_singular('service')) {
        $classes[] = 'header-dark';
    }
 
    return $classes;
});

add_filter('body_class', function ($classes) { if (is_page(['contacts', 'about']) || is_singular('service')) { $classes[] = 'header-dark'; } return $classes; });

После этого в CSS можно менять хедер только на нужных страницах:

.header-dark .site-header {
    background: #111827;
    color: #fff;
}

.header-dark .site-header { background: #111827; color: #fff; }

Если класс нужен именно на элементе хедера, а не на body, задайте переменную перед разметкой:

$header_class = is_page('contacts') ? ' site-header--dark' : '';
echo '&lt;header class="site-header' . esc_attr($header_class) . '"&gt;';

$header_class = is_page('contacts') ? ' site-header--dark' : ''; echo '&lt;header class="site-header' . esc_attr($header_class) . '"&gt;';

Так вы сохраните один шаблон хедера и не будете дублировать меню, логотипы, скрипты и микроразметку. Отдельный get_header('black') имеет смысл только если структура хедера реально другая, а не просто цвет.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов