WordPress

【WordPress】WordPress用のカスタマイズ可能なメニュープラグインResponsive Menu

December 8, 2017
Responsive Menu

responsive menu
Responsive Menuは、WordPress用のカスタマイズ可能なメニュープラグイン。色々なオプションを組み合わせることができ、コーディングの経験や知識は必要ありません。

Demo

Responsive Menuプラグインを導入

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

Initial Setup


Initial Setup

Breakpoint ブレークポイント
Menu to Use 使用するメニュー
Original Menu to Hide 現在のテーマメニューを隠すために有効なCSSを入力

Container


Ordering

Order of Container Items コンテナアイテムの順序

Sizing

Width 幅
Maximum Width 最大幅
Minimum Width 最小幅

Background

Image 画像
Container Colour コンテナの背景色
Inner Container Colour 内部コンテナの背景色

Title Text

Font Size フォントサイズ
Text テキスト
Link リンク
Link Target リンク先

Title Colours

Background タイトルセクションに別の背景色
Background Hover ホバー時のタイトルセクションの背景色
Text タイトルセクションに別のテキストカラー
Text Hover ホバー時のタイトルセクションのテキストカラー

Title Image

Image 画像
Alt Text 代替テキスト

Additional Content

Content 任意のカスタムHTML、ショートコード、テキスト、または他のコンテナアイテムを補う
Colour 色

Animation

Appear From コンテナが画面のどの辺から現れるか
Type コンテナの表示に使用するアニメーションの種類
Push Wrapper プッシュラッパー

Search

Text Colour テキストの色
Border Colour ボーダーカラー
Background Colour 背景色
Placeholder Colour プレースホルダテキストの色

Technical

Close on Page Clicks ページクリックで閉じる
Close on Link Clicks リンククリックで閉じる

Menu


Depth

Depth 奥行き

Styling

Font フォント
Font Size フォントサイズ
Item Height アイテムの高さ
Text Alignment テキストの配置
Word Wrap メニュー項目が次の行に折り返されるようにします。

Item Borders

Width 幅
Colour 色
Hover Colour ホバーカラー
Current Item Colour 現在のアイテムの色
Current Item Hover Colour 現在のメニュー項目の上にマウスが移動したときに境界線の色

Item Text

Colour 色
Hover Colour ホバーカラー
Current Item Colour 現在のアイテムの色
Current Item Hover Colour 現在のメニュー項目の上にマウスが移動すると、テキストの色

Item Background

Colour 色
Hover Colour ホバーカラー
Current Item Colour 現在のアイテムの色
Current Item Hover Colour 現在のメニュー項目の上にマウスが移動したときに背景色

Descriptions

Enabled メニュー項目の説明を設定している場合は、ここでメニュー項目をオンにすることができます。

Advanced

Theme Location Menu テーマの場所メニュー
Custom Walker リンクHTML出力をカスタマイズするための独自のWalkerクラス

Sub Menus


Trigger Icon

Position ポジション
Active Shape アクティブ状態に使用するトリガーの形状
Inactive Shape 非アクティブ状態に使用するトリガーの形状
Active Image アクティブなサブメニュートリガー
Alt Text アクティブなサブメニュートリガーの代替テキスト
Inactive Image 非アクティブなサブメニュートリガー
Alt Text 非アクティブなサブメニュートリガー

Trigger Sizing

Height 高さ
Width 幅

Trigger Colours

Colour 色
Hover Colour ホバーカラー
Active Colour アクティブカラー
Active Hover Colour アクティブなときにサブメニュートリガーのホバーカラー

Trigger Background

Colour 色
Hover Colour ホバーカラー
Active Colour アクティブカラー
Active Hover Colour アクティブなときに、サブメニュートリガーのホバー背景色

Trigger Border

Colour 色
Hover Colour ホバーカラー
Active Colour アクティブカラー
Active Hover Colour アクティブ時に、サブメニュートリガーのホバー境界線の色

Padding

Side パディングがメニュー項目のどちら側にあるか
Top Level トップレベルメニュー項目のパディングサイズとその単位
Child Level 1 サブメニューの子レベルメニュー項目のパディングサイズとその単位
Child Level 2 2番目のサブメニューの子レベルメニュー項目のパディングサイズとその単位
Child Level 3 3番目のサブメニューの子レベルメニュー項目のパディングサイズとその単位
Child Level 4 4番目のサブメニューの子レベルメニュー項目のパディングサイズとその単位
Child Level 5 5番目のサブメニューの子レベルメニュー項目のパディングサイズとその単位

Animations

Use Accordion 1つのサブメニューレベルを展開すると、他のすべてのメニューがアコーディオンスタイルで閉じられます。
Auto Expand All Sub Menus すべてのサブメニューを自動的に展開
Auto Expand Current Page Sub Menus 現在のページサブメニューを自動的に展開する
Expand Sub Menus on Parent Item Click 親アイテムのクリックでサブメニューを開く

Button


Animation

Type タイプ
Triggers トリガー
Push Button with Menu メニュー付きプッシュボタン

Location

Positioning ボタンをページに固定する方法を指定
Side ページのどの辺にボタンを表示させるか
Distance from Side サイドからの距離
Distance from Top 上からの距離

Container Sizing

Height 高さ
Width 幅

Line Sizing

Height 高さ
Width 幅
Margin マージン

Container Background

Colour 色
Hover Colour ホバーカラー
Active Colour アクティブカラー
Transparent Background 透明な背景

Line Colours

Colour 色
Hover Colour ホバーカラー
Active Colour アクティブカラー

Title

Text テキスト
Active Text アクティブテキスト
Colour 色
Alignment ボタンのタイトルをボタンのどこに設定するか
Font フォント
Font Size フォントサイズ
Line Height 行の高さ

Image

Image 画像
Alt Text ボタン画像の代替テキスト
Active Image アクティブな画像
Alt Text アクティブなボタン画像の代替テキスト

Advanced

Trigger コンテナトリガー

Technical


Theme

Admin Theme 管理テーマ

Scripts

Use External Files 外部ファイルを使用する
Minify Scripts スクリプトを縮小する
Place Scripts In Footer フッターにスクリプトを配置する

Transfer

Import インポート
Export エクスポートファイルが作成

Rebuild

Reset Options リセットオプション
Rebuild Database データベースの再構築

Advanced


Animation Speeds

Animation Speed アニメーションスピード
Transition Speed 移行速度

Technical

Use Shortcode? ショートコードを使用しますか？

Updata Optionsで保存します。

ショートコード

[responsive_menu]

PHP

<?php echo do_shortcode('[responsive_menu]'); ?>

pro

<?php echo do_shortcode('[responsive_menu_pro]'); ?>

Custom Options

<?php echo do_shortcode('[responsive_menu_pro menu_title="Alternative Title"]'); ?>;
<?php echo do_shortcode('[responsive_menu_pro menu_to_use="menu-2"]'); ?>

Shortcode参照

Latest Blog

  • WordPress
  • December 30, 2018

覚えておくと便利なテンプレートパーツ
Starry
  • jQuery
  • December 29, 2018

【jQuery】Ajaxに基づく星評価システムStarry
jQuery-Stickem
  • jQuery
  • December 28, 2018

【jQuery】スクロールするときに項目を固定するjQuery Stickem
fakeLoader.js
  • jQuery
  • December 27, 2018

【jQuery】フルスクリーンで軽量のページプリローダープラグインfakeLoader
  • jQuery
  • December 26, 2018

【jQuery】軽量のプッシュメニュープラグインSecretNav