27 July

WPFront Scroll Topを使ってみよう

ワードプレスのプラグイン「WPFront Scroll Top」を追加するして、画面最上部までスクロールさせるボタンを設置してみよう。細かくカスタマイズ可能で、サンプル画像も多数用意されています。

まずは、プラグインの新規追加からWPFront Scroll Topを追加と有効化をして、インストール済みプラグインのWPFront Scroll Topのsettingを開き各種設定をします。

Enabled(有効化)にチェックを入れるだけで機能します。

特に変更する必要はありませんが、「JavaScript Async」にチェックを入れると、JavaScriptを非同期で読み込むのでページの表示速度が上がる様ですが、正常に動作しない時もあるようなので、その時はチェックを外してください。
Hide on WP-ADMIN」にチェックを入れると、管理画面でボタンを非表示にすることができます。

赤字の項目にチェックを入れ、他はお好みでカスタマイズして下さい。

Enabled プラグインの有効化
JavaScript Async JavaScriptを非同期で読み込む
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※④ 画像orテキストの選択
Image ALT ④でImageを選択した場合の画像の説明(Alt属性)
Text ④でTextを選択した場合のテキスト文字
Text Color ④でTextを選択した場合の文字の色
Background Color ④でTextを選択した場合の背景の色
Custom CSS CSSでカスタマイズする際に入力
Location※⑤ ボタンが表示される位置
Margin X ⑤で指定した位置の横余白
Margin Y ⑤で指定した位置の縦余白
Display on Pages ボタンを表示させるページ(Includeは指定・Excludeは除外)
Image ④でImageを選択した場合の画像
Image ALT 画像の代替テキスト

最後に「Image Button」から使いたいボタンを選択し、「変更を保存」をクリックで完了です。オリジナルのボタンを使いたい場合はダッシュボードのメディアに使いたい画像をアップロードし、「Custom URL」にチェックを入れ、「Media Library」ボタンをクリックして画像を選択します。すると自動でURLが入力されますので「変更を保存」をクリックで完了です。