【WordPress】上に戻るボタンをプラグインで簡単に追加する方法

ユーザビリティを圧倒的に上げてくれる「上に戻るボタン」は、ワードプレスで作られたサイトやブログの場合、プラグインで簡単に追加できます

特に、スマホ表示では上に戻るボタンがあるのと無いのでは全然違うので、Wordpressを使ってるならぜひ、追加しておきましょう!

プラグイン「Scroll Back To Top」を使えば簡単に設置できます。

   

WordPressでプラグイン「Scroll Back To Top」を追加する

▲まずは公式サイトでプラグインを追加。2年間更新されてないですが問題はありません。

公式サイトでプラグインをダウンロードしたら、ダッシュボードでプラグインを有効化

次は『設定>Scroll Back To Top』から設定画面を開きます。

Scroll back To Topで上に戻るボタンを設定する

▲設定画面はこんな感じ。

Scroll Back To Topは、ほとんど設定を変えることなく使うことができますが、色や透過率、上に戻るボタンのデザインなんかは変更しておきましょう。

まずはButton Appearanceから設定します。

僕が変更した点は以下の通りなので、自由にカスタマイズする前に、まずは設定を真似てみてください。

Background Color(ボタンの色)
Background Hover Color(マウスを乗せた時の色)
Foreground Color(文字の色)
Foreground Hover Color(マウスを乗せた時の色)
Opacity(ボタンの透過率)

横幅(Width)高さ(Height)はノータッチです。

▲ボタンの位置調整はここから。ラベルデザインも変更できます。

Button Locationではボタンの細かい位置を調整するだけ。

例えば、サイトやブログにGoogleアドセンスのアンカー広告を設置していて、上に戻るボタンと干渉する場合なんかはここで設定します。

僕は、Horizontal Distance from Edge(ブラウザ横の位置)20pxVertical Distance from Edge(ブラウザ縦の位置)20pxに変更してます。

▲最後に、上に戻るボタンのアニメーション調整。

Animation Optionsでは、上に戻るボタンのスクロール速度や表示時間を設定できます。

Scroll Duration=トップに戻る速度
Visibillity Duration=ボタンの表示時間
Fade Duration=ボタンが消えるまでの時間
Advances Option=CSSで装飾できる

僕はScroll Duration(トップに戻る速度)“400”Fade Duration(ボタンが消えるまでの時間)“200”に設定してます。

それ以外は変更しなくてOK。

上に戻るボタンはスマホ表示のユーザビリティを上げる

▲スマホ表示はこんな感じ。上に戻るボタンがあれば、ユーザビリティが向上します。

トップページや長めの記事では「上に戻るボタン」がものすごく活躍してくれます。

ざっとページの下まで見た後、上まで手動でスクロールして戻るのは正直面倒ですが、上に戻るボタンを追加していれば、その面倒を解消してくれます。

WordPressなら、プラグインを追加して簡単な設定を行うだけで上に戻るボタンを追加できるので、まだ使ってないなら早速使ってみましょう!