ワードプレスのthe_post_navigationフィルタの使用方法・解説

概要

the_post_navigationフィルタは、投稿ページ向けのナビゲーションを表示するために使用されます。このフィルタを使用することにより、投稿の前後に移動するリンクをカスタマイズすることができます。特に、リーダビリティやユーザーエクスペリエンスを向上させるために、デザインや機能を変更したい場合に役立ちます。

具体的には、次のような機能を実装する際によく使われます：

1. ナビゲーションリンクのスタイルの変更
2. 前の投稿と次の投稿のタイトルをカスタマイズ
3. 投稿のメタ情報（投稿日や作成者など）の追加
4. CSSクラス名の追加によるスタイリングの変更
5. ナビゲーションのコンテンツの翻訳
6. リダイレクト機能の追加
7. ユーザー条件によるリンクの表示・非表示
8. ソーシャルメディアの共有リンクへの変更

構文

apply_filters( 'the_post_navigation', $navigation_html, $args );

パラメータ

• $navigation_html: 投稿ナビゲーションのHTML出力（文字列）。
• $args: ナビゲーションの設定や引数（配列）。

戻り値

• フィルタされたHTML出力。

関連する関数

the_post_navigation

使用可能なバージョン

WordPress 4.1以降で使用可能。

コアファイルのパス

wp-includes/general-template.php

この関数のアクションでの使用可能性

アクション	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプルコード1: 前の投稿と次の投稿のリンクにカスタムクラスを追加

add_filter( 'the_post_navigation', function( $navigation_html ) {
    $navigation_html = str_replace('class="', 'class="custom-class ', $navigation_html);
    return $navigation_html;
});

このサンプルは投稿のナビゲーションリンクに custom-class というクラスを追加します。

サンプルコード2: 投稿ナビゲーションのタイトルを変更

add_filter( 'the_post_navigation', function( $navigation_html ) {
    return str_replace('Previous Post', 'Previous Article', $navigation_html);
});

このサンプルでは、「Previous Post」というテキストを「Previous Article」に変更します。

サンプルコード3: 投稿ナビゲーションに投稿日を追加

add_filter( 'the_post_navigation', function( $navigation_html ) {
    $post_date = get_the_date();
    return $navigation_html . '<span class="post-date">' . $post_date . '</span>';
});

このサンプルは、ナビゲーションの後に投稿の投稿日を表示します。

サンプルコード4: ソーシャルメディアリンクに変更

add_filter( 'the_post_navigation', function( $navigation_html ) {
    return '<div class="social-share">Share on social media:</div>' . $navigation_html;
});

このサンプルでは、ナビゲーションの前にソーシャルメディアシェア用のメッセージを追加します。

サンプルコード5: 投稿ナビゲーションを非表示にする

add_filter( 'the_post_navigation', function( $navigation_html ) {
    return '';
});

このサンプルコードは、ナビゲーションを完全に非表示にします。