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

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

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

新着記事として3件。

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

【SWELL】投稿リストブロック

→サンプルサイトを開く

サンプルサイトの構成

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

【バージョン】

• WordPress：6.2

• SWELL： 2.7.4.1

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

カスタマイズの概要

内容

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

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

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

所要時間

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

難易度

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

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

その他

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

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

「もっと見る」をクリックすると、ページ推移なしで該当の投稿が全て表示されるボタン。 pic.twitter.com/ILyZjRDzXM

— かんた🌊SWELLマニア (@swell_mania) April 2, 2023

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

更新履歴

• 2023年4月　記事公開