【コピペOK】ページトップへ戻るボタンの作り方【jQuery対応】

悩んでる人

WordPressサイトで、ページトップへ戻るボタンを作りたい。でもどこをいじればいいのかさっぱりわかりません…。初心者向けに作り方を教えてください

ヒデハル

こういった疑問に答えます。

今回は、WordPressサイトで「ページトップへ戻るボタン」を作る方法について解説します。

トップに戻るボタンがサイトに表示されていると、スクロールする手間が省けて便利ですよね！

「でも他のサイトにはあるのに、なぜか自分のサイトには無い…」 「ボタンを表示させる方法が全くわかんない…」

とお悩みなら、本記事をご覧ください。

トップに戻るボタンの表示方法をわかりやすく解説しましたので。

ソースコードの追加が必要にはなりますが、コピペで済むので、ご安心ください。

2023/12/26追記「トップへ戻るボタン」を実装しようと思ったきっかけは、私が使っているWordPressテーマに、「トップへ戻るボタン」が無かったため。
しかし、その後に導入したテーマ「SWELL」には最初から用意されていました。このSWELLって超優秀なので、実装するよりも、SWELLを導入したほうが効率的ですよ。
SWELLについては以下をご覧ください。
>> WordPressテーマSWELLのレビュー【評判どおり最強だった】

ページトップへ戻るボタンとは？ テーマによっては非対応

少し前置きをします。

ページトップへ戻るボタンとは

「ページトップへ戻るボタン」とは、そのボタンをクリック（スマホならタップ）すると、ページトップに自動で戻ってくれるリンクのこと。

ページトップに戻るときに、スクロールする手間を省けるのがメリットです。

当サイトでいえば、画面の右下に表示されています。

テーマによってはトップに戻るボタンに非対応

「こんなに便利なボタンなら、WordPressは、このボタンを標準で装備してくれればいいのに、、、」と思ってる方もいるでしょう。

その気持はよくわかります。

が、この「ページトップへ戻るボタン」を標準で装備しているかどうかは、WordPress本体ではなく、WordPressの「テーマ」次第です。

WordPressで作成したサイトなら、なにかしらの「テーマ」を使っていますよね？

お使いのテーマが「ページトップへ戻るボタン」を標準で装備していれば、テーマをインストールした時点でこのボタンが表示されます。

一方、お使いのテーマが「ページトップへ戻るボタン」に対応していなければ、残念ながらこのボタンは表示されません…

「トップに戻るボタン」非対応のテーマをお使いの方はどうすればよい？

対処法は以下のいずれか。

対処法1のメリットは、トップに戻るボタンを実装しなくて済むこと。
デメリットは、テーマを変更する手間と料金が必要になること。

対処法2のメリット/デメリットはその逆ですね。

対処法1を選択したい方へ

SWELL
というテーマをおすすめします。

以下の記事で解説していますので、参考にどうぞ。
» 【安心】WordPress有料テーマ『SWELL』の購入方法をやさしく解説

対処法2を選択したい方へ

次の項で説明しましたので、ひき続きご覧ください。

WordPressサイトで「ページトップへ戻るボタン」を作る方法

では「ページトップへ戻るボタン」の作り方を解説します。

※変更するファイルは、万一にそなえて事前にバックアップをとっておくことをお忘れなく。

手順は以下の３ステップ。

手順1：cssファイルに、トップに戻るボタンのデザインを決めるコードを書く

まず、cssファイルにコードを追加します。

cssファイルは、「トップに戻るボタン」のデザインを決めるためのものです。

cssファイルの開き方は、WordPressのダッシュボードで[外観] > [テーマファイルエディター]をクリックし、

cssファイルを選びます（注：お使いのテーマによって以下の外観は異なります）。

cssファイルに、以下のコードを追加します。

.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 15px;
  bottom: 20px;
  background: #BAD3FF;
  border: solid 2px #BAD3FF;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.pagetop__arrow {
  display: block;
  height: 10px;
  width: 10px;
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  transform: translateY(20%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #3293e7;
    }
}

カスタム方法

ボタンの位置は以下に設定しています。変更したいときは数値を変えてください。
・right:15px（ウィンドウの右端からの距離）
・bottom:20px（ウィンドウの下端からの距離）

ボタンの色は変えたいときは、#xxxのところを変えてください。
色はこちらの外部サイトを参考にどうぞ。

手順2：single.phpに、トップに戻るボタンを表示させるコードを書く

続いて、投稿ページ用のphpファイルにコードを追加します。

「ページトップへ戻るボタン」を表示させるためですね。

投稿ページ用のphpファイルの開き方は、WordPressのダッシュボードで[外観] > [テーマファイルエディター]をクリックし、single.phpを選びます（注：お使いのテーマによって、ファイル名や以下の外観は異なります）。

single.phpファイルに、以下のコードを追加します。

<button id="js-pagetop" class="pagetop"><span class="pagetop__arrow"></span></button>

固定ページにもボタンを追加したいとき

上記と同じ手順で、固定ページ用のphpファイルに、コードを追加します。

固定ページ用のphpは、以下のファイル名です（注：お使いのテーマによって、ファイル名は異なります）。
・通常：page.php
・フロントページ用：front-page.php や page_lp.phpなど

手順3：footer.phpに、ふわっと表示させるコード(jQuery)を書く

最後に、「画面がページトップにあるときはボタンを消す」ためのコードを追加します。

というのも、トップに戻るボタンは、すでにページトップにいる時には必要ないので、最初は消しておいて、スクロールされた時点でボタンを表示させるわけです。

上記を実現するには、jQueryのコードを追加します。

jQueryのコードは、footer.phpに書くことが多いので、本サイトもそうしました。

footer.phpの開き方は、WordPressのダッシュボードで[外観] > [テーマファイルエディター]をクリックし、footer.phpファイルを選びます（注：お使いのテーマによって、ファイル名や以下の外観は異なります）。

footer.phpファイルに、以下のコードを追加します。

$(function () {
  $("#js-pagetop").click(function () {
    $('html, body').animate({
      scrollTop: 0
    }, 300);
  });
  $(window).scroll(function () {
    if ($(window).scrollTop() > 1) {
      $('#js-pagetop').fadeIn(300).css('display', 'flex')
    } else {
      $('#js-pagetop').fadeOut(300)
    }
  });
});

カスタム方法

ボタンを押してからページトップに戻るまでの時間を変えたいときは、animate関数内の 300という数字を変更してください。

ボタンを表示させるタイミングを変えたいときは、「scrollTop() > 1」の数字を変更してください。

以上でコードの追加は完了！

実装後にキャッシュをクリアする

コードの追加が完了したら、キャッシュをクリアしましょう。
キャッシュが残っていると、コードの追加が反映されないからです。

パソコンの場合

キャッシュをクリアする方法は、「Shiftキーを押しながら、ブラウザの更新ボタンをクリック」です。

もしわからない方は、以下の記事で詳しく解説してますので参考にどうぞ。
» WordPressでCSSがデザインに反映されない時の対処法【スーパーリロード】

スマホの場合

お使いのブラウザごとにキャッシュをクリアする方法は異なります。

Safari：こちらの外部サイト
Chrome：こちらの外部サイト
をご覧ください。

キャッシュをクリアすれば、「ページトップへ戻るボタン」が表示されるはずです！

まとめ

WordPressで作ったサイトで、「ページトップへ戻るボタン」を作る方法を解説しました。

手順としては、以下の３ファイルにコードを追加することでした。

・css（ボタンのデザインを決める）
・single.php（ボタンを表示させる）
・footer.php（ふわっと表示させる）

参考：この機にWordPressテーマの変更も検討しよう

本文でも述べたとおり、トップページへ戻るボタンが最初から準備されているテーマを選ぶのがおすすめです。

WordPressテーマなら、SWELL　がおすすめ！

以下の記事で解説していますので、参考にどうぞ。
» 【安心】WordPress有料テーマ『SWELL』の購入方法をやさしく解説