SWELL標準の画像枠を超えて6枚以上を並べたい場合は、独自の表示部分を用意する方法があります。この記事では子テーマのメインビジュアル用テンプレートを差し替えます。
以下は6枚の画像IDを指定する横スクロール型の実装例です。自動再生・無限ループ・ページネーションは含めず、前後ボタンと通常の横スクロールで移動します。
導入前に子テーマと設定をバックアップし、まず検証環境で試してください。
新しい例はSwiperを読み込まず、SWELL標準スライダーとは別のクラスで表示します。画像の追加は可能ですが、枚数と画像サイズに応じた読み込み負荷を確認してください。
掲載画像は2025年10月の旧実装と2026年10月の設定パネル参照記録です。以下の新しい実装の表示確認ではありません。新コードはローカルSWELL 2.19.0のテンプレート読込経路を照合した例で、実SWELLでの表示・操作・Pjax・キャッシュ併用は未検証です。
SWELLのメインビジュアルのスライダーを6枚以上表示する方法
まずSWELLの親テーマの設定のコードを上書きしても、SWELLのアップデートで上書きされて元に戻ってしまいます。
子テーマ側へ同じ相対パスのファイルを置き、変更を管理します。親テーマ更新後はテンプレート仕様との差分を確認してください。
メインビジュアルをONにし、子テーマを準備する
カスタマイザーでメインビジュアルをONにし、標準の1枚画像を指定しておきます。独自画像を取得できなかったときの戻り先にもなります。
高さ0の設定は不要です。旧コードを使っていた場合は、旧スニペットを停止して高さ設定を元に戻してから試します。
子テーマのメインビジュアル用テンプレートを作る
子テーマ内のparts/top/main_visual.phpを用意します。同名ファイルが既にある場合は上書き前に内容を照合し、別名で原本を保管してください。
- is_front_page()に該当するページだけ独自表示
- HTML全体の正規表現置換を使わずテンプレートを差し替える
- メディアライブラリの画像IDから6枚を出力する
- 自動再生なしの前後ボタンと横スクロールを使う
この記事だけ読みたい方は単品購入、ほかの有料記事も読みたい方は購読プランをご確認ください。
購読対象の記事・料金は、下のプラン案内で確認できます。
役に立った記事を、ブログやSNSで紹介しませんか？
紹介制度の対象記事・購読プランを購入した方は、codocで専用リンクと報酬条件を確認できます。
専用リンク経由で購入されると、設定された紹介報酬が発生します。
購読プランの紹介報酬は初回課金のみが対象です。
紹介時は、広告・PRであることが読者に分かるように明記してください。
