神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

【WordPress】ブログの記事ページおよび一覧ページに簡易的なページャーを設置する方法とは

2015.03.14
WordPress

 WordPressでオリジナルテーマを作成した際に記事ページおよび一覧ページに前後の記事、もしくは2ページ目以降へ飛ぶためのページャーを設置したい時があると思います。

今回紹介するのは以下の画像のような、テキストのみのシンプルなページャーになります。

page2

このページャー、設置する際に記事ページと一覧ページとでは設置するコードが違うので、今回それぞれの設置コードについてご紹介したいと思います!

記事ページに設置する際のコードについて

 まず記事ページに設置する際のコードは以下になります!

古い記事へ飛ぶためコード

<?php previous_post_link('%link','リンク表示させたいワード'); ?>

新しい記事へ飛ぶためコード

<?php next_post_link('%link','リンク表示させたいワード'); ?>

こちらを元にsingle.phpの設置したい部分に以下のようにコードを記述します。

<?php previous_post_link('%link','&lt;&lt; 古い記事へ'); ?>
<?php next_post_link('%link','新しい記事へ &gt;&gt;'); ?>

このようにカッコの中に表示させたい文字を記述してあげれば、その文字を表示してくれてなおかつリンクを貼ってくれるようになります!

あとはcssでレイアウトやデザインを決めればOKとなります。

一覧ページに設置する際のコードについて

 続いて記事の一覧ページに設置する際のコードは以下になります。

現在表示されている一覧のその前のページに飛ぶためのコード
(2ページ目だったら1ページ目に行くためのコード)

<?php previous_posts_link('%link','リンク表示させたいワード'); ?>

現在表示されている一覧のその次のページに飛ぶためのコード
(1ページ目だったら2ページ目に行くためのコード)

<?php next_posts_link('%link','リンク表示させたいワード'); ?>

こちらを元にcategory.phpやarchive.phpなどといった一覧ページを表示するphpファイルでページャーを設置したい部分に以下のようにコードを記述します。

<?php previous_posts_link('%link','&lt;&lt; 前ページ'); ?>
<?php next_posts_link('%link','次ページ &gt;&gt;'); ?>

それぞれのコードの違いとは?

 パッと見、記事ページに設置するコードと一覧ページに設置するコードに変わりないように見えますが、記事ページの時には

previous_post_link
next_post_link

といった風にpostのあとにsがつかないのに対し、一覧ページの際には

previous_posts_link
next_posts_link

といった風にpostのあとにsがつくという違いがあります。

そのため、一覧ページにページャーを設置する際に誤って

previous_post_link
next_post_link

postのあとにsがつかないものを設置してもページャーが表示されないので、記事ページにページャーを設置するのか、一覧ページにページャーを設置するのかによって記述するコードを間違えないようお気を付けください!
(自分はここでつまづいて小一時間作業が止まりました…泣)

まとめ

 オリジナルテーマ作成でページ送りの設置は必要になってくる場合があるので、是非ともこのコードを覚えて活用しましょう!

スポンサーリンク
検 索