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

WPFront Scroll Top

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

このプラグインを使うと、画面最上部までスクロールするボタンを設置することができます。

目次

設定と使い方

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

使い方

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

WPFront Scroll Topの使い方
設定詳細
Enabledプラグインを有効化
JavaScript AsyncJavaScriptを非同期で読み込む
Scroll Offsetどれだけ下にスクロールしたらボタンが表示されるか
Button Sizeボタンの横幅と縦幅(デフォルトは0x0)
Button Opacityカーソルを乗せる前のボタンの透明度
Button Fade Duration画面最上部に戻った際にボタンが消えるまでの時間
Scroll Durationボタンをクリックして画面最上部に戻るまでの時間
Auto Hide①で設定した時間でボタンが消える
Auto Hide After※①ボタンが消えるまでの時間
Hide on Small Devices②で設定したデバイス以下の場合はボタンが表示されない
Small Device Max Width※②ボタンを非表示にするデバイスの横幅
Hide on Small Window③で設定したウィンドウ以下の場合はボタンが表示されない
Small Window Max Width※③ボタンを非表示にするウィンドウの横幅
Hide on WP-ADMIN管理画面でボタンを非表示
Hide on iframesインラインフレーム上でボタンを非表示
Button Style※④ボタンのスタイルを選択
Button Action移動(遷移)する場所を選択
Location※⑤ボタンが表示される位置
Margin X⑤で指定した位置の横余白
Margin Y⑤で指定した位置の縦余白
Display on Pagesボタンを表示させるページ(Includeは指定・Excludeは除外)
Image Button④でImageを選択した場合の画像選択と代替テキストの設定
Text Button④でTextを選択した場合の設定
Font Awesome Button④でFont Awesomeを選択した場合の設定

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

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

フィルター

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

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

WPFront Scroll Topフィルター

画像の変更

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

WPFront Scroll Top画像の変更

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

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

最後に

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

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

よかったらシェアしてね!

- シンプルなのに、高機能 -

swell_pr_banner

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。

ブロックエディター完全対応のWordPressテーマ。

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次