WordPressで、スクロールしても位置が固定された「ページのトップへ」ボタンの設置。プラグイン不要。

プラグインを使わないで、ページのトップへ移動するボタン「ページのトップへ」（以下、「ボタン」）を設置します。スクロールしてもボタンはいつも同じ位置（ページ右下）にあります。

〔参考サイト〕

1. スクロールに追従する「トップへ戻るボタン」を作成する方法
2. WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方

【前提条件】

1.　画像（ボタン）の準備と配置。

Ubuntu18.04LTSでは、/usr/share/icons/配下に多数のアイコンが格納されています。
今回は、

/usr/share/icons/gnome/48×48/actions/go-top.png

を利用します。

この画像を、WordPressのテンプレート内のimagesディレクトリ
…./wp-content/themes/「テーマ名」/images/go-top.png
として、保存します。

画像は、ネット上にある無料のものでも、なんでもOKです。著作権には、くれぐれも注意してください。

これで、画像の準備

と配置は終わりです。

2.　cssへの追記と配置。

「ボタン」（go-top.png）の見栄えを設定するために、テーマのcssの最終行に追記します。

/*----------------------------------------------------*/
/*「ページのトップへ」ボタン 
/*
position:fixedで位置を固定します。
ページがスクロールされてもボタン画像は、同じ場所に配置されます。
位置は、right,bottomなどで、ちょうどよい場所に配置します。
z-indexは重なり順です。最前面に表示させるため、99を指定しています。
corsor: pointer　で、カーソルが「ボタン」の上に来たときに指カーソルに替えます。
ボタンの透明度をカーソルが上に来たときに５０％にしています。
*/
/*----------------------------------------------------*/

.go-top {
  position: fixed;
  right: 10px;
  bottom: 120px;
  z-index: 99;
  cursor: pointer;
}
.go-top:hover img {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

cssは、例）…./wp-content/themes/「テーマ名」/style.css　などです。お使いのテーマに応じたメインのスタイルシート（css）があるので、そこに追記してください。追記する場所は、特になければ最終行です。

3.　javascriptの作成と配置。

goTopButton.jsというjavascriptを新規に作成します。ボタンの挙動をコントロールするためのものです。

jQuery(function(){
	// .go-topボタンのコントロール
	// .go-topボタンの非表示
	var gotopBtn = jQuery('.go-top');
	gotopBtn.hide();
	jQuery(window).scroll(function(){
		//最上部から現在位置までの距離を取得して、変数nowに格納
		var now = jQuery(window).scrollTop();
		//最上部から現在位置までの距離(now)が400以上
		if(now > 400){
			//gotopBtnをゆっくりフェードイン
			gotopBtn.fadeIn('slow');
			//それ以外はフェードアウトする
		}else{
			gotopBtn.fadeOut('slow');
		}
  });
  //.go-topボタンのクリックイベント
  gotopBtn.click(function(){
  //ページトップへ移動する。800msでページのトップへ移動。
  jQuery('body,html').animate({
          scrollTop: 0
      }, 800);
  });
});

このgoTopButton.jsファイルを、例）…./wp-content/themes/「テーマ名」/js/　ディレクトリに保存します。

4.　footer.phpへの追記の配置。

下記のコードをfooter.php内の</body>の前に追記します。ボタン画像を表示させます。

<!--//ページのトップへ移動するボタン2018-12-09 19:42:35 -->
<!--//ボタン全体をclass名“go-top”というdiv要素で囲みます。
//ボタンは、go-top.pngという画像を配置してます。（別に文字列でも構いません。）
//title属性を利用すると、カーソルを置いたときに、文字が表示されます。-->

<div class="go-top">
    <img src="<?php echo get_template_directory_uri();?>/images/go-top.png" title="このページのトップへ" alt="gotopボタン">
</div>
<!--- /ページのトップへ移動するボタン -->

5.　header.phpへの追記と配置。

下記のコードをheader.php内の wp_head(); の前に追記します。gotopButton.jsを読み込みます。

//ページのトップへ移動するボタン2018-12-09 20:11:49 
wp_register_script( 'goTopButton' , get_template_directory_uri().'/js/goTopButton.js', array('jquery'), '20181209' );

wp_enqueue_script( 'goTopButton' );

wp_register_scriptでgotoButton.jsを登録し、wp_enqueue_scriptで読み込みます。