【WordPress】3分でできるページトップへ戻るボタン

前回の記事では、Godiosで固定ヘッダーを取り除く方法を紹介をしましたが、それによって少なからず回遊の導線は減ったといえます。記事中や記事終わりに関連記事を設置することで回遊させることはできますが、最新の記事を読みたい、このサイトの記事一覧を見たいというときは、ページトップからトップに戻りたいはずです。

そこで今回は、ページトップへ戻るボタンの設置方法を紹介します。

コピペでできるページトップへ戻るボタン

HTMLの記述

<div id="page_top"><a href="#"></a></div>

テーマがGodiosの方は、footer.phpの38行目に記述しましょう。

CSSの記述

まずはFontAwesomeを使えるようにHeaderに下記1行を記載します。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">

テーマがGodiosの方は、子テーマのadd-header.phpに記述しましょう。その際に、<?phpタグの下に書くとエラーが起きるので、phpタグを閉じてから外側に書いてあげるといいです。

ここに記載
<?php
 ?>

style.cssに下記を記載します。

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #b2c2fb;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

テーマがGodiosの方は、子テーマのstyle.cssに記述することをオススメします。

JSの記述

<script>
jQuery(function() {
    var pagetop = jQuery('#page_top');
    pagetop.hide();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 50) {  //50pxスクロールしたら表示
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
    pagetop.click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 600); //0.6秒かけてトップへ移動
        return false;
    });
});
</script>

テーマがGodiosの方は、子テーマのadd-footer.phpに記述しましょう。その際に、<?phpタグの下に書くとエラーが起きるので、phpタグを閉じてから外側に書いてあげるといいです。

<script>
ここに記載
</script>
<?php
?>

参考サイト：スクロールすると出てくる「トップへ戻る」ボタンの作り方

ボタンのアイコンが表示されなかったり、jQueryが読み込まれなかったりしましたが、その辺直して記載したのできっとうまく動くと思います。HTMLは共通パーツのfooterに、CSSとJSは子テーマのファイル内に記述するのがオススメです。

今回は以上です。