Membuat Pagination WordPress Tanpa Menggunakan Plugin

Pada Blog yang memakai mesin WordPress tentunya sistem paging yang dipakai adalah standar, hanya berupa “Previous Posts & Next Post” dan yang sejenis. Tadi saya kepikiran bagaimana caranya agar paging ini berupa angka dan tanpa menggunakan plugin. Seperti yang kita semua ketahui bahwa untuk plugin paging seperti ini banyak sekali tersedia secara gratis.

Setelah browsing akhirnya saya temukan sumbernya disini dan juga disini.

Oke kita tampilkan kodenya :

function pagenavi( $p = 2 ) { // pages will be show before and after current page
    if ( is_singular() ) return; // don't show in single page
    global $wp_query, $paged;
    $max_page = $wp_query->max_num_pages;
    if ( $max_page == 1 ) return; // don't show when only one page
    if ( empty( $paged ) ) $paged = 1;
    // echo '<span class="pages">Page: ' . $paged . ' of ' . $max_page . ' </span> '; // pages
    if ( $paged > $p + 1 ) p_link( 1, 'First' );
    if ( $paged > $p + 2 ) echo '... ';
    for( $i = $paged - $p; $i <= $paged + $p; $i++ ) { // Middle pages
      if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
    }
    if ( $paged < $max_page - $p - 1 ) echo '... ';
    if ( $paged < $max_page - $p ) p_link( $max_page, 'Last' );
}
function p_link( $i, $title = '' ) {
    if ( $title == '' ) $title = "Page {$i}";
    echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$i}</a> ";
}

Sekarang kita panggil function diatas di bagian loop seperti ini :

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!-- isi loop -->
    <?php endwhile;  ?>
        <div class="navigation">
            <?php pagenavi(); ?>
        </div>
    <?php else : ?>
<?php endif; ?>

Sekarang kita masuk ke CSSnya biar bagus tampilannya :

/* Navigation CSS */
.navigation {
    padding-top: 10px;
    margin-top: 10px;
}
.page-numbers{
    padding: 0 5px;
    margin: 0 10px 10px 0;
}
.navigation a {
    color: #b3b3b3;
    text-decoration: none;
}
.navigation a:hover {
    text-decoration: none;
}
.page-numbers:hover{
    border: solid 1px #b3b3b3;
    padding: 0 5px;
    margin: 0 10px 10px 0;
}

Mudah sekali kan? 🙂

Baca Juga:  Menampilkan Jumlah Subscribers di Website Anda

Teknik ini saya pakai di Theme WordPress selanjutnya dari http://wpactive.com

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage steel silo grain bins