注目キーワード
  1. MacBook
  2. WordPress
  3. iPhone

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

Photo : akiyan.com

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

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

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

jquery_page_top

スポンサーリンク

jQueryを読み込む

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

<?php wp_head(); ?>

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

コード作成

<!-- ページトップへ戻る -->  <div id="page-top"><a href="#wrapper">PAGE TOP ↑</a></div>  <script type="text/javascript">  $(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;  });  });  </script>  <!-- ページトップへ戻る 終わり -->

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

#page-top {position: fixed;bottom: 40px;  right:5px;font-size: 10px;}#page-top a {background: #665e53;text-decoration: none;color: #fff;width: 80px;padding: 10px 5px;text-align: center;display: block;border-radius: 5px;   -moz-border-radius: 5px;  -webkit-border-radius: 5px; }#page-top a:hover {text-decoration: none;background: #d6cdc0;  color:#665e53;}

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()よりも上に以下を書きます。

<?php  wp_deregister_script('jquery');  wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');?>

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

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

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

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

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

いいね!&フォローで最新情報をお届けします!
スポンサーリンク