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

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

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

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

 

 

ページ送りとは

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

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

１２３４５・・・１０・・・２０

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

 

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

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

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

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

 

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

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

 

[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を選択して、テンプレートを入力しましょう。

この際、サイトにもよるのですが、ページ送りの表示の数を変えたい場合がありますよね。そんな時は、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);
}

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

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

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

 

 

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