シングルページに便利な追従型メニュー【プラグイン – WP Floating Menu】

ランディングページにはよく使われていますけど、肌感では「シングルページ」のサイトが増えているような気がするんですよね

スマホの影響などもありスクロールすることが当たり前になっているので、下手に別ページを作ってクリックさせるよりは時代的にはラクなのかもしれないです。

ただページが縦に長くなるので、メニューを見失ってしまうのが唯一の難点

そうなると、画面のどこかに表示させたいよね…

くま五朗

ということで、今回は左右のどちらかに追従型メニュー(フローティングメニュー)を簡単に表示できる WordPress のプラグイン「WP Floating Menu」を紹介します。

追従型メニュー「WP Floating Menu」

「WP Floating Menu」は日本語に対応していないプラグインなんですけど、難しい単語などは一切ないので特に問題なく設定することができると思います。

WP Floating Menu

基本のデザインは、四角や丸といったシンプルなデザインが5つ

WP Floating Menu

このデザインをベースとして、色やフォントの大きさをカスタマイズすることも可能です。

この「WP Floating Menu」はデモも用意されているので、どんな動きでメニューが表示されるのか確認してみると良いと思います。

「WP Floating Menu」のデモサイトは、こちら

「WP Floating Menu」のメニュー設定

まずは、追従型のメニューをどのように表示するのかを設定しましょう。

WP Floating Menu」を公式からインストールしたら、WP管理画面の左メニューに「WP Floating Menu」が表示されます。

そこから、「Menu setting」を選択します。

WP Floating Menu

Menu setting」では、どういったときにメニューを表示させるかを設定することができます。

Enable/Disable Menu」を有効にすると PC 画面で、「Enable/Disable For Mobile」を有効にするとスマホ画面で表示されるようになります。

Show Menu On」では、全てのページで表示させるのかトップ画面だけで表示させるのかを選択できます。

メニューを作成する

メニューを作成するには、「Floating Menu」をクリックします。

そして、「Add New Menu」をクリックしてから作成に進みます。このプラグインではメニューは1つしか作れないので、1個作ったら編集するのみという形になります。(もしくは、一旦削除。)

WP Floating Menu

そうしたら、1個しか作れないのですが、なぜかメニューの名前を作成します。

WP Floating Menu

次に、リンクを作っていきます。

左側に「URL」と「Link Text」とあるので、それらに必要事項を入力して「Add to Menu」を押します。これを、必要なだけこなします。

WP Floating Menu

次に、メニューに表示するときの文字やアイコンなどを入力していきます。

WP Floating Menu

Show Navigation-label」にチェックを入れると、カーソルを上に置いたときやスマホでタップしたときにニュッとボタンが変形しながらラベルの文字が表示されるようになります。

Title Attribute」は、カーソルを持っていったときに説明として灰色な吹き出しで表示されるもの。ラベルは英語で、補足として日本語を加えてあげても良いかもしれません。

Tooltip Title」は、そのメニュの説明を表示させることができます。もし表示させたい場合には、チェックを忘れずに。

Open Link in New Tab」は、チェックを入れると新しいウィンドウで開くようになります。

そして最後に、「Select Icon」をクリックすると指定のアイコンを選ぶことができます。

もし使いたいアイコンがなかった場合には、上の「Use Default Icon」を「Use Custom Icon」に切り替えて好きなアイコンを入力してください。

アイコンを探すには、「Font Awesome」から探せます。ただし、古いバージョンで紐づいているので最新のバージョンのアイコンでは反応しない場合があります。

その場合には、最初の「far」を「fa」にすると表示できます。

表示内容を設定する

リンクを入力し終えたら、次はどのようにして表示するのかを設定します。

Display Setting」にタブを切り替えて、デフォルトのデザインでよければ「Inbuilt Template」で1から5のテンプレートで選択します。

WP Floating Menu

そして、メニューを左右のどちらで表示するのかを設定したら「Save Menu」を押して完了となります。

デザインをカスタマイズする

デフォルトのデザインでよければ「Inbuilt Template」から選べば良いのですが、色などを変えて使いたい場合には管理画面の左メニューから「Custom Template」に入ります。

WP Floating Menu

「Add New Template」をクリックしたら、まずは「Template Name」で名前を入力します。

そうしたら、5つのデザインから好きなものを1つ選んで、そこから色やフォントの大きさを調整します。

これらの設定が全て完了したら、先ほどの「Display Setting」に戻って「Inbuilt Template」から「Custom Template」に切り替えるとデザインが反映します

さいごに

わりと簡単におしゃれな追従型メニューを表示できるので、「WP Floating Menu」はとても便利だと思います。

id属性を使えばページ内でのジャンプもできるので、使い方によっては面白いサイトを作れると思います。

追従型メニューを表示させたい人は、ぜひ使ってみてください。