2012年12月11日星期二

How to Add WordPress Pagination without a Plugin [Enhanced]

http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-without-a-plugin/


The default WordPress pagination only comes with the "Older posts" and "Newer posts" links at the bottom of the page when you want to navigate to the older entries. This works fine for sites with few entries, but isn't very user-friendly for blogs and sites with dozens or even hundreds of pages worth of entries. To enable your visitors to quickly navigate your site and browse through your content from page to page, a list of numbered pages would be more useful, like Google's search results.


Thankfully, there are many available WordPress pagination plugins that do just that. Among these, Lester Chan's WP-PageNavi is possibly the most popular one.


But if you prefer to keep plugin overhead to a minimum, here's a function you can use to add WordPress pagination without a plugin.


The code is provided by Kriesi and you can get his code and instructions. The pagination looks like this:
















We would like to provide an enhanced version of the pagination by introducing more useful information such asPage X of Y and make the arrows more intuitive, like this:









You can see a working example over at Sparklette.








Here's our sauce for the enhanced pagination, modified from Kriesi's code.




  1. Add the following function to your functions.php file:














    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36


    function pagination($pages = '', $range = 4)


         $showitems = ($range * 2)+1


         global $paged;

         if(empty($paged)) $paged = 1;


         if($pages == '')

         {

             global $wp_query;

             $pages = $wp_query->max_num_pages;

             if(!$pages)

             {

                 $pages = 1;

             }

         }  


         if(1 != $pages)

         {

             echo "<div class=\"pagination\"><span>Page ".$paged." of ".$pages."</span>";

             if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";

             if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";


             for ($i=1; $i <= $pages; $i++)

             {

                 if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))

                 {

                     echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";

                 }

             }


             if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>"

             if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";

             echo "</div>\n";

         }

    }




  2. To style it, add the following to your stylesheet (typically style.css).











    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29


    .pagination {

    clear:both;

    padding:20px 0;

    position:relative;

    font-size:11px;

    line-height:13px;

    }


    .pagination span, .pagination a {

    display:block;

    float:left;

    margin: 2px 2px 2px 0;

    padding:6px 9px 5px 9px;

    text-decoration:none;

    width:auto;

    color:#fff;

    background: #555;

    }


    .pagination a:hover{

    color:#fff;

    background: #3279BB;

    }


    .pagination .current{

    padding:6px 9px 5px 9px;

    background: #3279BB;

    color:#fff;

    }




  3. Finally, call the function in your theme (typically near the bottom of index.php or loop.php where it says "Older posts" or "Older entries"):











    1

    2

    3


    <?php if (function_exists("pagination")) {

        pagination($additional_loop->max_num_pages);

    } ?>





Let me know if you find it useful!




Orignal From: How to Add WordPress Pagination without a Plugin [Enhanced]

没有评论:

发表评论