【wordpress】jQueryを使ったTOPに戻るボタンの作り方手順解説【コピペOK】

【wordpress】jQueryを使ったTOPに戻るボタンの作り方手順解説【コピペOK】

TOPに戻るボタンがあるとユーザビリティの向上に繋がって、結果的にSEOに良い影響を与えます。絶対に作っておくべきです。

本記事を読めば、コピペをするだけであなたのサイトに簡単にTOPに戻るボタンを作ることができます。

本記事の内容です!

  • そもそもjQueryってなに?
  • TOPに戻るボタンを作る手順
  • まとめ

jQueryとは

jQueryとは、簡単に言うとjavascriptというプログラミング言語を簡単に短くかけるようにした便利機能のことです。

jQueryを使うと、今回紹介するTOPに戻るボタン以外にも、スライドショーなどのアニメーション系の動きを作れるようになります。

jQueryをサイトに読み込む方法は下記の2つの方法があります。今回は1のCDNという物を利用します。

  1. CDN経由で読み込む
  2. jQueryを、直接ダウンロードしてサイト内に読み込む

いや、何言ってるかさっぱりわからん

HTML初心者の方にとってはそもそも何を言っているのかよくわからないですよね。

簡単に説明すると、1のCDNを利用した方がサイトの表示速度が早いです。なので、今回はCDNを利用していきます。

TOPに戻るボタンを作る手順

1, header.phpを開く

まずは、外観 → テーマエディター を押してheader.phpを開きましょう。

2, jQueryをCDN経由で読み込む

次に、header.phpの<head>タグ内の好きな行に下記のコードをコピペしましょう。これをコピペするだけでCDN経由のjQueryの読み込みが完了します。

<head>タグ内ならどこでもいいです。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

3, TOPに戻るボタンのデザインを決める

次に、footer.phpを開き、下記のコードを好きな行にコピペします。

これもどの行に書いても問題ないです。

「TOPへ」は好きな文字列に変えてOKです。

<div id="to_page_top">TOPへ</div>

次に、style.css(子テーマを利用している場合は子テーマのstyle.css)を開き、下記のコードをコピーします。

これは、見やすいように一番下の行に書いておくと良いでしょう。

/*TOPに戻るボタン*/
#to_page_top {
    width: 70px;
    height: 70px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #b1aaaa;
    opacity: 0.6;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
/*ホバーした時のアクション*/
#to_page_top:hover {
	background-color: #867b7b;
	transition: 0.5s;
}

4, jQueryのコードをかく

3番までの工程でTOPに戻るボタンは表示されるようにはなりましたが、まだ押してもスクロールはされません。

次に、下記のコードを書くことによってボタンを押すとスクロールされるようになります。

書く場所は、footer.phpの</body>のすぐ上です。

<script type="text/javascript">
jQuery(function() {
    var pagetop = jQuery('#to_page_top');   
    pagetop.hide();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 200) {  //200pxスクロールされたら表示
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
    pagetop.click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 400); 
        return false;
    });
});
</script>

5, 動作確認

下の動画のように表示されていたら成功です!

まとめ

今回は、HTML初心者向けにjQueryを用いたTOPへ戻るボタンの実装方法について解説しました。

ユーザーにとって便利だと思う機能があれば、記事を書く時間を削ってでも実装してみましょう。後々必ずいい結果になって返ってきますよ!

もしうまく実装できなかった場合は、たっきー(@ryutoblog)まで連絡していただければつきっきりで対応しますのでいつでもどうぞ!