【WordPress】Jetpackで関連記事数を3→6件に変更する方法【コピペでOK】

記事の下に関連記事を表示していますか？

関連記事を表示させることによって、他の記事へアクセスしやすくなり回遊率がぐーんと変わってきます。

Jetpackの関連記事はデフォルトで3件表示できるのですが、スマホで表示すると見た目がイマイチ。

表示件数やレイアウト次第でも評価は大きく異なります。

PHPのコードをいじるのは難しい、コピペでどうにかしたい！

という方に向けた記事になっています。

関連記事を6件に変更したことによって、回遊率（ページ／セッション）が1.82%→2.12%にUPしました。

この記事では、誰でも簡単にJetpackを使って関連記事の数をカスタマイズする方法について解説していきます。

Jetpackとは？

JetpackとはWordPressを利用する上で便利な機能をひとまとめにしたプラグインです。

例えば、以下のような機能が使えます。

Jetpackのおすすめ機能
1. ダッシュボードでアクセス解析ができる
2. 記事を投稿したときにSNSにも自動投稿する
3. 画像を最適化して表示を速くする
4. 投稿内容に関連する記事を表示する

使いたい機能をON/OFFで切り替えることができます。

関連記事の表示はPV数の向上にもつながるので特におすすめ！

プラグインの使い方など、WordPressでブログを作るときに参考にした本もチェックしてみてね！

関連記事を表示する

管理画面から「プラグイン」→「新規追加」をクリックし、
「Jetpack by WordPress.com」をクリックしてインストールと有効化されていることを前提として解説していきますね。

「トラフィック」タブ内にある「関連投稿」をONにします。

初期表示は3つ表示されます。スマホで見ると、不要なスペースができてしまいましたね。

関連記事の数を変更する

見栄えよくするには6件（PC2行、スマホ3行）表示できればよいので、function.phpにコードを追加しましょう。

function.phpは重要な部分なので、バックアップはしっかり取っておいてくださいね。

管理画面から「外観」→「テーマエディタ」→「function.php」を選び、以下のコードを貼り付けます。

function jetpackme_more_related_posts( $options ) {
    $options['size'] = 6;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

参考記事：Jetpackの関連投稿（関連記事）の表示数を増やしたりCSSで調整する

こんな感じになりました。

関連記事をCSSでカスタマイズする

関連記事を6つ表示させることはできましたが、スマホで見ると（2列＋1列)）×2行になってしまいました。

きれいに見せるために、「style.css」を選んで以下のコードを貼り付けます。

body #jp-relatedposts .jp-relatedposts-items {
  display: flex;
  flex-wrap: wrap;
  margin-right: -3.4005%;
}

body #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
  float: none;
  width: 46.5994%;
  margin-right: 3.4005%;
  margin-bottom: 24px;
  padding-right: 0;
}

body #jp-relatedposts .jp-relatedposts-post-thumbs > .jp-relatedposts-post-a {
  display: block;
  margin-bottom: 8px;
}

@media only screen and (min-width: 48em) {
  body #jp-relatedposts .jp-relatedposts-items {
    margin-right: -2.1072%;
  }

  body #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
    width: 31.226%;
    margin-right: 2.1072%;
  }

画面サイズが768px以上（PC）なら3列、768px未満（タブレット・スマホ）なら2列で関連記事を表示するようにしました。

関連記事を表示して回遊率を上げよう！

Jetpackで誰でも簡単に関連記事の数を変更する方法について解説しました。

私も直帰率の高さに悩んでいましたが、関連記事を表示することで他の記事へのアクセスが増えました。

ぜひ、試してみてくださいね。