【SWELL】記事下の関連記事の表示数を8から4に変更するカスタマイズ方法

2025年3月1日

ハシビィくん

SWELLの記事下にある関連記事なんすけど、8記事表示だと冗長な印象があるっす。でも変更する項目が見当たらないっす！

カピーさん

SWELLの標準機能では用意されていないぞ。でもちょっとしたカスタマイズで変更できるぞ。

SWELLでは記事下に設置される関連記事の表示数を変更する設定項目はありません。ですが、案外要望で関連記事表示を調整することがあるので紹介いたします。

SWELLの記事下関連記事のデフォルト状態

SWELLの記事下に表示される関連記事の数は以下の通りになります。

PC：4カラム、2列構成の計8記事
Tablet：3カラム、2列構成の計6記事
SP：2カラム、2列構成の計4記事

この表示を以下のように変更してみましょう。

PC：4カラム、1列構成の計4記事
Tablet：4カラム、1列構成の計4記事
SP：変更なし

SPは画面サイズの問題で2カラム構成の4記事構成が1番バランスが良く、関連記事として必要十分な量だと考えております。そのため、変更なしになります。実際にSPに関してはカスタマイズの要望は過去にありません。

関連記事数のカスタマイズ方法

ここからは実際のコードを紹介します。
基本的はコピペでご利用いただけます。

functions.php の編集を間違えると、サイトが真っ白になり管理画面に入れなくなることがあります。必ず 編集前にバックアップ を取りましょう。

function.php

// SWELLの関連記事の最大表示数を変更する関数
function set_swell_related_num(){
    return 4; // 表示する関連記事の数を4に設定
}

// SWELLの関連記事の最大表示数を変更するフィルターフック
add_filter( 'swell_related_post_maxnum', 'set_swell_related_num' );

set_swell_related_numはご自身で管理しやすい関数名に変更していただいて問題ありません。

このコードで最大表示数が4となりました。PCの場合は、変化はありません。ですが、Tabletは3カラム表示ままなので、1記事だけ改行されてしまう状態です。
これを次項のCSSで修正していきましょう。

CSS（style.css）

/* 関連記事を4列表示にする（画面幅600px以上の場合） */
@media (min-width: 600px) {
  /* 関連記事のリストアイテムの幅を4等分に設定 */
  .-related .p-postList__item {
    width: calc(100% / 4); /* コンテナ全体の幅を4分割 */
  }
}

このコードで前項と合わせて、目標としていた表示の状態になります。

今回のカスタマイズは記事数が4未満の場合、レイアウトが不自然になる可能性があります。
4記事以上あるタイミングでカスタマイズを施すか、CSSを再度調整する必要があります。