【SWELL】投稿リストブロックにページャー（もっと見るボタン）を設定するカスタマイズ方法

2023年4月3日 08:00

WordPressテーマSWELLのカスタマイズ作業メモです。

固定ページに新着情報を表示させるときに便利な投稿リストブロックのカスタマイズです。投稿リストブロックは、指定の数だけ投稿を表示させることができますが、その他の記事へのページャー的な要素はありません。

新着記事として3件。

その下に「もっと見る」ボタンを設置し、「もっと見る」をクリックするとページ移動せずに、その他の記事を表示させるみたいなカスタマイズを作ってみました↓

サンプルサイトの構成

カスタマイズを実装したサンプルサイトの構成についてです。

WordPress、テーマともに記事執筆時に利用可能な最新バージョンです。

テンプレートファイルを直接変更しない方式です。

テーマフォルダ内のテンプレートファイルに編集を加えてしまうと、テーマのアップデートで設定が上書きされてしまいます。

あとあと面倒なことにならないよう、テーマのアップデートも考慮した方式でカスタマイズしました。

作業にかかる時間はおよそ10分です。

基本的にコピペする方法なので、それほど難しくありません。

「ボタンを、おしゃれにしたいぜ！」みたいな人は、多少CSSのスキルがあると望ましいです。

その他

自分用に作ったコードです。フロント側では「もっと見る」を押すと指定の動作をします↓

SWELLの投稿リストブロックをカスタマイズしてみた。

「もっと見る」をクリックすると、ページ推移なしで該当の投稿が全て表示されるボタン。 pic.twitter.com/ILyZjRDzXM
— かんた🌊SWELLマニア (@swell_mania) April 2, 2023

エディター側では「もっと見る」ボタンを押しても特に反応はしません。エディター部分まで対応させる場合、テンプレートファイルを編集する必要があり、アップデートが面倒になるためにあえてこのままにしてあります。

4,847字 / 8画像

¥ 7,980

この記事が気に入ったらサポートをしてみませんか？