ebichiki

Jetpackを使って関連記事をカスタマイズする方法を知りたい。関連記事の数を変更して回遊率を増やせないかな?

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

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

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

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

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

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

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

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

Jetpackとは?

Jetpack

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

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

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

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

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

ebichiki

自分が使っている Nishiki テーマにも関連記事を表示する設定はありますが、Jetpackの方が関連性の高い記事を表示することができるのでこちらを選びました。

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

関連記事を表示する

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

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

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

PC表示(初期表示時)
スマホ表示(初期表示時)

関連記事の数を変更する

見栄えよくするには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' );

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

PC表示(変更後)
スマホ表示(変更後)

関連記事を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列で関連記事を表示するようにしました。

スマホ表示(CSS調整後)

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

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

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

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

参考記事:[WordPress]Jetpackの関連投稿(関連記事)の表示数を増やしたりCSSで調整する