コピペだけでOK！STINGER 8でサイドバーが追尾せず変な位置で固定される問題の解決策

頭を抱えて困った様子の女性

現在DigiLocusではWordPressの無料テーマSTINGER 8を使用しています。

STINGERシリーズは国内でトップクラスの人気を誇るテーマで、筆者はSTINGER 3の頃から愛用していて非常に気に入っているのですが、昔から気になっている点もあります。

サイドバーにはスクロール広告用に追尾エリアが設けられていますが、ここにバナー画像のコードを記述すると一部が見切れてしまう位置で固定されてしまい、正常に追尾しなくなることがあるんですよね。

今まではそういったバナーを避けて使用していましたが、せっかく最新のSTINGER 8を使い始めたことですし、この問題の解決に挑戦してみました。

プラグイン不要、コピペするだけで簡単に修正できるコードを掲載してあるので、STINGER 8で同様の問題に悩んでいる方がいましたらぜひ利用してください。

サイドバーの追尾が正常に機能しない

サイドバーの追尾エリアにバナー画像を貼ると変な位置で固定されてしまったり、酷い場合だと画面から消えてしまうことがあるんですよね。

この問題について今回初めてググってみたのですが、どうやらこの事象はscroll.jsというSTINGER 8に含まれているJavaScriptファイルと、jQueryと呼ばれるJavaScriptライブラリが引き金になって起きているようです。

本来jQueryは画面が準備出来たよ！っていうタイミングで実行されるので自分のサイト内で完結する場合は問題ないことが多いです。

ですが、広告とかSNS連携ボタンというのは、同じくらいのタイミングで外部サイトにファイル取りに行って、それから作り始めます。

つまり「scroll.js」の初期処理が始まる時には、まだ広告等の準備が出来てないので、その高さ分だけズレたりします。

出典：【STINGER5】サイドバーのスクロール広告が消える！ズレる時の対処法と解説【WordPress】｜はぴすぷ

したがってこの問題を解決するためにはscroll.js周辺のファイルを修正してやる必要があります。

しかし筆者はJavaScriptなんてほとんど触ったことがないのでろくに書けません。そこでなるべく簡単にできそうな解決策を探してみました。

STINGER 8におけるスクロール問題の解決策

ぶっちゃけるとSTINGER 8向けの情報が少なく、簡単かつ完璧な解決策は見つかりませんでした。現在はSTINGER PLUS2やAFFINGER4などの派生テーマのほうが人気なのでしょうか…。。

そこで旧バージョンのSTINGER 5やSTINGER PLUS向けなどの記事も読み漁った結果、ざっくり4通りの解決策が見えてきました。

scroll.jsを削除する
追尾機能を利用しない
代替となるプラグイン（拡張機能）を追加する
テーマファイルを修正する

わりと多かったのが1つ目のscroll.jsを削除するという方法。しかしこれではせっかくのスクロール広告用エリアが無駄になってしまいます。2つ目の追尾機能そのものを利用しないのと同じです。

3つ目のプラグインに頼る方法もなるべく選びたくありません。プラグインの開発が停止してしまうとセキュリティ的な問題が発生する恐れがありますし、サイトの表示速度に与える影響も気になります。プラグインは便利ですしこのサイトでもまったく利用していないわけではありませんが、リスクは小さいに越したことがありません。

となればやはり4つ目ですね。STINGER 8に含まれているテーマファイル、scroll.jsの修正に挑んでみます。

スクロール問題を解決するJavaScriptコード

旧バージョンのSTINGER向けの修正コードはいくつかのブログで公開されていますが、STINGER 8ではscroll.jsの記述方法が変わっているため、それらをそのままコピペすることは不可能でした。

ちなみに参考にさせていただいたのは下記の2サイトで、どちらもやっていることは同じです。

参考：広告収益効果もアップ！wordpressのSTINGER5でサイドバーが消える問題を解決するには｜物を捨てきれないなりにミニマリスト目指す。

参考：WordPress STINGER PLUS+ スクロールの途中でサイドバーが消える問題の解決方法｜フィールドログ

そこで変数などの記述方法を読み替えてSTINGER 8に対応させてみたいのですが、そうすると今度はバナーが画面下部に張り付いてしまいました。。

あれこれ試行錯誤を続けた結果、上記のサイトで紹介されている修正内容を1つだけ行うことで完璧に正常に動作するようになりました！なんでやねん！

(function (a) {
  a(function () {
    var d = a(".st-main");
    var g = a("#side .st-aside");
    var i = a("#scrollad");
    if (d.length === 0 || g.length === 0 || i.length === 0) {
      return
    }
    var c = a(window);
    var e;
    var k;
    var j;
    var f = function () {
      if (typeof e !== "undefined") {
        return
      }
      e = {
        wrapper: {
          height: i.outerHeight(),
          offset: {
            top: i.offset().top
          }
        },
        side: {
          offset: {
            left: g.offset().left, //末尾にコンマを追加
            top: g.offset().top //この1行を追加
          },
          margin: {
            top: g.css("margin-top") ? g.css("margin-top") : 0,
            right: g.css("margin-right") ? g.css("margin-right") : 0,
            bottom: g.css("margin-bottom") ? g.css("margin-bottom") : 0,
            left: g.css("margin-left") ? g.css("margin-left") : 0
          }
        }
      }
    };
    var h = function () {
      if (window.matchMedia && window.matchMedia("screen and (min-width: 960px)").matches) {
        return true
      }
      return false
    };
    var l = function () {
      var p = g.outerHeight();
      var r = d.outerHeight();
      var o = d.offset().top + r;
      var m = c.scrollTop();
      var n = c.height();
      var q = (m > e.wrapper.offset.top) && (r > p) ? true : false;
      k = c.scrollLeft();
      j = !q ? "static" : (m + e.wrapper.height) > o ? "absolute" : "fixed";
      if (j === "fixed") {
        g.css({
          position: j,
          top: "",
          bottom: n - e.wrapper.height,
          left: e.side.offset.left - k,
          margin: 0
        });
        g.addClass("is-fixed")
      } else {
        if (j === "absolute") {
          g.css({
            position: j,
            top: o - p,
            bottom: "",
            left: e.side.offset.left,
            margin: 0
          });
          g.addClass("is-fixed")
        } else {
          g.css({
            position: j,
            marginTop: e.side.margin.top,
            marginRight: e.side.margin.right,
            marginBottom: e.side.margin.bottom,
            marginLeft: e.side.margin.left
          });
          g.removeClass("is-fixed")
        }
      }
    };
    var b = function () {
      if (!h()) {
        g.css({
          position: "static"
        });
        g.removeClass("is-fixed");
        return
      }
      g.css({
        position: "static",
        marginTop: e.side.margin.top,
        marginRight: e.side.margin.right,
        marginBottom: e.side.margin.bottom,
        marginLeft: e.side.margin.left
      });
      e.side.offset.left = g.offset().left;
      k = c.scrollLeft();
      if (j === "fixed") {
        g.css({
          position: j,
          left: e.side.offset.left - k,
          margin: 0
        });
        g.addClass("is-fixed")
      } else {
        if (j === "absolute") {
          g.css({
            position: j,
            left: e.side.offset.left,
            margin: 0
          });
          g.addClass("is-fixed")
        } else {
          g.removeClass("is-fixed")
        }
      }
    };
    if (h()) {
      f();
      l()
    }
    c.on("scroll", function () {
      if (h()) {
        f();
        l()
      }
    });
    c.on("resize", function () {
      if (h()) {
        f();
        l()
      }
      b()
    })
  })
})(jQuery);

そのまま載せてしまうと200行を超えるので29行目以降は折り畳みましたが、ダブルクリックするか右上のコピーボタンを押すとスクロールで全文が表示されるようになります。scroll.jsを一切書き換えていない方は、これをそのままコピペしてもらえればOKです。

実際にやったことは27行目に1行追加して、それに伴い26行目の末尾にコンマを追加しただけなので、scroll.jsをカスタマイズ済みの方はそのように修正してください。

また今後STINGER 8をアップデートするとscroll.jsの内容が書き換えられて問題が再発する可能性があります。その際はまたコピペするか、例の1行＋コンマを追加する必要があるのでご注意を。

結果だけ見れば超簡単に解決しました。しかしここに至るまでが長かったです…疲れた…

なぜSTINGER 5やPLUSと同様の方法だと上手く動作しないのかは分かりませんが、今のところDigiLocusでは上記のコードで上手く動作しているはずです。もし異常が発生していればコメント欄などから教えてください。。

以上、お役に立てれば幸いです。