画面下部にスクロール追従する固定メニューを表示できるWordPressプラグイン「Fixed Bottom Menu」

画面下部にスクロール追従する固定メニューを表示できるWordPressプラグイン「Fixed Bottom Menu」

画面下部にスクロール追従する固定メニューを表示できるWordPressプラグイン「Fixed Bottom Menu」

Fixed Bottom Menuは、スクロールに追従するフッター固定メニューを表示できるWordPressプラグインです。

Fixed Bottom Menuのインストール

インストール手順は以下の通りです。

※PHPバージョンは8.0以上が要件です。PHP8.0以上ではない場合は動作しませんのでご注意ください。

ファイルをFTPでアップロードしてインストール

  1. Fixed Bottom Menuをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、Fixed Bottom Menuを有効化します。

WordPress管理画面でインストール

  1. [プラグイン] – [新規追加]にアクセスします。
  2. 「Fixed Bottom Menu」で検索します。
  3. [今すぐインストール]をクリックして、Fixed Bottom Menuをインストールします。
  4. [有効化]をクリックしてプラグインを有効化します。

Fixed Bottom Menuの設定

[設定] – [Fixed Bottom Menu]で各種設定を行います。

列数

メニューの列数を指定します。

1~5

メニューの「アイコン」「URL」「テキスト」を設定します。

アイコンはDashiconsから選択して、アイコン名を確認して指定します。アイコン名は下記もしくは[Copy HTML]から確認できます。

“dashicons-admin-home”の場合は、Fixed Bottom Menuの設定では”admin-home”を入力します。

外観設定

固定メニューの外観の設定を行います。

フォントサイズ 固定メニューの文字サイズ
メニューの高さ 固定メニューの高さ
行の高さ 各メニューの内部の高さ
パディング上 上部の余白
フッタークラス テーマのフッターのクラス名(固定メニューが重なって見辛い場合)
背景色 固定メニューの背景色
テキスト色 固定メニューの文字色
オーバーレイの色 マウスホバー時の色
幅の上限 固定メニューを表示する幅の上限
重ね順 z-indexの値

各種設定が完了したら[設定を保存]をクリックして反映させます。

「幅の上限」に設定している幅よりも小さい画面では、以下のように画面下部に固定メニューが表示されます。

あとがき

簡単にスクロール追従する固定メニューが実装できて便利ですね。

フッター固定メニューを実装したい時は、ぜひFixed Bottom Menuをお役立てください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です