WordPressのサイトにページトップへ戻るボタンを実装してみたい！

どうも、Linです。ティーで、粘ってます。

 

最近のウェブサイトのデザインで流行っているのが、

ページのトップへ一瞬で移動できるボタン、通称、

ページトップ戻るボタン

でしょう。

 

 

「実装方法は難しいんじゃないの？？」

と思うかもしれませんが、ワードプレスのサイトなら話は別。

 

プラグインを利用すれば3秒ぐらいでページトップボタンをつけられるのです。

今日は、そんな便利なWordPressプラグインたちを10つに絞ってまとめてみました。

よかったら参考にしてください。

 

 

WordPressのサイトにページトップへ戻るボタンのプラグイン10選

早速、WordPressの「ページトップへ戻るボタン」を実装できるプラグインを紹介していきますよ。

 

プラグイン1. 「WPFront Scroll Top」

ユーザーからの評価が鬼高いプラグイン。

WPFrontScrollTopをインストールし、プラグインを有効化してやると、左メニューにネジのようなアイコンが出現し、ここから詳細設定できます。

強みは何と言っても、アイコンの種類の豊富さでしょう。

 

 

アイコンの数なんと50。

ボタンの中から好みのものをピックアップしちゃってください。

もちろん、アイコン以外にも、

• スクロールの速さ
• ボタンサイズ
• 透明度

など詳細な設定ができるプラグインです。

 

プラグイン2. 「Scroll Back To Top Button」

非常にシンプルなプラグイン。

設定できる項目は、

1. ボタンの位置
2. アイコンのタイプ
3. アイコンの色

などなど。

ただし、FireFoxでは動作が確認できなかったのが難点ですね。

シンプルなスクロールアップ機能を求める方におすすめ。

 

プラグイン3. 「Tipu Scroll To Top」

名前が発音しにくいプラグイン。

設定画面がシンプルなのが特徴で、

• ボタンの色
• 大きさ
• アイコンの種類

などを手動で入力して使います。

この設定をしないと、スクロールボタンが出現しないので要注意。

 

プラグイン4.「To Top」

カスタマイズから「To Top Option」を選ぶことで、詳細に設定できるのが売り。

• Basic Setting
• Advanced Setting
• Reset Setting

の3つのメニューからできています。

カスタマイズ画面から設定でき、設定した数値で、どのようにスクロールボタンを使えているのか視覚的に見ながら検証できるのが良いですね。

 

プラグイン5. 「Dynamic “To Top” Plugin」

進化したTo Topプラグイン。

プラグインを「有効化」するだけで、自動的に、強制的に、良さげなスクロールボタンが実装されます。

特徴としては、スクロールスピードがひどくゆっくりな点です。

目に優しく環境にも優しい。

また、スクロール距離が大きくなるにつれて、ボタンの色が濃くなっていくフェード効果も良いでしょう。

 

プラグイン6. 「Smooth Scroll Up」

さりげない大きさが可愛いボタン。

アイコンの種類をFont Awesomeのアイコンから選択できるため、バリエーションは無限大。

デバイス毎の設定や、トップページでの表示の有無など、多くの設定項目があるのがいいですね。

 

プラグイン7. 「Simple Scroll to Top Button」

視覚的に設定しやすいスクロールボタン。

設定する際に、著者のプロフィール情報がポップアップしてくれるのが難点ですが、設定方法が簡単でわかりやすい。

アイコンの種類や透明度などがわかりやすく配置されています。

QA情報なども充実していて、サポート体制が手厚いのがありがたいですね。

 

プラグイン8. 「Back to Top Button」

スクロールスピードの設定幅がとんでもなく広いプラグイン。

100から10000の間で、100きざみでスピードを細かく設定できるので、スクロールスピード卿にはおすすめの一品。

アイコンの種類も豊富で迷うこと間違いなし。

 

プラグイン9. 「Simple Back To Top」

文字通りシンプルなスクロールボタン。

設定で「アイコンの画像」しか選べないのが特徴です。

故に、設定項目がありすぎてボタンの仕様が決められない方におすすめのプラグイン。

 

プラグイン10. 「Scroll Back To Top」

スクロールボタンのありとあらゆる設定が可能なプラグイン。

プライベートモードで非公開にして運営管理者のみに見えた状態で、検証できるのが特徴ですね。

全体的にバランスがよく、かもなく不可もなく、といった感じ笑

これを使おうかな。

 

 

WordPressのページトップへ戻るスクロールボタンのプラグインは以上！ありすぎ！

以上が、WordPressでページトップへ戻るボタンを実装できるプラグインたちでした。

1. WP Front Scroll Top
2. Scroll Back To Top Button
3. Tipu Scroll To Top
4. To Top
5. Dynamic To Top Plugin
6. Smooth Scroll Up
7. Simple Scroll To Top Button
8. Back To Top Button
9. Simple Back To Top
10. Scroll Back To Top

もうね、名前見るだけでややこしいです笑

いろいろなプラグインありましたが、だいたいどれもできることや設定項目は同じでした。

名前で「ピンっ」ときたものを選んで使ってみてくださいね。

 

もし、

「ワードプレスの使い方をもっと深く学びたい！」

という方にはTECHACADEMYの「オンラインブートキャンプ WordPressコース」がおすすめです。

プロのメンターの方にわからないところを質問しながら学習できますからね。

よかったら使ってみてください。

 

それでは！

Lin