【WordPress】プラグインを使ってHOMEに戻るボタンを設置する

INDEX

プラグインを使ってHOMEに戻るボタンを設置する

スマートフォンのモバイル端末でサイトを表示させた場合、下側にトップページに戻るためのホームボタンが設置されています(WordPressテーマ Cocoon及びTHE THORの場合）。

しかし、PCでの表示の場合は、トップページに戻るためのホームボタンがありません。

そこで、PCの表示の際にもトップページに戻るためのホームボタンを設定したいと思います。

今回はカスタマイズでトップページに戻るためのホームボタンを設置するのではなく、手っ取り早くプラグインを導入してみました。

今回導入したプラグインは「WPFront Scroll Top」です。

WordPressシステムの新規追加で、プラグイン「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

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」設定後このようになりました。

右端上にある矢印がトップページに戻るための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表示でもエントリー記事閲覧中に、直ぐにトップページ（ホームページ）に戻ることができてレスポンスが良くなりました。