Cara Lengkap Membuat Postingan Artikel Menjadi Beberapa Halaman (Pagination) Beserta Gambar Pada Wordpress

Pada blog yang menggunakan wordpress. Fungsi read more adalah untuk memotong artikel agar terlihat tidak terlalu panjang, namun ini berlaku hanya di homepage (halaman depan) dan tidak berlaku untuk single post (halaman ketika artikel dibaca secara keseluruhan).

Bila artikel anda isinya sangat panjang, tentu kurang enak di pandang dan seringkali memberatkan pembaca yang bandwidth-nya pas-pasan. Untuk hal seperti ini, wordpress punya solusi yaitu satu artikel bisa di buat menjadi beberapa halaman atau istilah yang baku disebut sebagai pagination. Dengan fungsi pagination, sebuah artikel yang panjang bisa di bagi-bagi menjadi beberapa halaman, tergantung kita mau menjadikan artikel tersebut menjadi berapa halaman. Untuk pembaca, bila ingin membaca halaman selanjutnya tinggal klik nomor halaman yang tertera di bawah artikel tersebut.

Langsung Ketahap Pembuatan

Untuk membuat fungsi pagination caranya cukup mudah, anda hanya perlu memasukkan kode  pada pharagraf yang ingin di potong, namun kode tersebut harus di masukkan pada saat mode post editor anda dalam keadaan HTML. Berikut uraiannya :

Diasumsikan bahwa anda sedang membuat sebuah posting

Klik tab HTML untuk berpindah ke mode editor HTML.
Sisipkan kode  pada akhir kalimat yang ingin di buatkan pagination. Kode tersebut boleh dimasukkan beberapa kali ( diakhir kalimat yang mau di potong), tergantung artikel tersebut ingin di bagi kedalam berapa halaman.
Jika anda merasa ingin kembali ke mode Visual, tinggal ubah kembali ke mode Visual dan lakukan edit sesuai keinginan.

Jika sudah yakin, silahkan di publish saja.

Selesai.

Pagination WordPress tidak berfungsi

Apabila anda telah melakukan langkah-langkah seperti yang telah ditulis diatas namun tidak berfungsi, kemungkinan besar theme/tema yang anda gunakan tidak support fungsi pagination. Lalu, bagaimana agar theme anda menjadi support pagination? Caranya cukup mudah yaitu anda tinggal menambahkan sedikit kode php dalam file single.php pada theme yang anda gunakan. Kode tersebut adalah sebagai berikut :

<?php wp_link_pages(); ?>

Dengan menyisipkan kode tersebut, pagination akan berfungsi namun hanya berupa nomor halaman saja.

Agar terlihat sedikit indah, anda dapat mengganti kode diatas dengan kode berikut ini :

<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Halaman :'), 'after' => '</div>' ) ); ?>

Tulisan Halaman bisa anda ganti sesuai dengan keinginan, misal : Lanjut, Pages dan lain sebagainya. Kode diatas menyertakan fungsi CSS class yang artinya anda nanti dapat berkreasi untuk menghias tampilan pagination.

Cara memasukkan kode pagination

Telah disebutkan sebelumnya bahwa kode pagination di sisipkan pada file single.php, namun tentu saja itu akan menyulitkan bagi anda yang memang belum faham bagaimana mengedit suatu file di wordpress. Agar mudah, berikut uraiannya :

Silahkan login ke dashboard wordpress anda

Masuklah ke theme editor. Sorot menu Appearance lalu pilih Editor.
Pastikan bahwa theme yang terpilih adalah theme yang sedang anda gunakan di blog.
Alihkan perhatian ke sebelah kanan bawah lalu pilih single.php
Backup dahulu kode yang ada (copy lalu paste pada notepad) agar apabila anda melakukan kesalahan dalam mengedit file, bisa dikembalikan kesemula.

Carilah kode seperti di bawah ini:
```
<?php the_content();  ?>
```

Masukkan kode pagination persis dibawahnya, contoh :

<?php the_content();  ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Halaman :'), 'after' => '</div>' ) ); ?>

Klik tombol Update File.
Selesai. Sekarang cobalah membuat sebuah posting yang mengandung pagination untuk melihat hasilnya.

Menghias Tampilan Pagination Melalui CSS

Telah disebutkan bahwa kode pagination yang tadi dipasang memuat CSS class yaitu <div class="page-link"> , artinya anda dapat mengatur tampilan melalui kode CSS. Salah satu contoh CSS yang telah kang rohman buat adalah sebagai berikut :

.page-link {
color: #000;
font-size: 12px;
margin: 15px 0 22px 0;
word-spacing: 0.3em;
}
.page-link a:link,
.page-link a:visited {
background: #666;
color:#FFF;
font-weight: normal;
padding: 0.3em 0.6em;
text-decoration: none;
}

.page-link a:active,
.page-link a:hover {
background: #333;
}

Berikut adalah langkah-langkah memasukkan kode tersebut ke theme anda.

Diasumsikan bahwa sedang pada halaman theme editor.

Klik file style.css
Backup terlebih dahulu kode yang ada (copy lalu paste pada notepad) agar apabila anda melakukan kesalahan dalam mengedit file, bisa dikembalikan kesemula.

Copy lalu paste kode css berikut pada deretan terakhir kode CSS anda.

.page-link {
color: #000;
font-size: 12px;
margin: 15px 0 22px 0;
word-spacing: 0.3em;
}
.page-link a:link,
.page-link a:visited {
background: #666;
color:#FFF;
font-weight: normal;
padding: 0.3em 0.6em;
text-decoration: none;
}

.page-link a:active,
.page-link a:hover {
background: #333;
}