AFFINGERの「スライドボックス」は、AFFINGER６アップデートに移行後、仕様が変更されました。 このため以前の記事で紹介したスライドボックス用「閉じる」ボタン・ショートコード（詳しくはここをクリック）が使えません。
そこで、スライドボックス用「閉じる」が使用できる様にAFFINGER５仕様のスライドボックスに戻す方法を紹介します。 なお、本記事は2026年8月20日に全面的にリライトしました。
こちらをご覧ください❗️
当記事は、テーマ本来の仕様を変更しているため、今後のAFFINGERアップデートによって動作に影響が出る可能性があります。 この改善ため、当記事から更にアップデートしましたので、この記事をご覧ください。
-
-
UpdateAFFINGER７のスライドボックスに「閉じる」ボタンを追加｜Post Snippetsで実装
以前の記事では、AFFINGER７のスライドボックスをAFFINGER５で使われていた旧仕様に変更した上で、スライドボックスに「閉じる」ボタンを追加する方法を紹介しました。（詳しくはここをクリック） ...
新旧スライドボックスの違い
AFFINGER５からアップデートされ たAFFINGER６以降「スライドボックス」の仕様が変更されました。
仕様の違い
- AFFINGER６、７（新仕様）
「スライドボックス」のタイトルをクリックするとタイトル名が「閉じる」に切り替り内包しているコンテンツが展開します。 次に「閉じる」をクリックすることでコンテンツが非表示になると共に、タイトル名が元に戻る様になりました。 - AFFINGER５（旧仕様）
タイトル表示をクリックしてもタイトル名は変わらずクリックする度に内包のコンテンツが表示、非表示を繰り返すトグル動作を行っていました。
旧スライドボックス（AFFINGER５仕様）に戻す手順
スライドボックスのjQuery script コードは st-richjs.phpファイルに記述されています。 AFFINGERがアップデートされるとこのコードが上書きされてしまうので、子テーマにst-richjs.phpファイルをコピペして、スライドボックスに関係するコードを旧仕様に書き換える方法もありますが、将来的に見るとAFFINGERのアップデートに対して万全とは言い切れません。
そこで、WordPress管理画面から「外観」タブにある「テーマファイルエディタ」の AFFINGER7 Childで、st_wp_footer.jsを選択し、以下のコードをペーストすることで、旧スライドボックスに戻すことができます。 ５行目移行が、旧スライドボックス仕様のコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
jQuery(function($) { //AFFINGER7のSlideBoxクリック処理を解除 $('[data-st-slidebox-toggle]').off('click'); //AFFINGER5方式のslideToggle()を実行 $('.st-btn-open').on('click', function() { $(this).next('.st-slidebox').stop(true, true).slideToggle(); $(this).addClass('st-btn-open-click'); }); }); |
「閉じる」ボタンを配置してみました。
旧仕様のスライドボックスに戻したので、スライドボックス用「閉じる」ボタン・ショートコードが使える様になりました。
shortcode [st-slidebox webicon="" text="+ クリックして下さい" myclass="" bgcolor="" color="#1a1a1a" margin_bottom="20"] コンテンツ コンテンツ 〜 コンテンツ [slide_box「閉じる」ボタン： slide_btn_name="スライドボックスTex名をコピペ" anchor="btn1" title="「閉じる」ボタンの名前"] [/st-slidebox]
