文字数の多い記事や複数の画像を表示することによってスクロール量が多い場合、トップページに戻るボタンがあれば便利ですよね。
今回は、簡単にトップページに戻るボタンを設置するために、本ブログで使用しているおすすめのプラグインについて、詳しく解説しながら紹介させていただきます。
WPFront Scroll Top とは？
今回ご紹介するものは、利用者から5つ星評価を獲得している、WPFront Scroll Topという人気のプラグインです。
初期設定に登録されているボタンのデザインだけでも70種類以上あり、オリジナル画像を登録して使用することもできますので、自分好みのボタンを設置することが可能です。
日本語には対応しておりませんが、設定項目については後ほど解説させていただきますのでご安心ください。
プラグインをインストールして有効化してみよう
それでは早速、プラグインをワードプレスにインストールし、有効化してみましょう。
ワードプレスにログインし、上記のとおり、【プラグイン】→【新規追加】と選択します。
すると、メイン画面に検索ページが表示されますので、右上にある検索窓へ、WPFront Scroll Topと入力してみましょう。
検索結果の中から当該プラグインを探し、【インストール】をクリックすれば自動的にインストールが開始されます。
インストールが完了した後、プラグインのsetting画面を開き、【Enabled】にチェックを入れ、変更を保存すればプラグインの有効化が完了します。
この時点で、初期設定のボタンが表示されるようになります。
設定項目を編集してカスタマイズしてみよう
次は自分好みにカスタマイズをしてみましょう。
setting画面における設定項目について、英語表記となっているため、内容について簡単に解説します。
初期設定のままでも問題なく動作しますが、説明文が赤字になっている項目については、設定しておくことをおすすめします。
設定項目は次のとおりです。
| 項目 | 説明文 |
| ・Enabled | プラグインが有効化される |
| ・JavaScript Async | JavaScriptを非同期で読み込むようになる |
| ・Scroll Offset | ボタンが表示されるまでのトップからのスクロール量 |
| ・Button Size | ボタンの横幅と縦幅 |
| ・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 文字 or アイコンフォント） |
| ・Location | ボタンが表示される位置 |
| ・Margin X | 上記、設定した位置から横の余白 |
| ・Margin Y | 上記、指定した位置から縦の余白 |
| ・Display on Pages | ボタンを表示させるページ（全て or 指定 or 除外） |
| ・Image | スタイル選択で画像を選択した場合、デザイン選択 |
| ・Custom URL | オリジナル画像を使用する際の画像URL |
| ・Image ALT | スタイル選択で画像を選択した場合、代替テキスト |
| ・Text Button | スタイル選択で文字を選択した場合、デザイン設定 |
| ・Front Awesome Button | スタイル選択でアイコンフォントを選択した場合、デザイン設定 |
オリジナル画像を設定してみよう
登録されているボタンのデザイン以外の画像を使用したい場合の設定方法について説明します。
まず、画像本体を準備しましょう。
画像は自分で作成したオリジナル画像でも構いませんし、オリジナル画像が準備できない場合にはフリー素材でも構いません。
フリー素材の入手方法については次の記事を参考にしてみてください。
画像が準備できたら、次はワードプレスへアップロードします。
ダッシュボードを開き、【メディア】→【新規追加】と選択し、画像をアップロードしましょう。
アップロードが完了したら、【メディア】→【ライブラリ】と選択し、アップロードした画像をクリックします。
すると、画像の詳細情報が表示され、右側に画像のURLが設定されているはずですので、そのURLをコピーしてください。
最後にプラグインの設定画面を開き、【Custom URL】を選択し、コピーしたURLを貼り付ければ完了です。
後は、表示サイズを確認しながら微調整を行いましょう。
まとめ
いかがでしたか？
たまに見かける、トップへ戻るおしゃれなボタンも、プラグインを使用するれば10分とかからず設定することができます。
今後も使用してみて気に入ったプラグインがあれば、紹介ついでに導入方法の解説を記事にしていきますので、参考にしてくださいね。
ではでは。
