3 Komentar

Membuat Artikel Menjadi Beberapa Halaman (Pagination)


Sebelumnya “Blog Sae”   telah menulis bagaimana “Cara memposting Video” pada blog yang menggunakan wordpress.( yang ini iklan. hehhe…🙂

OK Langsung Ja. 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 fungsipagination, 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 :

Dimisalkan Anda sedang Makan Mie Baso Urat, Jika anda ingin lihat urat, maka sudah pasti anda akan memilih baso dan membukanya bukan…..? Sebentar Ko Jadi Makanan sih…. x_x sory malum lg lapeeeeeeeerrrr…. dah tengah malem membuat postingannya. hehehhee x_x. YANG INI LEWAT AJA…!!!

  • 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>' . __( 'Halaman :'), 'after' => '</div>' ) ); ?>

Tulisan Halaman bisa anda ganti sesuai dengan keinginan, misal : LanjutPages 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>' . __( '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> , 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.csscss 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 Baso eh… Membuat Artikel Menjadi Beberapa Halaman (Pagination) dapat bermanfaat bagi anda. Caiyoooo… selamat mencoba.

dah ah. mau tidur dulu dah setengah 2.
selamat mencoba.

3 comments on “Membuat Artikel Menjadi Beberapa Halaman (Pagination)

  1. OK Tak Comot ya….😀 materi lainnya di posting lagi.

  2. enak ya wordpress, saya pengen pakai tp tak bisa tutornya, coba di blogspot bisa pake pages kyk gini juga huuh

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: