テーマ「Stinger2」のPAGE TOPボタンを動かすTips
広告-Ad-
テーマ「Stinger2」に使用されているPAGE TOP ボタンはjQuery で動いているのですが、うまく動かない。ことのきっかけはWP-Lightpop が入っていると動かないのではないかという呟きを見たことでした。
WordPressのjQuery はどうなっているの？ 何故動かないのか？ 動かす方法は？ を検証しました。
そもそもPAGE TOP ボタンはそれまで動いていないことを知っていながら、特に使っていなかったので気にしていませんでした。
WP-Lightpop は、PC向け静止画像から動画共有サイトの動画など多岐にわたって対応しているビジュアルプラグインです。
制作者が日本人の方というのもあり、痒いところに手が届いている感じがしました。
ただ最終更新から2年が過ぎ、WordPress 本体のjQuary と衝突部分からPAGE TOPボタンが動いていないのでは…と訝しんだところがことの起こりです。
結果として、
全く関係なかった！！
ということだけまずご報告いたします。
そして、どこをどう修正したら動いたのか。外したプラグインは何か。
備忘録として残したいと思います。
1.子テーマにファイルを移動・作成する
前の記事の通り、子テーマを作成してそこに修正するファイルを移動・作成します。
- header.php
- base.js
- smartbase.js
base.js、smartbase.js は「Stinger」におけるjQuery の根幹にあたる部分ですが、修正しなければ動かないWordPress 本体内部の事情もあり手を入れる必要がありました。
2.base.js、smartbase.js のページスクロールのコードを修正する
WordPress 本体に含まれているjQuery は最初からjQuery.noConflict(); が含まれているため、普通にjQueryを導入しても動かないことがあるとのこと。WordPress CodexでもjQuaery使用について書かれています。
そのため「$」を
[php font_size=”75%”]$(function() {
var pageTop = $(‘#page-top’);
pageTop.hide();
//スクロールが400に達したら表示
$(window).scroll(function () {
if($(this).scrollTop() > 400) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
//スクロールしてトップ
pageTop.click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});
[/php]
から
[php font_size=”75%”]jQuery(function() {
var pageTop = jQuery(‘#page-top’);
pageTop.hide();
//スクロールが400に達したら表示
jQuery(window).scroll(function () {
if(jQuery(this).scrollTop() > 400) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
//スクロールしてトップ
pageTop.click(function () {
jQuery(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});
[/php]
…と、すべて「jQuery」に変更しました。
3.header.php におまじないを書く
WordPress はjQuery を読み込む際、header.php に書くことを必須とされています。
「Stinger2」のheader.php にもその記述があります。
[php num=55][/php]
このコードによって他のプラグインなども含めてjQuery が読み込まれます。
「Stinger2」ではWordPress 本体のjQuery を使用しているのか未だにわからないのですが（勉強不足ですいません）、とにかく読み込んでいないのは確かです。
そこで、外部jQuery ファイルを読み込むコードを追加しました。
[php font_size=”75%”]
[/php]
ポイントはwp_head(); の前に記述することです。
4.衝突しているプラグインを外す
最後の仕上げに、インストールしているプラグインをすべて外して検証しました。
なにしろ40個近く入っていたので一つ一つ有効化しては確認しました。
結果、衝突していたプラグインは、W3 Total Cache でした。
いったいどのタイミングから動かなくなったのか、それとも最初からなのかわからずじまいですが、外すことで常に表示されていたPAGE TOP が消え、ある程度スクロールすると表示されてポチッと押すと上にスクロールするようになりました。
このブログでは、この方法でPAGE TOP ボタンが動くようになりました。
もしこれでも動かなかったら、プラグインに頼るのも一つの方法だと思います。
まとめとして
安易にプラグインをたくさん入れずに外部jQuery ファイルなどで補おうという試みは、ページ負荷の軽減に繋がることもありますが、WordPress 本体やプラグインに付属されているjQuery を理解していないと導入は難しく、またプラグインにも一長一短があることを改めて痛感しました。
次にカスタマイズするのはどこにしよう。それとも…
今回の作業にあたり、以下のブログを参考にいたしました。大変勉強になりました。
WordPressで自作のjQueryスクリプトを実行する方法 | webOpixel
【jQuery】はまった！WordPressプラグインを使用せずに「トップへ戻る」ボタンをフェードインさせる方法 | きになるnet
WordPress 3.4.1にアップデートしたらjQueryが機能しなくなった | きになるnet
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net
広告