以前の記事では、AFFINGER７のスライドボックスをAFFINGER５で使われていた旧仕様に変更した上で、スライドボックスに「閉じる」ボタンを追加する方法を紹介しました。（詳しくはここをクリック） しかし、テーマ本来の仕様を変更しているため、今後のAFFINGERアップデートによって動作に影響が出る可能性がありました。
そこで、この方法を見直しました。 AFFINGER７のスライドボックスは基本的に標準仕様のままとし、「閉じる」ボタンを配置したスライドボックスだけを旧仕様に切り替えることで、「閉じる」動作を実現します。 この方法なら、通常のスライドボックスにはAFFINGER７の標準機能をそのまま使用でき、「閉じる」ボタンが必要なスライドボックスだけに変更を適用できます。
今回は、「閉じる」ボタンをPost Snippetsでショートコードを作成しこの「閉じる」ボタンがスライドボックスに配置された時に、旧仕様に切替えるScriptを実装する手順を紹介します。
AFFINGER7標準のスライドボックスと「閉じる」ボタン付きの違い
下に、【標準】スライドボックス と【閉じるボタン付き】スライドボックスのサンプルを示します。 動作の違いを確認してください。
【標準】スライドボックス
「閉じる」ボタン付
【閉じるボタン付き】スライドボックスの実装手順
手順
1 「閉じる」ボタンのショートコード作成
ショートコード化するために、Post Snippetsプラグインを使います。 Post Snippetsの設定画面は以下の通りで、番号を振った部分に従って説明します。（Post Snippetsのバージョンは3.1.6での説明になります）
（Post Snippetsの設定画面）
【番号①】ショートコードのタイトル名：slide_box「閉じる」ボタン：
【番号②】Scriptコードエリアに 「閉じる」ボタンとjQuey（下記）をコピペします。
・{ }で囲われている文字列が変数になります。
・「閉じる」ボタンは、AFFINGER７のカスタムボタン（ノーマル）・パーツを利用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!-- 閉じるボタン --> [st-mybutton class="{anchor} slidebox-close" url="#!" title="{title}" \ rel="" webicon="st-svg-times" target="" color="#424242" bgcolor="#f4fbff"\ bgcolor_top="" bordercolor="#CCC" borderwidth="1" borderradius="5" \ fontsize="90" fontweight="bold" width="文字サイズ" webicon_after="" \ shadow="#523634" ref="" beacon=""] <script> /* * スライドボックスに「閉じる」ボタンを付加するショートコード * 閉じるボタンの無いスライドボックスはAFFINGER７仕様のスライドボックスになる。 */ jQuery(function($) { // 閉じるボタンをクリック $('.st-slidebox-c .{anchor}').on('click', function(e) { e.preventDefault(); // スライドボタンに一意のID（btn1、btn2……）を付加 $("p.st-btn-open:contains('{slide_btn_name}')") .attr('id', '{anchor}'); // 親のスライドボックスを閉じる $(this).closest('.st-slidebox').slideToggle(); // 「+ クリックして下さい」の位置までスクロール var $anchor = $('#{anchor}'); if ($anchor.length) { $('html, body').animate({ scrollTop: $anchor.offset().top - 10 }, 'swing'); } // URLに「#!」を付加させない return false; }); }); </script>し |
下の様に、「閉じる」ボタンがある場合で「+ クリックして下さい」に枠を付けたい時は、以下のCSSを付加します。
+ クリックして下さい
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div.st-slidebox-c:has(.slidebox-close) .st-btn-open { padding: 0.5em 1em; font-weight: bold; color: navy!important; background: #f4fbff; border: solid 1px #6091d3; border-radius: 5px; } </style> |
【番号③】Variables欄： {変数}をカンマ区切りで指定（下記）
【番号④】Shortcode： レ点 を付けます。
【番号⑤】PHP： 空欄（レ点不要）
【番号⑥】Descriptionエリア： 注意書きと簡単な説明を記載
● slide_btn_name=変数は、スライドボックスに付けた名前をコピペする。● anchor=変数は、btn1から連番を付ける（重複不可）
● title=変数は「閉じる」ボタンの名前を変えることができます。
● スライドボックスは、個々を区別するため「text名」を重複しないユニークな名前にしておく。
手順
2 「閉じる」ボタンショートコードがスライドボックスに配置されたら旧仕様に切り替えるScriptの作成
このScriptは、WordPress管理画面から「外観」タブにある「テーマファイルエディタ」の AFFINGER7 Childで、st_wp_footer.jsを選択し、以下のコードをペーストするか、若しくは、Wpcodeプラグインなどを使って、サイト全体のfooterに配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// Postsnippetsの[slide_box「閉じる」ボタン:]ショートコードと連携 // スライドボックスに「閉じる」ボタンの有無を判別、有れば旧仕様のスライドボックスが適用されるscript jQuery(function($) { /** 閉じるボタンを含むスライドボックスだけを取得 */ $('.st-slidebox-c:has(.slidebox-close)').each(function() { var $slidebox = $(this); /** このスライドボックスの開くボタン */ var $openButton = $slidebox.find('[data-st-slidebox-toggle]'); if (!$openButton.length) { return; } /** AFFINGER7のSlideBoxクリック処理を解除 */ $openButton.off('click'); /** AFFINGER5方式のslideToggle() */ $openButton.on('click', function() { $(this) .next('.st-slidebox') .stop(true, true) .slideToggle(); $(this).addClass('st-btn-open-click'); }); }); }); |
スライドボックス内に「閉じる」ボタンを実際に配置する方法
旧エディタの場合
旧エディタ（クラシックエディタ）では、以下のようにレイアウトします。
旧エディタの場合 [st-slidebox webicon="" text="+ クリックして下さい" myclass="" bgcolor="" color="#1a1a1a" margin_bottom="20"] コンテンツ…… コンテンツ…… コンテンツ…… コンテンツ…… [slide_box「閉じる」ボタン： slide_btn_name="スライドボックスtext名をコピペ" anchor="btn1" title="「閉じる」ボタンの名前"] [/st-slidebox]注意ポイント：
● スライドボックスは、個々を区別するため、text=「text名」を重複しないユニークな名前にしておく。
●【st-slidebox の text="+ クリックして下さい"のtext名をコピーして、【slide_box「閉じる」ボタン：のslide_btn_name=""にペーストして同じ文字列にします。 これを目印として、「閉じる」ボタンが押下された時に、この位置までスクロールUPしスライドボックスが閉じる様になります。
● 複数の「閉じる」ボタンが同一ページにある場合は、anchor="btn1"のbtn1を重複しない様に一位の名前にします。
ブロックエディタの場合
AFFINGER：スライドのブロックを選択し、下のように、「閉じる」ボタンショートコードを配置します。
Post Snippetsプラグインのブロックから、「閉じる」ボタンショートコードを選択する方法がありますが、UI的に問題の点があり、ショートコードブロックで直接記述する方法が現在のところオススメします。 また、WordPressのパターンに非同期で作成しこのパターンを呼び出すことで簡単にスライドボックスに配置できます。
