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

- Advertisement -クリブログ

WordPressのプラグインに「Jetpack」というものがあるが、これは非常に便利で重宝する。Jetpackを開発しているのは、WordPressWoocommerceを中心的に開発している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

Keisuke Kuribara
株式会社Propagation代表取締役。興味対象は、ビットコイン、大麻、ウェブ、金融、生物、心理など。金融から健康、テック、音楽など様々な事について執筆しており、このブログは月間10万PV程度となっております。自身のアウトプットや知的好奇心を満たすことが主な目的です。お仕事の依頼や相談などお気軽にお問い合わせください。
- Advertisement -
- Advertisement -

こちらもオススメ

SNSの利用を控えても幸福度は改善しないという研究結果

デジタルデトックスやシリコンバレーで流行しているドーパミン断食など、デジタルデバイスの利用時間を控える試みは、とてもファッショナブルなモノになっている。このトレンドの根底にあるのは、デジタルデバイスを使うこと、特にソーシャルメディア(SNS)を利用することは、何らかの形で不健康であり、我慢すれば幸せで充実した人生を送ることができるかもしれないという仮説である。 さて、この仮説の実証結果はどうだろうか。 少なくともSNSに関しては、Media Psychologyの新しい論文が、どうも違うらしい事を示している。SNSと幸福の分野における数少ない実験的研究の1つで、研究者らはSNSを最長4週間やめても、私たちの幸福度や生活の質を改善することに何の効果もないことを発見した。 Photo by Pixabay from Pexels

カロリーコントロールダイエット。5年間体重が変化しない僕の管理方法を紹介しよう

執筆時点で23歳である僕は、18歳の頃から体重がほぼ変化していない。 計算すると約5年になる。約5年間、体重は63kg前後で推移ししており、±3kgからずらしたことがない。2kg程度の変化は、測定したときの体内にある水分として十分に仮定できる。 さて、何か特別な事をしていると思うだろうか。 バランスの良い食事を3食すべて行っているハードなトレーディングを行っているサプリメントを多く摂取している時間制限を設け、その時間以内でしか食事していない 上記のような、一般に言われている事を僕は一切行っていない。

人気のビットコインカジノTop10を紹介

先に書いておくが、この記事は「ビットコインを使用したクロスボーダーのオンラインギャンブルを使用すると儲かるよ」という記事ではない。ビットコインの使いみちとして面白く、相性が良いから紹介するだけであることを念頭に置いてほしい(後で面倒くさい目に合いたくないので)。また、実際に紹介するカジノへ送金しても、その資金は自己責任だ。 概要 Try Playing Online Casinos Or Poker For Girls’...

女性の性欲が減少してしまう、3つの大きな理由

多忙な現代生活の中で、性的関係の『十分な維持』について考えている人は少ない。 男性は性欲に関して問題を抱えることが少ないため、女性の性欲を理解しておくことは非常に重要だ。 したがって、この記事では女性の性欲が減少してしまうケースに焦点を当て、解説している。 留意点 セックス頻度を少なくしたいと考えている場合、必ずしも周囲の規範から外れているとは限らない。ただし、頻度の好みの違いが、パートナーとの関係に問題を引き起こす可能性はある。性欲が以前より弱まっていたとしても、2人の関係は以前より強くなることもある。性欲減退を定義する頻度はない。人によって異なる。

ブルーライトは目の疲れや睡眠不足、視力低下の主な原因でない。研究より

ブルーライトは、睡眠不足や目にダメージを与えるとして非難されている。 スマートフォンなどの電子機器は、実際に他の色より多くブルーライトを発する。ブルーライトは波長が短いため、エネルギーが高く、目のデリケートな組織に損傷を与える可能性が高い。 参照元:Jins またブルーライトは、光を視覚の基盤となる信号へ変換するニューロン集合体の網膜にも到達する。

こちらの記事も読まれています

- Advertisement -