【jQuery】はまった!WordPressプラグインを使用せずに「トップへ戻る」ボタンをフェードインさせる方法

Photo : akiyan.com

WordPressでオリジナルテーマを作成していて、「ページトップへ戻る」をプラグインを使用せずに表示したいなと、思ったことはありませんか?

プラグインに頼りすぎると、あとあと泣きを見るような気がしまして、出来る限り外せるものは外していこうと、今回はjQueryを使用して表示しました。
何にはまったかは、後述致します。

ここでは、下へスクロールしたら「PAGE TOP ↑」というボタンが、フェードインしてくる表示方法をご紹介します。

jquery_page_top

スポンサーリンク

jQueryを読み込む

まず、WordPressでjQueryを読み込むには、header.phpに必ず書いて下さいと言われています

を書くことで読み込まれます。これは、他のプラグイン等でも使用させれるコードなので、必ず書いて下さい。実際に書かずに、動かなかったプラグインがありましたので…(体験談)

コード作成

ここでは、</body>前に入れる為にfotter.phpに書いています。

cssは、style.cssに書き込んでいます。

以上で、きちんと表示はしますが…ページトップにいっても、ボタンが消えずに表示されたまま
慌てて、コードを読み直したり等、何が悪いのかいろいろと原因を探していますと、頼みの綱的サイトのかちびと.netさんのサイトで原因を発見!

WordPress本体には最初から含まれているjQueryは、jQuery.noConflict();が含まれておりjQueryを呼び出す為には、$ ではなく jQuery と書く必要があるとのこと。WordPress Codexでも書かれています。しかし、そんな罠があったとは…

それでも、全てを jQueryに置き換えることは今は容易いですが、今後 jQuery のプラグインを使用する際にとても面倒なことになりそうなので、かちびと.netさんが紹介されていましたやり方をとりました。

jQueryの読み込み方法を変更

現在は、jQuery以外のライブラリを使わない予定なので、WordPress本体のjQueryを使用しないようにし、Googleにホスティングされています jQuery を読み込むようにしました。使用しています、テーマファイルのheader.phpのwp_head()よりも上に以下を書きます。

上記のコードを追加しましたところ、あっさりと動作しました。

…というわけで、WordPressの本体に最初から含まれている jQuery を使用される際は、ご注意下さい!

【参考にさせていただきましたサイト】
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net
jQueryでスクロールすると表示する系いろいろ | webOpixel

※2012年8月30日追記
WordPressを3.4.1にアップデートしたところ、jQueryが動作しなくなりましたので、現在は $ から jQueryに置き換えています。

【WordPress】3.4.1にアップデートしたらjQueryが機能しなくなった