Tweet

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?

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

Tags

membuat pagination di wordpress,membuat link dalam php,membuat paging dengan css,pagination wordpress,membuat paging di wordpress,membuat pagination wordpress,link dalam php,paging css,penggunaan do while pada php,membuat paging css,pagination wordpress tanpa plugin,while dalam php,css page number wordpress,membuat page navigation tanpa plugin,membuat pagination dengan css,return php,belajar do while,pagination tanpa plugin,pagenavi wordpress tanpa plugin,pagination Tags: tips & trik, tutorial wordpress, wordpress