WPFront Scroll Topの使い方:画面上部へスクロールするボタンの設置

WPFront Scroll Top

プラグインWPFront Scroll Topの設定と使い方をまとめています。

画面下部に画面最上部までスクロールするボタンを設置できるプラグインです。

目次

設定と使い方

プラグインを有効化すると、管理画面の設定に「Scroll Top」が追加されます。

使い方

管理画面の設定「Scroll Top」を開いて、「Enabled」にチェックを入れるだけで機能します。

WPFront Scroll Topの使い方
設定詳細
有効プラグインを有効化
JavaScript の非同期読み込みJavaScriptを非同期で読み込む
スクロールオフセット値どれだけ下にスクロールしたらボタンが表示されるか
ボタンサイズボタンの横幅と縦幅(デフォルトは0x0)
ボタンの不透明度カーソルを乗せる前のボタンの透明度
フェードアウトまでの秒数画面最上部に戻った際にボタンが消えるまでの時間
スクロールの速さボタンをクリックして画面最上部に戻るまでの時間
自動的に非表示①で設定した時間でボタンが消える
非表示までの秒数※①ボタンが消えるまでの時間
モバイル端末表示時は隠す②で設定したデバイス以下の場合はボタンが表示されない
デバイスの最小幅※②ボタンを非表示にするデバイスの横幅
小さいウィンドウでは非表示③で設定したウィンドウ以下の場合はボタンが表示されない
ウィンドウの最小幅※③ボタンを非表示にするウィンドウの横幅
管理画面 (WP-ADMIN) で隠す管理画面でボタンを非表示
iframe で隠すインラインフレーム上でボタンを非表示
ボタンのスタイル※④ボタンのスタイルを選択
ボタンクリック時の動作移動(遷移)する場所を選択
場所※⑤ボタンが表示される位置
横方向のマージン⑤で指定した位置の横余白
縦方向のマージン⑤で指定した位置の縦余白
表示するページボタンを表示させるページ(Includeは指定・Excludeは除外)
ボタン画像④でImageを選択した場合の画像選択と代替テキストの設定
テキストボタン④でTextを選択した場合の設定
Font Awesome ボタン④でFont Awesomeを選択した場合の設定

設定は全て任意ですが、「JavaScript Async」にチェックを入れると、JavaScriptを非同期で読み込むのでページの表示速度が上がります(正常に動作しない時はチェックを外す)。

また、「Hide on WP-ADMIN」にチェックを入れると、管理画面でボタンを非表示にできます。

フィルター

初期設定では、全てのページにスクロールボタンが表示されます。

特定のページでのみ表示させたい及び特定のページで非表示にしたい時はここで設定できます。

WPFront Scroll Topフィルター

画像の変更

用意されている画像以外にも、オリジナル画像をアップロードして使うことができます。

WPFront Scroll Top画像の変更

画像に特に意味はないので、Image ALT(Alt属性)は空欄のままで構いません。

トップへの矢印アイコンを探している方は、Iconfinder等の無料素材サイトからダウンロードして下さい。

最後に

配置の指定から画像の変更まで、細かい調整も可能なので、サイトに画面上部へスクロールするボタンを設置したい時に使うと便利なプラグインです。

ただ、最初から同じ機能が実装されているテーマでは不要です(有料テーマに多い)。

シェアしてね!

この記事を書いた人

2024年3月6日に始まったGoogleのコアアップデートは4月19日に完了していました(一週間以上経ってからの告知)。昨年10月に続いて、今回の調整もアクセスマイナス。昨年同時期と比較すると、アクセスは1/2~1/3程度になってしまいました。ユーザーにとって使いやすい検索エンジンになっているのなら構わないのですが、個人的には欲しい情報がなかなか見つからない&到達するまでに時間がかかる様になった気がします。現状、回復の見込みはないので、検索エンジン以外の集客方法を模索した方がいいのかもしれません。

コメント

コメントする

アップロードファイルの最大サイズ: 30 MB。 画像, 音声, 動画, 文書, スプレッドシート, 対話型, テキスト, アーカイブ, コード, その他 をアップロードできます。 Youtube、Facebook、Twitter および他サービスへのリンクは自動的にコメント内に埋め込まれます。 ここにファイルをドロップ

目次