WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

jQuery

最近、後学のためにWordpressのテーマを作ってます。

ちょうど「トップへ戻る」ボタンをつけたいと思っていた時に、仕組みを非常にわかりやすく解説してある良い記事を見つけました。

初心者でも分かる!なjQuery「TOPへ戻るボタン」の作り方 – Syncer

ちなみに、「トップへ戻る」ボタンというのは、ページを下にスクロールすると右下にスーっと出てきて、クリックするとページの一番上にスクロール移動するやつです。

で、上で書かれている方法をWordpressでもやってみたのですが、正常に動きません。

どうやら、jQueryを書くときWordpressでは特有の書き方をしなければいけないようです。

ということで、上で紹介してある「トップへ戻る」ボタンをWordpressテーマでも使えるようにしたものを載せておきたいと思います。(※多少コードを修正してある箇所もあります)

photo by Daniel Morrison

スポンサーリンク
レクタングル(大)広告

ボタンデザインの準備

まずは、右下に出すボタンデザインを準備します。

以下のようなHTMLタグを、footer.phpの</body>手前あたりに貼り付けておきます。

次にCSSでスタイルを設定します。style.cssあたりに以下を追記します。

この状態で以下のようなボタンが準備されました。

トップへ戻るボタン

ただ、表示を非表示にしてあるので、この状態ではボタンは表示されません。

これを表示させるには、jQueryなどで表示を動的に制御します。

jQueryを使用する準備

WordPressテーマ内でjQueryを使用するにはちょっとした準備が必要です。

まずは、テーマフォルダ内にJavaScript(jQuery)を記述するためのファイルを作成します。

jQueryは、<script type=”text/javascript”></script>のタグ内に書いてページに埋め込んでもいいのですが、後の編集のしやすさのため外部ファイルに記入することにします。

今回は、テーマフォルダ内にjavascript.jsというファイルを作成しました。

JavaScriptファイル

まずは、header.phpの<head></head>の間、<?php wp_head(); ?>という記述のあとにに、以下のコードを追加してください。

wp_head();で、Wordpressシステム内にあらかじめ用意されている、jQueryファイルを呼び出します。

そのあとjavascript.jsファイルを呼び出しています。順番が反対になると、動作しないので注意してください。

ページ移動用のjQueryを書く

javascript.jsにjQueryを書いていくわけなんですが、冒頭で紹介したページのjQueryの書き方では、Wordpressでは動作しません。

というのも、Wordpressでは、

というような$を使用した記述は使えないからです。

その理由として、WordpressはJavaScriptライブラリとしてjQueryとprototype.jsという2つを使用しいます。その2つのライブラリで共通して$を使用しているため衝突(コンフリクト)を起こすのだそうです。

詳しくは以下に丁寧に書いてあります。

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

ということで、衝突を回避するためにWordpressではjQueryを記述するときに$の代わりに以下のような書き方をする必要があります。

この書き方で、jQueryを書き直したものが以下です。これをjavascript.jsに記入します。

これでWordpressでも問題なく動作すると思います。

javascript.jsのような外部ファイルを作成するのが面倒くさい場合は、ページに直接以下のように行動を埋め込んでも動作します。

「トップへ戻る」ボタンに使えそうな矢印素材

Syncerにて、ボタンで使用できそうな矢印素材も載っていたので併せて紹介します。

WEBアイコンフォントのFont Awesomeにも以下のように矢印フォントが沢山あるのでこれを使用してもいいかもしれません。

矢印WEBフォント

僕はこれを使用しています。

利用の仕方は、Get StartedExamplesを見るとおおよそわかります。

まとめ

最初、Wordpressでも解説通りに記述していたらjQueryが動かなくて少しハマりました。

ただ、原因さえ分かってしまえば、$を使わないようにすればいいだけなので、すぐに修正できると思います。