WordPress 3分間フッキング：個別記事の最後に前後記事リンクを表示する方法

こんにちは！埼玉県川越市を拠点に、WordPress開発やカスタマイズをサポートしている当サイトの「WordPress 3分間フッキング」シリーズへようこそ。今回は、ユーザーの回遊率を高めるための簡単かつ効果的なカスタマイズ、「個別記事の最後に前後記事リンクを表示する方法」をご紹介します。

WordPressのテーマによっては、デフォルトで前後記事へのリンクが表示されていないことがあります。このような場合でも、簡単なフックを使えばコードを数行書くだけで実装できるんです！

今回使うのは、WordPressの強力なフィルターフックの一つ、「the_content」です。これを使えば、投稿内容（コンテンツ）を表示する前に内容を加工することができます。それではさっそく始めましょう！

the_contentフィルターフックとは？

本題に入る前に、簡単に「the_content」フィルターフックについて説明しておきましょう。

WordPressでは、投稿内容を表示する際、内部的に「the_content()」という関数を使っています。この関数は実行される前に「the_content」というフィルターを通過します。つまり、このフィルターにフック（接続）することで、表示される前の投稿内容を自由に加工できるのです。

今回はこのフィルターフックを使って、すべての投稿の最後に「前の記事」と「次の記事」へのリンクを自動的に追加します。

前後記事リンクを実装するコード

それでは、具体的なコードを見ていきましょう。以下のコードをテーマの「functions.php」に追加するだけで、記事の最後に前後記事リンクが表示されるようになります。


function wp3min_add_post_navigation($content) {
    // 個別投稿ページでのみ実行
    if (is_single() && 'post' == get_post_type()) {
        // ナビゲーションの取得
        $navigation = '';

        // 前の記事リンクの取得
        $prev_post = get_previous_post();
        if (!empty($prev_post)) {
            $navigation .= '<p><a href="' . get_permalink($prev_post->ID) . '">←';
            $navigation .= $prev_post->post_title . '</a></p>';
        }

        // 次の記事リンクの取得
        $next_post = get_next_post();
        if (!empty($next_post)) {
            $navigation .= '<p style="text-align: right;">';
            $navigation .= '<a href="' . get_permalink($next_post->ID) . '">';
            $navigation .= $next_post->post_title . '→</a></p>';
        }

        // ナビゲーションがある場合、コンテンツの末尾に追加
        if (!empty($navigation)) {
            $content .= '<div class="post-navigation-container">' . $navigation . '</div>';
        }
    }

    return $content;
}
add_filter('the_content', 'wp3min_add_post_navigation');

function wp3min_add_post_navigation($content) {

// 個別投稿ページでのみ実行

if (is_single() && 'post' == get_post_type()) {

// ナビゲーションの取得

$navigation = '';

// 前の記事リンクの取得

$prev_post = get_previous_post();

if (!empty($prev_post)) {

$navigation .= '<p><a href="' . get_permalink($prev_post->ID) . '">←';

$navigation .= $prev_post->post_title . '</a></p>';

}

// 次の記事リンクの取得

$next_post = get_next_post();

if (!empty($next_post)) {

$navigation .= '<p style="text-align: right;">';

$navigation .= '<a href="' . get_permalink($next_post->ID) . '">';

$navigation .= $next_post->post_title . '→</a></p>';

}

// ナビゲーションがある場合、コンテンツの末尾に追加

if (!empty($navigation)) {

$content .= '<div class="post-navigation-container">' . $navigation . '</div>';

}

return $content;

}

add_filter('the_content', 'wp3min_add_post_navigation');

デザインを適用したい場合は、次のように書くことができます。」


function wp3min_add_custom_post_navigation($content) {
    // 個別投稿ページで、投稿タイプが 'post' の場合のみ実行
    if (is_single() && 'post' === get_post_type()) {
        $navigation_html = '';

        // 前の記事リンクの取得
        $prev_post = get_previous_post();
        $prev_post_html = '';
        if (!empty($prev_post)) {
            $prev_post_html = '<div class="custom-post-nav-item custom-prev-post-nav">';
            $prev_post_html .= '<a href="' . esc_url(get_permalink($prev_post->ID)) . '" rel="prev">';
            $prev_post_html .= '<span class="custom-nav-direction">前の記事</span>';
            $prev_post_html .= '<span class="custom-nav-title">&larr; ' . esc_html($prev_post->post_title) . '</span>';
            $prev_post_html .= '</a>';
            $prev_post_html .= '</div>';
        }

        // 次の記事リンクの取得
        $next_post = get_next_post();
        $next_post_html = '';
        if (!empty($next_post)) {
            $next_post_html = '<div class="custom-post-nav-item custom-next-post-nav">';
            $next_post_html .= '<a href="' . esc_url(get_permalink($next_post->ID)) . '" rel="next">';
            $next_post_html .= '<span class="custom-nav-direction">次の記事</span>';
            $next_post_html .= '<span class="custom-nav-title">' . esc_html($next_post->post_title) . ' &rarr;</span>';
            $next_post_html .= '</a>';
            $next_post_html .= '</div>';
        }

        // 前後の記事どちらか、または両方存在する場合のみナビゲーションを表示
        if (!empty($prev_post_html) || !empty($next_post_html)) {
            $navigation_html = '<div class="custom-post-navigation-container">' . $prev_post_html . $next_post_html . '</div>';
            $content .= $navigation_html;
        }
    }

    return $content;
}
add_filter('the_content', 'wp3min_add_custom_post_navigation', 20); // 優先度を少し調整 (他のフィルターとの兼ね合い)

/**
 * カスタムナビゲーションのスタイルをヘッダーに追加
 */
function wp3min_add_custom_navigation_styles() {
    if (is_single() && 'post' === get_post_type()) {
        // CSSは外部ファイルに記述するか、カスタマイザーの「追加CSS」に記述することを推奨しますが、
        // ここでは元のコードの形式を踏襲し、wp_headに出力します。
        echo <<< _CSS_
<style>
.custom-post-navigation-container {
    display: flex;
    justify-content: space-between; /* 左右に均等配置 */
    align-items: stretch; /* アイテムの高さを揃える */
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0; /* 少し薄めのボーダー */
    gap: 20px; /* アイテム間の隙間 */
}

.custom-post-nav-item {
    flex: 1; /* 利用可能なスペースを分け合う */
    min-width: 0; /* flexアイテムが縮小できるように */
}

.custom-post-nav-item a {
    display: block; /* ブロック要素として扱う */
    padding: 20px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    height: 100%; /* コンテナの高さに合わせる */
    box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
}

.custom-post-nav-item a:hover {
    background-color: #f7f7f7;
    border-color: #b0b0b0;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.custom-nav-direction {
    display: block;
    font-size: 0.8em;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase; /* ラベルを大文字に */
    letter-spacing: 0.5px; /* 文字間隔を少し広げる */
}

.custom-nav-title {
    display: block;
    font-size: 1em;
    font-weight: 600;
    color: #2c3e50; /* 少し濃いめの青系グレー */
    line-height: 1.4;
    /* タイトルが長い場合に省略する設定 (必要に応じて) */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}

/* レスポンシブ対応: 768px以下の画面幅で縦積みに変更 */
@media (max-width: 768px) {
    .custom-post-navigation-container {
        flex-direction: column;
        gap: 15px;
    }
    .custom-next-post-nav {
        text-align: left; /* スマホでは左寄せに戻す */
    }
    .custom-post-nav-item a {
        padding: 15px; /* スマホではパディングを少し小さく */
    }
    .custom-nav-title {
        font-size: 0.95em; /* スマホではタイトルフォントを少し小さく */
    }
}
</style>
_CSS_;
    }
}
add_action('wp_head', 'wp3min_add_custom_navigation_styles');

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

function wp3min_add_custom_post_navigation($content) {

// 個別投稿ページで、投稿タイプが 'post' の場合のみ実行

if (is_single() && 'post' === get_post_type()) {

$navigation_html = '';

// 前の記事リンクの取得

$prev_post = get_previous_post();

$prev_post_html = '';

if (!empty($prev_post)) {

$prev_post_html = '<div class="custom-post-nav-item custom-prev-post-nav">';

$prev_post_html .= '<a href="' . esc_url(get_permalink($prev_post->ID)) . '" rel="prev">';

$prev_post_html .= '<span class="custom-nav-direction">前の記事</span>';

$prev_post_html .= '<span class="custom-nav-title">← ' . esc_html($prev_post->post_title) . '</span>';

$prev_post_html .= '</a>';

$prev_post_html .= '</div>';

}

// 次の記事リンクの取得

$next_post = get_next_post();

$next_post_html = '';

if (!empty($next_post)) {

$next_post_html = '<div class="custom-post-nav-item custom-next-post-nav">';

$next_post_html .= '<a href="' . esc_url(get_permalink($next_post->ID)) . '" rel="next">';

$next_post_html .= '<span class="custom-nav-direction">次の記事</span>';

$next_post_html .= '<span class="custom-nav-title">' . esc_html($next_post->post_title) . ' →</span>';

$next_post_html .= '</a>';

$next_post_html .= '</div>';

}

// 前後の記事どちらか、または両方存在する場合のみナビゲーションを表示

if (!empty($prev_post_html) || !empty($next_post_html)) {

$navigation_html = '<div class="custom-post-navigation-container">' . $prev_post_html . $next_post_html . '</div>';

$content .= $navigation_html;

}

return $content;

}

add_filter('the_content', 'wp3min_add_custom_post_navigation', 20); // 優先度を少し調整 (他のフィルターとの兼ね合い)

/**

* カスタムナビゲーションのスタイルをヘッダーに追加

function wp3min_add_custom_navigation_styles() {

if (is_single() && 'post' === get_post_type()) {

// CSSは外部ファイルに記述するか、カスタマイザーの「追加CSS」に記述することを推奨しますが、

// ここでは元のコードの形式を踏襲し、wp_headに出力します。

echo <<< _CSS_

<style>

.custom-post-navigation-container {

display: flex;

justify-content: space-between; /* 左右に均等配置 */

align-items: stretch; /* アイテムの高さを揃える */

margin-top: 50px;

padding-top: 30px;

border-top: 1px solid #e0e0e0; /* 少し薄めのボーダー */

gap: 20px; /* アイテム間の隙間 */

}

.custom-post-nav-item {

flex: 1; /* 利用可能なスペースを分け合う */

min-width: 0; /* flexアイテムが縮小できるように */

}

.custom-post-nav-item a {

display: block; /* ブロック要素として扱う */

padding: 20px;

border: 1px solid #dcdcdc;

border-radius: 8px;

text-decoration: none;

color: #333;

background-color: #fff;

transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;

height: 100%; /* コンテナの高さに合わせる */

box-sizing: border-box; /* paddingとborderをwidth/heightに含める */

}

.custom-post-nav-item a:hover {

background-color: #f7f7f7;

border-color: #b0b0b0;

transform: translateY(-3px);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

}

.custom-nav-direction {

display: block;

font-size: 0.8em;

color: #666;

margin-bottom: 8px;

font-weight: 500;

text-transform: uppercase; /* ラベルを大文字に */

letter-spacing: 0.5px; /* 文字間隔を少し広げる */

}

.custom-nav-title {

display: block;

font-size: 1em;

font-weight: 600;

color: #2c3e50; /* 少し濃いめの青系グレー */

line-height: 1.4;

/* タイトルが長い場合に省略する設定 (必要に応じて) */

/* white-space: nowrap; */

/* overflow: hidden; */

/* text-overflow: ellipsis; */

}

/* レスポンシブ対応: 768px以下の画面幅で縦積みに変更 */

@media (max-width: 768px) {

.custom-post-navigation-container {

flex-direction: column;

gap: 15px;

}

.custom-next-post-nav {

text-align: left; /* スマホでは左寄せに戻す */

}

.custom-post-nav-item a {

padding: 15px; /* スマホではパディングを少し小さく */

}

.custom-nav-title {

font-size: 0.95em; /* スマホではタイトルフォントを少し小さく */

}

</style>

_CSS_;

}

add_action('wp_head', 'wp3min_add_custom_navigation_styles');

コードの詳細解説

このコードは大きく分けて二つの関数で構成されています：

1. wp3min_add_post_navigation関数

これは「the_content」フィルターフックに接続する主要な関数です。以下のステップで処理を行います：

まず「is_single()」関数で個別投稿ページかどうかを確認します。また「get_post_type()」で投稿タイプが「post」（標準投稿）かどうかを確認します。
「get_previous_post()」と「get_next_post()」関数を使って前後の投稿を取得します。
HTMLを構築して、前の記事と次の記事へのリンクを作成します。
作成したナビゲーションHTMLを元のコンテンツの末尾に追加します。

2. wp3min_add_navigation_styles関数

こちらはナビゲーションリンクのスタイルを設定するためのCSSを出力する関数です。「wp_head」アクションフックに接続して、ページヘッダー部分にCSSを挿入します。

このように複数のフックを組み合わせることで、より完成度の高い実装が可能になります。フィルターフックでコンテンツを加工し、アクションフックでスタイルを追加するのは、WordPressカスタマイズの定番テクニックです。

実装結果

このコードを実装すると、シンプルで見やすいナビゲーションが完成しました。これだけでサイト内の回遊率アップが期待できます！

カスタマイズポイント

このコードは基本実装ですが、様々な方向にカスタマイズできます。以下にいくつかのアイデアを紹介します：

カスタマイズ内容	変更方法
特定のカテゴリー内のみで前後記事を表示	get_previous_post()、get_next_post()の第3引数に’category’を指定
アイキャッチ画像を表示	get_the_post_thumbnail()関数を使用して各リンクにアイキャッチを追加
表示するテキストをカスタマイズ	「前の記事」「次の記事」の部分を任意のテキストに変更
特定の投稿タイプにも対応	条件分岐を修正し、任意の投稿タイプでも動作するよう拡張
デザインのカスタマイズ	CSS部分を修正して、サイトデザインに合わせた見た目に調整

カテゴリー内のみの前後記事リンク

同じカテゴリー内での前後の記事だけを表示したい場合は、以下のように変更します：

$prev_post = get_previous_post(true); // 同一カテゴリーのみ
$next_post = get_next_post(true); // 同一カテゴリーのみ

1 2	$prev_post = get_previous_post(true); // 同一カテゴリーのみ $next_post = get_next_post(true); // 同一カテゴリーのみ

アイキャッチ画像を表示

ナビゲーションにアイキャッチ画像を追加したい場合は、リンク生成部分を以下のように変更します：

if ( !empty( $prev_post ) ) {
    $navigation .= '<div class="post-navigation prev-post">';
    $navigation .= '<span class="nav-label">前の記事</span>';
    $navigation .= '<a href="' . get_permalink( $prev_post->ID ) . '">';
    if ( has_post_thumbnail( $prev_post->ID ) ) {
        $navigation .= get_the_post_thumbnail( $prev_post->ID, 'thumbnail' );
    }
    $navigation .= '<span class="nav-title"><i class="fas fa-arrow-left"></i> ' . $prev_post->post_title . '</span>';
    $navigation .= '</a>';
    $navigation .= '</div>';
}

if ( !empty( $prev_post ) ) {

$navigation .= '<div class="post-navigation prev-post">';

$navigation .= '<span class="nav-label">前の記事</span>';

$navigation .= '<a href="' . get_permalink( $prev_post->ID ) . '">';

if ( has_post_thumbnail( $prev_post->ID ) ) {

$navigation .= get_the_post_thumbnail( $prev_post->ID, 'thumbnail' );

}

$navigation .= '<span class="nav-title"><i class="fas fa-arrow-left"></i> ' . $prev_post->post_title . '</span>';

$navigation .= '</a>';

$navigation .= '</div>';

}

アイキャッチ画像を追加する場合は、CSSも適宜調整して見た目を整えることをお忘れなく。レスポンシブデザインへの対応も考慮しましょう。

よくある質問（FAQ）

Q: この機能はテーマの「previous_post_link()」「next_post_link()」と何が違うのですか？

A: テーマ組み込みの関数は、テンプレートファイル（通常は single.php）に直接記述されているため、テーマによって表示位置や見た目が異なります。今回紹介したフックを使う方法では、テーマに依存せず常に記事コンテンツの末尾に表示できる点が大きな違いです。また、カスタマイズの自由度も高くなります。

Q: カスタム投稿タイプでも使用できますか？

A: はい、コード内の条件分岐を少し変更するだけで対応可能です。以下のように変更してください：

// 個別投稿ページでのみ実行（カスタム投稿タイプも含む）
if ( is_singular( array('post', 'your_custom_post_type') ) ) {
    // 処理内容
}

// 個別投稿ページでのみ実行（カスタム投稿タイプも含む）

if ( is_singular( array('post', 'your_custom_post_type') ) ) {

// 処理内容

}

Q: ナビゲーションのデザインをもっとカスタマイズしたいのですが？

A: wp3min_add_navigation_styles 関数内のCSSを自由に変更できます。より高度なスタイリングを行いたい場合は、別途CSSファイルを作成して enqueue_style で読み込むのがベストプラクティスです。

Q: 前後の記事がない場合はどうなりますか？

A: コード内で !empty() チェックを行っているため、前後の記事がない場合は何も表示されません。必要に応じて「最初の記事です」「最新の記事です」などのメッセージを表示するようカスタマイズすることも可能です。

まとめ：簡単なフックで使いやすさ向上

今回は「the_content」フィルターフックを使って、記事の最後に前後記事へのリンクを追加する方法を紹介しました。

たった数十行のコードで、ユーザー体験を大幅に改善できるのがWordPressフックの魅力です。プラグインをインストールしなくても、必要な機能だけをスマートに実装できました。

フックを理解して使いこなすことで、WordPressサイトのカスタマイズの可能性は無限に広がります。次回のWordPress 3分間フッキングもお楽しみに！

私たちは埼玉県川越市を拠点に、WordPressサイトのカスタム開発や保守サポートを提供しています。WordPress関連のお困りごとがありましたら、お気軽にご相談ください。

もっとWordPressカスタマイズを学びたい方へ

この記事で紹介したような機能を自分のサイトに実装してみたいけれど、コードを書くのに不安がある方や、さらに高度なカスタマイズをご希望の方は、ぜひ私たちのサービスをご利用ください。

WordPressカスタマイズ・プラグイン開発を気軽にお問い合わせくださいね: https://edel-hearts.com/wordpress-customize-and-plugin-development/

技術的なアドバイスや定期的なコンサルティングをご希望の方は、WordPress顧問エンジニアサービスもご検討ください: https://edel-hearts.com/wordpress-technical-advisor/

エーデルハーツ

Custom WordPress Support & Development