Membuat Artikel Menjadi Beberapa Halaman (Pagination)



Membuat Artikel Menjadi Beberapa Halaman (Pagination) – Sebebelumnya Kang Rohman telah menulis bagaimana cara membuat read more 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 panjanggggg, tentu kurang enak di pandang dan seringkali memberatkan pembaca yang bandwidthnya 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.



Cara Membuat Pagination Pada Wordpress


Untuk membuat fungsi pagination caranya cukup mudah, anda hanya perlu memasukkan kode <!--nextpage--> pada paragrap 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.



    html mode




  • Sisipkan kode <!--nextpage--> 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.



    pagination




  • 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 sebaginya. 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.



    theme editor




  • Pastikan bahwa theme yang terpilih adalah theme yang sedang anda gunakan di blog.



    theme wordpress




  • 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.



    update file wordpress




  • 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



    css pagination




  •  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;
    }




  • Klik tombol Update File.



    update file wordpress




  • Selesai.




Kini tampilan pagination anda akan terlihat lebih menarik daripada sebelumnya.



css wordpress pagination



Mudah-mudahan urain tentang Membuat Artikel Menjadi Beberapa Halaman (Pagination) dapat bermanfaat bagi anda.