WordPress

【WordPress】指定したサイズからSlickNavに切り替えることができるSlickNav Mobile Menu

February 27, 2017
SlickNav Mobile Menu


SlickNav Mobile Menuは指定したブラウザサイズからSlickNavに切り替えることができるプラグイン。ブラウザサイズ指定、ロゴ追加、ラベル変更、ヘッダー固定、リンク色変更、メニュー背景色変更も設定することが可能。

SlickNav Mobile Menuプラグインを導入

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

外観 >> メニュー


事前にメニューを作成しておきます。今回サンプルに上記のようなメニューを作成したとします。

<nav class="center main-header-nav">
<style>.main-header-nav ul li { display: inline-block; margin-right: 5px; } </style>
<?php wp_nav_menu( array(
            'theme_location'=>'main-navi', 
            'container'     => false, 
            'items_wrap'    =>'<ul>%3$s</ul>'));
        ?>
</nav>

SlickNav Menu

Add Menu to Replaceに.main-header-navを追加するだけでも使えました。

Add Menu to Replace 交換するメニュー
Pixel Width to Switch to SlickNav SlickNavに切り替えるピクセル幅
Fix Menu to Head メニューをヘッダーに固定
Hide Main Header メインヘッダを隠す
Image Logo – Enter a URL or upload an image for a logo, smaller is better here, like 45px in depth and up to 200px in width, default position is left, to swap to right change Menu Button Position (above) to left 200px x 45pxのロゴ画像のURLを入力するか、ロゴ画像をアップロード
Logo Alt Text ロゴ代替テキスト
Text Logo – Enter text for Logo テキストのロゴ
Text Logo Color テキストロゴの色
Menu Button Position メニューボタンの位置
SubMenu Indicator Position サブメニューのインジケータの位置
Menu Background Color メニューの背景色
Menu Button Color メニューボタンの色
Menu Button Color when Menu expanded 展開したメニューボタンの色
Label Color ラベルカラー
Hamburger Icon Color ハンバーガーアイコンの色
Label Shadow ラベルの影
Icon Shadow アイコン影
Link Color リンク色
Link Hover Color リンクホバー色
Link Hover Background Color リンクホバーの背景色
Show search field at bottom of Menu メニューの一番下にある検索フィールドを表示
Search Label Name 検索ラベル名
Search Icon Color アイコンの色を検索
Search Icon Background Color 検索アイコンの背景色
Font Size フォントサイズ
Label Font Size ラベルのフォントサイズ
Label Weight ラベルの太さ
Font Case フォントケース
Menu Position メニュー位置
Menu Label Name メニューラベル名
Close Menu on Click クリックしてメニューを閉じます
Allow Parent Links 親リンクを許可
Show Child Links on Open サブメニューのリンク表示
Toggle Submenus トグルサブメニュー
Speed of Menu open/close (Higher numbers are slower) オープン/クローズメニューの速度
Closed Symbol, default ► クローズドシンボル
Opened Symbol, default ▼ オープンシンボル

Updateをクリックします。


PC表示。


ブラウザ幅を600px(デフォルト)狭めました。


MENUをクリック。