WordPress(ワードプレス)カスタマイズ!プラグイン無しでページャーを作る方法

WordPress(ワードプレス)カスタマイズ!プラグイン無しでページャーを作る方法

WordPress(ワードプレス)カスタマイズ!プラグイン無しでページャーを作る方法

WordPress(ワードプレス)カスタマイズ!プラグイン無しでページャーを作る方法
最終更新日:2019.01.25

WordPressのページャーをオリジナルのものにしたい…
もっとカスタマイズせいのたかいものに変更したい…

そんな思いはありませんか?
プラグインをつかわなくてもfunction.phpとテンプレートに数行追加するだけでオリジナルのページャーが作成できちゃいます!

このページャーでのデザインカスタマイズ方法は【レスポンシブ対応】おしゃれなページャーをCSSだけで作る!コピペ出来るデザインサンプルで紹介しています♪

完成図

WordPress(ワードプレス)カスタマイズ!プラグイン無しでページャーを作る方法

5件表示のページャーを作成してみましょう!
2ステップで完成しますよ♪

なこ
不明なところがあれば聞いてくださいね♪

やり方

function.php

function.phpに以下のソースを貼り付けてください。
これは、ページャーのレイアウトをカスタマイズしたHTMLに変更するコードです。

コピー


//////////////////////////////////////////////////
//ページャー
//////////////////////////////////////////////////

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=\"pager\">\n";
		 echo "<ul class=\"pagination\">\n";
		 //Prev:現在のページ値が1より大きい場合は表示
         if($paged > 1) echo "<li class=\"pre\"><span><a href='".get_pagenum_link($paged - 1)."'«</span></a></li>\n";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                //三項演算子での条件分岐
                echo ($paged == $i)? "<li><a class=\"active\" href='".get_pagenum_link($i)."'><span>".$i."</span></a></li>\n":"<li><span><a href='".get_pagenum_link($i)."'>".$i."</span></a></li>\n";
             }
         }
		//Next:総ページ数より現在のページ値が小さい場合は表示
		if ($paged < $pages) echo "<li class=\"next\"><span><a href=\"".get_pagenum_link($paged + 1)."\"»</span></a></li>\n";
		echo "</ul>\n";
		echo "</div>\n";
     }
}

表示したいアーカイブページ

アーカイブテンプレートに以下を追加してください。
function.phpで設定したオリジナルページャーを表示するタグになります。

コピー


<?php
if (function_exists("pagination")) {
	pagination($additional_loop->max_num_pages);
}
?>

デザイン調整

WordPress(ワードプレス)カスタマイズ!プラグイン無しでページャーを作る方法

デザインについてはCSSで調整します。
【レスポンシブ対応】おしゃれなページャーをCSSだけで作る!コピペ出来るデザインサンプルこちらの記事でコピペできるサンプル付きで紹介しています。

ひとつだけ上の記事から抜粋したCSSを紹介します♪

レスポンシブ対応済みでCSSのcontent要素を使ってスマホ表示時だけ「前の10件」「次の10件」表示が出るようしています。

コピー


/* その1  */

.pager  ul.pagination {
  text-align: center;
  margin: 0;
  padding: 0;
}

.pager .pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  background:#9D50BB;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
}

.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  color: #fff;
  text-decoration: none;
}

.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: #000;
  background: #ccf;
}

@media only screen and (max-width: 767px){
  .pager .pagination li{
    display: none;
  }

  .pager .pagination li.pre,
  .pager .pagination li.next{
    display: inline-block;
    width: 40%;
    height: 50px;
    text-align: center;
  }

  .pager .pagination li.pre a,
  .pager .pagination li.next a{
    width: 100%;
    text-align: center;
  }

  .pager .pagination li.pre span::after{
    content: " 前の10件へ";
  }

  .pager .pagination li.next span::before{
    content: "次の10件へ ";
  }

}

「wp_pager_css.zip」の中身

このページでダウンロードできるzipファイルの中身です。
上で紹介した方法+CSSでのデザイン調整用ファイル一式になります。

index.html HTMLのソースファイルです
style.css CSSファイルです。
function.php WordPressでに反映する時に必要です
archive.php テンプレート貼り付け用のソースファイルです

文字コードは【UTF-8】で作っています。

更新履歴

2019/01/23 Ver.1.0

ソースを公開しました

ページャーCSSVer.1.0をダウンロードする(wp_pager_css.zip)

カスタマイズや組み込み方法などご相談くださいね!

まとめ

ページャーについてまとめました!
解らないところがあればコメント等で声かけてくださいね♪
一緒に解決していきましょう〜