WordPressに次/前のリンクを追加したいですか？
次と前のリンクは、ユーザーが次の投稿や過去の投稿を表示できるようにする動的なリンクです。
この投稿では、WordPressで次へ／前へリンクを簡単に追加する方法と、それを最大限に活用する方法をご紹介します。
WordPressの次/前のリンクとは？
次/前のリンクは、ユーザーが簡単に次の投稿や過去の投稿に移動できるようにWordPressテーマによって追加された動的なリンクです。ページビューを増やし、直帰率を下げるのに役立ちます。
初期設定では、WordPressブログの投稿は逆時系列（新しい投稿が先）で表示されます。
つまり、次の投稿はユーザーが表示している現在の投稿の後に公開された投稿であり、過去の投稿は現在の投稿の前に公開された投稿である。
次へ/前へリンクは、ユーザーが個々の投稿やブログのアーカイブページを簡単にナビゲートできるようにします。また、ブログのページビューを増やすのにも役立ちます。
ほとんどのWordPressテーマには、次の投稿と過去の投稿のリンクがビルトインされており、各投稿の下部に自動的に表示されます。しかし、テーマによっては表示されなかったり、WordPressサイトのどこにどのように表示されるかをカスタマイズしたい場合もあります。
ということで、WordPressで次と前のリンクを簡単に追加する方法を見てみましょう。
以下は、この投稿で取り上げるトピックのリストである。
- プラグインを使ってWordPressに次へ／前へリンクを追加する
- WordPressテーマに次へ／前へリンクを追加する
- WordPressの次/前のリンクのスタイリング
- ページに次/前のリンクを追加する
- サムネイル付き次/前リンクの追加
- WordPressの次/前のリンクを削除する
プラグインを使ってWordPressに次へ／前へリンクを追加する
この方法は簡単で、サイトにコードを追加するのが苦手な初心者にお勧めだ。
まず、CBX Next Previous Articleプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。
有効化した後、設定 ” CBX Next Previousページにアクセスする必要があります。ここから、サイト上の次と前のリンクを表示する場所を選択できます。
このプラグインを使うと、個別投稿、ページ、アーカイブページなどに次の投稿と過去の投稿のリンク矢印を表示させることができます。
次と過去のリンクをより関連性の高いものにするために、同じカテゴリーやタグの次の投稿と過去の投稿を表示することもできます。
プラグインの無料版では、次の投稿と前の投稿に矢印を表示することしかできません。プロバージョンにアップグレードすることで、スライドインポップアップなどの他の表示オプションをアンロックすることができます。
同じタクソノミーから次の投稿/過去の投稿を表示する場合は、Navigate by Taxonomyタブに切り替える必要があります。
ここから、次と前のリンクを選択するために使用するタクソノミーを選択する必要があります。
オプションで、このプラグインはGoogleアナリティクスを使ってクリックをトラッキングすることもできる。この機能を使用するには、まずWordPressにGoogleアナリティクスをインストールする必要があります。
その後、プラグイン設定のGoogleアナリティクスタブに切り替え、クリックトラッキングのオプションを有効化してください。
設定が完了したら、「設定を保存」ボタンをクリックして変更を保存することを忘れないでください。
WordPressサイトにアクセスして、次へ/前へリンクの動作を確認できるようになりました。
この方法は簡単ですが、柔軟性があまりありません。例えば、無料版では次の投稿や過去の投稿のタイトルが表示されません。
もっと柔軟性が必要なら、このまま読み進めてほしい。
WordPressテーマに次へ／前へリンクを追加する
この方法では、WordPressテーマファイルを編集する必要があります。WordPressでコードをコピー＆ペーストする方法をご覧ください。
次に、FTPクライアントを使用するか、WordPressホスティングコントロールパネルのファイルマネージャーアプリを使用してWordPressサイトに接続する必要があります。
接続が完了したら、/wp-content/themes/your-current-theme/フォルダーに移動する必要があります。
ここで、single.phpファイルを見つける必要があります。これはあなたのサイトに個別投稿項目を表示するためのファイルです。
WordPressテーマによっては、single.phpファイル内の他のファイルを参照する場合があります。これらのファイルはテンプレートパーツと呼ばれ、WordPressテーマのtemplate-partsフォルダ内にあります。
詳しくは、WordPressテーマで編集するファイルについての投稿をご覧ください。
その後、次のコードをコピー＆ペーストして、テンプレートファイル内の次と前のリンクを表示したい場所に貼り付けるだけです。
<?php the_post_navigation(); ?>
これで変更を保存し、サイトを訪問して「次へ」「前へ」リンクの動作を確認することができます。
上記のテンプレートタグは、単に次の投稿と過去の投稿へのリンクを、投稿タイトルをアンカーテキストとして表示します。これが次と前の投稿へのリンクであるとは書いていません。
これを少し変更し、リンクに関するコンテキストをユーザーに提供しましょう。そのためには、the_post_navigationテンプレートタグで使用可能なパラメータを追加します。
上記のコードを次のように置き換えるだけだ：
<?php the_post_navigation( array(
'prev_text' => __( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>
これで変更を保存し、サイトをプレビューすることができます。
これがテストサイトでの様子だ：
また、次の投稿や過去の投稿のタイトルと一緒に、特殊文字や矢印を使用することもできます。
コードを以下のように置き換えるだけだ：
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
このコードがテストサイトでどのように表示されたかを示します：
ここで、次と前のリンクをユーザーが現在表示している投稿にもっと関連したものにしたいとします。
同じカテゴリーやタグの次のリンクや前のリンクを表示することで、それが可能になります。
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'in_same_term' => true,
'taxonomy' => __( 'category' ),
) );
?>
このコードは、同じカテゴリー内の次の投稿と過去の投稿を表示するようにWordPressに指示します。必要に応じて、タクソノミーのパラメータをタグやその他のカスタム・タクソノミーに変更することができます。
WordPressの次/前のリンクのスタイリング
WordPressで「次へ」「前へ」リンクを追加する方法を学んだので、次はそれらを適切にスタイル設定する方法を見てみよう。
WordPressの初期設定では、投稿ナビゲーションリンクにいくつかの初期設定のCSSクラスが自動的に追加されます。WordPressテーマでこれらのCSSクラスを使用して、これらのリンクをスタイル設定することができます。
あなたのテーマに追加できる基本的なCSSを紹介します。
.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}
この基本的なCSSは、単に次と前のリンクを隣り合わせに、しかし同じ行の異なる側に表示するだけである。
背景色やマウスオーバー効果などを追加して、ナビゲーションリンクを目立たせることもできます。
ここに、出発点として使えるCSSコードのサンプルがあります。
.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}
このコードは、リンクテキストをスタイルし、背景色とマウスオーバー効果を追加して、次と前のリンクをより目立つようにします。
WordPressページに次へ／前へリンクを追加する
通常、投稿ナビゲーションリンクはWordPressのブログ投稿に使用されます。なぜなら、これらの項目は時系列順に公開されるからだ。
一方、WordPressのページは一般的に時系列で公開されることはありません。詳しくはWordPressの投稿日とページの違いをご覧ください。
しかし、ユーザーによっては、ユーザーが簡単に次のページを見つけられるように、ページナビゲーションを表示する必要があるかもしれない。
幸いなことに、先ほどページに使ったのと同じコードを使うことができます。ただし、page.phpテンプレート内にコードを追加する必要があります。
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
これがデモサイトでの様子です：
WordPressでサムネイルを使って次/前のリンクを追加する
次や前のリンクをもっと目立たせたいですか？Imagelyは、ユーザーの注意を引き、これらのリンクをより魅力的にする最も簡単な方法です。
投稿サムネイルやおすすめ投稿画像の横に、次の投稿や過去の投稿リンクを追加しよう。
まず、テーマのfunctions.phpファイルまたはサイト固有のプラグインに以下のコードを追加する必要があります。
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->
<?php endif;
}
このコードは、次の投稿と過去の投稿を、アイキャッチ画像または投稿サムネイルとともに表示する関数を作成するだけです。
次に、リンクを表示したいテーマのsingle.phpファイルにwpb_posts_nav()関数を追加する必要があります。
あなたのテーマがすでに次と前のリンクを持っているなら、the_post_navigation()関数を含む行を見つけて、それを削除したいかもしれません。
次のコードを追加して、カスタムの次と前のリンクを表示します。
<?php wpb_posts_nav(); ?>
コードを追加したら、変更を保存し、サイトにアクセスしてリンクの動作を確認することをお忘れなく。
さて、これらのリンクがあまりきれいに見えないことにお気づきだろうか。
カスタムCSSを追加してスタイルを変えてみよう。
.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}
.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}
.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}
.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}
.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}
.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}
.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}
これで変更を保存し、サイトにアクセスして次や前のリンクをサムネイル付きで表示することができます。
これがテストサイトでの様子だ：
詳しくは、過去の投稿と次の投稿のリンクにサムネイルを追加する方法をご覧ください。
おまけ：WordPressの次と前のリンクを削除する
WordPressの「次へ」「前へ」リンクを削除したいユーザーもいるでしょう。
例えば、これらのリンクがあまり役に立たないと感じるユーザーもいるかもしれません。代わりに関連投稿や 人気投稿を表示したいと思う人もいるでしょう。
WordPressで次と前のリンクを削除するには、2つの方法があります。
方法1.WordPressテーマのコードを削除する。
WordPressで「次へ」と「前へ」のリンクを削除するには、WordPressテーマでリンクを表示するためのコードを削除する必要があります。
この方法の問題点は、テーマを更新するとすぐに削除したコードが戻ってくることだ。
これを避けるには、子テーマを作成する必要がある。
次に、親テーマで次と前のリンクを表示するレスポンシブのコードを見つける必要があります。
通常は、single.phpまたはcontent-single.phpテンプレートの中にあります。
基本的には、以下の関数を含むコードを探すことになる。
<?php the_post_navigation() ?>
このコードは、フォーマットやパラメータが若干異なる場合があります。例えば、私たちのテストサイトでは、テーマはリンクを表示するためにこのコードを使用していました：
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
)
);
子テーマを使用している場合は、この特定のテンプレートを子テーマに複製し、次または前のリンクを表示するために使用されている行を削除する必要があります。
親テーマで削除したいのであれば、それも可能です。
コードを削除すると、WordPressは次と前のリンクを表示しなくなります。
方法2.次の投稿と過去の投稿のリンクを非表示にする。
この方法は、次と前のリンクを本当に削除するわけではない。その代わり、人間の読者には見えなくなるだけだ。
WordPressテーマに以下のカスタムCSSを追加するだけです。
nav.navigation.post-navigation {
display: none;
}
変更を保存し、ナビゲーションリンクが消えるのをサイトで確認するのをお忘れなく。
この投稿が、WordPressで次と前のリンクを簡単に追加する方法を学ぶのにお役に立てば幸いです。また、最適なウェブデザインソフトウェアの選び方や、専門家による最適なドメイン登録業者の比較もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Carolyn says
Hey there! This article is awesome! It was easy to get it all plugged in… however, do you know how to set it so that the previous/next navigates only within the category instead of navigating between ALL posts from all categories?
WPBeginner Support says
The code for that is in our article just before the Styling section
管理者
Shanna says
I created a WP.org website and I have 4 post per page. I don’t see a next page at the bottom of my page. I have over 20 blog posts. How can I see more blog posts or go to the next page?
WPBeginner Support says
If you are using pages instead of posts, you would not see a next page option, we would recommend taking a look at our guide below for understanding how pages work compared to posts.
https://www.wpbeginner.com/beginners-guide/what-is-the-difference-between-posts-vs-pages-in-wordpress/
This guide would show how to go through posts with previous and next links.
管理者
Kristi Borst says
Thanks for your article. Very helpful. How would I edit the call to limit the title to xx number of characters followed by eclipse “…”? I tried using css but nothing I did worked.
WPBeginner Support says
At the moment we do not have a beginner friendly way to set that up at the moment and that would require editing the code, not the CSS. If we find a way we would recommend we will be sure to share!
管理者
George Okinda says
Awesome! this helped. Thanks and God bless you all in Christ Jesus
WPBeginner Support says
You’re welcome, glad our guide was helpful!
管理者
Jennifer says
Hello,
So, how would the code look if you wanted to use a shortcode instead of adding it to the single.php file? I am using GeneratePress and I want to add a hook to my post pages.
Would it look like this?
add_shortcode( ‘posts-nav’, ‘prev_add_next_blogs’ );
the_post_navigation(
array(
‘prev_text’ => __( ‘← %title’ ),
‘next_text’ => __( ‘%title →’ ),
‘in_same_term’ => true,
‘taxonomy’ => __( ‘category’ ),
) );
add_action( ‘init’, ‘prev_add_next_blogs’ );
This did not work for me, any help would be greatly appreciated.
Thank you
Jennifer
WPBeginner Support says
You would want to place the add_shortcode below the code for one likely reason if you have not tested so far.
管理者
Ciprian Popescu says
This is a good tutorial and I have just implemented it on my blog. It will definitely help with user retention and bounce rate.
The Full Site Editor will never be able to do this using HTML only. That’s why having the code in functions.php (or, even better, in another PHP file called from functions.php) will always work. The function could be coded as a shortcode (with a slight modification to return data instead of echoing it):
`add_shortcode( ‘posts-nav’, ‘wpb_posts_nav’ );`
And then adding it to every post, as a shortcode block (for the Block Editor).
WPBeginner Support says
Thank you for your feedback on an alternative option!
管理者
WPBeginner Support says
For what it sounds like you’re wanting, you would want to add in_same_term to the post navigation code similar to the code below:
the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'next_text' => true,
) );
管理者
Bipo says
Hello,
thanks for this tutorial.
While I’m trying to have thumbnail thing working with Divi (images are not shown), I would ask if it is posssible to add the category/taxonomy filter to this code too.
I mean: is it possible to show links and thumbs only when pages are in the same category?
(I’ve already added category to pages and the_post_navigation works )
Henrik Blomgren says
Hi, great tutorial. For old style WordPress.
Now if I wanted to do the image thumbnail post navigation next previous with the new thing in WordPress. The Full Site Editing?
How would I go around doing this tutorial with that?
WPBeginner Support says
Unless we hear otherwise, we would still recommend this method with the full site editor but we will certainly take a look and update the article as needed!
管理者
Henrik Blomgren says
Thank you very much for your reply. I forgot you still have full access to functions.php so the code will absolutely work.
Just that getting it into the single.html file is why my brain shut down. Since having to use single.php as the fallback for single posts feels a little weird.
So yes, please either update the article when time has been found or if possible please point me in the direction of how to use the function written in php in our html template.
Tina Filipčič says
Thank you. It helps a lot. I only have this problem now: the navigation is displayed on both – pages and posts. How to make it display on posts only?
WPBeginner Support says
The simplest method would be to have a template for your pages that does not use this, you can see more on our guide below about the template hierarchy:
https://www.wpbeginner.com/wp-themes/wordpress-template-hierarchy-explained/
as well as our guide below about creating a child theme:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
管理者
Tina Filipčič says
Hello,
I solved the problem by adding this:
let page = document.querySelector(‘.page’);
page.querySelector(‘.wpb-posts-nav’).style = “display:none”