広告収益効果もアップ!wordpressのSTINGER5でサイドバーが消える問題を解決するには
2015/04/01
当ブログは、wordpressのテーマとしてSTINGER5を使用しているのですが、導入以来悩みの種だったのが、「サイドバーが消える」という現象でした。
今回は、このSTINGERテーマにおける「サイドバー消える問題」を自分なりに解決いたしましたので、その方法をご紹介したいと思います。
一分でわかるこの記事の概要
STINGER5のサイドバーがスクロールすると消える
下にスクロールすると消えるが、上にスクロールすると復活する
まずは、起こった事象について。
STINGER5でページを下方向にスクロールしていくと、ある一定の位置までスクロールした段階でサイドバーが消えてしまう現象が発生しました。
上方向にスクロールし直すと、サイドバーは復活しますが、また下方向にスクロールすると同じ位置でサイドバーがぱっと消失してしまうので、サイドバー下部がほとんど機能していない状態になっていました。
最初はウィジェットを疑っていたが、STINGER固有の問題だった
当初、当ブログではサイドバー最下部にtwitterウィジェットを設置していたため、ウィジェットとブログの設定が干渉し合っているのかな?などと思ってなんとなく放置していました。
しかし、ウィジェットを外してみてもサイドバーが消える現象が改善しないため、単純にSTINGER単体の問題であるとわかりました。
サイドバーが消える原因はSTINGREのscroll.js
ググると、「消してしまえ」という解決策が多いけれど…
調べてみると、どうもSTINGER5テーマのscroll.jsに原因があるようなのですが、WEB上でググってみた限りでは「ファイルを削除orコメントアウト」という解決策が主流でした。
しかし、これはあまりよい解決方法に思えません。
ファイルを削除するということは、scroll.jsの呼び出しでエラーになるということなので、動作に支障がないとしても気持ち悪いです。ブラウザのアップデートと共に、突然動かなくなってしまう日が来ないとも限りません。
また、本来このscroll.jsは何か意図があって存在するjsファイルなのですから、ソースを修正して解決できるなら、修正によって解決するべきかと思います。
ソースを修正すれば、サイドバーが正しく追尾するようになる
実際に修正してみてわかったのですが、どうもこのscroll.jsは、投稿記事がサイドバーより長い場合に、サイドバー下部を追尾させる処理を書いているようです。
おそらくこの記事でも、追尾処理を実感できるかと思いますので、PC表示でこのサイトをご覧のかたは、どうぞページを下にスクロールしながら、その動作を確認してみてください。
サイドバーが追尾すれば、広告収益化効果が見込める
サイドバーの追尾処理は、とても便利な機能です。
たとえば、サイドバーの最下部に広告を設置しておけば、どんなに長い記事をスクロールしても、サイドバー下部の追尾によって、画面に常に広告が表示されることになります。これは、収益最大化をはかる意味で大きな利点です。
また、最近の人気記事一覧を最下部に持ってきて、訪問者を次の記事に誘導するのに役立てる…なんて使い方もできるかと思います。
当然ながら、scroll.jsをコメントアウトしてしまうと、この追尾機能による恩恵は受けられません。せっかくSTINGRE5が標準で用意している機能ですから、修正による有効活用をオススメします。
scroll.jsの修正方法~STINGER5の場合~
さて、では肝心のソースコードの修正ですが、これは至って簡単です。下記のソースコードに一行追加し、二行変更すればよいだけです。
STINGER5とSTINGER3では、ソースコードの場所などに差異があるようなので、気を付けてください(STINGER3では、そもそもscroll.jsがない?)。この記事では、あくまで自分が実際に使用しているSTINGER5について解説させていただきます。
STINGRE5におけるscroll.jsの場所
[wordpress]/wp-content/themes/stinger5ver20141123/js/scroll.js
修正したscroll.js
★マークがついているのが今回修正した箇所です。面倒な場合は、下記ソースをこのままscroll.jsにコピペしてください。そのまま動くかと思います。
ただし、★マークのコメントアウトは、今回のブログ記事のために便宜的につけたものであり、このコメントアウトがある状態での動作確認はしておりませんので、万が一動作しない場合は、★マークのコメントアウト部分を取り除いて下さい。
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | /*-------------------------------- 広告のフロート -------------------------------*/ (function(jquery) { jquery(document).ready(function() { /* Ads Sidewinder by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder */ var main = jQuery('main'); // メインカラムのID var side = jQuery('aside'); // サイドバーのID var wrapper = jQuery('#scrollad'); // 広告を包む要素のID if (main.length === 0 || side.length === 0 || wrapper.length === 0) { return; } var w = jquery(window); var wrapperHeight = wrapper.outerHeight(); var wrapperTop = wrapper.offset().top; var sideLeft = side.offset().left; var sideTop = side.offset().top; //★この一行を追記 var sideMargin = { top: side.css('margin-top') ? side.css('margin-top') : 0, right: side.css('margin-right') ? side.css('margin-right') : 0, bottom: side.css('margin-bottom') ? side.css('margin-bottom') : 0, left: side.css('margin-left') ? side.css('margin-left') : 0 }; var winLeft; var pos; var scrollAdjust = function() { sideHeight = side.outerHeight(); mainHeight = main.outerHeight(); mainAbs = main.offset().top + mainHeight; var winTop = w.scrollTop(); winLeft = w.scrollLeft(); var winHeight = w.height(); var nf = (winTop > sideTop + sideHeight - winHeight) && (mainHeight > sideHeight) ? true : false; //★ここを←のように変更 pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed'; if (pos === 'fixed') { side.css({ position: pos, top: -sideHeight + winHeight, //★ここを←のように変更 bottom: '', //★ここを←のように変更 left: sideLeft - winLeft, margin: 0 }); } else if (pos === 'absolute') { side.css({ position: pos, top: mainAbs - sideHeight, bottom: '', left: sideLeft, margin: 0 }); } else { side.css({ position: pos, marginTop: sideMargin.top, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left }); } }; var resizeAdjust = function() { side.css({ position:'static', marginTop: sideMargin.top, marginRight: sideMargin.right, marginBottom: sideMargin.bottom, marginLeft: sideMargin.left }); sideLeft = side.offset().left; winLeft = w.scrollLeft(); if (pos === 'fixed') { side.css({ position: pos, left: sideLeft - winLeft, margin: 0 }); } else if (pos === 'absolute') { side.css({ position: pos, left: sideLeft, margin: 0 }); } }; w.on('load', scrollAdjust); w.on('scroll', scrollAdjust); w.on('resize', resizeAdjust); }); })(jQuery); |
おわりに
何をしたいコードなのか把握するのに若干手間取ってしまいましたが、結果的に追尾機能を活性化させることができ、記事のネタにもなったので、実りのあるソース改修でした。
ちなみに、サイドバーが追尾すれば広告収益率アップという主旨のことを上記で言っていますが、クリック型広告最大手であるgoogleアドセンスは追尾型広告をポリシーで禁止しているので、注意が必要です。サイドバー下部に仕込むとしたら、また別の広告を設置するべきでしょう。

最近書いた記事とか
- 【NEW】ブログやサロンやコンサルで収益化しようとするのは、他に技能がないから。
- 節約vs時短!エアコンをつけるべきか否かひたすら考える。
- レコーディング者の苦悩を救う有線/bluetooth両対応ヘッドホン「MPBH059AB」の使用感がかなりいい話。
- 夢中になると、それ以外がどんどん簡略化していく。最近の時短施策傾向について。
- とある男性ミニマリスト志向者が「捨てなくてよかったぁ」と思ったアイテム2つ。
反応・感想・リクエスト等お待ちしております。
[…] これを以下のサイトを参考に変更しました。 【参考】広告収益効果もアップ!wordpressのSTINGER5でサイドバーが消える問題を解決するには […]