Home » Optimasi Wordpress » Wordpress » Cara Membuat Halaman (Pagination) Pada Postingan

Cara Membuat Halaman (Pagination) Pada Postingan

7 Jun. 201154 comments
Cara Membuat Halaman (Pagination) Pada Postingan

Ukuran sebuah postingan adakalanya dibuat cukup pendek, mungkin hanya berisi beberapa paragraph saja karena dianggap sudah cukup mewakili dari apa yang dikehendaki oleh sang admin, namun terkadang ada pula sebuah postingan dibuat cukup panjang atau terpaksa harus dijabarkan secara panjang lebar agar apa yang menjadi maksud dan tujuan dari sang admin bisa tersampaikan dengan baik walau bukan jaminan postingan yang panjang itu akan dinilai baik oleh pembacanya.

Untuk sebuah postingan yang isinya cukup panjang apalagi jika disertai dengan gambar, alangkah baiknya jika diterapkan page break atau pagination halaman atau membagi postingan ke dalam beberapa halaman (CMIIW). Tujuannya supaya loadingnya tetap cepat, navigasi serta tampilannya tetap terjaga (enak dilihat dan mudah diakses).

Cara Membuat Halaman (Pagination) Pada Postingan :

  1. Tambahkan kode berikut ini di bagian anda ingin splite atau break halaman, tapi harus dalam posisi HTML editor (jangan visual).
    <!--nextpage-->
  2. Jika theme anda belum support pagination halaman posting (belum ada kode pagination di file single.php), tambahkan kode berikut ini ke dalam file single.php :
    <div class="wp_page_numbers"><?php wp_link_pages('Pages : ', '', 'number'); ?></div>

    kode tersebut di atas anda tempatkan setelah kode <?php the_content(); ?> (kode yang biasa digunakan untuk menampilkan isi postingan).

  3. Untuk mempercantik tampilan dari nomor halaman yang telah dibuat, anda bisa menambahkan kode CSS berikut ini ke dalam file CSS yang anda gunakan, atau bisa juga menggunakan teknik Custom CSS Per Post:
    .wp_page_numbers {font-weight:bold;
      margin-top:10px} 
    .wp_page_numbers a {background:#dbe7f0;
      padding:3px 5px 3px;
      margin-left:3px;
      margin-right:3px;
      color:#333;
      border:1px solid #949191;
      border-radius:6px 0 6px;
      -moz-border-radius:6px 0 6px;
      -webkit-border-radius:6px 0 6px;
      box-shadow:2px 2px 2px #b3b3b7;
      -moz-box-shadow:2px 2px 2px #b3b3b7;
      -webkit-box-shadow:2px 2px 2px #b3b3b7; } 
    .wp_page_numbers a:hover {text-decoration:none;
      border:2px solid #002cba;
      background:#97a3c7;
      -webkit-transition:margin-left 1s ease,background-color 1s ease;
      -moz-transition:margin-left 1s ease,background-color 1s ease;
      -o-transition:margin-left 1s ease,background-color 1s ease;
      transition:margin-left 1s ease,background-color 1s ease; }

Kode CSS tersebut di atas sengaja sedikit saya beri efek transisi dengan CSS3 pada saat dihover, jika anda tidak suka bisa anda hapus kode properties dari efek transisi tersebut atau bisa anda buat sendiri dengan efek lain sesuai selera. Untuk warna, padding, margin, border dan lain-lain bisa anda ganti sesuai selera. Hasilnya bisa anda lihat di postingan ini : 80 Inspirasi, Design Footer Nan Cantik Dan Unik.

Update :

Page break atau pagination halaman atau membagi postingan ke dalam beberapa halaman ini ternyata berpotensi untuk munculnya duplikat kontent di Google Webmaster Tool. Untuk mencegahnya silahkan tambahkan script berikut ini di file robots.txt yang ada di root direktori hosting :

User-agent: Googlebot
Disallow: /*/2*
Disallow: /*/3*
Disallow: /*/4*
Disallow: /*/5*
Disallow: /*/6*
Disallow: /*/7*
Disallow: /*/8*
Disallow: /*/9*
Disallow: /*/10*

Itu diasumsikan jika sebuah postingan dibuat sampai 10 halaman, jika lebih, bisa anda tambahkan nomor halaman yang akan dicegah untuk diindek di bawahnya, misalnya Disallow: /*/11* dan seterusnya.

Mudah-mudahan artikel tentang Cara Membuat Halaman (Pagination) Pada Postingan ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Membuat Anti Spam Dengan WP-reCAPTCHA
  2. Cek Performa Blog Dengan Firebug Dan Page Speed
  3. Cara Setting Permalink WordPress Untuk SEO, Performa dan Usability
  4. Cara Merapikan Keyword Plugin STT2
  5. Cara Mengoptimasi Gambar Theme
  6. Bypass Template Path dan Stylesheet Path
  7. Cara Mengembalikan Postingan Yang Hilang, Terhapus, Rusak Dll
  8. Membuat WordPress Versi Mobile Dengan W3 Total Cache
  9. Cara Setting Plugin WP Super Cache
  10. Cara Menggabungkan File CSS WordPress
  1. 5-5-2014 at 16:00 | #1

    kang kalo untuk edit custum css per post nya…jitu ada di bagian mana ya? editnya dari php editor atau c-panel. Jika salah bikin eror ga ya…soalnya rada ngeri salah naronya!!

    Reply

  2. 28-5-2014 at 14:16 | #2

    kalo diganti gambar gimana om caranya?

    Reply

  3. 5-7-2015 at 02:12 | #3

    Mantab benar mas tutorialnya, ini yang memang saya cari. Matur nuwun..

    Reply

  4. 4-11-2015 at 21:45 | #4

    Saya coba ya mas alwi.. :D Terima kasih untuk tutorialnya.. :D

    Reply

  5. 10-11-2015 at 19:31 | #5

    mantab tutorialnya Mas, trims :)

    Reply

  6. 21-11-2015 at 22:51 | #6

    sangat membantu, thanks

    Reply

  7. 18-12-2015 at 11:21 | #7

    Kebetetulan lagi cari setting robots.txt.
    Owh iya mau tanya nih. bedanya karakter $ and * pada Disallow: /*/10$ and Disallow: /*/10*

    Terima kasih

    Reply

  8. 6-3-2016 at 06:54 | #8

    gan gimana caranya, masukin desainnya ke style cssnya?

    Reply

  9. 22-8-2016 at 13:13 | #9

    Good ,I should certainly pronounce, I had no trouble navigating through all the tabs as well as related information ended up being truly simple to do to access.

    Reply

Comment pages
1 3 4 52392
5+5=? (Wajib diisi)