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;
});