Методы создания адаптивной навигации в WordPress

Дата публикации:Сентябрь 7, 2013

Навигация – одно из самых проблематичных мест при реализации качественного адаптивного дизайна. В качестве предисловия к этой статье я настоятельно рекомендую изучить следующие материалы от Брэда Фроста: набор адаптивных навигационных паттернов и комплексные навигационные паттерны. В этой статье я раскрою два метода переключения (toggle), предназначенных для создания адаптивной навигации в WordPress.

Общие адаптивные навигационные паттерны в WordPress

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

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

Первый метод переключения – изменение размеров c помощью jQuery на базе ширины окна
Я использовал метод, очень похожий на описанный далее, еще с тех пор, как я увидел его в _s теме более года назад. По существу, триггер обрабатывается путем определения ширины окна с помощью $( window ).width(). Я разберу несколько обновленную версию этого кода ниже, а пока вы можете увидеть этот метод в действии на Github Gist.

Когда ширина окна превышает 600px, используется класс main-navigation, а когда ширина окна становится меньше 600px, для меню используется класс main-small-navigation. Кроме того, h1, используемый для вспомогательного текста (что сделано с целью удобства просмотра), меняется при переключении меню и является текстом, связанным с функцией jQuery .click.

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

Это достаточно удобное решение, однако используется оно не так часто. У него есть определенная сложность – необходимо тщательно подгонять пиксельное значение той границы, за которой меню будет изменяться. Этот метод будет идеальным, если вы формируете родительскую тему из стартеров, таких как _s, однако в идеале лучше воспользоваться родительскими темами, поддерживающими дочерние темы и детальную настройку. Мы можем сделать фиксированные значения фильтруемыми с помощью PHP, используя wp_localize_script.

Интеграция wp_localize_script для достижения гибкости

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

/**
 * Обрабатывает переключение основного навигационного меню для небольших экранов.
 * small_menu_vars.size используется вместо "600" или других фиксированных пиксельных значений – оно определяется при помощи wp_localize_script в функциях 
 */
jQuery( document ).ready( function( $ ) {
	var $masthead = $( '#masthead' ),
	    timeout = false;

	$.fn.smallMenu = function() {
		$masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
		$masthead.find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );

		$( '.menu-toggle' ).click( function() {
			$masthead.find( '.menu' ).toggle();
			$( this ).toggleClass( 'toggled-on' );
		} );
	};

	// Определяем ширину области просмотра при первой загрузке
	if ( $( window ).width() < small_menu_vars.size )
		$.fn.smallMenu();

	// Определяем ширину области просмотра, когда пользователь изменил размеры окна 
              // браузера
	$( window ).resize( function() {
		var browserWidth = $( window ).width();

		if ( false !== timeout )
			clearTimeout( timeout );

		timeout = setTimeout( function() {
			if ( browserWidth < small_menu_vars.size ) {
				$.fn.smallMenu();
			} else {
				$masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
				$masthead.find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
				$masthead.find( '.menu' ).removeAttr( 'style' );
			}
		}, 200 );
	} );
} );

Вы можете использовать переменную small_menu_vars.size вместо зафиксированного ранее пиксельного значения. Эта переменная способна использовать динамические данные благодаря великолепной функции wp_localize_script, которая так прекрасно была рассмотрена Pippin Williamson в прошлом году. Я считаю, что такой вариант использования может оказаться достаточно полезным, особенно если его применять в родительских темах.

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

<?php
/**
 * Регистрируем скрипты для темы и подключаем их на сайте.
 *
 * @since 0.1.0.
 */
add_action( 'wp_enqueue_scripts', 'krogs_theme_scripts' );

function krogs_theme_scripts() {

	wp_register_script( 'small-menu', get_template_directory_uri() . '/js/small-menu.js', array( 'jquery' ), '20120206', true );

	wp_localize_script('small-menu', 'small_menu_vars', array(
			'size' => apply_filters( 'krogs_theme_small_menu_size', 600 )
		)
	);

	wp_enqueue_script( 'small-menu' );

}     

Заметили фильтр? Именно здесь и начинается самое интересное. Теперь мы можем сделать число, которое раньше нам нужно было фиксировать вручную, фильтруемым из дочерних тем. Вот пример фильтра:

<?php
/**
 * функция krogs_child_theme_new_menu_size.
 * 
 */
add_filter( 'krogs_theme_small_menu_size', 'krogs_child_theme_new_menu_size' );

function krogs_child_theme_new_menu_size( $size ) {

	$size = 450;

	return 450;

}

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

Второй метод переключения – JavaScript и медиа-запросы CSS

Предыдущий скрипт действительно завязан на jQuery, и если ваш проект не требует подключения этой библиотеки (что маловероятно в наши дни), то в таком случае вы можете взглянуть на альтернативное решение. Или, возможно, у вас возникла идея обработки точки перехода более качественным способом с помощью CSS медиа-запросов.

Последняя навигационная итерация в теме _s использует JavaScript реализацию, позволяющую идентифицировать текущее состояние разметки страницы и сделать CSS-основанное переключаемое меню очень простым.

Для начала давайте посмотрим на разметку навигации.

<header id="masthead" class="site-header" role="banner">
	<div class="site-branding">
		<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
		<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
	</div>

	<nav id="site-navigation" class="main-navigation" role="navigation">
		<h1 class="menu-toggle"><?php _e( 'Menu', '_s' ); ?></h1>
		<div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', '_s' ); ?></a></div>

		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</nav><!-- #site-navigation -->
</header><!-- #masthead --> 

Первое, что вы должны заметить: класс menu-toggle стоит в h1 с самого начала. Все, что сделает наш Javascript – это активирует функцию click для h1, используя переключаемый класс. Само переключаемое меню (h1) скрыто по умолчанию с помощью display: none; и меняется с помощью медиа-запроса для ширины max-width: 600px на display: block;. В то же самое время наше стандартное меню скрыто по умолчанию и отображается только тогда, когда активирован переключаемый класс.

/* Небольшое меню */
.menu-toggle {
	display: none;
	cursor: pointer;
}

@media screen and (max-width: 600px) {
	.menu-toggle,
	.main-navigation.toggled .nav-menu {
		display: block;
	}

	.main-navigation ul {
		display: none;
	}
}

Код Javascript, который делает это, содержится в самом низу файла. В первых 15 строках (или где-то так) стоит проверка, что различные части меню существуют, и если их нет, то выполнение Javascript останавливается.

Переменная button определяется путем получения h1 в #site-navigation.

/**
 * navigation.js
 *
 * Обрабатывает переключение меню для небольших экранов.
 */
( function() {
	var container, button, menu;

	container = document.getElementById( 'site-navigation' );
	if ( ! container )
		return;

	button = container.getElementsByTagName( 'h1' )[0];
	if ( 'undefined' === typeof button )
		return;

	menu = container.getElementsByTagName( 'ul' )[0];

	// Скрывает кнопку переключения меню, если меню пустое, и возвращает раннее значение
	if ( 'undefined' === typeof menu ) {
		button.style.display = 'none';
		return;
	}

	if ( -1 === menu.className.indexOf( 'nav-menu' ) )
		menu.className += ' nav-menu';

	button.onclick = function() {
		if ( -1 !== container.className.indexOf( 'toggled' ) )
			container.className = container.className.replace( ' toggled', '' );
		else
			container.className += ' toggled';
	};
} )();

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

Гибкость для тем

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

Какой метод лучше?

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

Однако некоторые темы могут быть структурированы так, что переписывание CSS медиа-запросов будет представлять собой значительную сложность, потому в таком случае предпочтительным вариантом будет использование jQuery решения и wp_localize_script.

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

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

Источник: www.poststat.us

Поделиться

Оставить комментарий

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

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