Bagaimana cara menambahkan nomor halaman di tema WordPress Anda

Salah satu pembaca kami baru-baru ini bertanya kepada kami bagaimana kami menambahkan pagination numerik di situs blog WPBeginner. Tema WordPress default dan banyak lagi menampilkan tautan pagination 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. Berdasarkan pengalaman kami, pagination digital lebih mudah digunakan, lebih menarik, dan SEO. Kerangka kerja tema WordPress yang lebih canggih, seperti Genesis, hadir dengan fungsionalitas bawaan untuk menambahkan nomor halaman. Pada artikel ini, kami akan menunjukkan cara menambahkan nomor halaman di tema WordPress Anda. Tujuannya adalah untuk mengganti tautan pagination yang lebih lama dan yang lebih baru di bagian bawah halaman arsip dengan nomor halaman yang mudah dinavigasi.

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

Tambahkan nomor halaman secara manual ke tema WordPress Anda

Pertama, kami akan menunjukkan cara menambahkan nomor pagination secara manual ke tema WordPress Anda. Ini akan menguntungkan pengguna kami yang kuat dan pengguna yang sedang mempelajari pengembangan tema atau 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 maka Anda tidak memerlukan kode atau plugin ini.

function wpbeginner_numeric_posts_nav() {

	if( is_singular() )
		return;

	global $wp_query;

	/** Stop execution if there's only 1 page */
	if( $wp_query->max_num_pages max_num_pages );

	/**	Add current page to the array */
	if ( $paged >= 1 )
		$links[] = $paged;

	/**	Add the pages around the current page to the array */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) 

‘. “N”;

/** Tautan posting sebelumnya */
jika (get_preingly_posts_link())
cetak (‘

• %s

‘. “n”, get_preingly_posts_link());

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

cetak (‘

• %s

‘. “n”, $kelas, esc_url (get_pagenum_link ( 1 )), ‘1’);

if (!in_array( 2, $link))
Dibuang ‘

• Pendidikan

‘;
}

/** Tautan ke halaman saat ini, ditambah 2 halaman di kedua arah jika perlu */
urutkan ($ tautan);
foreach ((array) $link adalah $link) {
$class = $paged == $link? ‘kelas = “aktif”’: ”;
cetak (‘

• %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 ‘

• Pendidikan

‘. “N”;

$class = $paged == $max? ‘kelas = “aktif”’: ”;
cetak (‘

• %s

‘. “n”, $kelas, esc_url(get_pagenum_link($maks)), $maks);
}

/** Link postingan selanjutnya */
jika (get_next_posts_link())
cetak (‘

• %s

‘. “n”, get_next_posts_link());

Dibuang ‘

‘. “N”;

}

Di WPBeginner, kami menggunakan kode yang sama untuk pagination numerik pada halaman arsip kami (misalnya halaman kategori blog atau tutorial WordPress). Apa yang dilakukan kode ini adalah menghitung 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 template halaman arsip lainnya untuk tema Anda.

Sekarang kita memiliki daftar halaman bernomor, kita perlu merancang daftar ini. Kami ingin membuat daftar muncul inline-block di mana halaman aktif disorot dengan warna latar belakang yang berbeda. Untuk melakukannya, lanjutkan dan tambahkan berikut ini ke file style.css tema Anda:

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	color: #fff;
	text-decoration:none;
}

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #3C8DC5;
}

Apakah Anda pergi. Kami memiliki daftar pagination numerik pada topik kami yang tampak hebat.

Tambahkan pagination numerik di WordPress menggunakan WP-PageNavi

Sekarang mari kita lihat cara menambahkan nomor halaman di 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 teks dan nomor halaman default dengan pengaturan Anda sendiri jika diinginkan. Namun, pengaturan default akan berfungsi untuk sebagian besar situs.

Pada langkah selanjutnya, Anda perlu menambahkan tag template di 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 sebelumnya before_posts_link dan next_posts_link.

Setelah Anda menambahkan cuplikan wp_pagenavi, seperti inilah tampilan pagination numerik:

Jika Anda ingin mengubah tampilan warna dan nomor halaman 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 untuk diedit pilih menu tarik-turun WP-HalamanNavi dan klik Pilihan tombol. Editor akan memuat file plugin di sidebar 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. Anda sekarang dapat memodifikasi skema warna dan gaya dari sini. Alasan mengapa kami menyalin konten css dari plugin ke dalam stylesheet tema adalah untuk menghindari kehilangan perubahan gaya jika Anda memperbarui plugin. Ini adalah versi pagination numerik yang sedikit dimodifikasi, gunakan dan modifikasi di tema Anda.

.wp-pagenavi {
	clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF;
	text-decoration: none;
	background-color:#6FB7E9; 
	border: 1px solid #B2D1E5;
	padding: 5px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #E9F2F9;
	background-color:#6FB7E9;
}

.wp-pagenavi span.current {
	font-weight: bold;
	background-color:#3C8DC5;
}

Berikut tampilannya:

Seperti biasa, Anda harus bereksperimen dengan CSS. Tujuannya adalah untuk mencocokkan nomor pagination dengan tampilan warna situs Anda, sehingga menyatu dengan baik dan tidak terlihat seperti artefak 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.