SWELLの記事下関連記事の数を8→4にする
TOC
SWELLの記事下関連記事の表示数
SWELLの記事下に表示される関連記事の数は下記の通りです。
- pcの場合 →4カラム、2列の8個
- tabletの場合 →3カラム、2列の6個
- spの場合 →2カラム、2列の4個
これを以下のように変更します。
- pcの場合 →4カラム、1列の4個
- tabletの場合 →4カラム、1列の4個
- spの場合 →2カラム、2列の4個
カスタイマイズ方法
functions.php
function example01(){
return 4;
}
add_filter( 'swell_related_post_maxnum' , 'example01' );これで最大表示数が４になりました。
pcの場合もともと4カラムなので問題ありませんが、tabletの場合は3カラムなので1個だけ改行されてしまいますのでこれをcssで修正します。
css
/* 関連記事を4列表示にする */
@media (min-width: 600px) {
.-related .p-postList__item{
width: calc(100% / 4);
}
}- pcの場合 →4カラム、1列の4個
- tabletの場合 →4カラム、1列の4個
- spの場合 →2カラム、2列の4個
これで理想の表示数となりました。
＼ SWELLのカスタマイズ ／
WordPressテーマ「SWELL」を
使用したカスタマイズ事例集
