【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;     /* CSS3 */
       -moz-border-radius: 5px;    /* Firefox */
       -webkit-border-radius: 5px; /* Safari,Chrome */
}
#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が機能しなくなった

スポンサーリンク