Halaman Daftar Artikel Pagination
1. Muat Perpustakaan JQuery
Karena ini adalah Ajax yang digerakkan oleh jQuery, memuat perpustakaan jQuery adalah suatu keharusan.
2. Format daftar artikel
Di halaman daftar artikel Anda (indeks halaman beranda.php, archive.php) Anda perlu memastikan bahwa ada struktur serupa sebagai berikut
<!-Container yang berisi semua artikel-> <div id = "Content"> <!-Container untuk setiap artikel-> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </Div> <div> </Div>
3. Tambahkan ke navigasi default
Karena Ajax Paging setiap kali mendapatkan konten dari halaman berikutnya, Anda hanya perlu memanggil navigasi default WordPress. Tambahkan kode berikut ke index.php Anda (atau halaman daftar artikel lainnya) untuk menghasilkan navigasi WordPress default.
<div id = "pagination"> <? php next_posts_link (__ ('muat lebih')); ?> </div>4.AJAX Dapatkan halaman berikutnya
Tambahkan kode berikut ke file JS topik Anda
// Gunakan live () untuk membuat JS masih berlaku untuk konten baru yang diperoleh melalui ajax $ ("#pagination a"). Live ("click", function () {$ (this) .addclass ("memuat"). Teks ("memuat ..."); $ .AJAX ({tipe: "post", url: $ (this) .attr ("hasil {{{{type:" post ", url: $ (this). $ (fitnah ("Konten .post"); tidak terdefinisi) {$ ("#Pagination A"). ATTRI ("HREF", NEXTHEF);5. Gulungan Pengguliran Pengguliran Halaman
Jika Anda ingin secara otomatis memutar halaman saat mouse menggulir ke bagian bawah halaman, Anda dapat mengubah kode ke gaya berikut
// Bind SCROLL EVENT $ (window) .Bind ("scroll", function () {// Tentukan apakah scrollbar jendela mendekati bagian bawah halaman jika ($ (dokumen) .scrolltop () + $ (window) .adah ()> $ (dokumen) .height () - 10) {$ (this) .add ()> $ (dokumen) .height () - 10) {$ (this) .addas ()> $ (dokumen) .eight. $ .Ajax ({type: "Post", url: $ (this) .attr ("href") + "#content", Success: function (data) {result = $ (data) .find ("#content .post"); nexThref = $ (data) .find ("#pagination a"). ATHREF "; $ ("Konten"). Append (hasilnya (300)); $ ("#pagination"). Remove ();}}});}});6. Tambahkan navigasi CSS
Tambahkan bagian CSS ke navigasi untuk mempercantiknya. Anda juga dapat menyiapkan diagram GIF untuk menunjukkan bahwa itu memuat. Berikut ini adalah gaya melodi:
#pagination {padding: 20px 0 0 30px; } #pagination .nextpostslink {width: 600px; Warna: #333; Dekorasi Teks: Tidak Ada; Tampilan: Blok; Padding: 9px 0; Teks-Align: tengah; Ukuran font: 14px; } #pagination .nextpostslink: hover {background-color: #cccccc; Dekorasi Teks: Tidak Ada; Border-Radius: 5px; -Moz-border-Radius: 5px; -webkit-border-radius: 5px; } #pagination .loading {latar belakang: url ("gambar/loading.gif") 240px 9px no-repeat; Warna: #555; } #pagination .loading: hover {latar belakang-color: transparent; kursor: default; }Komentar Pagination
1. Persiapkan
Memuat Perpustakaan JQuery, ini tidak dijelaskan.
2. Buka pagination komentar wordpress
Buka WordPress Backend - Pengaturan - Diskusi, periksa halaman untuk menampilkan komentar di "Pengaturan Komentar Lainnya", atur jumlah komentar. Jumlah komentar di sini hanya dihitung untuk komentar utama, dan membalas komentar tidak akan dihitung. Di sini saya mengisi angka yang lebih besar (15), karena paging komentar terlalu rinci dan akan membuatnya tidak nyaman bagi pengguna untuk membaca komentar sebelumnya.
Setelah membuka komentar halaman di latar belakang, tambahkan kode berikut ke tempat Anda perlu menambahkan navigasi paging di komentar.php (jika ada kode serupa dalam topik, Anda tidak perlu menambahkannya lagi. Selain itu, tag NAV dalam kode adalah tag HTML5. Jika topik tidak menggunakan HTML5, Div akan digunakan sebagai gantinya.)
<nav id = "komentar-navi"> <? php paginate_comments_links ('prev_text =? & next_text =?');?> </av>3. SEO dari Komentar Paging
Dari perspektif SEO, paging komentar akan menyebabkan konten duplikat (konten paging adalah sama, dan kata kunci dan deskripsi adalah sama), jadi mudah bagi blog dengan banyak komentar untuk menurunkan hak mereka karena mereka terlalu banyak konten duplikat. Oleh karena itu, beberapa perawatan diperlukan dalam SEO. Cara yang paling nyaman dan efektif adalah dengan menggunakan tag meta. Tambahkan kode berikut di bawah tag meta asli header.php Anda, sehingga halaman yang paging akan dilarang dimasukkan oleh mesin pencari dan mencegah konten dari diduplikasi.
<? php if (is_single () || is_page ()) {if (function_exists ('get_query_var')) {$ cpage = intval (get_query_var ('cpage')); $ commentPage = intval (get_query_var ('komentar-halaman')); } if (! kosong ($ cpage) ||! kosong ($ commentpage)) {echo '<meta name = "robot" content = "noIndex, nofollow" />'; echo "/n"; }}?>4.AJAX COMMENT
Menurut hal di atas, ada komentar paging dalam topik. Untuk mencapai komentar halaman di Ajax, Anda hanya perlu JavaScript untuk bekerja sama. Namun, sebelum ini, Anda harus terlebih dahulu menambahkan elemen sebelum daftar komentar untuk menunjukkan bahwa daftar dimuat saat menampilkan daftar komentar halaman baru. Asumsikan bahwa struktur modul komentar dari Topik Template Comments.php adalah sebagai berikut:
<Div> <h3 id = "komentar-list-title"> Komentar </h3> <!-Tampilkan komentar baru-> <div id = "Loading-Comments"> <span> Memuat ... </span> </div> <!-Daftar Komentar-> <l> <li> ... </li> <li> </Li> </Li> <li> <l> </navigasi-</Li> <li> </Li> <li> <li> <l> </navigasi-PABRE> <li> </Li> <li> <li> </Li> </LIR> </Li> <li> </li> <li> <li> <l>-navigas id = "komentar-navi"> <a href = "#"> 1 </a> ... </nav> </div>
Tambahkan kode JS berikut ke file JS Anda untuk mengimplementasikan pagination komentar
// Komentar paging $ body = (window.opera)? (Dokumen.COCOKTMODE == "CSS1COMPAT"? $ ('Html'): $ ('body')): $ ('html, body'); // memicu paging saat mengklik paging navigasi tautan $ ('#komentar-navi a'). $ .AJAX ({type: "get", url: $ (this) .attr ('href'), beforesend: function () {$ ('#comments-navi'). Remove (); $ ('. Comment_list'). Ramping (); $ ('#Loading-Comments'). Slidedown (); $ bodyrole.eaniate. $ (#komentar-judul '). Offset (). Top-65}, 800); $ ('#Loading-Comments'). Setelah (Hasil. Fadein (500));CSS untuk bilah pemuatan (hanya untuk referensi)
Salinan kode adalah sebagai berikut:
#Loading-Comments {display: none; Lebar: 100%; Tinggi: 45px; Latar Belakang: #A0D536; Teks-Align: tengah; Warna: #fff; Ukuran font: 22px; Line-Height: 45px; }