2015/06/04 (æ›´æ–°æ—¥: 2016/08/14)

WordPressにプラグイン無しで『全ページ表示のページネーション』を設置する方法

PROGRAMMING WordPress

コリスさんの記事内コードが動かなかったのでググりつつコードを書きました。
» WordPressにプラグイン無しでページネーションを設置する方法 | コリス

ページネーションの完成予想図

functions.phpに以下の記述

if ( ! function_exists( 'pietergoosen_pagination' ) ) :

    function pietergoosen_pagination($pages = '', $range = 2) {
       $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)
          {
            $string = _x( );
            echo "<div class='pagination'>";
              if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>" . __( '&laquo; First', 'pietergoosen' ) . "</a>";
             if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>" . __( '&lsaquo; Previous', 'pietergoosen' ) . "</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)."'>" . __( '次へ &rsaquo;', 'pietergoosen' ) . "</a>";
               if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>" . __( '最後 &raquo;', 'pietergoosen' ) . "</a>";
               echo "</div>n";
         }
        } //  pietergoosen_pagination

endif;

ページネーションを表示させたい部分に以下を記述します

<?php  pietergoosen_pagination(); ?>

CSSはこんな感じ

.pagination span, .pagination a {
	font-size: 15px;
	padding: 10px 15px;
	border: 1px solid #A0A0A0;
	margin: 0 5px;
}
	.pagination span.current {
		border: 1px solid #A0A0A0;
		background: #333;
		color: #fff;
	}
	.pagination a:hover {
		color: #333;
		border: 1px solid #5E5E5E;
	}

たったこれだけで完成です。
コピペでご利用ください。

※PS：普段の思考やビジネス戦略は「積み上げメルマガ」から発信しています。

WordPress

• Tweet
• LINE
• Read Later