【この記事を読むのに必要な時間は約 3 分です。】
縦に長いページでは、上に戻るボタンを設置すると閲覧者に親切。 このWordPressサイトではWP to Top(ver.0.1)を利用している。 WordPress管理画面のプラグインの新規追加で「WP to Top」で検索してインストールし有効化する。
目次
設定方法
WordPress管理画面の設定に表示されるWP to Topを選択してカスタマイズする。
text to showでボタンのテキストを変更。
Background colorで背景色を変更。
Foreground colorで文字色を変更。
positionで右下か左下かを選択。(2か所のみ)
その他のGo to Topプラグイン
他にも同じ機能のプラグインが多数あるのでいくつか紹介する。
Go to top(ver.0.0.8)
WordPress管理画面のプラグインの新規追加で「Go to Top」で検索してインストールし有効化する。
設定方法
WordPress管理画面の設定に表示されるGo to topを選択してカスタマイズする。 text to showでボタンのテキストを変更。
Scroll Speedでスクロールスピードを変更。
Start Positionで表示されるタイミングを変更。
Easeで動作を変更。
Button typeでテキスト表示から△または▲に変更。
JCWP Scroll To Top(ver.1.3)
WordPress管理画面のプラグインの新規追加で「JCWP Scroll To Top」で検索してインストールし有効化する。
「APIキー」の取得を求められるので、Akismetの有効化を参考にして取得する。もし、既に他のプラグインで「APIキー」を取得している場合は、同じ「APIキー」を使用できる。
また、寄付を求められるが応じなくても個人使用の場合は問題ない。
設定方法
WordPress管理画面の設定に表示されるJCWP Scroll To Topを選択してカスタマイズする。簡単な英語なので特に説明しないが、Container Border Radiusをデフォルトの10px 10px 0px 0pxから全て10pxにしてボタンの形を変更した。
カスタマイズの自由度は高いし、わかりやすいのでお勧め。
表示ポジションも左下、中央下、右下と3か所から選択できる。
表示されるアクションも楽しい。
Dynamic To Top(ver.3.4.2)
WordPress管理画面のプラグインの新規追加で「Dynamic To Top」で検索してインストールし有効化する。設定画面はない。シンプルでわかりやすいボタンが表示される。
Skysa Scroll-to-Top(ver.1.15)
WordPress管理画面のプラグインの新規追加で「Skysa Scroll-to-Top」で検索してインストールし有効化する。
デフォルトでは画面最下部にバーが表示され、スクロールボタンが設置されている。
大げさな感じのするプラグイン。
設定方法
WordPress管理画面の設定に表示されるSkysa Bar AppsのBar ConfigurationまたはScroll-to-Topを選択してカスタマイズする。
Scroll Top and Bottom(ver.2.0)
WordPress管理画面のプラグインの新規追加で「Scroll Top and Bottom」で検索してインストールし有効化する。
二つのボタンが表示され、トップへの移動とボトムへの移動ができる。
シンプルだが、使い勝手の良いプラグイン。
設定方法
WordPress管理画面の設定に表示されるScroll Top-Bottomを選択してカスタマイズする。カスタマイズはアイコンを選択するだけのシンプルさなので簡単に理解できる。
Jqueryの有効無効があるが原則デフォルトで問題ない。
現在はこのプラグインを使用している。自分が投稿した記事に書き足したりした場合、すぐに最下部まで移動できるので重宝する。
WD3K Go Top Down(ver.0.92)
WordPress管理画面のプラグインの新規追加で「Go Top Down」で検索してインストールし有効化する。上記Scroll Top and Bottom(ver.2.0)と似ている。
二つのボタンが表示され、トップへの移動とボトムへの移動ができる。
設定画面はない。
その他Go to Topプラグインで試したが動かなかったもの
以下のプラグインも試用してみたが、うまく動作しなかった。
ScrollTo Top ver.1.2.1
Animated Back To Top Button ver.1.0
Back To Top ver.1.4
簡単に自作してみた
プラグインではないが、簡単に設置できるので、こちらの記事も参考にしてほしい。
スクロールすると上へ戻る(GO TO TOP)にいくつか機能を加えてクイックドック(フッターナビ)風にしてみた
コメント
[…] WP TO TOPの使い方:ワードプレス プラグイン「WP To Top」設定方法 上に戻るボタン(Go to Top)の設置プラグイン「WP to Top」他多数 […]