Bagaimana cara menambahkan nomor halaman ke tema WordPress Anda

Salah satu pembaca kami baru-baru ini bertanya kepada kami bagaimana kami menambahkan pagination numerik ke situs blog WPBeginner kami. Tema WordPress standar dan banyak lagi menampilkan tautan pemisah halaman dengan menambahkan posting lama dan tautan posting baru di bagian bawah halaman arsip WordPress. Namun, ada banyak situs WordPress yang menggunakan pagination numerik, seperti WPBeginner. Dalam pengalaman kami, volume pencarian lebih mudah digunakan, lebih menarik, dan lebih ramah SEO. Kerangka tema WordPress yang lebih canggih, seperti Genesis, memiliki fungsionalitas bawaan untuk menambahkan pagination numerik. Pada artikel ini, kami akan menunjukkan cara menambahkan nomor halaman ke tema WordPress Anda. Tujuannya adalah untuk mengganti tautan halaman lama dan baru di bagian bawah halaman arsip dengan nomor halaman yang mudah dinavigasi.

Ada dua cara untuk menambahkan nomor halaman ke tema WordPress Anda. Metode pertama adalah menambahkan pencarian situs secara manual tanpa bergantung pada plugin pihak ketiga. Karena artikel ini adalah bagian dari kategori tema dan ditujukan untuk desainer tema baru, kami akan menunjukkan metode manual terlebih dahulu. Metode kedua adalah menggunakan plugin pihak ketiga yang ada untuk menambahkan nomor halaman. Kami merekomendasikan metode ini kepada semua pengguna DIY kami.

Tambahkan pencarian halaman secara manual ke tema WordPress Anda

Pertama kami akan menunjukkan cara menambahkan pencarian numerik secara manual ke tema WordPress Anda. Ini akan menguntungkan pengguna kami dan pengguna yang mempelajari pengembangan tema atau mereka yang ingin melakukannya tanpa bergantung pada plugin pihak ketiga. Mari kita mulai dengan menambahkan kode berikut ke file .php tema Anda.

Catatan: Kode ini diambil dari Genesis Framework yang kami gunakan di situs web kami. Jika Anda menggunakan Genesis, Anda tidak memerlukan kode atau plugin ini.

fungsi wpbeginner_numeric_posts_nav() {

jika (is_tunggal())
kembali;

global $wp_query;

/** Hentikan eksekusi jika hanya ada 1 halaman */
if ($wp_query->max_num_pages max_num_pages);

/** Menambahkan halaman saat ini ke array */
if ($ halaman > = 1 )
$kiri() = $halaman;

/** Menambahkan halaman di sekitar halaman saat ini ke array */
if ($ halaman > = 3 ) {
$kiri() = $halaman – 1;
$kiri() = $halaman – 2;
}

jika (($halaman + 2 )

‘. “N”;

/** Link ke postingan sebelumnya */
jika (get_preingly_posts_link())
printf(‘%s’.“n”, get_preingly_posts_link());

/** Tautan ke halaman pertama, ditambah elipsis jika diperlukan */
if (!in_array( 1, $link)) {
$kelas = 1 == $sisi? ‘kelas = “aktif”’: ”;

printf(‘%s’.“n”, $class, esc_url (get_pagenum_link ( 1 )), “1′);

if (!in_array( 2, $link))
Dibuang ‘…’;
}

/** Tautan ke halaman saat ini, ditambah 2 sisi di kedua arah jika diperlukan */
urutkan ($ tautan);
foreach ((array) $link adalah $link) {
$class = $paged == $link? ‘kelas = “aktif”’: ”;
printf(‘%s’.“n”, $kelas, esc_url(get_pagenum_link($link)), $link);
}

/** Tautan ke halaman terakhir, ditambah elipsis jika diperlukan */
if (!in_array($max, $links)) {
if (!in_array($max – 1, $link))
Dibuang ‘…’ . “N”;

$class = $paged == $max? ‘kelas = “aktif”’: ”;
printf(‘%s’.“n”, $kelas, esc_url(get_pagenum_link($max)), $max);
}

/** Link postingan selanjutnya */
jika (get_next_posts_link())
printf(‘%s’.“n”, get_next_posts_link());

Dibuang ” . “N”;

}

Di WPBeginner, kami menggunakan kode yang sama untuk pagination numerik pada halaman arsip kami (misalnya blog kami atau kategori untuk tutorial di WordPress). Apa yang dilakukan kode ini adalah mendapatkan jumlah halaman dan menyiapkan daftar tautan bernomor. Untuk menambahkan ini ke template Anda, Anda perlu menambahkan tag template berikut ke index.php, archive.php, category.php dan semua template halaman arsip lainnya untuk tema Anda.

Sekarang kita memiliki daftar halaman bernomor, kita harus mendesain daftar ini. Kami ingin daftar tersebut muncul inline-blok di mana halaman aktif disorot dengan warna latar belakang yang berbeda. Untuk melakukan ini, lanjutkan dan tambahkan berikut ini ke file style.css tema Anda:

.navigasi,
navigator: arahkan kursor,
.navigasi li.aktif a,
.navigation li.disable {
warna: #ff;
dekorasi teks: tidak ada;
}

.navigasi di {
Tampilan sebaris;
}

.navigasi,
navigator: arahkan kursor,
.navigasi li.aktif a,
.navigation li.disable {
warna latar belakang: #6FB7E9;
batas-radius: 3px;
penunjuk: penunjuk;
bantalan: 12px;
penyangga: 0,75 rem;
}

navigator: arahkan kursor,
.navigation li.active dan {
warna latar belakang: #3C8DC5;
}

Tidak ada apa-apa. Kami memiliki daftar pencarian numerik tentang topik kami yang terlihat bagus.

Tambahkan pagination numerik ke WordPress dengan WP-PageNavi

Sekarang mari kita lihat cara menambahkan nomor halaman ke tema WordPress Anda menggunakan plugin yang ada bernama WP-PageNavi. Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin WP-PageNavi. Setelah mengaktifkan plugin, buka Pengaturan » PageNavi untuk mengkonfigurasi pengaturan plugin.

Pada halaman pengaturan plugin, Anda dapat mengganti pengaturan pencarian teks dan nomor default dengan Anda sendiri jika diinginkan. Namun, pengaturan default akan berfungsi untuk sebagian besar situs.

Pada langkah selanjutnya, Anda perlu menambahkan tag template ke tema WordPress Anda. Buka direktori tema Anda dan temukan baris untuk pagination terlama dan terbaru di templat halaman arsip Anda: index.php, archive.php dan file templat arsip lainnya. Tambahkan tag template berikut untuk menggantikan tag before_posts_link dan next_posts_link.

Setelah Anda menambahkan cuplikan wp_pagenavi, seperti inilah tampilan halaman pencarian:

Jika Anda ingin mengubah tampilan dan nuansa warna dan nomor pagination di wp-pagenavi, Anda harus pergi ke Pengaturan » PageNavi. Hapus centang opsi untuk menggunakan Gunakan pagenavi-css.css dan simpan perubahannya. Sekarang pergi ke Plugin » Editor. Darimana Pilih plugin yang ingin Anda edit pilih menu tarik-turun Halaman WP dan klik Pilihan tombol. Editor memuat file plugin di bilah sisi kanan. Klik pada pagenavi-css.css untuk membukanya di editor dan kemudian salin isi file.

Maka Anda harus pergi ke Penampilan »Pengeditan dan tempel konten pagenavi-css.css ke file style.css tema Anda. Sekarang Anda dapat mengubah skema warna dan gaya dari sini. Alasan kami menyalin konten plugin-css ke dalam template jenis tema adalah untuk menghindari hilangnya perubahan gaya jika Anda memperbarui plugin. Ini adalah versi pencarian halaman yang sedikit dimodifikasi, gunakan dan ubah di tema Anda.

.wp-pagenavi {
jelas: keduanya;
}

.wp-pagenavi a, .wp-pagenavi span {
warna: #FFF;
dekorasi teks: tidak ada;
warna latar belakang: #6FB7E9;
perbatasan: 1px padat # B2D1E5;
bantalan: 5px 5px;
margin: 2 piksel;
}

.wp-pagenavi a:hover, .wp-pagenavi span.block {
warna batas: # E9F2F9;
warna latar belakang: #6FB7E9;
}

.wp-pagenavi span.block {
font-berat: tebal;
warna latar belakang: #3C8DC5;
}

Ini adalah apa yang terlihat seperti:

Seperti biasa, bereksperimenlah dengan CSS. Tujuannya adalah untuk mencocokkan jumlah pencarian dengan tampilan warna situs Anda sehingga menyatu dengan baik dan tidak terlihat seperti objek yang ditempatkan secara aneh.

Kami harap artikel ini membantu Anda menambahkan dan menampilkan nomor halaman di tema WordPress Anda. Metode mana yang lebih Anda sukai untuk digunakan? Apakah Anda menyukai pagination numerik atau Anda lebih suka navigasi depan/selanjutnya? Beri tahu kami di komentar di bawah.