広告 Affinger・改善

Affinger6のスライドボックスを旧仕様に戻して「閉じる」ボタンを復活させてみました

スポンサーリンク

　

Affinger6の「スライドボックス」の仕様をAffinger5と同じ仕様(jQuery script )に戻し、以前の記事で紹介したスライドボックス用「閉じる」ボタン・ショートコードが使える様にしてみました。

復活させた「閉じる」ボタンを見る !!（ここをクリックして移動）

 

スポンサーリンク

　

　

スライドボックスの仕様について

Affinger5(wordpress有料テーマ)からアップデートされ たAffinger6は「スライドボックス」の仕様が変更されました。　「スライドボックス」のタイトルをクリックするとタイトル名が「閉じる」に切り替り内包しているコンテンツが展開します。　次に「閉じる」をクリックすることでコンテンツが非表示になると共に、タイトル名が元に戻る様になりました。　タイトル名が「閉じる」に変わるので ”何に対して「閉じる」のか？” 不自然な感じがします。　一方のAffinger5（旧仕様）では、タイトル表示をクリックしてもタイトル名は変わらずクリックする度に内包のコンテンツが表示、非表示を繰り返すトグル動作を行っていました。

オペレータ
オペレータ
この仕様のどちらにしても、ブログの閲覧者から見てその差は感じられず スライドボックスの使い勝手に欠けるように感じますね。

Affinger5テーマの時は、使い勝手(分かり易さ)改善目的で、スライドボックス用の「閉じる」ボタン・ショートコードを独自に作成し、スライドボックスの最下段に「閉じる」ボタンを配置し読み終えたら閉じるようにしていました。

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

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

ところが、Affinger6へのアップデートに伴いスライドボックス仕様（jQuery script ）が変更になったため残念ながら独自に作成したスライドボックス用「閉じる」ボタンが使え無くなりました。　仕方なくスライドボックス用「閉じる」ボタンを無効にしていました。

 

もう一度再考した結果、それならAffinger5テーマのスライドボックスに戻すことができれば、スライドボックス用「閉じる」ボタンが使えるようになるのではないかと考えました。　次章はその手順になります。
オペレータ
オペレータ

 

スライドボックスを旧仕様に戻す手順

step
1st-richjs.phpファイルを子テーマフォルダにコピペする

調べたところ、スライドボックスのjQuery script コードは st-richjs.phpファイルに記述されていました。　st-richjs.phpファイルは、下に示すWordpressフォルダ構成中のaffinger（親テーマ）フォルダに保存されています。

FileZillaなどのFTPアプリを使い affinger（親テーマ）フォルダにある「st-richjs.php」ファイルを丸ごと affinger-child （子テーマ）フォルダの中にコピーアンドペーストします。　

（備考）
st-richjs.phpファイルをaffinger-childフォルダ（子テーマ）にコピペする意味は、st-richjs.phpファイルに記述されている新仕様のスライドボックス jQuery script を次のステップで説明する、旧仕様のjQuery script に書き換えるためです。　

ブラウザからブログが呼び出されると、WordPressは子テーマを優先してブログを構成します。　もし、子テーマのst-richjs.phpが旧仕様のスライドボックスに書き換えられていると、子テーマのst-richjs.php が優先され旧仕様のスライドボックスになります。（親テーマに保存されているst-richjs.phpは無視されます）　

 

Wordpressフォルダ構成

blank

  • Affinger6：親テーマはaffingerフォルダーで、子テーマはaffinger-child です。
  • Affinger5：親テーマはaffinger5フォルダーで、子テーマはaffinger5-child です。

 

step
2スライドボックス jQuery script を旧仕様に書き換える

affinger-child（子テーマ）フォルダにペーストしたst-richjs.phpのスライドボックスjQuery script を旧仕様スライドボックスに書き換える手順です。

  • 旧仕様スライドボックス jQuery scriptをコピー

    WordPressの管理画面から 外観 ＞ テーマファイルエディタ に入ります。　右上にある「編集するテーマを選択」のからドロップダウンリスト中の「WING-AFFINGER5」を選択して「選択」ボタンをクリックします。

    テーマファイルに表示されているファイルの中から st-richjs.php を見つけてクリックすると、 st-richjs.php のコードが表示され編集できる様になります。

    97行目の<script>〜104行目の</script>が旧仕様のスライドボックスの jQuery script コード部分になりますのでこの行全てをコピーします。　（念の為、テキストエディタに一時的に貼り付けておきます。）

     WING-AFFINGER5/st-richjs.php
<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>

  • affinger-childフォルダ（子テーマ）にある st-richjs.php のjQuery script を旧仕様に書き換える

    先程と同じ様に、右上にある「編集するテーマを選択」のからドロップダウンリスト中の「AFFINGER-Child」を選択して「選択」ボタンをクリックします。

    テーマファイルに表示されているファイルの中から st-richjs.php を見つけてクリックすると、 st-richjs.php のコードが表示され編集できる様になります。

    書き換える対象コードは、101行目の<script>〜217行目の</script>がスライドボックスの jQuery script コード部分になります。

     affinger-child/st-richjs.php
<script>
(function (window, document, $, undefined) {
'use strict';
var SlideBox = (function () {
/**
* @param $element
*
* @constructor
*/
function SlideBox($element) {
this._$element = $element;
}
// 中略 // 
return slideBoxes;
}
$(on_ready);
}(window, window.document, jQuery));
</script>

    101行目の<script>〜217行目の</script>を選択したら、先程コピーしていた旧仕様のスライドボックスの jQuery script コードをペーストして書き換えます。　最後に「ファイルを更新」ボタンをクリックして完了です。


  • スライドボックスの「閉じる」ボタンの復活

    前述した「閉じる」ボタンを無効にする方法で、PostSnippetsに追記した「コメントアウト」囲みショートコード（［st-out]〜[/st-out］）の2つを削除すれば「閉じる」ボタンが復活されます。


注意頂きたいこと

Affinger6が今後アップデートされ st-richjs.phpに関わる（スライドボックス以外の）内容が更新された場合、再度コピペして同様の作業が必要になる場合もあり得ますので注意してください。　また、テーマファイルの書き着替えは、個々の責任になりますことをご承知おきください。　

尚、子テーマにコピペした st-richjs.phpファイルを削減すれば親テーマに保存されているst-richjs.phpファイルが有効になり、元の仕様に簡単に戻すことが出来ます。

 

参考：「閉じる」ボタンのショートコード作成（方法）

オペレータ
オペレータ
以前の記事で紹介していますが、参考として、再度 PostSnippetsを使った「閉じる」ボタンのショートコード作成（方法）を以下に示しておきますね。　

下のスライドボックスの中に復活した「閉じる」ボタンのショートコードを配置しています。　読み終わったら最下段の 「閉じる」ボタンをクリックすればスライドボックスが閉じます。

 

以上、「Affinger6のスライドボックスを旧仕様に戻して「閉じる」ボタンを復活させてみる」でした。　出来ればAffinger6純正の「閉じる」ボタン付きスライドボックスがアップデートされることを望んでいます。

　

スポンサーリンク

　


関連記事 (Tag related)

スポンサーリンク

　

t