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

  • 更新日:
  • 公開日:

Jetpackの関連記事表示機能(プラグイン上での名前は関連投稿)が中々良かったので使うことに。

ただ、若干レスポンシブへの対応が完璧ではなかったのでフックによるPHPコード、CSSで調整してみました。

Jetpackの関連投稿をPHP&CSSで調整する

関連投稿の設定は以下の画像のように「視覚的インパクトがある大きめのレイアウトを使う」にチェックを入れた状態を前提としています。

PHPで最大表示件数を6件に変更

初期表示数は3記事ですが、レスポンシブデザインでは特定のブレイクポイントで扱いづらい数です。表示記事数を最大「6件」に設定します。functions.phpなどに以下を記述します。

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

これで関連投稿記事が最大6件になります。

CSSでレスポンシブデザイン対応の調整

CSSでなるべくカラム落ちしないよう調整します。以下のコードをテーマのCSSに貼り付けます。flexboxを使用しているので、古いIEには対応していません。

(確認したブラウザはWindows, Mac各々のIE11, Edge, Chrome, Firefox, safariです。iPhoneやAndroidでも確認しました)

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;
}

// Base font size = 16px -> min-width: 48em = min-width: 768px
@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以上なら3列表示、未満(タブレットやスマホ)なら2列表示で関連投稿を表示します。

簡易的な対応ですので、ご参考程度に。


参考:Customize Related Posts — Jetpack for WordPress

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone