【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');

 

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