SWELLでエリアの画像・説明をドロップダウン表示する方法

SWELLはカテゴリー等にアイキャッチ画像やテキストを格納できます。

例えば47都道府県の情報であれば、ドロップダウンでの選択表示にすると省スペースでスマホでも表示しやすいです。

本記事では、公開用タクソノミーのタームに保存した画像と説明を、選択ボックスで切り替える独自ショートコードを作ります。

カスタムタクソノミーは独自の分類、そこに登録するエリア名はタームです。今回の例は47都道府県程度の件数を想定し、公開してよい画像と説明を最初に読み込み、選択したエリアだけ表示します。ターム数や画像が多い場合は、初期HTMLや画像の取得量にも注意してください。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELL│ドロップダウン選択から画像やテキストを表示するカスタマイズ

以下の修正版はAjax通信を使いません。取得エラー・空データ・複数配置を扱い、画像や説明がない項目にはその状態を表示します。

PHPを子テーマのfunctions.phpまたは専用のPHPスニペットへ登録します。記事にコードを掲載するだけではサイト上で有効になりません。上の参考表示は既存の旧実装で、下記修正版の動作確認結果ではありません。

カスタムタクソノミーの作成と情報の入力

Custom Post Type UIなどで、スラッグがareaのカスタムタクソノミーを使用する投稿タイプへ登録します。公開用（public）として設定した分類だけをこのコードでは表示します。

エリアのタームを追加します。この例では投稿未登録のタームも含め、名前の昇順で表示します。内部用の情報や非公開にしたい説明は登録しないでください。

各エリアの編集ページから説明とアイキャッチ画像を保存します。SWELL 2.19の保存ソースで画像IDのメタキーを照合しました。旧形式の画像URLが残る場合は、メディアライブラリから画像を選び直して保存してください。画像の代替テキストもメディア側で設定します。

functions.php

変更前のコードを控え、旧display_area_images_shortcodeとget_area_images_ajax、それらのショートコード登録とAjaxフックを停止してから置き換えます。同じショートコードを重複登録しないでください。

Code Snippetsの場合はPHPスニペットとして登録し、子テーマと二重に実行しないようにします。プラグインを使っても実行時エラーは防げません。検証環境で試し、元のコードへ戻せる状態にしてください。

以下、有料コンテンツです。