WordPress

【WordPress】ウェブサイトにメガメニューを追加Mega Menu Plugin for WordPress – AP Mega Menu

April 2, 2017
Mega Menu Plugin for WordPress - AP Mega Menu


AP Mega MenuはWordPress用メガメニュープラグイン。レスポンシブ、水平/垂直レイアウトメガメニュー,ウィジェット化、ドラッグ&ドロップ、フライアウトまたはメガメニューをサポート。

Mega Menu Plugin for WordPress – AP Mega Menuプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> AP Mega Menuを検索
有効化にするとAP MEGA MENUが追加されます。

AP MEGA MENU

GENERAL SETTINGS

Event Behaviour クリック設定の際のイベント
Menu Label Animation Type メニューラベルアニメーションの種類
Animation Duration アニメーションの時間
Animation Delay アニメーションの遅延時間
Animation Iteration Count アニメーションの繰り返し回数

MOBILE SETTINGS

Enable AP Mega Menu on Mobile モバイルでAPメガメニューを有効
Disable Submenu Retractor メニューの最後に閉じるボタンを表示
Toggle Behavior トグル動作
Toggle Menu Close Icon トグルメニュー閉じるアイコン
Toggle Menu Open Icon トグルメニューを開くアイコン

IMAGE SETTINGS

  1. Image Size 画像サイズ(functions.phpでサムネイル画像サイズを増やしているのでサイズが多く表示されています。)
  2. Set Default Custom Width カスタムイメージの幅

ICON SETTINGS

  1. Hide All Menu Icons すべてのメニューアイコンを非表示にします
  2. Icon Width アイコンの幅

Shortcodes

  1. Integrate Specific Theme Location テーマの場所を統合
  2. Manual Integration Code マニュアル統合コード

その他にもカスタムCSS、インポート、エクスポートも準備されています。

Theme Settings


Default Themeがあるはずなので、Editで中身を見てみましょう。

Main Settings

Theme Title テーマタイトル
Line Height 行の高さ
Z Index Zインデックス
Shadow

Menu Bar Settings

Menu Background メニューの背景
Menu Font color メニューフォントの色
Font Family フォントファミリー
Font Weight フォントの太さ
Menu Padding メニューパディング
Menu Bar Width メニューバーの幅
Menu Bar Border Radius メニューバーのボーダー半径
Menu Bar Border Color
Menu Bar Alignment メニューバーの揃える位置
Menu Bar Margin Top メニューバーのマージントップ
Menu Bar Margin Bottom メニューバーのマージンボトム

Top Level Menu Items Settings

Background [Hover] 背景[ホバー]
Fonts フォント
Menu Left Dividers メニュー左仕切り
Enable Menu Label Background Color メニューラベルの背景色を有効
Menu Label Background Color メニューラベルの背景色
Menu Label Font Color メニューラベルのフォントの色
Menu Label Font Size メニューラベルのフォントサイズ
Menu Label Font Family メニューラベルのフォントファミリ
Menu Label Font Weight メニューラベルのフォントの太さ
Menu Label Font Transform メニューラベルのフォント変換

Mega Menu Settings

Background 背景
Define Width 幅を定義します
Inner Padding 内側のパディング
Border 境界線
Box Shadow ボックスシャドウ
Box Shadow Color ボックスシャドウの色

Widgets Settings

Heading Title Fonts タイトルのフォントを見出し
Content Font コンテンツフォント
Widget Heading Margin ウィジェット見出しマージン

Extra Top Section Settings

Top Content Fonts トップコンテンツフォント
Content Margin コンテンツマージン

Extra Bottom Section Settings

Bottom Content Fonts ボトムコンテンツフォント
Content Margin コンテンツマージン

Flyout Settings

Background 背景
Fonts フォント
Flyout Item Margin フライアウト項目のマージン
Flyout Item Padding フライアウト項目のパディング
Flyout Width フライアウト幅

Responsive & Mobile Settings

Toggle Bar Main Settings

Toggle Bar Background Color トグルバーの背景色
Toggle Bar Height トグルバーの高さ
Responsive Breakpoint レスポンシブブレークポイント

Toggle Icons Settings

Toggle Icons Font トグルアイコンフォント
Toggle Bar Icon Alignment トグルバーアイコンの整列

Responsive Submenus Settings

Responsive Submenus Retractor レスポンシブサブメニューリトラクター
Responsive Submenus Retractor Text レスポンシブサブメニューリトラクターテキスト

Search Bar Settings

Font Size フォントサイズ
Width
Text Font Color テキストフォントの色
Background Color 背景色
Text Placeholder Color テキストのプレースホルダの色
Icon Color アイコンの色

外観 >> メニュー

メニューの位置にチェックが入るとSelect AP Mega Menu Settingsが使用出来るようになります。

Enable 有効にします
Orientation 水平方向か垂直方向かを選択
Trigger Effect トリガーエフェクト
Transition 遷移
Choose Theme Type テーマの種類を選択します。
Available Skin 利用可能なスキン(Available Skineを選択中に表示)
Custom Theme テーマを選択(Custom Themeを選択中に表示)

テーマセッティングをしているものを使用する場合はテーマの種類をCustom Themeにし、設定したテーマ名を選択。保存をクリックします。


メニューを幾つか増やしました。


メニュー項目をホバーするとAP Mega Menuが表示されます。

サブメニュー

SubMenu Settings

Disable Menu Text メニューテキストを無効にする
Visible Hidden Menu Text メニューテキストを隠す
Active Menu Link アクティブなメニューリンク
Hide Arrow 矢印を非表示
Hide Menu On Mobile モバイル上のメニュー非表示
Hide Menu On Desktop デスクトップ上のメニュー非表示
Show Menu Icon メニューアイコン表示
Active Single Menu 単一のメニューを有効
Menu Item Alignment メニュー項目の配置
Menu Label メニューラベル
Sub Menu Alignment サブメニューの配置
Menu Visibility on User Based ユーザーベースのメニューの可視性

Icon Settings


メニューアイコンを設定できます。


Font Awesome Icons以外のアイコンフォントを変更する場合は左上のセレクトボックスから選択。

Custom Settings

Use Custom Settings カスタム設定を使用
Display Posts Image 投稿画像を表示
Default Thumbnail Image Link デフォルトのサムネイル画像リンク
Show Excerpt 抜粋表示
Excerpt Length 抜粋の長さ
Display Readmore Readmore表示
Readmore Text Readmoreテキスト
Display Date 日付表示
Display Author Name 著者名を表示
Display Category Name カテゴリ名を表示
Image Position 画像位置
Sub Menu Text Position Preview サブメニューテキストの位置プレビュー

Image Settings

Image Size 画像サイズ
Inherit Custom Default Width カスタムデフォルトの幅を継承
Image Custom Width 画像カスタムの幅

メニュー

AP Mega Menu Settings


Sub menu display modeがMega Menuの場合にAdd Widgetでウィジェットを追加することが可能になります。後はカラムを選択。カラムは1〜8columnsから選択可能。

General Settings

Disable Menu Text メニューテキストを無効にする
Visible Hidden Menu Text メニューテキストを隠す
Active Menu Link アクティブなメニューリンク
Hide Arrow 矢印を非表示
Hide Menu On Mobile モバイル上のメニュー非表示
Hide Menu On Desktop デスクトップ上のメニュー非表示
Show Menu Icon メニューアイコン表示
Active Single Menu 単一のメニューを有効
Menu Item Alignment メニュー項目の配置
Menu Label メニューラベル
Sub Menu Alignment サブメニューの配置
Menu Visibility on User Based ユーザーベースのメニューの可視性

Mega Menu Settings

Show Top Content コンテンツを上に表示
Show Bottom Content ボトムコンテンツを表示
Select Top Content Type トップコンテンツタイプの選択
Top Text Content トップテキストコンテンツ
Select Bottom Content Type ボトムコンテンツタイプを選択
Bottom Text Content ボトムテキストコンテンツ
Mega Menu Horizontal Position メガメニュー水平位置
Mega Menu Vertical Position メガメニュー垂直位置

Flyout Settings

  1. Flyout Horizontal Position フライアウト水平位置
  2. Flyout Vertical Position フライアウト垂直位置

Menu Replacement Settings

検索メニューなどのためにショートコード

  1. [wp_megamenu_search_form template_type="inline-search" style="inline-toggle-left"]
  2. [wp_megamenu_search_form template_type="inline-search" style="inline-toggle-right"]
  3. [wp_megamenu_search_form template_type="megamenu-type-search"]

Icon Settings


アイコンを選択。


レスポンシブ時

ウィジェット


ウィジェットを移動させます。

OrientationをVertical、Vertical Alignment TypeをRightに設定。