【WordPress】 Jetpackの関連記事数を増やし、レイアウトも変更する方法

WordPressのプラグインに「Jetpack」というものがあるが、これは非常に便利で重宝する。Jetpackを開発しているのは、WordPressやWoocommerceを中心的に開発しているAutomattic社なので、セキュリティや信頼性といった面も優れている。

このJetpackが持つ機能の1つに、記事の下へ関連する投稿を表示させるというものがある。関連記事はOn/Offが選択でき、記事の回遊率を上げたい方には役立つ機能だ。

Jetpackの関連記事はデフォルトで3つ表示されるのだが、これがスマートフォンだと少し見栄えが悪くなってしまう。

せっかく表示されるのなら、偶数であった方が綺麗だと思わないだろうか。

筆者は6つが最適だと感じたので、PHPコードを少し加え変更してみた。

記事数を変更させるPHPコード

もともとは3つなので、以下のようになる。

Old PC

Old スマートフォン

ここで、『functions.php』へ以下のコードを挿入する。

function jetpackme_more_related_posts( $options ) {
    $options['size'] = 6;
    return $options;

}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

CSSで〈スマホ:2行〉&〈PC:3行〉にする

関連記事を増やすコードを挿入しただけだと、3記事ずつ縦に並ぶような形式で不格好だ。そこで、CSSでPCは2行、スマートフォンは3行という風に変更してあげる。

@media only screen and (max-width: 640px) {
 div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+1), div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+1) {
     clear: none;
 }

 div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) {
     clear: none;
 }

 div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+1) {
     clear: left;
 } 
}

そうすると、以下のように3*2=6記事が綺麗に表示されるようになる。

New PC

New スマートフォン

あとは、デベロッパーメニューから対象のクラスを発見し、

  • font-size
  • font-weight
  • padding
  • width
  • color

あたりを調整してあげれば良いだろう。

CSSを少しいじるだけで、自分のサイトにネイティブで調和したレイアウトになるはずだ。

その他

関連記事数の変更以外で、いくつか簡単にカスタマイズできるので紹介したい。

関連投稿の結果で特定の投稿を除外する

IDが1037と1038のを除外したい場合。もしIDが分からない場合は、該当の投稿リンクをダッシュボードからホバーすると、左下に表示されるURLから確認できる。


function jetpackme_exclude_related_post( $exclude_post_ids, $post_id ) {
     // $post_id is the post we are currently getting related posts for
     $exclude_post_ids[] = 1037; // Exclude post_id 1037.
     $exclude_post_ids[] = 1038; // Also exclude post_id 1038.
     return $exclude_post_ids;
 }
 add_filter( 'jetpack_relatedposts_filter_exclude_post_ids', 'jetpackme_exclude_related_post', 20, 2 );

特定の投稿を関連記事の最初に必ず表示させる

IDが1036の投稿を関連記事の最初に表示させる場合。


function jetpackme_append_related_post( $hits, $post_id ) {
     // $post_id is the post we are currently getting related posts for.
     if ( 2194 == $post_id ) {
         // Add 1036 to the front of the hits array.
         array_unshift( $hits, array( 'id' => 1036 ) );
         // Remove the last element of the array.
         array_pop( $hits );
     }
 return $hits;
 }
 add_filter( 'jetpack_relatedposts_filter_hits', 'jetpackme_append_related_post', 20, 2 );

参照：jetpack

Default image
Keisuke Kuribara
Articles: 97