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
