回遊率を上げよう!WordPressでページ送りを設置する方法【初心者向け】

WordPressでページ送りを設置する方法を紹介する記事です。ページャーとも言われますが、WordPressのプラグインを使った例と使わない例両方みていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

ブログなど長い記事を数ページに分けたり、投稿が多くなってきたら「次のページ」のように表示させたい場合などが出てくるかと思います。

名称自体は、ページャーやページ送りと言われますが、今回はそのページ送りの設置方法を紹介していきます。WordPressのプラグインを使った例と使わない例の両方を見ていきましょう。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!よくサイトを見ていると「次の記事へ」って表示されていて次の記事に飛ぶことができるリンクが有ると思うんですけど、あれってWordPressでできるんですか?

田島悠介

ページャのことだね。ページャを入れる方法はいくつかあるよ。ちょっとやってみようか?

大石ゆかり

はい、お願いします〜♪

 

ページ送りとは

←過去の投稿    新しい投稿→

この文字を見れば、何を表しているのかお分かりだと思います。ページ送りを導入することで、

12345・・・10・・・20

このような表示に変えることができるのです。この数字をクリックすれば、過去の記事であったとしても、すぐに飛ぶことができます。それでは実際に、導入してみましょう。

 

WordPressでページ送りをプラグインで導入

今回は「WP-PageNavi」というプラグインを使って設置していきます。

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

有効化したらWP-PageNaviの設定画面に移りましょう。ここで、表示数を変えられます。

z3-620x291

すると簡単に、ページ送りを設置できてしまうのです。

 

[PR] WordPressで挫折しない学習方法を動画で公開中

WordPressでページ送りをプラグインなしで導入

WordPressにページ送りを設置する場合、プラグインを使わなくても導入することができます。

まず下のテンプレートを、コピーしてください。

<div>
	<?php global $wp_rewrite;
	$paginate_base = get_pagenum_link(1);
	if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
		$paginate_format = '';
		$paginate_base = add_query_arg('paged','%#%');
	}
	else{
		$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
		user_trailingslashit('page/%#%/','paged');;
		$paginate_base .= '%_%';
	}
	echo paginate_links(array(
		'base' => $paginate_base,
		'format' => $paginate_format,
		'total' => $wp_query->max_num_pages,
		'mid_size' => 4,
		'current' => ($paged ? $paged : 1),
		'prev_text' => '«',
		'next_text' => '»',
	)); ?>
</div>

index.phpやhome.phpなどのページャーを表示したい場所にテンプレートを追加していきます。

外観→テーマ編集へ行けば、テンプレートを追加できます。

その際、画像の右側の欄からindex.phpやhome.phpを選択して、テンプレートを入力しましょう。

zzc-620x254

この際、サイトにもよるのですが、ページ送りの表示の数を変えたい場合がありますよね。そんな時は、mid_sizeの数字を変えることで、ページ送りの表示する数を変更できるのです。

 

そして最後に、style.cssに設定して完了となります。

CSSは、使用されているサイトによって変化させるものですので、サイトに合うように変更してください。

.pager{
	text-align:center;
}
a.page-numbers,
.pager .current{
	background:rgba(0,0,0,0.02);
	border:solid 1px rgba(0,0,0,0.1);
	border-radius:5px;
	padding:5px 8px;
	margin:0 2px;
}
.pager .current{
	background:rgba(0,0,0,1);
	border:solid 1px rgba(0,0,0,1);
	color:rgba(255,255,255,1);
}

z21-620x179

このような12の数字が表示されていれば、ページ送りは完成です。

見た目のデザインを変えたい場合はCSSを編集する必要などありますが、手軽に導入できるのでぜひ活用してみてください。

ぜひ、WordPressの使い方を覚えましょう!

 

大石ゆかり

ありがとうございました!記事が長くなったときとかに便利ですね♪

田島悠介

そうだね。プラグインを使うと手軽にできるし、なしでやると自分なりのページャが作れるから、どちらも場合によって使い分けると良いね。

大石ゆかり

はい!!!

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。