WordPress / Posted 4 years ago / 8 Komentar
pagingwordpress

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 di wordpress,membuat paging dengan css,membuat pagination wordpress,link dalam php,pagination wordpress,membuat paging css,penggunaan do while pada php,paging css,pagination wordpress tanpa plugin,pagination tanpa plugin,css page number wordpress,membuat pagination dengan css,belajar do while,while dalam php,return php,membuat page navigation tanpa plugin,pagenavi wordpress tanpa plugin,pagination Tags: , ,
cToko Toko Online

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 :)

http://www.zulsdesign.com


7 Comments

  1. Posted January 13, 2011 at 8:10 am | Permalink

    pertanyaan nya juga sama mas..itu code nanti di paste kemana mas, maklum oot nih..

    • Posted January 14, 2011 at 1:53 pm | Permalink

      yang kode pertama letakkan di function.php. untuk yang kedua letakkan di bagian loop-nya. ketiga itu letakkan di style.css

      semoga membantu :)

  2. Posted June 2, 2011 at 5:27 pm | Permalink

    Itu klo udah pasang kodenya di function.php perlu pasang kode di index.php nggak?

    Dulu waktu saya pake plugin pagenavi kan kudu masang kode lagi di index.php nya

  3. Posted February 22, 2012 at 3:56 pm | Permalink

    Sip berhasil mas. Kalo mau menghide Older Post dan Newer Postnya gimana mas. suwun

  4. Posted June 6, 2012 at 4:00 pm | Permalink

    makasih ilmunya. Langusng dipraktek in ya… :)

  5. Posted December 2, 2012 at 10:47 pm | Permalink

    mas, code itu dimasukkan ke mana mas?

  6. Posted December 2, 2012 at 10:49 pm | Permalink

    mas, code tersebut lantas dimasukkan ke mana ya?

One Trackback

  1. [...] » Membuat Pagination WordPress Tanpa Menggunakan Plugin [...]

Post a Comment

Your email is never published nor shared. 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>

webdesign