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

〔参考サイト〕

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

【前提条件】

  1. WordPressで運用。
  2. プラグインは使わない。
  3. 開発環境のPCはUbuntu18.04LTS。
  4. テキストエディタはgedit。(自分の使いやすいもの。)

<手順>

  1. 画像(ボタン)の準備と配置。
  2. cssへの追記と配置。
  3. javascriptの作成と配置。
  4. footer.phpへの追記の配置。
  5. header.phpへの追記と配置。

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の最終行に追記します。

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

3. javascriptの作成と配置。

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

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

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

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

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

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

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