はじめに
高齢者向けのサイトを制作していますが、高齢者の皆様はハンバーガーメニューが苦手です。誰にでも分かり易くてワンタッチで操作できる固定フッターメニューは必須です。カスタムテンプレートで制作していましたが、プラグイン化しました。
5,000以上サイトで有効化中
固定メニューを追加します。基本メニューは下ですが、上、左、右にも表示できます。
仕様
| 日付 | 対応バージョン | リンク |
|---|---|---|
|
最終更新: 3か月 前
リリース: 2019-11-17
|
PHP: 8.0
WordPress: 5.0
検証済み: 6.6.2
|
備考
固定メニューを追加します。基本メニューは下ですが、上、左、右にも表示できます。
リンク
- ５つのリンク先を指定できます。
- 各リンクのアイコン、URL、テキストのフィルターを提供します。
オプション
- 列数を１～５まで指定できます。
- フォントサイズを px、rem、em で指定できます。
- メニューの高さを px、rem、em で指定できます。
- 行の高さを px、rem、em で指定できます。
- パディングを px、rem、em で指定できます。
- ヘッダーとフッターの重なりを除去するクラスを指定できます。
- テキスト、ボタン、オーバーレイの色を指定できます。
- 表示幅の上限を指定できます。
- css 要素の重ね順を指定できます。
- 上記のオプションのフィルターを提供します。
その他のフィルター
- メニューを消去するフィルターを提供します。
使い方
ライブデモ
アイコン
- Dashicons を指定できます。
カスタマイズ
- テンプレートファイルは、柔軟なカスタマイズを可能にします。
- デフォルトのテンプレートファイルは、
template/fixedbottommenu-template-html.phpとtemplate/fixedbottommenu-template-css.phpです。これを参考に、以下のフィルターを使って別のテンプレートファイルを指定することができます。
/** ==================================================
* Filter for template file of html.
*
*/
add_filter(
'fixed_bottom_menu_generate_template_html_file',
function () {
$wp_uploads = wp_upload_dir();
$upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
$upload_dir = untrailingslashit( $upload_dir );
return $upload_dir . '/tmp/fixedbottommenu-template-html.php';
},
10,
1
);
/** ==================================================
* Filter for template file of css.
*
*/
add_filter(
'fixed_bottom_menu_generate_template_css_file',
function () {
$wp_uploads = wp_upload_dir();
$upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
$upload_dir = untrailingslashit( $upload_dir );
return $upload_dir . '/tmp/fixedbottommenu-template-css.php';
},
10,
1
);
- CSS ファイルは別途設定可能です。以下のフィルターをご覧ください。
/** ==================================================
* Filter for CSS file.
*
*/
add_filter(
'fixed_bottom_menu_css_url',
function () {
$wp_uploads = wp_upload_dir();
$upload_url = $wp_uploads['baseurl'];
if ( is_ssl() ) {
$upload_url = str_replace( 'http:', 'https:', $upload_url );
}
$upload_url = untrailingslashit( $upload_url );
return $upload_url . '/tmp/fixedbottommenu.css';
},
10,
1
);
このブログの下部にも採用しました。1300px 以下のサイズで適用されています。
機能
- リンク
- ５つのリンク先を指定できます。
- 各リンク毎のアイコン・URL・テキストのフィルターを提供します。
- オプション
- 列数を3～5まで指定できます。
- フォントサイズを指定できます。
- メニューの高さを指定できます。
- メニュー内の行高を指定できます。
- メニューのパディング上部を指定できます。
- テキスト、ボタン、マウスオーバーの色を指定できます。
- 表示幅の上限を指定できます。
- css 要素の重ね順を指定できます。
- 上記オプションのフィルターを提供します。
- その他のフィルター
- メニューを消去するフィルターを提供します。
- デモ
- アイコン
- Dashicon を指定できます。
Comments
“固定フッターメニューを表示するプラグイン” への24件のフィードバック
たくさんのすばらしいプラグインを開発していただきありがとうございます。
Fixed Bottom Menuを使わせていただきたいと思っているのですが、リンク先を5つではなく3つで使いたいと思っています。もし可能であればcssでの変更方法などご教授いただけないでしょうか？
Version 1.15 で、3列から5列までのメニューの使用を可能にしました。Version up 後、反映されない場合は、表示端末のブラウザのキャッシュを削除してみてください。
さっそくありがとうございます！利用させて頂きました！
素晴らしいプラグインに感謝しております。
とても便利なプラグインを作成くださって感謝いたします。
こちら、PC版でもフッター表示されるように設定はできますでしょうか？
可能でしたら、教えていただけますと幸いです。
設定で「幅の上限」を大きい値にすれば良いです。例えば、40000 とか。
このプラグインですが、アイコンは独自のものを使用することは可能でしょうか？？
設定画面からはできません。またフィルターも用意してありません。ご自分でコードを読んで改変してください。
素晴らしいプラグインありがとうございます。
早速使わせていただきました。
スマホで表示させる際、高齢者の方だと文字が小さく読みにくいようです。
そのため要望ですが、現行よりさらに大きく表示させることはできますでしょうか？
あと、一つづつが独立したボタン式のようにすることはできますでしょうか？
現状は設定メニューからのサイズ変更のみです。css/fixedbottommenu.css をハックして変更してみてください。
Ver 1.17 より、設定画面で最大 20px まで設定可能です。
また、フィルターを提供するので、それ以上のサイズも可能です。
素晴らしいプラグインをありがとうございます。 スマホの場合だけ表示させ、PCでは表示しないようにすることはできますか？
「外観設定」->「幅の上限」を調整してください。
ありがとうございます。上手くいきました
３〜５列で設定可能かと思いますが、２列のみにしたい場合はどのようにすればよろしいでしょうか。
以下を参考にしてください。
https://fbm.riverforest-wp.info/ja/fixed-bottom-menu-%e3%83%a9%e3%82%a4%e3%83%96/%e5%88%97%e5%89%8a%e9%99%a4/
無効化(メニューを消す)したい場合はどのようにすればよいでしょうか？
「プラグインの無効化」を押しても消えず。
以下を参考にしてください。
https://fbm.riverforest-wp.info/ja/fixed-bottom-menu-%e3%83%a9%e3%82%a4%e3%83%96/%e9%9d%9e%e8%a1%a8%e7%a4%ba/
とても便利なプラグインありがとうございます。
フッターメニューですが常時表示ではなく、スクロールしたら表示するようにしたいのですが、可能でしょうか？
残念ながら、現在対応しておりません。
有難うございます。文字を大きくする方法は分かるのですが、アイコン表示を拡大するのはどのようにするのでしょうか。
初心者でも安心して使えるプラグインをありがとうございます。
こちらでせっかく設置できたメニューの上に、ヘッダーの画像だけ乗ってしまうのですがどうしたらよいでしょうか。
確認しました。設定の所の重ね順(zindex)の値をいろいろと変更してみてください。
1．Ｘ（旧TWITTER）アイコンを使用するには、下記、有料版を購入して使用できるようになりますか？
https://shop-jp.riverforest-wp.info/fixed-bottom-menu-add-on-icon/
2．常時表示ではなく、スクロールすることにより表示・非表示が出来るような仕様は、お考えでしょうか。
１．アドオンでサポートしている Font Awesome か、Google Material Icons に X のアイコンが含まれていれば可能かと思います。
２．プラグイン本体は、テンプレート方式を採用しておりますので、HTML,CSS の仕様変更が自在に行えます。是非、カスタマイズにチャレンジしてみてください。
この記事のコメント欄は閉じます。
このプラグインに関する事は、こちらへお願いします。ただコメントいただいても返信しない事の方が多いと思います。