いつもはWordPressでページのトップに戻るボタンは自作して実装するのですが、WordPressでページのトップに戻ることができるプラグインで簡単にできないかと探してみたところ、使いやすそうなプラグインがありました。
ページのトップに戻るボタンのサイズや位置を設定できたり、ページのトップまでスクロールする動作も設定で管理できるため簡単だと思えました。
またページのトップに戻るボタンに画像やFontAwesome、テキストを使うことができる設定もあるので、いろんなWordPressサイトに適した使い方ができます。
WordPressでページのトップに戻るプラグイン
WordPressでページのトップに戻るプラグインは探してみると、数多くのプラグインがありましたが、その中から使いやすそうだと思えたWordPressのプラグインは「WPFront Scroll Top」です。
WordPressにすぐにページのトップに戻るボタンを表示したい場合はプラグインの有効化と１つの設定にチェックを入れるだけ。
WordPressのプラグインでWPFront Scroll Topを検索します。
検索後にWPFront Scroll Topプラグインを有効化してから、WPFront Scroll Topの設定画面に進み、「Enabled」項目のチェックボックスにチェックを入れて「変更を保存」します。
Enabledにチェックをいれたのは、WPFront Scroll TopプラグインでWordPressテーマにページのトップに戻るボタンを表示するための設定です。逆にEnabledのチェックを外すと、ページのトップに戻るボタンは非表示にできます。
これだけでWordPressでページのトップに戻るボタンをクリックするとページの上までスムーススクロールして戻ることができます。
もっと詳細なWPFront Scroll Topの設定も覚えておきたい場合は、プラグインWPFront Scroll Topの設定をする使い方を私が実際にやってみたことでまとめたので読み進めてみてください。
プラグインWPFront Scroll Topの使い方
WordPressでページのトップに戻るWPFront Scroll Topプラグインの使い方は、WPFront Scroll Topを有効化した設定画面にて戻るボタンの表示方法やスクロール動作の設定をして使います。
WPFront Scroll Topの設定の使い方で、これは覚えておきたい使い方かな。と思えたことは以下の4点です。
- 戻るボタンの位置とサイズの設定
- トップまで戻るスクロール動作の設定
- 戻るボタンに表示できる種類(特にFontAwesome)
- ページのトップに戻るボタンの表示と非表示のフィルター
１つずつ順番に使い方を説明します。
トップに戻るボタンのサイズと位置の設定
まずはWordPressのプラグイン「WPFront Scroll Top」で戻るボタンのサイズと位置の設定をする使い方です。
トップに戻るボタンのサイズの設定はWPFront Scroll Top設定画面の「Button Size」の項目です。ページのトップに戻るボタンサイズの幅と高さを調整する設定ができます。
設定の使い方はButton Sizeの右横にある入力ボックスにトップに戻るボタンの幅を最初のボックスに、高さの設定は幅の隣のボックスに、それぞれピクセル数を入力して設定します。
Button Sizeでトップに戻るボタンの幅と高さは入力値をゼロ、または空で設定した場合は、WordPressのプラグイン「WPFront Scroll Top」のデフォルトのボタンサイズが適用されます。デフォルトのサイズでもいい感じのボタンサイズです。
次にトップに戻るボタンの位置を調整する設定の使い方です。WPFront Scroll Top設定画面の「Location」の設定項目です。
Locationの設定ではWordPressのプラグイン「WPFront Scroll Top」を使用するテーマのページの画面に対してのボタンの位置を調整する使い方ができます。設定できる戻るボタンの位置は以下の4つ。
- 右下
- 左下
- 右上
- 左上
WordPressでページのトップに戻るボタンとしてWPFront Scroll Topのプラグインを使う場合は「右下」で設定して変更を保存することでページのフッター右下のベストな位置に固定することができます。デフォルト設定もフッター右下です。
「WPFront Scroll Top」でボタンの位置を設定したら、その位置を基点にしてMarginXとMarginYの設定項目で横と縦の位置調整をピクセル数で設定することができます。
- MarginXの設定では「横の位置を調整」
- MarginYの設定では「縦の位置を調整」
ページのトップに戻るボタンを表示する、それぞれのWordPressテーマで適切な配置になるように微調整したいときに役立つWPFront Scroll Topの設定です。
トップに戻るまでのスクロール動作の設定
WordPressのプラグイン「WPFront Scroll Top」の次の設定の使い方は、ページのトップに戻るまでのスクロール動作の設定についてです。
スクロール動作の設定に使うWPFront Scroll Topの基本的な設定項目は以下の3つをセットにした使い方で覚えると良いです。
- Scroll Offset
- Scroll Duration
- Button Fade Duration
Scroll Offset
Scroll OffsetはWordPressでページを表示して上から下にスクロールするときに、トップに戻るボタンが下にどのくらいスクロールしたら表示するかの距離を設定できます。
WordPressでページのトップに戻るボタンをすぐに表示したいかもしれませんし、目次や最初の見出しの位置から表示したいなど、それぞれ異なると思うので、ピクセル数を変更しながら確認を繰り返してベストなスクロール距離を設定してみてください。
Scroll Duration
Scroll Durationの設定では、ページのトップに戻るボタンを配置した設定位置からページのトップまでスクロールして戻るときにかかるスクロール時間をミリ秒数で設定します。
このときのページのトップに戻るボタンを配置した設定位置というのは、Locationの設定で右下、左下、右上、左上、そしてMarginXとMarginYで設定したボタンの位置です。
ページのトップまで戻るスクロール動作の時間を遅くしたい場合は入力する数字を大きくします。逆に早くするなら数字を小さくします。
試しにスクロールする動作を2000の数字にして確認してみると、かなり遅いスクロールの動きになるので、デフォルトのスクロール動作との違いが分かりやすくなり設定しやすいかと思います。
Button Fade Duration
Button Fade Durationの設定はトップに戻るボタンをクリックしてページトップの位置までスクロールが終わったら、戻るボタンがフェードするのにかかる時間をミリ秒数で設定します。
Button Fade Durationの設定で数字を増やすごとにフェードする動作は「ふわぁー」とした消え方で遅く動作させる使い方ができます。例えば2000msだと「ふわぁー」っとが分かりやすいです。
トップに戻るまでのスクロール動作の設定でできることがもう１つセットであります。
Auto HideとAuto Hide After
まずAuto Hideの設定にチェックを入れることで最後のスクロールイベントが終わった時点のボタンを自動非表示にする機能を有効にします。
次にAuto Hide Afterの設定でスクロールイベント終了後のボタンが非表示になる時間を指定し設定します。
するとページのトップから下にスクロールしていないときには指定した秒数後にトップに戻るボタンを非表示にしておける使い方ができます。再度スクロール操作が始まると、トップに戻るボタンは表示されます。
ページのトップに戻るボタンの種類
WordPressでページのトップに戻るプラグイン「WPFront Scroll Top」には、ページのトップに戻るボタンを以下の3種類から選択して表示ができます。
- 画像
- テキスト
- FontAwesomeのアイコン
上記の3種類からボタンを設定できるようにする使い方は、先にButton Styleの設定項目でページのトップに戻るボタンとして使用したいボタンスタイルにチェックを入れます。そうすると、設定画面の少し下にそれぞれの種類で設定が切り替わり表示します。
WPFront Scroll Topのプラグインで用意されている画像を使用してページのトップに戻るボタンを表示したい場合は、画面に表示されてる種類の中から選びチェックを入れて変更を保存。
自分で用意した画像を戻るボタンに使用する場合は「Custom URL」にチェックを入れてからMedia Libraryボタンをクリック。開いたメディアライブラリでアップロードした画像を選択します。
Button StyleでTextにチェックを入れた場合は、Text Buttonという設定項目に切り替わっているので、Text Buttonの「text」でページのトップに戻るボタンに表示するテキストを入力します。
そしてText Colorでテキストの文字色。
Background Colorではテキストボタンの背景色の指定
Mouse Over Colorはテキストボタンにマウスが乗ったときのホバー状態の背景。と色関係の設定ができます。
Custom CSSの設定はテキストボタンのスタイルをCSSのプロパティと値を記述することでボタンの余白などをデザインができます。
WordPressにページのトップに戻るボタンをテキストにする設定は個人的には使いずらかったです。
次は戻るボタンをWPFront Scroll TopでFontAwesomeで表示する場合です。
Button StyleでFontAwesomeにチェックを入れると、Font Awesome Buttonという設定項目切り替わるので「Icon Class」の入力ボックスにFont AwesomeのサイトからWordPressでページのトップに戻るボタンとして使用したいアイコンの「iタグ」を入手しアイコンコードの部分だけを貼り付けます。
このときのアイコンの「iタグ」を入手するときに少しハマりました。Font AwesomeアイコンコードをコピペしてもWordPressでページのトップに戻るボタンとして表示できなかったです。
仕方ないのでFont Awesomeの旧バージョンv4.7.0でiタグのクラスがfaから始まるコードをコピペすることで無事にページのトップに戻るボタンとして表示できました。
Font Awesomeの旧バージョンはFont Awesomeのトップページのフッターメニューで「Old Version」のリンクから飛べます。おそらくfasから始まるバージョンのコードでは表示できないかもしれません。
そしてWordPressでページのトップに戻るボタンをFont Awesomeで表示した場合には、Custom CSSの設定項目でアイコンボタンのスタイルを記述できます。
スタイルをあてるCSSのセレクタは以下です。
#wpfront-scroll-top-container i
使用例は以下のCSSです。
#wpfront-scroll-top-container i{
color: deeppink;
background-color: #000;
border-radius: 50%;
width: 80px;
height: 75px;
text-align: center;
}
ページトップに戻るボタン表示をフィルター
WordPressプラグイン「WPFront Scroll Top」でページトップに戻るボタンを表示するときの使い方としては、ページトップに戻るボタンを指定したページだけに表示や非表示にするフィルター設定の使い方ができます。
たとえば記事の文字数が長い短いでWordPressのページトップに戻るボタンの表示と非表示を振り分けるなど活用ができます。
フィルターするやり方はWPFront Scroll Top設定画面のFilter項目の「Display on Pages」での設定、以下の3つを操作します。
All pages.
All pages.にチェックして設定すると、WordPressでページトップに戻るボタンは全てのページで表示できます。
Include in following pagesにチェックして設定する場合は、Include in following pagesのチェックボックスすぐ下のテキストボックスを使用して、投稿IDを指定したページだけにページトップに戻るボタンが表示できます。複数指定の場合はカンマ区切りで指定します。
Exclude in following pagesにチェックをした場合には、すぐ下のテキストボックスで指定した投稿IDのページでページトップに戻るボタンを非表示に設定できます。複数指定の場合はカンマ区切りで指定します。
