基本の使い方

「管理画面 > 外観 > カスタマイズ > Lightning Charm ショートコード設定」からギャラリーショートコードの設定をします。

ギャラリーショートコード設定 を詳しく見る

ギャラリーを表示したいページや投稿で「メディアを追加」から画像を挿入し、
下の画像のように [charm-gallery][/charm-gallery] というショートコードではさみます。

 <div class="charm_gallery thumb_after" data-max_slides="5"><div class="main_photo" style="padding-bottom:47.2972972973% ;"></div><ul class="pages_bxslider"></ul></div> で画像をはさむ

[charm-gallery][/charm-gallery] で画像をはさむ

管理画面での設定が反映されたギャラリーが表示されます。

表示例

サムネイルの位置を個別に設定する

サムネイルの位置をメイン画像上か下のどちらかを設定するには、以下のようにショートコードを記入します。

サムネイルを上に表示する

thumb_pos=”before” というオプション値をショートコードへ記入し、画像をはさみ込みます。

[charm-gallery thumb_pos="before"][/charm-gallery]

表示例

サムネイルを下に表示する

thumb_pos=”after” というオプション値をショートコードへ記入、画像をはさみ込みます。

[charm-gallery thumb_pos="after"][/charm-gallery]

表示例

メイン画像の高さを個別に設定する

メイン画像の高さを各ギャラリーごとに設定したい場合は、main_height=”設定したい高さ” というオプション値をショードコードに記入します。

このサンプルの画像の高さが 425 px なのでその高さを設定する場合以下のように記入し、画像をはさみ込みます。

[charm-gallery main_height="425"][/charm-gallery]

表示例

サムネイルの表示枚数を個別に設定する

表示するサムネイルの枚数を個別に変更する場合は、max_slide=”表示枚数” というオプション値をショートコードに記入します。3〜6までの数値が設定できます。

[charm-gallery max_slide="3"][/charm-gallery]

表示例