Membuat Page Navy tanpa plugin

WP Pagenavy , salah satu plugin populer yang sering digunakan oleh para penikmat WordPress, salah satu fungsinya adalah memberikan sebuah paginasi / navigasi menuju ke halaman berupa angka , atau per page begitulah.

dan sebelumnya saya juga memberikan sedikit tips untuk Membuat Jquey Pretty Photo Tanpa Plugin, sekarang saya lanjutkan untuk paginasinya 🙂

wordpress pagenavy

wordpress pagenavy

Seuah pemikiran apabila kita semakin banyak memakkai Plugin di WordPress , maka akan semakin berat juga kinerja website WordPress Sahabat, kalau bisa tanpa plugin kenapa harus selalu bergantung kepada plugin?Langsung saja langkahnya.

  1. Buka functions.php , di wordpress themes sahabat, dan tambahkan code berikut :
    //page navigation function //
    function inforiatifpaging( $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 '<div id="navi">';
    echo '<div>';
    //echo '<span>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' );
    echo '</div>';
    echo '</div>';
    }
    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> ";
    }
  2. Lalu save ,  dan tambahkan CSS berikut di script style.csssahabat
    /* pagenavy */
    #navi{width:100%;}
    .navigasi{
        text-align:center;
        clear:both;
        margin:0 0 22px;
        }
    .page-numbers{
        border:1px solid #ccc;
        margin:10px 1px 0px 1px;
        padding:7px 10px;
        background:#fff;
        font-weight:400;
        -moz-border-radius:4px;
            -webkit-border-radius:4px;
                border-radius:4px;
                    -o-border-radius:4px;
        -webkit-transition-duration: 600ms;
        -webkit-transition-property: width, background, color;
        -webkit-transition-timing-function: ease;
        -moz-transition-duration: 600ms;
        -moz-transition-property: border, background, color;
        -moz-transition-timing-function: ease;
        -o-transition-duration: 600ms;
        -o-transition-property: border, background, color;
        -o-transition-timing-function: ease;
        }
    .page-numbers:hover{
        border:1px solid #555;
        text-decoration:none;
        background:#787878;
        color:#fff;
        }
    .current, .current:hover{
    background:#787878;
    color:#fff;
    padding:7px 12px;
      }
  3. Sekarang adalah untuk masalah peenempatannya  adalah memanggil script paginasi tersebut dengan code :<?php inforiatifpaging(); ?>

    letakkan di index.php , archive.php dan script lainnya yang membutuhkan paginasi. Letakkan di code seusai content , biasanya dalam themes seperti contoh pada twentyeleven adalah :
    <?php twentyeleven_content_nav( ‘nav-below’ ); ?>
    dan replace kode tersebut dengan :
    <?php inforiatifpaging(); ?>

sahabat bisa edit sendiri CSS nya yah , karena css tersebut saya buat dalam waktu kurang dari 20 menit , hehehehe..

semoga sukses sahabat happy blogging 😀 kalau ada kesulitan bisa hubungi saya 🙂