【STINGER5】スクロールするとサイドバーウィジットが消える現象の改善方法ー直し方がとても分かりにくいので、なるべくシンプルにまとめてみたー

“スクロールするとサイドバーウィジットが消えるっっっっ！！！”

僕はWordpressユーザーの中でも大多数を占めるSTINERをテンプレートとして使わせてもらっている。CSS等の言語については、お世辞にも「とても詳しい」と言えるようなレベルではなく、せいぜい「少しだけ読める」程度。

時々、自分のブログのトップページで記事一覧をパソコンの画面で眺めていた時に気付いた。

“あれっ？！少しスクロールすると右側のサイドバーウィジットが突然消える！”

STINGER5の仕様なのかなと考えながら、念のため調べてみたら、他にも同じ現象で困っている方を発見。ただ、ありがたいことに、この現象の解決策まで紹介してくれていたので、参考にさせていただいた。

今回は、僕がこの現象を実際に解決するまでの流れをわかりやすくまとめて紹介したい。

「scroll.js」を探せ

サイドバーウィジット消失現象を解決するために参考にさせていただいたブログ「NEW LIFE LOG」の【STINGER5でサイドバーが途中で消える現象を解消する方法】がとても参考になった。

「NEW LIFE LOG」

【STINGER5でサイドバーが途中で消える現象を解消する方法】

その中で、犯人はどうやら「scroll.js」というJava Scriptファイルとのこと。

僕は親テーマに【stinger5ver20141011】を使用しているため、FFFTPアプリを起動して、以下のフォルダに「scroll.js」があることを確認。

Cyberduckを起動→《 wp-content > themes > stinger5ver20141011 > js>scroll.js 》

ここまで見つけたらあと一歩。

エディタソフトを起動してコメントアウト

“コメントアウトとは何ぞ？”

僕は一瞬何のことを指しているのか疑問しか浮かばなかったが、調べてみるとどうやらJava Scriptの中にあるコードの始めに【　/*　】、コードの最後に【　*/　】を記述することで、/* */で囲まれたコードが全て「適用外となる」ようなコードを記述することだそう。

そこで、先ほど見つけた「scroll.js」をエディタソフトで開いて、コメントアウトの処理を実行する。

右クリック＞エディタで編集＞TextEditでscroll.jsを開くと、次のような画面になる。

【広告のフロート】部分にある/*〜〜〜*/を以下の手順通り変更し、上書き保存。

手順①【　*/　】を選択して切り取り

手順②一番下に【　*/　】を貼り付け

やるべき作業はこれだけ。ただし、主に子テーマを使ってカスタマイズしている方で、子テーマ内の「scrolls.jp」を変更しても正しく反映されない可能性が高い（実際僕は失敗した）。スクロール時のサイドバーウィジット消失現象を改善したいのなら、必ず親テーマにある「scrolls.jp」を丸ごと【コメントアウト】するようにしよう。

 改善されているか確認しておこう

それでは、上の手順を全て終えたら、きちんと反映さているか確認しよう。

これで問題なく右側にウィジットが反映されて、スクロールしても問題なく表示されたままとなった。初めのうちは、“STINGER5テンプレートの仕様なのかな？”なんて思っていたけど、要するにただのエラーだったということだろう。