wildhawk
WordPressのショートコードで
アコーディオンを設置し多くの情報を魅力的に表示させよう
アコーディオンを設置し多くの情報を魅力的に表示させよう
「Shortcodes Ultimate」でアコーディオンを設置しよう
WordPressの無料プラグイン「Shortcodes Ultimate」で簡単にアコーディオンを設置する手順を解説します。
こんな人にオススメ
WordPressのページで簡単にアコーディオンを設置したい
WordPressで情報をわかりやすいデザインで表現したい
情報をまとめて表示させるため、タイトルを一覧で表示し、詳細はクリックで簡単に表示させたい
ページ内の表示スペースを有効に使うアコーディオンは魅力的な機能
そんなアコーディオンを無料テーマ「Customizr」を使って簡単に設置しよう
アコーディオンを設置するショートコードは、エディタのHTMLに、以下の様なコードを入力することで、実行することが可能です。
[su_accordion]
[su_spoiler title="一番のいちご" open="yes" style="fancy"]
<img src="ichigo_01.jpg" width="33%" />
[/su_spoiler]
[su_spoiler title="二番のいちご" style="fancy"]
<img src="ichigo_02.jpg" width="33%" />
[/su_spoiler]
[su_spoiler title="三番のいちご" style="fancy"]
<img src="ichigo_03.jpg" width="33%" />
[/su_spoiler]
[/su_accordion]
[su_spoiler title="一番のいちご" open="yes" style="fancy"]
<img src="ichigo_01.jpg" width="33%" />
[/su_spoiler]
[su_spoiler title="二番のいちご" style="fancy"]
<img src="ichigo_02.jpg" width="33%" />
[/su_spoiler]
[su_spoiler title="三番のいちご" style="fancy"]
<img src="ichigo_03.jpg" width="33%" />
[/su_spoiler]
[/su_accordion]
一番のいちご
二番のいちご
三番のいちご
［su_accordion］
| class | カラム分けのclass属性を設定 |
［su_spoiler］
| title | アコーディオンのタイトルを入力 Default value: Spoiler title |
| open | はじめから開いた状態にするか 設定値: yes, no Default value: no |
| style | アコーディオンのスタイルを選択 設定値: default fancy simple carbon sharp grid wood fabric modern-dark (Modern: Dark) modern-light (Modern: Light) modern-violet (Modern: Violet) modern-orange (Modern: Orange) glass-dark (Glass: Dark) glass-light (Glass: Light) glass-blue (Glass: Blue) glass-green (Glass: Green) glass-gold (Glass: Gold) Default value: default |
| icon | アコーディオンのアイコンを選択 設定値: plus plus-circle (Plus circle) plus-square-1 (Plus square 1) plus-square-2 (Plus square 2) arrow arrow-circle-1 (Arrow circle 1) arrow-circle-2 (Arrow circle 2) chevron chevron-circle (Chevron circle) caret caret-square (Caret square) folder-1 (Folder 1) folder-2 (Folder 2) Default value: plus |
| anchor | ページ内アンカー（#のあるURL）の入力 |
| anchor_in_url | スパイラーを開いた際、アンカーで設定したURLに遷移させるか 設定値: yes, no Default value: no |
| scroll_offset | 上部のオフセットを入力 設定値: 0〜2000 Default value: 0 |
| class | 列のclass属性を設定 |
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください