この記事は約 4 分で読めます ( 約 2346 文字 )

記事の概要

この記事では、「Lee Chestnutt」氏の「JQuery Accordion Menu Widget」を使用してWordpressの長~いメニューを伸縮させることでスッキリさせる方法について書きます。

「JQuery Accordion Menu Widget」の導入方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”プラグイン”をクリックします。
wp_plugin-001

手順3

”プラグイン”の中の”新規追加”をクリックします。
wp_plugin-002

手順4

画面右上の検索欄に”JQuery Accordion Menu Widget”と入力します。
jquery-accordion-menu-widget-001

手順5

下記画像のプラグインを探して”インストール”をクリックします。
jquery-accordion-menu-widget-002

手順6

”インストール”のボタンが”インストール中”を経て”有効化”ボタンに変わるので、”有効化”ボタンをクリックしたらインストールは完了です。

「JQuery Accordion Menu Widget」の設置方法

ウィジェットに設置する方法

手順1

WordPressの管理画面にログインします。

手順2

管理画面の左メニューの”外観”をクリックします。
jquery-accordion-menu-widget-003

手順3

管理画面の左メニューの”ウィジェット”をクリックします。
jquery-accordion-menu-widget-004

手順4

”JQuery Accordion Menu”をウィジェットの任意の場所にドラッグ&ドロップします。
jquery-accordion-menu-widget-005

手順5

”JQuery Accordion Menu”の設定をします。
jquery-accordion-menu-widget-006

設定内容

設定内容
タイトルウィジェットのタイトルを入力します。
メニューを選択あらかじめ作成しておいたメニューを選択します。
Click/Hoverクリックで開くか、カーソルを持っていくだけで開くかを選択します。
Auto Close Open Menus開いているタブを別のところをクリックした時に閉じるか否かを選択します。
Save Menu State (uses cookies)現在のメニューの状況をクッキーに保存するか否かを選択します。
Auto Expand Based on Current Page/Item該当するページが開かれている場合メニューも該当する部分を開くか否かを選択します。
Disable Parent Links親メニューのリンクを無効化するか否かを選択します。
Close Menu (hover only)カーソルを持っていくだけで開くようにした場合自動的にメニューを閉じるか否かを選択します。
Show Count親メニューに子供以下に該当するメニューの数を表示するか否かを設定します。
Menu Classメニューに追加のクラスを与えます。
Disable Classメニューに設定されているクラスを無効化します。
Hover Delayカーソルを持っていってから何秒後に反応するかを設定します。
Animation Speedアニメーションのスピードを設定します。
Skinスキンを設定します。スキンの一覧は下表を御覧ください。

スキン一覧

スキン一覧
BlueGreyDemo
CleanBlackGraphite

任意の場所にショートコードで設置する方法

メニューを作成し、下記ショートコードを使うことで設置できます。

%MINIFYHTMLab10ee3f88011d3c23ad062c5822704a13%

また、オプション項目を追加することも可能です。

例:Auto Close Open MenusとAuto Expand Based on Current Page/Itemを有効にする場合

%MINIFYHTMLab10ee3f88011d3c23ad062c5822704a14%

また、オプション項目を設定する方法は以下の通りです。

オプション項目の設定方法

オプション項目の設定方法
オプション項目使用する変数
Click/Hovereventclick/hover(入力しない場合はclick)
Auto Close Open Menusauto_closetrue/false(入力しない場合はfalse)
Save Menu State (uses cookies)savetrue/false(入力しない場合はfalse)
Auto Expand Based on Current Page/Itemexpandtrue/false(入力しない場合はfalse)
Disable Parent Linksdisabletrue/false(入力しない場合はfalse)
Close Menu (hover only)closetrue/false(入力しない場合はfalse)
Show Countcounttrue/false(入力しない場合はfalse)
Menu Classmenu_class(入力しない場合はmenu)
Disable Classdisable_class(入力しない場合はなし)
Hover Delayhover(入力しない場合は600ms)
Animation Speedanimationslow/normal/fast (入力しない場合はslow)
Skinskinblack/blue/clean/demo/graphite/grey (入力しない場合はスキンなし)

まとめ

この記事では、「Lee Chestnutt」氏の「JQuery Accordion Menu Widget」を使用してWordpressの長~いメニューを伸縮させることでスッキリさせる方法について書きました。

このプラグインを使えば長くてだらしのないメニューをアコーディオン形式にすることでスッキリとさせる事ができます。

長いメニューはだらしがないのでこの方法を使ってスッキリさせることをオススメします。

次回予告

実は昨日このプラグインのスキンを反映させるのに悪戦苦闘していたためブログの更新ができませんでした。

しかし、なんとか反映させることに成功したため、次回はその方法を紹介します。