【WordPress】プラグインを使用しないでページャーを自作する方法

【WordPress】プラグインを使用しないでページャーを自作する方法

WordPressのページャー・ページネーションをプラグインを使用しないでを自作する方法をご紹介します。

※テンプレートファイルを直接編集する場合などは、必ずバックアップを取ってから編集してください。
また、利用する場合は自己責任でお願いします。



ページャーの出力を設定

functions.phpに記述します。

if( !function_exists('pagination') ){
	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 ){ //全ページ数が空の場合は、1にする
				$pages = 1;
			}
		}

		if( 1 != $pages ){  //全ページ数が1以外の場合は以下を出力する
			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\"" . $page_no_index . ">" . $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";
		}
	}
}

ページャーを出力

ページャーを出力するテンプレートファイル(index.php・category.phpなど)に以下を記述します。

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

出力されるコード

<div class="pagination">
	<span>Page 6 of 30</span>
	<a href="http://example.com/">&laquo; First</a>
	<a href="http://example.com/page/5">&lsaquo; Previous</a>
	<a href="http://example.com/page/2" class="inactive">2</a>
	<a href="http://example.com/page/3" class="inactive">3</a>
	<a href="http://example.com/page/4" class="inactive">4</a>
	<a href="http://example.com/page/5" class="inactive">5</a>
	<span class="current">6</span>
	<a href="http://example.com/page/7" class="inactive">7</a>
	<a href="http://example.com/page/8" class="inactive">8</a>
	<a href="http://example.com/page/9" class="inactive">9</a>
	<a href="http://example.com/page/10" class="inactive">10</a>
	<a href="http://example.com/page/7">Next &rsaquo;</a>
	<a href="http://example.com/page/33">Last &raquo;</a>
</div>



新たにID名・クラス名を追記や変更する場合は、function.phpに記述している内容が出力されますので、自分好みに変更してみてください。
あとは、cssなどで編集すればデザインの幅が広がりますよね。
※functions.phpを編集する場合は必ずバックアップを取ってから行ってくださいね。

未経験からでもエンジニアにはなれる!

中堅の年代になり、最近よくどうやってエンジニアになったんですか?と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。

当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。

もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい!

tech boostオンライン

tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。

エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。

オンラインスクールだからいつでもどこでも受講可能!これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。

初めてプログラミングを学ぶなら「tech boostオンライン」

CodeCamp(コードキャンプ)

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。

プログラミングのオンラインスクールのCodeCamp

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです!

プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。

実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。

受講者満足度90%以上のプログラミングスクール【DMM WEBCAMP】

Udemy

私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。

習得したいスキル(プログラム言語)が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。

1講座あたり数千~数万円程度で実践的なスキルアップを経済的でオススメです。

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース