WordPress プラグインなしでシンプルなページネーションを実装

WordPressのページネーションをプラグインなし、シンプルなデザインで実装。

この記事は、当サイトの作成用の(メモ)です。

参考になる方はどうぞ。

id1709

参考:出力されるコード

<div class=“pagenation”>
    <ul>
        <li class=“prev”><a href=“….”>Prev</a></li>
        <li><a href=“….”>1</a></li>
        <li><a href=“….”>2</a></li>
        <li><a href=“….”>3</a></li>
        <li class=“active”>4</li>
        <li><a href=“….”>5</a></li>
        <li class=“next”><a href=“….”>Next</a></li>
    </ul>
</div>

functions.php

//Pagenation
function pagination($pages = , $range = 2)
{
     $showitems = ($range * 2)+1;//表示するページ数(5ページを表示)
     global $paged;//現在のページ値
     if(empty($paged)) $paged = 1;//デフォルトのページ
     if($pages == )
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;//全ページ数を取得
         if(!$pages)//全ページ数が空の場合は、1とする
         {
             $pages = 1;
         }
     }
     if(1 != $pages)//全ページが1でない場合はページネーションを表示する
     {
echo “<div class=\”pagenation\”>\n”;
echo “<ul>\n”;
//Prev:現在のページ値が1より大きい場合は表示
         if($paged > 1) echo “<li class=\”prev\”><a href='”.get_pagenum_link($paged 1).“‘>Prev</a></li>\n”;
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged$range1) || $pages <= $showitems ))
             {
                //三項演算子での条件分岐
                echo ($paged == $i)? “<li class=\”active\”>”.$i.“</li>\n”:“<li><a href='”.get_pagenum_link($i).“‘>”.$i.“</a></li>\n”;
             }
         }
//Next:総ページ数より現在のページ値が小さい場合は表示
if ($paged < $pages) echo “<li class=\”next\”><a href=\””.get_pagenum_link($paged + 1).“\”>Next</a></li>\n”;
echo “</ul>\n”;
echo “</div>\n”;
     }
}

ページネーション出力

<?php
//Pagenation
if (function_exists(“pagination”)) {
pagination($additional_loop->max_num_pages);
}
?>

CSS

/*——–Pagenation—————-*/
.pagenation {
    margin: 1em 0;
}
.pagenation:after, .pagenation ul:after {
    clear: both;
    content: “.”;
    display: block;
    height: 0;
    visibility: hidden;
}
.pagenation ul {
    margin: 0;
}
.pagenation li {
    float: left;
    liststyle: none outside none;
    marginleft: 3px;
}
.pagenation li:firstchild {
    marginleft: 0;
}
.pagenation li.active {
    backgroundcolor: #999999;
    borderradius: 3px;
    color: #FFFFFF;
    cursor: notallowed;
    padding: 10px 20px;
}
.pagenation li a {
    background: none repeat scroll 0 0 #CCCCCC;
    borderradius: 3px;
    color: #FFFFFF;
    display: block;
    padding: 10px 20px;
    textdecoration: none;
    textshadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.pagenation li a:hover {
    backgroundcolor: #444444;
    color: #FFFFFF;
    opacity: 0.8;
    transitionduration: 500ms;
    transitionproperty: all;
    transitiontimingfunction: ease;
}

コメントを残す