Advertisement
  1. Code
  2. WordPress

Tip Cepat: Cara Menggunakan Gerakan untuk Menavigasi Posting WordPress

Scroll to top
Read Time: 6 min

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Hari ini, kita akan membahas cara mengatur menggunakan gerakan untuk menavigasi melalui posting WordPress Anda. Ini sangat sederhana, jadi mari kita selami!


Perkenalan

Karena kita bergerak maju dalam desain situs web responsif dan jumlah pengguna yang mengunjungi situs web di perangkat mobile meningkat, itu adalah hal yang baik jika kita dapat membuat situs web kita berfungsi dengan teknologi luar biasa seperti pergerakan. Kita akan menggunakan perpustakaan jQuery untuk mencapai ini bersama dengan beberapa PHP dan WordPress yang bagus.

Demo adalah tema yang dilucuti yang telah dibuat hanya untuk keperluan tutorial ini.

Jadi buka editor teks favorit Anda dan mari kita mulai!


Langkah 1 Mendaftarkan / Memasukkan Skrip Kita

Kita akan menggunakan plugin jQuery yang sangat bagus untuk membuat navigasi pergerakan kita yang disebut Hammer.js. Mereka memberi kita semua fungsi untuk menggunakan berbagai jenis pergerakan dalam situs web kita.

Mari mulai dengan mendapatkan semua file yang diperlukan yang kita perlukan agar pergerakan berfungsi. Anda dapat mengunduh file secara lokal ke komputer Anda atau menggunakan versi online mereka.

Kita perlu memasukkan skrip berikut:

Kita akan memasukkan skrip-skrip ini ke dalam file “functions.php” kita. Metode yang saya sukai adalah pertama-tama membuat fungsi untuk mendaftar dan memasukkan setiap skrip di dalam fungsi ini. Ini akan terlihat seperti ini:

Selanjutnya, kita perlu membuat file JavaScript kosong yang nantinya akan kita gunakan untuk menulis skrip pergerakan. Buat file, dan daftarkan dan masukkan dalam fungsi yang sama seperti kita hanya harus mendaftar dan memasukkan semua perpustakaan dan skrip kita lainnya:

Jika Anda tidak yakin dengan memasukkan skrip-skrip, maka ikuti tutorial ini: Cara Menyertakan JavaScript dan CSS di Tema dan Plugin WordPress Anda


Langkah 2 Mengatur Navigasi Kita

Sekarang skrip kita sudah siap, kita perlu memastikan bahwa kita dapat menavigasi bolak-balik ketika membaca satu posting blog. Kita melakukan ini dengan memasukkan kode berikut dalam Loop WordPress kita di dalam file "single.php" kita:

Kita membungkus navigasi kita di dalam div untuk manajemen yang lebih baik dan fleksibilitas penataan, dan kemudian menggunakan span untuk membungkus tautan next dan previous kita yang dihasilkan oleh WordPress. Kita membungkusnya dengan kelas span, sehingga kita dapat menargetkan tautan secara langsung yang akan kita gunakan nanti. Anda dapat membaca lebih lanjut tentang fungsi next dan previous di Codex WordPress.

Akhirnya, kita perlu menuju tag <body> pembuka dan menerapkan kelas untuknya. Saya akan menambahkan kelas "gesture" ke fungsi body_class(): <body <?php body_class( 'gesture' ); ?>>. Kita menerapkan kelas ke tag body karena nantinya kita akan menggunakannya dalam file JavaScript kita di mana ia akan bertindak sebagai wadah untuk memeriksa apakah pengguna telah menggeser jari mereka untuk navigasi.


Langkah 3 Menulis Skrip Pergerakan Kita

Sekarang setelah navigasi kita disiapkan, itu akan memungkinkan Anda untuk menavigasi bolak-balik ketika membaca satu posting blog. Selanjutnya kita perlu menulis JavaScript untuk membuat navigasi dengan pergerakan. Mari kita mulai dengan membuka file JavaScript kosong yang kita buat sebelumnya dan membuat sebuah fungsi. Dokumen Anda harus terlihat seperti ini:

Selanjutnya kita akan membuat beberapa variabel. Masukkan kode berikut dalam fungsi runGesture kita:

Setelah ini, kita akan menetapkan variabel ke tugas yang sesuai. Kita akan menggunakan gestureContainer untuk menetapkan kelas pada tag body, dan kita kemudian akan menginisialisasi plugin Hammer.js pada variabel hammeredGesture kita. Masukkan kode berikut ke dalam fungsi runGesture dan kode kita akan terlihat seperti ini:

Sekarang setelah kita memiliki dasar-dasar yang ditetapkan, kita dapat melanjutkan dan mengikat event pergerakan kita ke kontainer yang telah diinisialisasi dengan plugin Hammer.js. Kita melakukan ini dengan menjalankan fungsi bind ke variabel hammeredGesture dan meneruskan event pergerakan; secara khusus kita akan menggunakan event "drag". Kemudian buka fungsi di mana kita akan menulis semua penanganan untuk event pergerakan. Masukkan kode berikut ke dalam fungsi runGesture kita:

Kita sekarang akan menangani bagian navigasi. Di dalam fungsi bind, kita membuat variabel yang disebut url. Ini akan digunakan untuk mendapatkan nilai href dari tautan berikutnya dan sebelumnya. Kita juga akan menguji apakah kita menyeret ke kiri atau ke kanan, tergantung pada arah seretan kita akan mengirimkan nilai href ke variabel url. Akhirnya kita akan memeriksa apakah ada nilai untuk url, dan jika ada, kita akan mengarahkan ulang jendela ke nilai url. Kode berikut seharusnya menampilkan ini:

Itu semua skrip pergerakan kita selesai dan lengkap bersama dengan navigasi. Kita hanya perlu melakukan beberapa deteksi browser untuk memastikan bahwa skrip hanya berjalan ketika kita menggunakan perangkat mobile.


Langkah 4 Deteksi Browser

WordPress memungkinkan kita untuk mendeteksi halaman apa yang dilihat klien dengan menggunakan body_class yang bagus untuk penataan dan kompatibilitas lintas browser, tetapi kita akan memperluas ini sedikit dan menambahkan deteksi browser untuknya. Terima kasih kepada Nathan Rice yang sudah menulis apa yang kita cari. Pastikan bahwa Anda menerapkan body_class ke tag body Anda seperti yang kami lakukan di atas dan kemudian buka function.php kita dan masukkan kode berikut:


Langkah 5 Inisialisasi

Hebat! Sekarang setelah kita memiliki deteksi browser, bersama dengan semua skrip pergerakan lengkap dan navigasi kita selesai sepenuhnya. Mari kembali dan buka custom.jquery.js kita dan masukkan kode berikut di luar fungsi runGesture kita:

Kode yang baru saja kita sisipkan melakukan satu pengujian akhir untuk memeriksa apakah kita menggunakan perangkat mobile dan jika kita kemudian menjalankan skrip pergerakan, atau jika tidak maka tidak melakukan apa pun.

Itu saja! Sederhana bukan? Anda dapat menggeser ke kiri dan kanan pada perangkat seluler Anda melalui posting dan situs WordPress Anda akan berjalan dengan normal di desktop! Bersenang-senanglah bermain-main dengan berbagai event.

Saya ingin mengucapkan terima kasih sebesar-besarnya atas waktunya untuk membaca tutorial saya, semoga itu membantu. Jangan ragu untuk meninggalkan komentar dan saya akan mencoba yang terbaik untuk membantu dan menjawabnya. Jika tidak, Anda selalu dapat menghubungi saya langsung melalui situs web saya: www.VinnySingh.co

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.