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

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

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

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

[say name="" img="https://bryog.com/wp-content/uploads/vodman1.jpg" ]そうなると、画面のどこかに表示させたいな。[/say]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

左側に「URL」と「Link Text」とあるので、それらに必要事項を入力して「Add to 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」で１から５のテンプレートで選択します。

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

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

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

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

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

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

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

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