Cara Mengintegrasikan SmoothState.js ke Tema Wordpress

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

Di panduan kami sebelumnya, kita menggunakan History Web API dalam sebuah situs statis untuk menyajikan transisi laman yang halus. Di panduan ini, kita akan berlanjut ke tingkat selanjutnya dengan menerapkan apa yang telah kita pelajari dalam sebuah situs Wordpress. Akan ada satu perbedaan krusial; kita akan menggunakan SmoothState.js ketimbang membuatnya dari awal.

SmoothState.js akan:

Meminta halaman secara asinkron dan menggantikan kontennya.
Memperbaharui URL dan riwayat penjelajahan melalui History Web API.

Kita memilih SmoothState.js untuk beberapa alasan:

Mudah digunakan: Dia adalah plugin jQuery yang sangat mudah digunakan yang hanya membutuhkan sedikit konfigurasi untuk berjalan.
API: SmoothState.js dikemas dengan method, property dan hook yang mengizinkan kita untuk melatakkannya di aneka situasi yang mungkin.
Prefetching and caching: KEdua fitur ini mengizinkan halaman kita bertansisi secara lebih halus dan cepat dari yang kita buat di panduan sebelumnya.
Dia terbuka: SmoothState.js tidak mengatur cara kita menerapkan animasinya-kita bisa menyandarkannya di CSS, jQuery, Vanilla JavaScript, atau pustaka animasi seperti Velocity.js
Telah diuji coba: Mempertimbangkan lebih dari seratus masalah yang telah ditutup selama pengembangannya, kita bisa berasumsi banyak bug telah diselesaikan.

Prasyarat

Ada beberapa hal yang kamu perlukan untuk mengikuti panduan ini:

WordPress: Memiliki sebuah situs WordPress yang berjalan, baik secara lokal di komputermu atau online di sebuah server. Jika kamu butuh bantuan untuk tahap ini, cek Cara Memulai WordPress oleh Tom McFarlin untuk mempersiapkan dan menjalankan sebuah situs WordPress dasar.
Sebuah Tema: Selama panduan ini kita akan menggunakan tema bawaan WordPress terbaru: TwentySixteen. Kamu bisa memilih tema manapun, tapi pastikan temanya sesuai dengan standar WordPress.

1. Buat Sebuah Anak Tema

Menggunakan sebuah "anak tema" di WordPress (Ketimbang mengerjakan langsung dengan berkas tema asli) mengizinkan kita secara aman mengenalkan dan mengganti fungsi bawaan.

Ini adalah praktik terbaik ketika mengkostumisasi tema, semenja banyak perubahan yang kamu buat akan tersimpan jika tema induknya diubah.

Dalam kasus kita, tema induknya adalah TwentySixteen. Anaknya akan tersimpan di folder situs "twentysixteen-child" yang mengandung sebuah berkas "functions.php" dan stylesheet "style.css", seperti berikut:

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

Bagian yang paling penting dari anak tema adalah notasi Template di header stylesheet yang menyatakan hubungan tema. Spesifikasikan Template dengan nama dari direktori induk tema, dalam kasus kita adalah 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
*/

Setelah siap, aktifkan anak tema melalui admin:

WordPress List of Theme Interface in the Dashboard — Anak tema TwentySixteen telah aktif. Kamu bisa menambahkan sebuah "screenshot.png" juga

2. Enqueue Berkas JavaScript

Kita perlu memuat sejumlah berkas JavaScript ke tema WordPress. Pada dasarnya kita bisa melakukannya dengan menambahkan JavaScript secara langsung ke tag head di berkas "header.php" dari tema. Mengikuti standar WordPress, walau bagaimanapun, disarankan untuk menggunakan fungsi wp_enqueue_script(), ditambahkan ke functions.php, untuk mencegah konflik:

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' );

Fungsinya juga mengizinkan kita untuk mengatur script dependencies. Dalam kasus kami, "smootstate.js" bergantung pada jQuery. karena WordPress akan memuat jQuery sebelum memuat "smoothstate.js".

Berkas "script.js" bergantung pada kedua skrip, makanya urutan pemuatan semua skripnya akan seperti berikut:

<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>

Perhatikan pada panduan berikut untuk mempelajari lebih mengenai enqueue berkas di Wordpress:

3. Meluncurkan SmoothState.js

Mari tambahkan kode berikut ke "script.js" kita untuk membuat SmoothState.js berjalan:

( function( $ ) {

  $( function() { // Ready

		var settings = { 
			anchors: 'a'
		};

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

})( jQuery );

Pada kode di atas, kita memilih #page (elemen yang membungkus konten halaman situs) dan meluncurkan SmoothState.js dengan konfigurasi paling dasarnya.

Halaman kita harus disajikan tanpa memuat secara penuh jendela browser saat kita bernavigasi melalui situs WordPress. Halaman kita sekarang tersaji secara asinkron.

Asynchronoous page loading in action — Maafkan sata untuk conton konten yang tidak menginsipirasi.

Pada dasarnya, kita telah siap! Namun, ada beberapa detil yang masih perlu diperhatikan:

Ada beberapa URL yang tidak akan dimuat secara asinkron, seperti tautan di dalam #page yang menunjuk ke WordPress Admin, wp-admin atau wp-login.php.
Tautan dengan trailing hash, contohnya #respond, tidak akan melompat ke poin yang tertunjuk dari halaman.
Laman kita termuat dengan sangat cepat. Namun masih belum terasa halus semenjak kita belum menerapkan animasi apapun untuk menyalurkan transisi.

4. Tautan Wordpress Admin

Ada beberapa tautan di situs yang menunjuk ke area admin Wordpress, seperti tautan Edit di tiap post, Logged in as admin dan Log-out sebelum kolom komentar.

The WordPress post edit link in the front-end — Tautan "Edit" di TwentySixteen yang muncul ketika kita telah masuk.

Salah satu masalah saat SmoothState.js meminta Admin adalah bahwa kita tidak akan bisa kembali ke halaman sebelum ketika kita menekan tombol Back di browser. Masalah ini terjadi karena skrip SmoothState.js tidak hadir di area admin untuk meminta dan menyajikan laman sebelumnya.

WordPress Dashboard — Kita gagal kembali ke laman sebelumnya setelah mengunjungi Dasbor WordPress.

Kita perlu mencegah SmoothState.js meminta URL apapun menuju ke wp-admin atau wp-login.2 Untuk melakukannya kita bisa menggunakan parameter blacklist, seperti berikut:

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

Parameter blacklist memberitahu Smoothstate.js untuk menolak tautan dengan class selector tertentu dan memberikan kode di atas intipan, ini akan menolak tautan dengan class wp-link. Nama class ini saat ini belum ada, sehingga kita akan membuat sebuah kelas baru dan menambahkannya secara dinamis ke tautan yang dibutuhkan.

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

Fiungsi ini mengevaluasi setiap anchor tag di halaman, lalu menambahkan class wp-link jika URL mengandung /wp-admin/ atau /wp-login.php

Kita bisa mengeksekusi fungsi ini sekaligus untuk menambahkan kelas ke halaman secara efektif. Pertama, di laman yang dimuat di awal. Yang kedua adalah setalah SmoothState.js telah menyajikan halaman baru melalui onAfter; sebuah metode yang akan berjalan tiap kali konten baru dan animasinya telah selesai ditampilkan.

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. Mengatur Link Hash

Selanjutnya, kita perlu mengatur tautan dengan sebuah trailing hash. Dalam sebuah tema WordPress, biasanya kita akan menemukan satu yang menautkan ke bagian komentar dari Kiriman atau Halaman.x

'Leave a Comment' menunjuk ke bagian komentar dari kiriman.

Sebagaimana iya berdiri, kamu akan menemukan bahwa tautannya tidak akan membawa kita ke bagian komentas karena halamannya sesungguhnya tidah dimuat maupun disegarkan ulang. Makanya, kita perlu mereplikasi perilaku normal yang diinginkan.

( 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 );

Seperti yang bisa kamu lihat pada intipan kode di atas, kita telah menambahkan beberapa baris kode di bawah metode onAfter. Kodenya mendapatkan hash URL, lalu menggulung ke bagian yang diinginkan (jika bagiannya hadir di halaman) menggunakan animasi jQuery.

Leave a Comment link scroll in action — Menggulung secara halus ke bagian komentar dari kiriman.

6. Menerapkan Page Motion

Kita harus membuat transisi halamannya terasa lebih hidup. Pertama, kita akan menambahkan CSS style untuk menganimasikan halaman ke "styles.css" anak tema kita seperti berikut.

.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 adalah nama class yang membungkus kiriman utama atau konten halaman, sementara .slide-out adalah class tambahan yang telah kita buat untuk menggeser konten.

( 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 );

Setelah memberikan kode di atas, kita menggunakan metode onStart untuk menambah class ketika SmootState.js mulai menarik ke konten baru. Lalu, melalui onAfter, kita menghapus class setelah konten baru telah dikirim.

Dan itulah! Namun, masih ada satu hal yang perlu diingat mengenai kompabilitas dengan beberapa plugin WordPress.

Apa Selanjutnya?

Ada lebih dari 40.000 plugin WordPRess tersedia, bahkan belum termasuk plugin yang disimpan di luar repositori resmi, seperti CodeCanyon contohnya. Ada banyak plugin di luar sana yang mungkin tidak cocok (atau bahkan rusak) dengan pemuatan asinkron kita, terutama yang bergantung pada scripting.

Daftar berikut adalah perkiraan saya mengenai beberapa yang perlu kamu perhatikan saat menggunakannya bersama SmoothState.js:

Tambahan, JavaScript banyak digunakan di Customizer di dalam WordPress Admin. Jadi, kamu bisa berpikir untuk tidak memuat SmoothState.js di Customizer, jika sesuatu rusak.

Kesimpulan

Kita telah belajar cara mengintegrasikan SmoothState.js ke WordPRess, dan juga menggunakan anak tema sebagai strategi pengembangan. Dan ini hanyalah permulaan! Kita bisa, sebagai contohnya, memperluas apa yang telah kita lakukan ke plugin dengan pilihan di pengaturannya di mana pengguna biasa bisa dengan mudah mengkostumisasi output.