Jetpackの関連記事を好きな場所に表示する方法

WordPressを使う上での万能プラグインと言えば『Jetpack by WordPress.com』です。

とても便利な機能がパックになっており、必要な機能をON・OFFするだけで自分に必要な機能をチョイスできます。

この記事では、Jetpackの標準機能として搭載されている『関連記事』を好きな場所に表示する方法を解説します。

設定手順

関連記事を有効にする

メインメニューから、[設定] → [Traffic] → [投稿の後に関連コンテンツを表示]を有効にします。

関連コンテンツの表示を有効にすると、メインメニューの[設定]にある[表示設定]から関連記事の設定ができるようになります。関連記事として表示する情報にチェックを入れてください。直下にプレビューが表示され、内容を確認できます。

デフォルトの表示を無効にする

デフォルトのままだと、関連記事は投稿の直後に表示されます。functions.phpに以下のコードを記述し、デフォルトの表示を無効にしましょう。

function jetpackme_remove_rp() {
    if ( class_exists( 'Jetpack_RelatedPosts' ) ) {
        $jprp = Jetpack_RelatedPosts::init();
        $callback = array( $jprp, 'filter_add_target_to_dom' );
        remove_filter( 'the_content', $callback, 40 );
    }
}
add_filter( 'wp', 'jetpackme_remove_rp', 20 );

表示したい場所にコードを挿入

テンプレート側のボタンを表示したい場所に以下のコードを挿入します。

<?php if ( class_exists( 'Jetpack_RelatedPosts' ) ) : echo do_shortcode( '[jetpack-related-posts]' ); endif; ?>

関連記事が表示されない場合

関連記事を有効にしても表示されない場合があります。例えば、本サイトで作業を実施した際はWordPress標準のjQueryではなく、ことなったバージョンのjQueryを読み込んでいた際に表示されませんでした。

Jetpackの機能を利用する際はなるべくWordPressのデフォルト（同梱された）ものを利用しましょう。

その他、カテゴリーやタグの登録数が少ない場合にも表示されないことがあるようです。