【WordPress】ページのTOPへ戻るボタンを設置

プラグインを使わずにページのTOPに戻るボタンを設置する方法をご紹介します。

手順

①footer.phpの変更
②style.cssでボタンの装飾
③スクロールするとボタンが表示されるようにしたい場合はJavascriptの設置

footer.phpの編集

まずはfooter.phpを編集し以下のコードを</body>より上に設置します。

<a href="#" class="pagetop">▲</a>

確認すると下図のように反映されています。（css記述は省略）

CSSで装飾と位置の設定

次にボタンを好きな形にする為の設定と位置の設定をCSSで行っていきます。

.pagetop { 
cursor: pointer; //カーソルをリンクを示すポインター(指の形)にする 
position: fixed; //ｳｨﾝﾄﾞｳを基準に固定する 
bottom: 50px; //ｳｨﾝﾄﾞｳのフチからの距離 
right: 30px;　//ｳｨﾝﾄﾞｳのフチからの距離 
background-color: #192826; //背景色 
border-radius: 50%; //円形にする 
width: 50px; //幅 
height: 50px;　//高さ 
font-size: 20px; //▲の大きさ
line-height: 50px; //▲を中央に配置するために指定
text-align: center; //▲を中央に配置 
}
.pagetop:hover {
opacity: 0.5;　//透明度の指定
}

ブラウザを確認するとWindowの右下に下図のようなボタンができました。

色や形など好きなようにアレンジしてみて下さい。
以上で設置完了ですが、スクロールすると表示されるようにしたいという方は次に進んで下さい。

スクロールすると表示されるようにする

jsファイル作成

まずはテーマ/js/ディレクトリ内にjsファイルを作ります。ファイル名（任意）は今回custom_script.jsとしました。

jQuery(function($){
  const pagetop = $('.pagetop');
  // ボタン非表示
  pagetop.hide();
  // 100px スクロールしたらボタン表示
  jQuery(window).scroll(function () {
     if (jQuery(this).scrollTop() > 100) {
          pagetop.fadeIn();
     } else {
          pagetop.fadeOut();
     }
  });
  pagetop.click(function () {
     jQuery('body, html').animate({ scrollTop: 0 }, 500);
     return false;
  });
});

JavaScriptファイルを読み込む

今回は、wp_enqueue_script関数をfunctions.phpに記述する方法でJavaScriptを読み込みます。

テーマ内の適切な位置にwp_head（）とwp_footer（）テンプレートタグが含まれていることを確認して下さい。
JavaScriptファイルをHTML ドキュメントの <head>や</body> 終了タグの前に読み込むことができます。

参照ページ　関数リファレンス/wp enqueue script

それでは、functions.phpに下記のコードを記述して下さい。

function my_scripts_method() {
    wp_enqueue_script(
        'custom_script',
        get_template_directory_uri() . '/js/custom_script.js',
        array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

以上でスクロールすると表示されるボタンの設置完了です。お疲れ様でした。