WordPress

WordPress トップに戻るボタンの設置 プラグイン比較

投稿日:2017年10月21日 更新日:

Wordpress Logo

文字数が多い投稿が増えたので、トップに戻るボタンが欲しくなりました。プラグインを見ていると似たような名前のトップに戻るボタン設置プラグインが沢山あります。5つのプラグインを試して、比較してみましたので、参考にしてください。

BackToTop-Title

※ 2017年10月時点の情報に確認した情報に基づきます。

<スポンサーリンク>

トップに戻るボタンとは?

よく画面右下に上矢印でボタンが設置されています。このボタンをクリックするとページの一番上にスクロールしてくれる機能です。

はまとりねっとは5000字を超える投稿が結構あるので、トップに戻るボタンがあった方が利便性が高いのかなと思いました。

沢山あるトップに戻るボタンプラグイン

機能として凄い簡単だと思うので、”トップに戻るボタン”を付けるプラグインも大量にあります。”Back To Top”でプラグイン検索をかけたら1363件*1もありました

1363件中、最初に表示された100件の中から、有効化件数上位の5件をピックアップして動作確認しました。

*1 1363件の中にはトップに戻るボタン機能で無いものを含んでいます。

有効化数トップ5

有効化数トップ5です。検索で出てきたものの上位100件から見ているので、ひょっとしたら後ろの方にもっと利用件数が多いものがあるかもしれません。

動作確認したWordPressのバージョンは4.8.2です。

追記@2017/11/03: To Topは4.8.3でも確認済みです

1位 Scroll Back To Top

50000件+で堂々のトップです。

必要十分なカスタマイズの機能があり、最初にこれで始めれば、もうこれで良いと思えるレベルです。

しかし、最終更新が2年前で近年全く更新されていないところが少々不安です。WordPress4.8.2ではテストされていないようです。

確認したバージョンは1.1.3です。

2位 WPFront Scroll Top

40000件+で2位です。

選べるボタンの種類が多いことが特徴です。54種類のボタンから選択できます。

最終更新は11ヵ月前ですが、WordPress4.8.2との互換性があります。更新が無くてもこれなら問題無いでしょう。

設定の項目が、ダッシュボード直下に置かれてしまうのが残念です。

確認したバージョンは1.5です。

2位 Dynamic “To Top” Plugin

40000件+で同数の2位になります。

スクロールの速度が変更できることが特徴です。設定がダッシュボードの”外観”に存在するので、少し探してしまいました。

設定画面内で、変更後のボタン表示のイメージを参照できるのがとても良いです。

アイコンは矢印とテキスト(絵)の2種類です。

最終更新4か月前で、WordPress4.8.2との互換性があります。

確認したバージョンは3.5.1です。

追記@2017/11/16

バージョン3.5.2が出ました。WordPress4.8.3ももちろん対応していますが、WordPress4.9が出た当日に検証され、対応しています。リリースに対する意識がとても高いですね。

4位 jQuery Smooth Scroll

30000件+で4位です。

”設定”で変更できる項目はありませんが、軽量なのが特徴です。もちろん、CSS変更などをすれば色やアイコンの変更は可能ではあります。

最終更新が1年前で、WordPress4.8.2ではテストされていないようです。

確認したバージョンは1.4.1です。

5位 To Top

20000件+で5位です。

特徴が無いのが特徴というか、必要最低限という感じがします。設定の項目が、ダッシュボード直下に置かれてしまうのが残念です。普段絶対に使わないですからね。

最終更新4か月前で、WordPress4.8.2との互換性があります。

確認したバージョンは1.5.3です。

追記@2017/12/08

WordPressを4.8.4にしました。問題無く動いています。

追記@2017/11/24

バージョン1.5.4が出ました。WordPress4.8.3ももちろん対応していますが、WordPress4.9にも対応しています。

5プラグインの比較

ざっくりですが、比較してみました。

比較表

項目は私の観点なので適当です。

Scroll Back To Top WPFront Scroll Top Dynamic “To Top” Plugin jQuery Smooth Scroll To Top
デスクトップ表示確認
スマートフォン表示確認
日本語化 × × × × ×
ボタンサイズ変更 ×
ボタン色変更 ×
ボタン種類 11種類 54種類 2種類 1種類 3種類
表示時間設定 ×
WP4.8.2サポート × ×

機能面

機能的に優れているのは1位~3位の3つです。やはり1位のScroll Back To Topは万能という感じがします。Dynamic ”To Top” Pluginはボタンのイメージが直ぐに見えるところが秀逸でした。WPFront Scroll Topはボタンの種類が多いので、設置する側からすると楽しいですね。

jQuery Smooth Scrollはスクリプトに抵抗の無い方が選択するプラグインだと思います。しかし、カスタマイズすること前提であれば、プラグインではなくて自分でスクリプト書いても良い気もします。デフォルトの設定で使う前提で高速化を狙うならばこれでしょう。(ここを高速化することにどれだけ意味があるかはわかりませんが)

To Topは必要最低限というところで、Scroll Back To Topをもう一回り小さくした感じです。別段このレベルで困るかと言われると全く困らないので、これでも十分です。

動作

動きとしてはデフォルトではどれも同じように動きます。

私は動きをカスタマイズするというのは考えていないので、細かくやっていませんが、jQuery Smooth Scrollを除けば簡単に速度や表示時間を変更することができます

しかし、動作から”このプラグインを選択する”ということは考えなくても良いと思います。

見た目

環境依存だと思いますが、Dynamic ”To Top” PluginとjQuery Smooth Scrollはデフォルトで見た目が少しおかしくなりました。

アイコンをアピールする感じでは、Scroll Back To TopかWPFront Scroll Topがよさそうです。

To Topはこじんまりした感じで目立たなくて逆に良いような気もします。

但し、見た目は結構カスタマイズできるので、ここが採用のポイントということにはならないでしょう。

個人的にはデフォルトでうまく見えなかった2点は外れましたけれども。

はまとりのおすすめ

私はサポートを気にする方の人なので、WordPress4.8.2のサポートが無いScroll Back To TopとjQuery Smooth Scrollは外します。

デフォルトで表示が少しおかしくなったDynamic ”To Top” Pluginも外します。

従って、WPFront Scroll TopまたはTo Topの2択です。

この二つのプラグインはどちらもダッシュボード直下に設定項目が置かれてしまうのがマイナスポイントです。普段は絶対に変更しない項目なので、少し考慮してほしかったですね。

この二つから私は、

 

To Top

 

おすすめとしたいと思います。

本当はWPFront Scroll Topをおすすめとしていたのですが、WPFront Scroll TopはAMPとの相性が悪く、大量のAMPエラーがSearch Consoleに出てきました。

他のプラグインとの兼ね合いもあるので、一概にWPFront Scroll TopがAMPで絶対NGかは断言できません。

私のAMP環境に関してはこちらから参照してください。基本構成はAMP+Glue for Yoast SEO & AMPです。

Table Of Contents Plusを使った代替策

Table Of Contents Plus(TOC+)の機能を使うのも良いと思います。TOC+には、目次をウィジェットに表示する機能があります。サイドバーウィジェットにTOC+を表示すれば、上下への移動が柔軟に行えますので、これをスクロールするウィジェットに追加すれば似たような機能を実現できます。

スマートフォンで表示する場合、ウィジェットは下の方に来てしまうので、意味が無くなってしまうことが若干の問題となります。しかし、スマートフォンの場合は上のバーをタップすると一番上に戻る機能もあるので、それを前提と考えれば、Table of Contents Plusの目次機能でも十分代替できます。

もちろん、Table Of Contents Plusを使っているという前提です。(私は必須プラグインだと思っている)

<スポンサーリンク>

まとめ

To Topを”はまとりのおすすめ”としましたが、他の4プラグインもWordPress4.8.2で動作確認していますので、使う分には問題ないと思います。

  • 長文を書くサイトにはトップに戻るボタンはおすすめ
  • 設置はどれも簡単に行えて、直ぐに使い始められる
  • 環境との相性もあるのでダメそうだったら他を試すと良い
  • AMPと相性の悪いプラグインも存在するかも

プラグイン全部を確認していないのですが、WPFront Scroll Top以外は大丈夫だと思います。ちなみにWPFront Scroll Topとの相性でNGという状態では、全AMPページにエラーが出ます。AMPページへの検索アクセスが急に激減したので気づいた次第です。Search Consoleは時間遅れてきますからね。。。

-WordPress
-

執筆者:

<スポンサーリンク>

comment

メールアドレスが公開されることはありません。

*

関連記事

blog-eye

【初心者向け】ブログ開設から行った11の事

ブログを開設してから早くも5ヵ月経ちました。一旦、ここらで何をやってきたのかをまとめてみようかと思います。これから開設する方や、ブログ開設直後の方には参考になると思います。ざっくりと書いていきますが、ブログ開設から安定するまでのロードマップみたいなことが分かる …

WordPress 自分の投稿で自分の投稿に勝手にコメントさせない方法

WordPress環境で、自分の投稿にリンクを張っている投稿をすると勝手にコメントがついたりしませんか?いままでは一つ一つ手で削除していたのですが、面倒になり調べました。どうやら、WordPressの機能のようです。問題解決したので、簡単に説明します。 201 …

Glue-eye

【AMP対応】Glue for Yoast SEO & AMP の使い方

AMP対応にGlue for Yoast SEO & AMPを採用しました。Glue for Yoast SEO & AMPは”AMP”プラグインを補佐する位置づけにあります。本稿では”AMP”プラグインで不足する部分をGlue for Y …

Pubsubhubbub

WordPress 投稿がパクられるのを防ぐWebSub/PubSubHubbub

Google検索にインデックスされる前に投稿をパクられることがあるらしいです。なんとも嫌な話です。著作権は当然書いている人にあるわけなんで、盗用というか犯罪ですね。 仮にパクられたとしても、パクられる前にインデックスに登録できれば、こちらに有利にはたらくはずで …

Twitter-eye

Twitterのタイムラインをブログに埋め込む手順

今までFacebookとTwitterはなんとなく避けてきましたが、Twitterの方を始めました。Twitter始めたからには何らかの形でブログと連携したくなりますよね。そこでTwitterのタイムラインをブログに埋め込むところからやってみます。本稿ではその …

サイト内の検索はこちらから

サイト内の検索はこちらから

サイト内の検索はこちらから

カテゴリー

アーカイブ

最近の投稿
Scroll Up