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

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