WordPress にプラグインなしでトップに戻るボタンを設置する

 WordPress でページの先頭に戻るボタンを設置するなら、プラグインの「Scroll To Top」が有名ですが、最近プラグインが多すぎるかなと思い、自作することにしました。

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

こちらのサイトを丸パクリサイトが非常にわかりやすくて参考にしたのですが、一部修正しないと動作しなかったのでメモしておきます。テーマは Twenty Fifteen を使用しました。

footer.php の編集

次のソースコードをお使いのテーマの footer.php に追記します。

「wp_footer()」より後ならどこでもよいようです。今回は「</body>」の直前に置きました。

ボタンの作成

テーマの style.css をテキストエディタなどで開き、次のソースコードを追記します。

ボタンの色、大きさ、表示位置はお好みでどうぞ。まだ JavaScript のソースを書いていないので、単純にボタンが画面に表示されるだけです。

20150927_2_1

ボタンが表示されるか確認したら、style.css を開きます。

先ほど編集した部分に次の一文を追記して、ボタンを非表示にしておきます。

function.php の編集

 ボタンの動作を実現する方法はいろいろあるとは思いますが、今回は WordPress に標準でインストールされている jQuery を利用します。WordPress の jQuery を使うには、次のソースコードを function.php に追記します。

テーマが Twenty Fifteen の場合はこの編集は不要です。Twenty Fifteen はデフォルトで jQuery を読み込んでいるからです。プラグインにも jQuery を読み込むものがあるので、この編集をする前に HTML のソースを確認してください。

JavaScript ファイルの作成

 Twenty Fifteen のテーマフォルダの中には「js」というフォルダがあるので、その下に「scroll-top.js」という JavaScript ファイルを作成しました。文字コードは Shift-JIS、改行コードは LF ONLY で保存しました。

20150927_2_2

ソースコードは次のようにしました。

 WordPress の jQuery は、他の JavaScript ライブラリとのコンフリクトを防ぐために、通常の jQuery の記述方法とは少し違うことに注意してください。よそから jQuery のソースコートをもってきてコピペしても動作しない、ということがよくあります。

 画面の上面がページの上部から 1000px 離れるとボタンを表示します。1000px より上にいけばボタンは非表示になります。ボタンを押せばページの先頭に戻るだけのシンプルなソースコードです。「こんなしょっぱいソースコードじゃ使い物にならん」と思われた方は、遠慮なく書き直してください。

あと常識かもしれませんが、私が思いっきりハマったので一応メモ。先ほど style.css で .page-top p に display: none; を追記しましたが、

と指定しても動作しません。どうしても動作させたいのなら、.page-top p の display: none; を削除し、次のようにスタイルを指定します。

fadeIn は display: none; を指定したセレクタに対して動作する、ということだと思います。jQuery の仕様が変わったのか、複数のページを参考にしているうちに私が指定し間違ったのかわかりませんが、JavaScript がうまく動作しないというときには確認してみてください。

WordPress に JavaScript を読み込む

WordPress に作成した JavaScript を読み込ませます。function.php に次のソースコードを追記してください。

wp_enqueue_script 関数の第1引数はハンドル名で、他のハンドル名とかぶらなければ好きに付けることができます。第3引数では依存関係を指定します。今回の JavaScript で言うなら、jQuery がなければ動作できないので、array(‘jquery’) と書くことで scroll-top.js が jQuery より後で読み込まれます。第5引数を true にすると JavaScript は </body> の前のエリアで読み込まれるようになります。外部 JavaScript ファイルへのリンクをフッターに記述して、ページの表示速度をアップするお馴染みのテクニックです。

動作確認

最後にちゃんと動くか確認します。ページの先頭では何も表示されていません。

20150927_2_3

1000px スクロールすると、

20150927_2_4

このようにボタンが表示されます。ボタンを押してページの先頭に戻ることを確認したら完成です。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


TOP