jetpack関連記事は3個
デフォルトでは、jetpackが出力する関連記事は3個だ。
これを6個に増やす。
まずfunctions.phpに、次のコードを追加。
//関連記事数変更
function jetpackme_more_related_posts( $options ) {
$options['size'] = 6;
return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );
モバイル対応
これで関連記事数は6個に増えたが、モバイル環境で見ると2個-1個-2個-1個という表示になってしまう。
これはjetpackでfloatがclearされているためだ。
調べてみると、下記の指定がされている。
.jp-relatedposts-post:child(3n+4) {
clear: both;
}
.jp-relatedposts-post:nth-child(3n) {
clear: left;
}
これを打ち消すために、cssを上書きする。
こちらを参照させてもらった。
モバイル対応なので、IEに対応する必要はないのでこれで問題ない。
CSSでなるべくカラム落ちしないよう調整します。以下のコードをテーマのCSSに貼り付けます。flexboxを使用しているので、古いIEには対応していません。
（確認したブラウザはWindows, Mac各々のIE11, Edge, Chrome, Firefox, safariです。iPhoneやAndroidでも確認しました）
![[WordPress]Jetpackの関連投稿（関連記事）の表示数を増やしたりCSSで調整する](https://i2.wp.com/increment-log.com/wp-content/uploads/2017/07/wordpress-jetpack-related-posts-adjust-01.jpg?resize=640%2C481&ssl=1)
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%;
}
}
これでよし。
