上に戻るボタン(Go to Top)の設置プラグイン「WP to Top」他多数

【この記事を読むのに必要な時間は約 3 分です。】

縦に長いページでは、上に戻るボタンを設置すると閲覧者に親切。 このWordPressサイトではWP to Top(ver.0.1)を利用している。 WordPress管理画面のプラグインの新規追加で「WP to Top」で検索してインストールし有効化する。

WP to Top

WP to Top


スポンサーリンク
レクタングル(大)広告




設定方法

WordPress管理画面の設定に表示されるWP to Topを選択してカスタマイズする。
text to showでボタンのテキストを変更。
Background colorで背景色を変更。
Foreground colorで文字色を変更。
positionで右下か左下かを選択。(2か所のみ)

WP To Top 設定画面

WP To Top 設定画面

その他のGo to Topプラグイン

他にも同じ機能のプラグインが多数あるのでいくつか紹介する。

Go to top(ver.0.0.8)

WordPress管理画面のプラグインの新規追加で「Go to Top」で検索してインストールし有効化する。

Go to top

Go to top

設定方法

WordPress管理画面の設定に表示されるGo to topを選択してカスタマイズする。 text to showでボタンのテキストを変更。
Scroll Speedでスクロールスピードを変更。
Start Positionで表示されるタイミングを変更。
Easeで動作を変更。
Button typeでテキスト表示から△または▲に変更。

Go to top 設定画面

Go to top 設定画面

JCWP Scroll To Top(ver.1.3)

WordPress管理画面のプラグインの新規追加で「JCWP Scroll To Top」で検索してインストールし有効化する。

JCWP Scroll To Top

JCWP Scroll To Top

「APIキー」の取得を求められるので、Akismetの有効化を参考にして取得する。もし、既に他のプラグインで「APIキー」を取得している場合は、同じ「APIキー」を使用できる。

APIキーの入力

APIキーの入力

また、寄付を求められるが応じなくても個人使用の場合は問題ない。

寄付の要請

寄付の要請

設定方法

WordPress管理画面の設定に表示されるJCWP Scroll To Topを選択してカスタマイズする。簡単な英語なので特に説明しないが、Container Border Radiusをデフォルトの10px 10px 0px 0pxから全て10pxにしてボタンの形を変更した。

JCWP Scroll To Top 設定画面

JCWP Scroll To Top 設定画面


JCWP Scroll To Top ボタン形状の変更

JCWP Scroll To Top ボタン形状の変更

カスタマイズの自由度は高いし、わかりやすいのでお勧め。
表示ポジションも左下、中央下、右下と3か所から選択できる。
表示されるアクションも楽しい。

Dynamic To Top(ver.3.4.2)

WordPress管理画面のプラグインの新規追加で「Dynamic To Top」で検索してインストールし有効化する。設定画面はない。シンプルでわかりやすいボタンが表示される。

Dynamic To Top

Dynamic To Top

Skysa Scroll-to-Top(ver.1.15)

WordPress管理画面のプラグインの新規追加で「Skysa Scroll-to-Top」で検索してインストールし有効化する。
デフォルトでは画面最下部にバーが表示され、スクロールボタンが設置されている。
大げさな感じのするプラグイン。

Skysa Scroll-to-Top

Skysa Scroll-to-Top

設定方法

WordPress管理画面の設定に表示されるSkysa Bar AppsのBar ConfigurationまたはScroll-to-Topを選択してカスタマイズする。

Skysa Scroll-to-Top 設定画面

Skysa Scroll-to-Top 設定画面


Skysa Scroll-to-Top 設定画面2

Skysa Scroll-to-Top 設定画面2

Scroll Top and Bottom(ver.2.0)

WordPress管理画面のプラグインの新規追加で「Scroll Top and Bottom」で検索してインストールし有効化する。
二つのボタンが表示され、トップへの移動とボトムへの移動ができる。
シンプルだが、使い勝手の良いプラグイン。

Scroll Top and Bottom

Scroll Top and Bottom

設定方法

WordPress管理画面の設定に表示されるScroll Top-Bottomを選択してカスタマイズする。カスタマイズはアイコンを選択するだけのシンプルさなので簡単に理解できる。
Jqueryの有効無効があるが原則デフォルトで問題ない。

現在はこのプラグインを使用している。自分が投稿した記事に書き足したりした場合、すぐに最下部まで移動できるので重宝する。

Scroll Top and Bottom 設定画面

Scroll Top and Bottom 設定画面

WD3K Go Top Down(ver.0.92)

WordPress管理画面のプラグインの新規追加で「Go Top Down」で検索してインストールし有効化する。上記Scroll Top and Bottom(ver.2.0)と似ている。
二つのボタンが表示され、トップへの移動とボトムへの移動ができる。
設定画面はない。

WD3K Go Top Down

WD3K Go Top Down

その他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)にいくつか機能を加えてクイックドック(フッターナビ)風にしてみた

スポンサーリンク
レクタングル(大)広告




もし良ければお願いします。

良かったらフォローお願いします。

スポンサーリンク
レクタングル(大)広告




コメント

  1. […] WP TO TOPの使い方:ワードプレス プラグイン「WP To Top」設定方法 上に戻るボタン(Go to Top)の設置プラグイン「WP to Top」他多数 […]