jQueryを使ったトップへ戻るボタン【WordPress】

こんにちは、カリンです。

jQueryを使用してトップへ戻るボタンを作ると、スライドしてページのトップへ戻ることができます。
しかし、WordPressでjQueryを使うときは少しクセがあり苦戦したので備忘録として残しておきます。
また、同じように困っている人の役に立てたら嬉しいです😀

jQueryを記述する

私はHTMLを作ってからWordPressにしたのですが、WordPressでjQueryを記述するには、javasrciptをfunction.phpに記述する必要があります。

HTMLでの記述

HTMLで作成する場合このようなjQueryを記述します。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
//ページトップへ
$(function(){
var pageTop = $(“#pagetop");
pageTop.hide();
pageTop.click(function () {
$('body, html’).animate({ scrollTop: 0 }, 500);
return false;
});
$(window).scroll(function () {
if($(this).scrollTop() >= 200) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
});
</script>

しかし、WordPressでは$(function(){});が使えません。
それなので、jQueryをWordPressで使用するためには、記述を少し変更する必要があります。

WordPressでの記述

①<script type=”text/javascript”>

1つ目の方法は、functions.phpに<script type=”text/javascript”></script>でjavascriptを記述します。
通常のjQueryを<script>~</script>で囲みます。
(例)
<script type="text/javascript">
jQuery(function ($) {
var pageTop = $(“#pagetop");
pageTop.hide();
pageTop.click(function () {
$('body, html’).animate({ scrollTop: 0 }, 500);
return false;
});
</script>

②javascript.js

2つ目の方法は、javascript.jsというファイルをWordPressのテーマフォルダ内に作成します。
head.phpの<head>~</head>の中にある、<?php wp_head(); ?>の後ろに、
<script src="<?php echo get_template_directory_uri(); ?>/javascript.js" charset="UTF-8″></script>
を記述し、javascript.jsを読み込みます。
メモ帳などで新規ファイルを開き、javascript.jsというファイル名にして保存します。
作成したjavascript.jsをエディタソフトで開きます。
その中にjQueryを記述します。
(例)
jQuery(function ($) {
var pageTop = $(“#pagetop");
pageTop.hide();
pageTop.click(function () {
$('body, html’).animate({ scrollTop: 0 }, 500);
return false;
});

参考にしたサイト様

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

【すぐ解決】WordPressでjQueryが動かない原因と正しい使い方!jQueryプラグインを使う手順も解説