Cara menambahkan wp-pagenavi tanpa Install Plugins

tulisan ini akan membahas cara menambahkan fitur page navi pada blog wordpress tanpa install plugins. berikut rincian dan caranya

Manusia baik adalah orang yang dermawan dan bersyukur dalam kelapangan, yang mendahulukan orang lain, bersabar dalam kesulitan.

tulisan ini akan membahas cara menambahkan fitur page navi pada blog wordpress tanpa install plugins. berikut rincian dan caranya

Last Modif at July 8th, 2011

tahukan plugins wp-pagenavi? siapa sih yang ngga tahu plugins populer ini.
tulisan ini akan membahas cara menambahkan fitur page navi pada blog wordpress tanpa install plugins.

syarat, saya anggap!

  • sobat sudah install wp offline
  • sudah memiliki text-editor, recomendasi (notepad ++)

berikut cara pasang page navi pada themes Twentyten

  • masuk ke folder Twentyten ada di . . .nama-folder-wp/wp-content/themes/…
  • edit functions.php
  • lalu tambahan script dibawah

berikut adalah script wp-pagenavi v 2.61

<?php
/*
Plugin Name: WP-PageNavi
Plugin URI: http://wordpress.org/extend/plugins/wp-pagenavi/
Description: Adds a more advanced paging navigation to your WordPress blog.
Version: 2.61
Author: Lester 'GaMerZ' Chan
Author URI: http://lesterchan.net
*/
/*
Copyright 2009 Lester Chan (email : lesterchan@gmail.com)
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
### Function: Page Navigation: Boxed Style Paging
function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query;
if (is_single())
return;
$pagenavi_options = array();
$pagenavi_options['pages_text'] = __('Page %CURRENT_PAGE% of %TOTAL_PAGES%');
$pagenavi_options['current_text'] = '%PAGE_NUMBER%';
$pagenavi_options['page_text'] = '%PAGE_NUMBER%';
$pagenavi_options['first_text'] = __('« First');
$pagenavi_options['last_text'] = __('Last »');
$pagenavi_options['next_text'] = __('»');
$pagenavi_options['prev_text'] = __('«');
$pagenavi_options['dotright_text'] = __('...');
$pagenavi_options['dotleft_text'] = __('...');
$pagenavi_options['style'] = 1;
$pagenavi_options['num_pages'] = 5;
$pagenavi_options['always_show'] = 0;
$request = $wp_query->request;
$posts_per_page = intval(get_query_var('posts_per_page'));
$paged = intval(get_query_var('paged'));
$numposts = $wp_query->found_posts;
$max_page = intval($wp_query->max_num_pages);
if (empty($paged) || $paged == 0)
$paged = 1;
$pages_to_show = intval($pagenavi_options['num_pages']);
$larger_page_to_show = intval($pagenavi_options['num_larger_page_numbers']);
$larger_page_multiple = intval($pagenavi_options['larger_page_numbers_multiple']);
$pages_to_show_minus_1 = $pages_to_show - 1;
$half_page_start = floor($pages_to_show_minus_1/2);
$half_page_end = ceil($pages_to_show_minus_1/2);
$start_page = $paged - $half_page_start;
if ($start_page <= 0)
$start_page = 1;
$end_page = $paged + $half_page_end;
if (($end_page - $start_page) != $pages_to_show_minus_1) {
$end_page = $start_page + $pages_to_show_minus_1;
}
if ($end_page > $max_page) {
$start_page = $max_page - $pages_to_show_minus_1;
$end_page = $max_page;
}
if ($start_page <= 0)
$start_page = 1;
$larger_pages_array = array();
if ( $larger_page_multiple )
for ( $i = $larger_page_multiple; $i <= $max_page; $i += $larger_page_multiple )
$larger_pages_array[] = $i;
if ($max_page > 1 || intval($pagenavi_options['always_show'])) {
$pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), $pagenavi_options['pages_text']);
$pages_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pages_text);
echo $before.'<div class="wp-pagenavi">'."\n";
switch(intval($pagenavi_options['style'])) {
// Normal
case 1:
if (!empty($pages_text)) {
echo '<span class="pages">'.$pages_text.'</span>';
}
if ($start_page >= 2 && $pages_to_show < $max_page) {
$first_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['first_text']);
echo '<a href="'.clean_url(get_pagenum_link()).'" class="first" title="'.$first_page_text.'">'.$first_page_text.'</a>';
if (!empty($pagenavi_options['dotleft_text'])) {
echo '<span class="extend">'.$pagenavi_options['dotleft_text'].'</span>';
}
}
$larger_page_start = 0;
foreach($larger_pages_array as $larger_page) {
if ($larger_page < $start_page && $larger_page_start < $larger_page_to_show) {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($larger_page), $pagenavi_options['page_text']);
echo '<a href="'.clean_url(get_pagenum_link($larger_page)).'" class="page" title="'.$page_text.'">'.$page_text.'</a>';
$larger_page_start++;
}
}
previous_posts_link($pagenavi_options['prev_text']);
for($i = $start_page; $i <= $end_page; $i++) {
if ($i == $paged) {
$current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['current_text']);
echo '<span class="current">'.$current_page_text.'</span>';
} else {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
echo '<a href="'.clean_url(get_pagenum_link($i)).'" class="page" title="'.$page_text.'">'.$page_text.'</a>';
}
}
next_posts_link($pagenavi_options['next_text'], $max_page);
$larger_page_end = 0;
foreach($larger_pages_array as $larger_page) {
if ($larger_page > $end_page && $larger_page_end < $larger_page_to_show) {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($larger_page), $pagenavi_options['page_text']);
echo '<a href="'.clean_url(get_pagenum_link($larger_page)).'" class="page" title="'.$page_text.'">'.$page_text.'</a>';
$larger_page_end++;
}
}
if ($end_page < $max_page) {
if (!empty($pagenavi_options['dotright_text'])) {
echo '<span class="extend">'.$pagenavi_options['dotright_text'].'</span>';
}
$last_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pagenavi_options['last_text']);
echo '<a href="'.clean_url(get_pagenum_link($max_page)).'" class="last" title="'.$last_page_text.'">'.$last_page_text.'</a>';
}
break;
// Dropdown
case 2;
echo '<form action="'.htmlspecialchars($_SERVER['PHP_SELF']).'" method="get">'."\n";
echo '<select size="1" onchange="document.location.href = this.options[this.selectedIndex].value;">'."\n";
for($i = 1; $i <= $max_page; $i++) {
$page_num = $i;
if ($page_num == 1) {
$page_num = 0;
}
if ($i == $paged) {
$current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['current_text']);
echo '<option value="'.clean_url(get_pagenum_link($page_num)).'" selected="selected" class="current">'.$current_page_text."</option>\n";
} else {
$page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), $pagenavi_options['page_text']);
echo '<option value="'.clean_url(get_pagenum_link($page_num)).'">'.$page_text."</option>\n";
}
}
echo "</select>\n";
echo "</form>\n";
break;
}
echo '</div>'.$after;
}
}
?>

  • save
  • edit lagi index.php
  • lalu cari

</div><!-- #content --> ada di line/baris 28

  • kemudian edit menjadi seperti ini

<?php if ( is_home() ) : //jika home ?>
<?php wp_pagenavi(); ?>
<?php endif; ?></div><!-- #content -->

untuk merubah tampilanya

tambahkan style berikut di atas </head>, buka/edit header.php


<style type="text/css">
.wp-pagenavi{
font-size:120%;
clear:both;
margin:8px 0 0 0;
padding:6px 0 0 0;
width:100%;
}
.wp-pagenavi a{
border:1px solid #ccc;
margin:0 3px 0 0;
padding:2px 8px;
text-decoration:none;
}
.wp-pagenavi a:hover{
background:#ccc;
border:1px solid #666;
}
.wp-pagenavi .pages{
padding:2px 8px;
margin:0 3px 0 0;
border:1px solid #ccc;
}
.wp-pagenavi .page{
padding:2px 8px;
}
.wp-pagenavi .current{
padding:2px 8px;
background:#ccc;
border:1px solid #666;
margin:0 3px 0 0;
}
.wp-pagenavi .first,
.wp-pagenavi .last{
padding:2px 8px;
}
.wp-pagenavi .extend{
padding:2px 1px;
border:1px solid #ccc;
margin:0 3px 0 0;
}
</style>

***

menambahkan wp-pagenavi untuk themes lain

yang paling pertama edit functions.php lalu isi dengan script seperti diatas, setelah itu

jika home.php sudah ada

wp-pagenavi ini hanya tampil di home, jadi untuk themes lainya jika home.php sudah ada, kita hanya perlu menambahkan kode ini


<?php wp_pagenavi(); ?>

sedangkan letak menaruh scriptnya, coba test/masukan di bawah, misal(ngga semua themes sama)

<?php endwhile; ?>
<?php endif; ?>
<?php // disini ?>

atau, di atas

<div>
<div><?php next_posts_link('&laquo; Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

perhatiakn juga letak </div> nya.

jika home.php ngga ada

hampir sama seperti themes Twentyten, kita hanya perlu manambahan script ini di index.php

<?php if ( is_home() ) : //jika home page ?>
<?php wp_pagenavi(); //request wp-pagenevi ?>
<?php endif; ?>

css wp page-navinya

.wp-pagenavi{
font-size:120%;
clear:both;
margin:8px 0 0 0;
padding:6px 0 0 0;
width:100%;
}
.wp-pagenavi a{
border:1px solid #ccc;
margin:0 3px 0 0;
padding:2px 8px;
text-decoration:none;
}
.wp-pagenavi a:hover{
background:#ccc;
border:1px solid #666;
}
.wp-pagenavi .pages{
padding:2px 8px;
margin:0 3px 0 0;
border:1px solid #ccc;
}
.wp-pagenavi .page{
padding:2px 8px;
}
.wp-pagenavi .current{
padding:2px 8px;
background:#ccc;
border:1px solid #666;
margin:0 3px 0 0;
}
.wp-pagenavi .first,
.wp-pagenavi .last{
padding:2px 8px;
}
.wp-pagenavi .extend{
padding:2px 1px;
border:1px solid #ccc;
margin:0 3px 0 0;
}

tahukan cara menggunakan css?

jika wp-page navinya ngga muncul!

kalau wp-pagenavinya ngga muncul, itu berarti agan belum menambahkan script page navi di functions.php, coba baca ulang

jika wp-pagenavinya error!

perhatikan script ini

<?php wp_pagenavi(); //request wp-pagenevi ?>

tambahan

hapus script/markup seperti ini di home.php dan index.php jika menambahkan wp-pagenavi(ngga semua script themes sama)

<div>
<div><?php next_posts_link('&laquo; Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

sosialisasi lainya silakan tingalkan komentar!

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

33 thoughts on “Cara menambahkan wp-pagenavi tanpa Install Plugins”

  1. aldy says:

    Sepertinya banyak yang harus disesuaikan dengan masing-masing template?

  2. Rudy Azhar says:

    kalau kodenya sepanjang itu mending memakai plugin aja Bro, baru lihat kodenya aja saya udah pusing tujuh keliling :P

    1. eserzone says:

      sejuta,,,, eh setuju… bro aja puyeng, apalagi saya yang masih newbie????

    2. Djawa says:

      Yo’i coy., ane juga pyeng praktekinnya., :D :D :D

  3. andank says:

    wih boleh dicoba ini,

  4. indam says:

    Aldy,
    sebenarnya yang perlu diperhatikan hanya penempatan scriptnya, itu saja :) :)

    Rudy,
    itukan scritp bawaan plugins wp-pagenavi, jadi emang begitu bentuknya.
    Hehehe, saya males pakai plugins, akismet sudah cukup bagi saya.

    1. Apa ini mengurangi jatah spce juga mas bro, kalau sama aja mending pake plugin aja :lol:

  5. indam says:

    Fadel,
    pikirkan saja, berapa size plugin wp pagenavi, lalu bagaimana cara kerja plugins itu.

  6. agak repot mas masalahnya tiap themes kan beda-beda berarti perlu penyesuaian.. untuk yang tertarik buat otak-atik sih oke tapi untuk awam mungkin pilih install plugin mas hehe

  7. kampus blog says:

    mungkin yang paham coding senang memakai itu mas.. tp saya yang pemula mending pakai plugin aja hehehe..

  8. ganda says:

    Alasan kenapa baiknya di pisahkan dalam plugin, adalah, kamu gampang untuk mengelolanya.

    1. indam says:

      ia, dicampur dengan themes terasa lebih mudah :)

      1. ganda says:

        Oh, ternayata sama kamu tidak mengerti apa yang ku maksud. By the way, halaman single post yang baru ini very-very suck.

  9. indam says:

    Ganda,
    Tadi pas, ngereply ngga bisa bepikir apa-apa lg, semalaman ngga ada tidur, jadi seperti itulah jadinya “nggak koneck”.

    Hohoho… Bukan suck aja tapi broken, dirty, bad juga.
    Sementara ini ngga bisa dibagusin karena ngga login di cpanel. Disable aja javascriptnya untuk tampilan kemarin.

    1. ganda says:

      Mengapa tidak mengaktifkan koneksi FTP?

  10. indam says:

    Ganda,
    maaf, saya lupa ‘penulisan scriptnya pakai apa ya?’ kalau ngga salah sih pakai javascript? Kalau tampilanya ngga berubah, berarti pakai php.

    1. ganda says:

      Walah. Mana saya tahu. Ini kan script buatanmu. Kemungkinan CSS. Ini sampai mata saya sakit banget buat ngisi komentar ini. Fuhhh

  11. indam says:

    Ganda,
    maaf, sekali lg disable aja javascriptnya.

  12. dimasangga says:

    tipsnya belum dicoba, mas.
    soalnya keliatan ribet. :hammer:
    mungkin saya lebih milih pake plugin aja. soalnya saya kan suka dengan yang instan-instan.
    hehehe

    Btw, desain blognya kok kayaknya gak nyaman diliat gini ya, mas??
    sedang bereksperimen kah? :D

  13. indam says:

    Dimas,
    maaf maaf maaf dan maaf, tampilan sekarang emang hancur bgt. Untuk sementara view pakai opera atau chrome aja dulu.
    Atau jika pakai ff, safari, ie, flock, dll silakan disable javascriptnya.

  14. Newbi says:

    Wah.. Mumet lihat kodenya.. Btw makasih atas share template wp+bloggernya ___Salam kenal.. thanks___

    1. indam says:

      ok bro, salam kenal balik :)

  15. Newbi says:

    Salam kenal mas..
    Wah mumet baca scriptnya.. Pemula banget.. Tapi terimakasih atas share theme wp+bloggernya :D

    1. indam says:

      yupi, sama-sama. salam kenal :)

  16. Boleh di coba nih…
    Apa boleh twentyten ditempeli kode dari google?

  17. amin says:

    mo tanya mas, saya pake plugin pagenavi sdh muncul, tapi dipinggir kiri, bgmn cara mengaturnya agar ditengah ya ?

    ada yg bisa bantu ?

    1. indam says:

      coba tambahkan style ini di css wp-pagenavinya

      margin:0 auto;
      max-width:150px;

  18. Ale says:

    Kalo Buat Blogspot Bisa Ga .. ??

    1. indam says:

      ada juga buat blogspot, coba googling

  19. Djawa says:

    gan,. saya dah pernah nyoba trik ini., tp ga berhasil ya?
    apa themanya tidak mendukung? saya pake thema iFeature 2.0.6

  20. Fathan says:

    Wah,,,karena gak tau kali ya..koq susah pakai pengkodean..lagi nyoba di gan…ijin sedot ya…

  21. Setelah saya coba tutorial diatas , ternyata mudah sekali untuk menambahkan Script Navigasi di web saya , thx gan :)

  22. paul says:

    Bro, ane mau tanya kenapa ya di web ane page 20 keatas ga kebaca… ke direct ke page not found???
    ane sampe pusing nih..

    mohon bantuannya ya

    terima kasih banyak

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-