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

スポンサーリンク

 

WordPress・有料テーマのAffinger5にあるスライドボックスは、コンテンツの表示をトグル動作で展開したり閉じたりできて大変有用なのですが「閉じる」ボタンがありません。 

長いコンテンツの場合、特にスマホでは、そのスライドボックスを閉じるためには、スライドボックスの上部までスクロールしてトグルアクションを行わなければならずスライドボックスの最下段に「閉じる」ボタンがあれば良いのにと思っていました。

 
そこで今回、jQuery とPostSnippetsプラグインを併用して「閉じる」ボタンのショートコードを作成してみたところ、バグがあるかもしれませんが取り敢えず所定の動作を行うことが出来ましたので、その方法を紹介したいと思います。

 

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

先ず、スライドボックスの通常動作の場合と完成した「閉じる」ボタンを追加した場合のBefore /Afterの動作を確認してくみてださい。

Before:スライドボックス(通常)

+ クリックして下さい1

コンテンツ1

コンテンツ2

コンテンツ3

コンテンツ4

コンテンツ5

コンテンツ6

コンテンツ7

コンテンツ8

コンテンツ9

コンテンツ10

〜〜〜〜〜〜〜〜

スライドボックスを閉じるには、上段までスクロールして「+ クリックして下さい1」をクリックする必要があります。

After:「閉じる」ボタン付加

+ クリックして下さい2

コンテンツ1

コンテンツ2

コンテンツ3

コンテンツ4

コンテンツ5

コンテンツ6

コンテンツ7

コンテンツ8

コンテンツ9

これが、「閉じる」ボタン
↓↓

「閉じる」ボタン

〜〜〜〜〜〜〜〜

ボタンをクリックすれば一発でスライドボックスが閉じます。

 

スライドボックスについて(事前調査)

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>

動作説明・ポイント

  • jQuery部分では、st-btn-openでclass指定された要素がクリックされる毎に、st-slideboxでclass指定された要素(つまりコンテンツエリア部分)がslideToggle();によって下記のHTMLコードがトグル的に非表示と表示を繰り返す様に書換えられます。
  • HTML部分では、jQueryプログラムの実行によって、HTMLコードの <div class="st-slidebox" style="display: none;"> と <div class="st-slidebox" style="display: block;"> がトグル動作で書換えられ、noneで非表示blockで表示を繰り返します。

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

基本的な考え方

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

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

(PostSnippetsの設定画面)

 

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

のエリア: jQueryとHTMLコード(下記)を記載しました。

コードの説明・ポイント

  1. <script>で囲まれた部分が、jQueryコードになります。 コードの意味については、夫々の行にコメントを付記していますのでご参照ください。
  2. 「閉じる」ボタンは、AFFINGER5のカスタムボタン > 角マルボタン を利用しています。注意すべきこととして、url="#"(または#を削除)のままですと、クリックされるとページTopに飛んでしまいます。 これを防止するためurl="#ダミー"にしています。 この副作用として、このボタンを押すと、ブラウザのURL窓にURLの最後尾に#ダミーが表示されてしまうので、jQueryのFunctionの最後に return false; の行を付加して防止しています。
  3. <style>で囲まれた部分がCSSで、「+ クリックして下さい」の先頭部分に囲み枠を付けるためのCSSです。 今まで通りのスライドボックススタイルのままで良ければ、このCSSは不要です。

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

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]

注意ポイント(ページ内が対象)

  • スライドボックス名(text)は、他のスライドボックスと区別するため重複しないユニークな名前(任意の文字列)にすること。
  • slide_btn_nameスライドボックス名(text)と関連付けるため同じ(コピペ)名前にすること。
    (上のshortcode画面で表示されているアンダーライン部分 2箇所を注目ください)
  • 「閉じる」ボタンの anchor="btn1" は、他の「閉じる」ボタンと競合させないためbtn番号を連番(重複しない任意の文字列で可)にして重複させないようにすること。

 

「閉じる」ボタンの事例紹介

実際に投稿記事に「閉じる」ボタンを実装した事例をご覧ください。

記事中の「+ 歪率の測定方法」と「+ F特の測定方法」を参照してください。

 

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

 

スポンサーリンク

 

関連記事(一部広告含む)

 

 

Blog オススメ記事(コンテンツ選択)

ボタンを押してコンテンツ選択

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WebデザインやiPhone・PCなど

ツールと閑話ブログ

スポンサーリンク

© 2021 ハイレコのブログ Powered by AFFINGER5