プラグインを使ってHOMEに戻るボタンを設置する
スマートフォンのモバイル端末でサイトを表示させた場合、下側にトップページに戻るためのホームボタンが設置されています(WordPressテーマ Cocoon及びTHE THORの場合)。
しかし、PCでの表示の場合は、トップページに戻るためのホームボタンがありません。
そこで、PCの表示の際にもトップページに戻るためのホームボタンを設定したいと思います。
今回はカスタマイズでトップページに戻るためのホームボタンを設置するのではなく、手っ取り早くプラグインを導入してみました。
今回導入したプラグインは「WPFront Scroll Top」です。
WordPressシステムの新規追加で、プラグイン「WPFront Scroll Top」を検索して、インストール後有効化します。
プラグイン WPFront Scroll Top 設定内容
今回、プラグイン「WPFront Scroll Top」の設定内容については以下通りとなります。
Display
Enabled(有効) | ON |
JavaScript Async(JavaScript非同期) | ON |
Scroll Offset(スクロールオフセット) | 80px |
Button Size(ボタンのサイズ) | 0px 0px |
Button Opacity(ボタンの不透明度) | 75% |
Button Fade Duration(ボタンのフェード期間) | 200ms |
Scroll Duration(スクロール時間) | 400ms |
Auto Hide(自動非表示) | OFF |
Auto Hide After(後に自動非表示) | 2sec |
Hide on Small Devices(小型デバイス時非表示) | ON |
Small Device Max Width(小型デバイスの最大幅) | 640px |
Hide on Small Window(小さなウィンドウ時非表示) | ON |
Small Window Max Width(小さなウィンドウの最大幅) | 640px |
Hide on WP-ADMIN(wp-adminで非表示) | ON |
Hide on iframes(iframeで非常時) | OFF |
Attach on Shutdown(シャットダウン時に添付) | OFF |
Button Style(ボタンスタイル) | Font Awesome |
Button Action(ボタン動作) | Link to Page Page URL:https://masaa.net/ |
Location
Location(位置) | Top Right |
Enabled(有効) | ON |
Margin X(マージンX) | 60px |
Margin Y(マージンY) | 80px |
Filter
Display on Pages(ページ表示) | Exclude in following pages [Use the textbox below to specify the post IDs as a comma separated list.] [Page] Home |
FilterFont Awesome Button
Icon Class(アイコンクラス) | fas fa-sign-in-alt fa-6x faa-horizontal animated |
Font Awesome URL | |
Do not include URL(URL含まず) | ON |
Icon Color(アイコンカラー) | #fe619a |
Custom CSS(カスタムCSS) | #wpfront-scroll-top-container {filter:drop-shadow(4px 4px 1px #aaa);} |
プラグイン WPFront Scroll Top 設定後
プラグイン「WPFront Scroll Top」設定後このようになりました。
右端上にある矢印がトップページに戻るためのHOMEボタンなります。
「Button Style(ボタンスタイル)」は、今回用意されている画像【Image】でなく【Font Awesome】のWebアイコンフォントを使用しました。
使用したWebアイコンフォントはHOME型でも良かったのですが、今回は矢印のアイコンを使ってみました。
WordPressテーマ THE THOR(ザ・トール)などのように【Font Awesome】を使っていない場合には、プラグイン「WPFront Scroll Top」に標準で収められている【Image】画像を使うと良いでしょう。
必ず「Button Action(ボタン動作)」の項目設定は、自分のウェブサイトのURLを記載します。
なお、【Font Awesome】に対して、アニメーションのカスタマイズを行っています。
実際に右上の矢印のアイコンをクリックして、その動作を確認してみて下さい。
最後に
今回のプラグインは、自分が運営しているMASAa.net、ZMASAa.blog、MASAa.blogの全部のウェブサイトに導入しました。
そのお陰でPC表示でもエントリー記事閲覧中に、直ぐにトップページ(ホームページ)に戻ることができてレスポンスが良くなりました。
コメント