Tutorial WordPress: Cara Membuat Situs WP Scrolling Tak Terbatas

Artikel ditulis oleh:
  • WordPress
  • Diperbarui: Jul 29, 2014

Anda tentu bekerja keras untuk meningkatkan kegunaan situs Anda sehingga pengguna Anda akan lebih bahagia dan lebih mungkin untuk sering kembali, bukan? Salah satu peningkatan yang bisa Anda terapkan adalah teknik pengguliran tak terbatas. Ini pada dasarnya sama dengan apa yang kami miliki di Twitter atau Facebook, di mana hanya konten dasar ditampilkan pada awalnya, dan lebih banyak konten ditambahkan saat Anda menggulir ke bawah. Ini cukup bagus untuk meningkatkan kinerja situs Anda (mengurangi waktu pemuatan), dan meningkatkan pengalaman pengguna (karena tidak ada tindakan yang diperlukan untuk memuat lebih banyak item, seperti mengklik tombol).

Di sini kita akan melihat mengapa dan bagaimana menggunakannya di situs Anda sendiri

Contoh situs os Infinite Scrolling

Selalu baik untuk memeriksa apa yang dilakukan orang-orang besar di luar sana, dan efek semacam ini (sering kali tidak terlalu mencolok) digunakan oleh banyak situs dan aplikasi besar, seperti Facebook (yang live feed), Twitter, Pinterest, Feedly.

feedly

kericau

Gulir Tak Terbatas - Lakukan dan Jangan

Teknik ini akan menghapus tautan pagination reguler dari situs Anda ("posting lama", atau halaman bernomor yang Anda miliki setelah posting Anda). "Pro" besar dari teknik ini adalah waktu pemuatan, karena lebih sedikit item yang dimuat pada awalnya Anda dapat memiliki situs yang jauh lebih cepat, dan karena lebih banyak item ditambahkan tanpa pengguna dapat memuat ulang halaman untuk 10 "halaman" dari posting tanpa memperhatikan, tinggal lebih lama di situs Anda.

Ini dapat diterapkan di sebagian besar situs, tetapi lebih cocok untuk blog atau situs mirip portofolio, tempat Anda memiliki banyak konten dan gambar, dan Anda tidak ingin membanjiri pengguna dengan banyak konten.

Panduan ini tidak memerlukan kemahiran pengkodean, dan jujur ​​saja Anda pasti akan belajar sedikit tentang cara mengubah tema WordPress Anda sedikit.

Asetnya

Kami akan gunakan Plugin JS Paul Irlandia. Unduh dan pasang di folder js tema Anda. Kami akan menggunakan Dua Puluh Dua Belas untuk proposal belajar tetapi merasa bebas untuk menggunakannya dalam tema apa pun (dan mengeposkan pertanyaan jika tidak berfungsi untuk Anda).

Anda juga akan membutuhkan gambar gif yang bagus untuk pesan "memuat" Anda. Anda dapat menemukan banyak dari mereka di luar sana, tetapi AjaxLoad situs memiliki alat yang luar biasa untuk membantu Anda dengan banyak gaya prasetel dan Anda dapat memilih warna yang lebih cocok dengan skema warna Anda.

Setelah Anda memiliki skrip dan gambar gif yang bagus di bawah Wp-content / themes / twentytwelve / js, kita bisa mulai!

Kode PHP

Oke, jangan takut, kami akan memberikan Anda salin & tempel cuplikan, tetapi inilah yang perlu kami lakukan untuk membuatnya bekerja:

  • Buat fungsi yang akan memuat dan mendaftarkan gulir gulir tanpa batas secara internal - Ini akan mencegah WordPress memuatnya dua kali dan melanggar fungsi tema
  • Muat skrip hanya ketika Anda memiliki halaman yang bukan satu-satunya halaman pasca-di mana Anda memiliki lebih dari 1 posting untuk ditampilkan akan perlu memuat lebih banyak item.

File functions.php adalah jantung tema Anda. Semua fungsi biasanya ada atau disebut di sana dari file lain. Jadi kita dapat menambahkan kode ini di file fungsi Anda untuk menambahkan dukungan pengguliran tak terbatas (tambahkan di akhir file):

<? php / ************************* WEB PENDAPATAN PENGATURAN INFINITE ***************** ******** / / * Fungsi yang akan mendaftar dan membuat skrip skrip tak terbatas untuk digunakan dalam tema. * / function twentytwelve_script_infinite_scrolling () {wp_register_script ('infinite_scrolling', // nama script get_template_directory_uri (). '/ js / jquery.infinitescroll.min.js', // di mana file adalah array ('jquery'), // skrip ini memerlukan skrip jquery null, // tidak memiliki nomor versi skrip true // skrip akan ditempatkan di footer); if (! is_singular ()) {// hanya ketika kami memiliki lebih dari pos 1 // kami akan memuat skrip ini wp_enqueue_script ('infinite_scrolling'); }} // Daftarkan skrip khusus kami! add_action ('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling'); / * Fungsi yang akan mengatur pengguliran tak terbatas untuk ditampilkan di halaman. * / function set_infinite_scrolling () {if (! is_singular ()) {// lagi, hanya ketika kita memiliki lebih dari postingan 1 // tambahkan skrip js di bawah ini?> <jenis skrip = "text / javascript"> / * Ini adalah pengaturan gulir inifinite, Anda dapat memodifikasi ini sesuai keinginan Anda * / var inf_scrolling = {/ * img: adalah jalur memuat gambar, menambahkan ikon pemuatan gif yang bagus di sana msgText: pesan pemuatan selesai Pesan: pesan pemuatan yang selesai * / memuat: { img: "<? echo get_template_directory_uri ();?> / images / ajax-loading.gif", msgText: "Memuat postingan berikutnya ....", selesaiMsg: "Tulisan dimuat !!",}, / * Item berikutnya adalah atur pemilih berikutnya. NextSelector adalah kelas navigasi halaman css. Dalam kasus kami adalah # nav-bawah .nav-sebelumnya a * / "nextSelector": "# nav-below .nav-before a", // navSelector adalah css id dari navigasi halaman "navSelector": "# nav-below ", // itemSelector adalah div di mana posting ditampilkan" itemSelector ":" article ", // contentSelector adalah div di mana konten halaman (posting) ditampilkan" contentSelector ":" # content "}; / * Hal terakhir yang harus dilakukan adalah mengkonfigurasi contentSelector ke gulir yang tak terbatas, dengan fungsi jquery dari infinite-scroll.min.js * / jQuery (inf_scrolling.contentSelector) .infinitescroll (inf_scrolling); </script> <? }} / * kita perlu menambahkan aksi ini di footer halaman. 100 adalah nomor prioritas yang mengkoreksi eksekusi kemudian. * / add_action ('wp_footer', 'set_infinite_scrolling', 100); ?>

Pendekatan alternatif - memuat halaman dan jenis posting kustom

Kode sebelumnya akan memuat semua posting Anda, tetapi bagaimana jika Anda ingin menampilkan halaman, atau jenis posting kustom (seperti item portofolio, jika tema Anda mendukungnya)? Yah, kita dapat memodifikasi kode sedikit dan membuatnya berfungsi juga.

Satu-satunya penyesuaian yang diperlukan adalah dalam indeks Anda, kategori atau file lain yang akan memuat item, Anda akan mengganti loop Anda saat ini dengan kode yang berbeda. Anda dapat mengidentifikasi lingkaran Anda dengan kode ini:

while (have_posts ()):

Jadi, setelah Anda menemukannya, Anda dapat menggunakan kode ajaib ini:

<div id = "content" role = "main"> <? php / * Hanya tampilkan Halaman pada gulungan tak terbatas! Inilah rahasianya: Anda dapat mengatur post_type untuk apa yang Anda butuhkan, itu sederhana! Beberapa post_types dapat berupa: portofolio, proyek, produk Kita dapat menambahkan banyak jenis pos seperti yang kita inginkan, memisahkannya dengan koma, seperti 'posting', 'halaman', 'produk' * / $ args = array (// mengatur argumen 'post_type' => 'halaman', // Hanya Halaman); query_posts ($ args); // muat posting jika (have_posts ()):?> <? php / * Mulai Loop * /?> <? php while (have_posts ()): the_post (); // kode loop "biasa" untuk menampilkan item-item itu?>

Kesimpulan

Ini hanya artikel "pemanasan". Ada banyak hal yang dapat Anda lakukan dengan pendekatan semacam ini. Misalnya, Anda dapat memuat produk di toko Anda (menggunakan WooCommerce, mungkin) sebagai gulir pengguna, atau bahkan menambahkan lebih banyak kode JS dan CSS di sana untuk membuat dan pemuat parallax seperti yang keren untuk gambar posting.

Apa pendapat Anda tentang teknik ini? Apakah kamu menyukainya? Apakah Anda akan menggunakannya? Bagikan pemikiran Anda menggunakan bagian komentar!

Tentang Rochester Oliveira

Saya seorang desainer web dan pengusaha dari Itajubá (MG), Brasil. Saya suka menulis tentang topik yang tidak jelas dan melakukan beberapa hal keren.