AFFINGER5のスライドボックスに「閉じる」ボタンを追加する（PostSnippets使用）

 

 

Affinger5のスライドボックス動作（「閉じる」ボタン追加　前と後）

先ず、スライドボックスの通常動作の場合と完成した「閉じる」ボタンを追加した場合のBefore /Afterの比較画像です。

 

スライドボックスについて（事前調査）

AFFINGER5のスライドボックスを使用するには、Wordpressのビジュアルエディタから、AFFINGER5の「タグ」ボタンをクリックして 「ボックスデザイン」 ＞ 「スライドボックス」を選択すると以下の青字で示されるショートコードがビジュアルエディタに挿入されます。

 shortcode
[st-slidebox fontawesome="" text="+ クリックして下さい" bgcolor="" 
color="#1a1a1a" margin_bottom="20"]
コンテンツエリア
〜〜
コンテンツエリア
[/st-slidebox]

【スライドボックス】のショートコードで挟まれた緑文字のコンテンツエリアに、必要なコンテンツを記入すると、ブラウザ上で前記の様に、コンテンツがトグル開閉するスライドボックス（通常）が実現します。

 

では、どの様にトグル開閉が実現されているか？Google Chromeブラウザの「検証」から「スライドボックス」に関係するjQueryとHTMLを調べたのが、以下の内容です。

 command
＜jQuery部分＞
<script>jQuery(function(){
jQuery('.st-btn-open').click(function(){
jQuery(this).next('.st-slidebox').stop(true, true).slideToggle();
jQuery(this).addClass('st-btn-open-click');
});
});
</script>

＜HTML部分＞
<div class="st-slidebox-c" style="margin-bottom:20px;">
<p class="st-btn-open st-btn-open-click" style="color:#1a1a1a;">+ クリックして下さい</p>
<div class="st-slidebox" style="display: none;">
<p>コンテンツエリア</p>
</div>
</div>

PostSnippetsを使った「閉じる」ボタンのショートコード作成（方法）

ショートコード化するために、PostSnippetsプラグインを使います。　PostSnippetsの設定画面は以下の通りで、番号を振った部分に従って説明します。

 

ショートコードのタイトル： 「slide_box「閉じる」ボタン：」にしました。

のエリア： jQueryとHTMLコード（下記）を記載しました。

のエリア： 変数のデフォルトとして、下記の様に記載しました。

slide_btn_name=スライドボックスTex名をコピペ,anchor=btn1,title=「閉じる」ボタンの名前

はショートコードにしますので、レ点 を付けます。

はレ点記載不要です。

のエリア：注意書きと簡単な説明を合わせて、下記の様に記載しました。

①複数スライドボックスを区別するため「Tex名」を重複しないユニークな名前にしておく。
②slide_btn_name変数は、スライドボックスに付けたユニークな名前をコピペする。　
③anchor変数は、btn1から連番を付ける（重複不可）

 

以上で、PostSnippetsによる「閉じる」ボタン・ショートコードの作成設定が完了しました。
ビジュアルエディタで、PostSnippetsボタンをクリックして「slide_box「閉じる」ボタン：」を選択すれば、完成した赤字で示されるショートコードがビジュアルエディタに挿入されます。

 完成したショートコード
[slide_box「閉じる」ボタン： slide_btn_name="スライドボックスTex名をコピペ" anchor="btn1" title="「閉じる」ボタンの名前"]

 

スライドボックスの「閉じる」ボタン・ショートコードの配置方法

以下の様に、【スライドボックス】のショートコードで挟まれたコンテンツエリアの後段に、部品としてショートコード化した【「閉じる」ボタン】を配置します。

 shortcode
[st-slidebox fontawesome="" text="+ クリックして下さいABC" bgcolor="" color="#1a1a1a" margin_bottom="20"]
コンテンツ
〜
コンテンツ
コンテンツ
[slide_box「閉じる」ボタン： slide_btn_name="+ クリックして下さいABC" anchor="btn1" title="「閉じる」ボタンの名前"]
[/st-slidebox]

 

以上、AFFINGER5のスライドボックスに「閉じる」ボタンを追加する方法の紹介でした。　AFFINGER5テーマをお使いの方で、この「閉じる」ボタンが気に入って頂ければ、PostSnippetsの設定部分をコピペしてお使いください。　また、Wordpressユーザで、コンテンツのアコーディオン（開閉）動作を行いたいと思っている方にも参考になれば幸いです。