Как интегрировать SmoothState.js в тему WordPress

() translation by (you can also view the original English article)

В предыдущем уроке мы использовали History Web API в статическом сайте, чтобы обеспечить плавные переходы между страницами. В этом уроке мы перейдем к следующему уровню, применяя то, что мы изучили на веб-сайте WordPress. Будет одно существенное различие; Мы будем использовать SmoothState.js вместо создания собственного с нуля.

SmoothState.js будет:

Запрашивать страницы асинхронно (AJAX) и заменять содержимое соответствующим образом.
Обновлять URL-адреса и историю просмотров через History Web API.

Мы выберем SmoothState.js по нескольким причинам:

Простота использования: это чрезвычайно простой в использовании плагин jQuery, не требующий практически никакой конфигурации для его запуска и работы.
API: SmoothState.js упакован различными методами, свойствами и перехватами, которые позволяют нам использовать его во многих возможных ситуациях.
Предварительная выборка и кэширование: эти две функции позволяют нашим переходам на странице быть намного более плавными и более быстрыми, чем то, что мы построили в предыдущем уроке.
Не указывает на практики: SmoothState.js не диктует нам, как мы применяем анимацию - мы можем опираться на CSS, jQuery, ванильный JavaScript или библиотеку анимации, такую как Velocity.js.
Испробована и оттестирована: учитывая, что во время разработки было закрыто более ста вопросов, мы можем предположить, что были исправлены многочисленные ошибки.

Изначальные требования

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

WordPress: наличие работающего сайта WordPress, либо локально на вашем компьютере, либо работа на онлайн-сервере. Если вам нужна помощь для этого шага, посмотрите «Как начать работу с WordPress» Тома МакФарлина, чтобы начать работу с базовым сайтом WordPress.
Тема: Во время этого урока мы будем использовать последнюю тему WordPress по умолчанию: TwentySixteen. Вы можете выбрать любую тему, но убедитесь, что тема соответствует стандартам WordPress.

1. Создайте дочернюю тему

Использование «дочерней темы» в WordPress (вместо непосредственной работы с исходными файлами темы) позволяет нам безопасно вводить новые или переопределять функциональность по умолчанию.

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

В нашем случае родительская тема - TwentySixteen. Дочерняя находится в другой новой папке «twentysixteen-child», которая содержит файл «functions.php» и таблицу стилей «style.css», следующим образом.

1	.
2	├── twentysixteen
3	└── twentysixteen-child

Наиболее важной частью дочерней темы является обозначение Template в заголовке таблицы стилей, в котором указывается отношение темы. Укажите Template с именем каталога родительской темы, в нашем случае twentysixteen

/**
Theme Name: Twenty Sixteen Child
Theme URI: https://webdesign.tutsplus.com
Author: Thoriq Firdaus
Author URI: https://tutsplus.com/authors/tfirdaus
Description: A child theme that adds an extra layer of glam to TwentySixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentysixteen

Template: twentysixteen
*/

После этого активируйте дочернюю тему через admin:

WordPress List of Theme Interface in the Dashboard — Включена дочерняя тема TwentySixteen: вы также можете добавить «screenshot.png»

2. Файлы JavaScript.

Нам нужно загрузить несколько файлов JavaScript в нашу тему WordPress. В принципе мы могли это сделать, добавив эти JavaScript непосредственно в тег head в файле header.php темы. Однако, следуя стандарту WordPress, рекомендуется использовать функцию wp_enqueue_script(), добавленную к functions.php, чтобы предотвратить конфликты:

1	wp_enqueue_script( 'smoothstate-js', 'assets/js/smoothstate.js', array( 'jquery' ), '0.5.2' );
2	wp_enqueue_script( 'script-js', 'assets/js/script.js', array( 'jquery', 'smoothstate-js' ), '1.0.0' );

Эта функция также позволяет нам устанавливать зависимости скриптов. В нашем случае «smoothstate.js» зависит от jQuery, поэтому WordPress загрузит jQuery перед загрузкой «smoothstate.js».

Наш файл «script.js» зависит от обоих сценариев, поэтому последовательность загрузки всех наших скриптов выглядит следующим образом:

<script type='text/javascript' src='wp-includes/js/jquery/jquery.js'></script>

<script type='text/javascript' src='assets/js/smoothstate.js'></script>

<script type='text/javascript' src='assets/js/script.js'></script>

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

3. Развертывание SmoothState.js

Давайте добавим следующий код в наш «script.js», чтобы запустить и запустить SmoothState.js:

( function( $ ) {

  $( function() { // Ready

		var settings = { 
			anchors: 'a'
		};

		$( '#page' ).smoothState( settings );
	} );

})( jQuery );

В приведенном выше коде мы выбираем #page (элемент, который обертывает содержимое страницы сайта) и развертываем SmoothState.js с его самой базовой конфигурацией.

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

Asynchronoous page loading in action — Извините меня за скучный контент.

В принципе, все готово! Тем не менее, есть несколько деталей, которые все же заслуживают внимания:

Есть несколько URL-адресов, которые не следует загружать асинхронно, например ссылку на #page которая указывает на WordPress Admin, wp-admin или wp-login.php.
Ссылки с хешем, например #respond, не переходят к назначенным разделам на странице.
Наша загрузка страницы невероятно быстрая. Но еще не совсем плавная, поскольку мы не применили анимацию для передачи перехода.

4. Ссылки на WordPress Admin

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

The WordPress post edit link in the front-end — Ссылка «Изменить» в TwentySixteen, которая появляется, когда мы входим в систему.

Одна из проблем, когда SmoothState.js запрашивает Администратора, состоит в том, что мы не сможем вернуться на предыдущую страницу, когда нажмем кнопку Назад в браузере. Эта проблема возникает из-за того, что сценарий SmoothState.js отсутствует в области администратора для запроса и обслуживания предыдущей страницы.

WordPress Dashboard — Мы не сможем вернуться на предыдущую страницу после посещения Личного кабинета WordPress.

Нам нужно будет запретить SmoothState.js запрашивать какой-либо URL-адрес, указывающий на wp-admin или wp-login. Для этого мы можем использовать параметр blacklist , как показано ниже:

( function( $ ) {
	$( function() { // Ready
		var settings = { 
			anchors: 'a'
			blacklist: '.wp-link'
		};
		$( '#page' ).smoothState( settings );
	} );
})( jQuery );

blacklist указывает SmoothState.js игнорировать ссылки с указанным селектором класса; И с учетом приведенного выше фрагмента кода, он будет игнорировать ссылки с классом wp-link. Это имя класса в настоящее время не существует, поэтому мы создадим новый класс и добавим его динамически в нужные ссылки:

function addBlacklistClass() {
	$( 'a' ).each( function() {
		if ( this.href.indexOf('/wp-admin/') !== -1 || 
			 this.href.indexOf('/wp-login.php') !== -1 ) {
			$( this ).addClass( 'wp-link' );
		}
	});
}

Эта функция оценивает каждый тег привязки на странице, а затем добавляет класс wp-link, если URL-адрес включает /wp-admin/ или /wp-login.php.

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

function addBlacklistClass() {
	$( 'a' ).each( function() {
		if ( this.href.indexOf('/wp-admin/') !== -1 || 
			 this.href.indexOf('/wp-login.php') !== -1 ) {
			$( this ).addClass( 'wp-link' );
		}
	});
}

$( function() {

	addBlacklistClass();

	var settings = { 
		anchors: 'a',
		blacklist: '.wp-link',
		onAfter: function() {
			addBlacklistClass();
		}
	};

	$( '#page' ).smoothState( settings );
} );

5. Обработка ссылок с хешами

Затем нам нужно обработать ссылки с хэшем. В теме WordPress обычно мы находим ссылку, которая ссылается на раздел комментария Post или Page.

«Оставить комментарий» указывает на раздел комментария в сообщении.

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

( function( $ ) {
	...
	$( function() {
		...
			onAfter: function() {
				...
				var $hash = $( window.location.hash );

				if ( $hash.length !== 0 ) {

					var offsetTop = $hash.offset().top;

					$( 'body, html' ).animate( {
							scrollTop: ( offsetTop - 60 ),
						}, {
							duration: 280
					} );
				}
			}
		};
	} );
})( jQuery );

Как видно из приведенного фрагмента кода, мы добавили несколько строк кода в методе onAfter. Код извлекает хеш URL-адреса, а затем прокручивает до указанного раздела (если раздел присутствует на странице) с помощью jQuery Animation.

Leave a Comment link scroll in action — Плавно прокрутите до раздела «Комментарий» сообщения

6. Применение движения страницы

Нам нужно сделать изменение страницы более оживленным. Сначала мы добавим стили CSS, чтобы оживить страницу, в «styles.css» нашей дочерней темы следующим образом.

.site-content {
	-webkit-transition: -webkit-transform .28s, opacity .28s;
	-ms-transition: -o-transform .28s, opacity .28s;
	-o-transition: -o-transform .28s, opacity .28s;
	transition: transform .28s, opacity .28s;
}
.slide-out .site-content {
	-webkit-transform: translate3d( 0, 100px, 0 );
	-ms-transform: translate3d( 0, 100px, 0 );
	-o-transform: translate3d( 0, 100px, 0 );
	transform: translate3d( 0, 100px, 0 );
	opacity: 0;
}

.site-content - это имя класса, которое обертывает основное сообщение или содержимое страницы, а .slide-out - это дополнительный класс, который мы создали, чтобы вывести контент.

( function( $ ) {
	...
	$( function() {
		...
		var settings = { 
			...
			onStart: {
				duration: 280, // ms
				render: function ( $container ) {
					$container.addClass( 'slide-out' );
				}
			},
			onAfter: function( $container ) {
				...
				$container.removeClass( 'slide-out' );
			}
		};

		$( '#page' ).smoothState( settings );
	} );

})( jQuery );

Учитывая вышеприведенный код, мы используем метод onStart, чтобы добавить класс, когда SmoothState.js начинает вытягивать новый контент. Затем через onAfter мы удаляем класс после того, как будет доставлено новое содержимое.

И это все, что нужно сделать! Тем не менее, есть одна вещь, которую следует иметь в виду относительно совместимости с некоторыми плагинами WordPress.

Что дальше?

Доступно более 40,000 плагинов WordPress, даже не включая плагины, которые размещаются вне официального хранилища, например, на CodeCanyon. Там есть много плагинов, которые могут быть несовместимы (или могут даже сломать) нашу асинхронную загрузку, особенно те, которые в какой-то степени зависят от сценариев.

Следующий список - это приблизительная оценка некоторых из них, которые вам, возможно, потребуется изучить при их использовании в сочетании с SmoothState.js:

Кроме того, JavaScript интенсивно используется в Customizer в WordPress Admin. Таким образом, вы можете подумать о выгрузке SmoothState.js в Настройщике, если что-нибудь когда-нибудь сломается.

Заключение

Мы узнали, как интегрировать SmoothState.js в WordPress, а также использовать дочернюю тему в качестве нашей стратегии разработки. И это только начало! Мы могли бы, например, расширить то, что мы сделали, в плагине с параметрами в тех метах, где обычные пользователи могут легко настраивать вывод.

Вдохновение

Если вы ищете вдохновения, ознакомьтесь с этими многоцелевыми темами WordPress на Envato Market, которые используют похожие методы загрузки страниц AJAX: