Tutorial WordPress: Cara Membuat Situs WP Scrolling Tak Terbatas

Diperbarui: 29 Juli 2014 / Artikel oleh: Rochester Oliveira

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 os situs Scrolling Tak Terbatas

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

twitter

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 membutuhkan gambar gif yang bagus untuk pesan "memuat" Anda. Anda bisa menemukan banyak dari mereka di luar sana, tapi 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 jika Anda memiliki halaman yang bukan satu posting - hanya halaman di mana Anda memiliki lebih dari 1 posting untuk ditampilkan 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):

    
                    
            /*
                This is the inifinite scrolling setting, you can modify this at your will
            */
            var inf_scrolling = {                
                /*
                    img: is the loading image path, add a nice gif loading icon there                    
                    msgText: the loading message                
                    finishedMsg: the finished loading message
                */
                loading:{
                    img: "/images/ajax-loading.gif",
                    msgText: "Loading next posts....",
                    finishedMsg: "Posts loaded!!",
                },

                /*Next item is set nextSelector. 
                NextSelector is the css class of page navigation.
                In our case is #nav-below .nav-previous a
                */
                "nextSelector":"#nav-below .nav-previous a",

                //navSelector is a css id of page navigation
                "navSelector":"#nav-below",

                //itemSelector is the div where post is displayed
                "itemSelector":"article",

                //contentSelector is the div where page content (posts) is displayed
                "contentSelector":"#content"
            };

            /*
                Last thing to do is configure contentSelector to infinite scroll,
                with a function jquery from infinite-scroll.min.js
            */
            jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
                
    

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:

'halaman', // Hanya Halaman); query_posts ($ args); // muat kiriman if (have_posts ()):?>

Kesimpulan: Siapa yang Sebaiknya Menggunakan Shopify

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.