この記事は約 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 スキンを設定します。スキンの一覧は下表を御覧ください。

スキン一覧

スキン一覧
Blue Grey Demo
Clean Black Graphite

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

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

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

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

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

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

オプション項目の設定方法
オプション項目 使用する変数
Click/Hover event click/hover(入力しない場合はclick)
Auto Close Open Menus auto_close true/false(入力しない場合はfalse)
Save Menu State (uses cookies) save true/false(入力しない場合はfalse)
Auto Expand Based on Current Page/Item expand true/false(入力しない場合はfalse)
Disable Parent Links disable true/false(入力しない場合はfalse)
Close Menu (hover only) close true/false(入力しない場合はfalse)
Show Count count true/false(入力しない場合はfalse)
Menu Class menu_class (入力しない場合はmenu)
Disable Class disable_class (入力しない場合はなし)
Hover Delay hover (入力しない場合は600ms)
Animation Speed animation slow/normal/fast (入力しない場合はslow)
Skin skin black/blue/clean/demo/graphite/grey (入力しない場合はスキンなし)

まとめ

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

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

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

次回予告

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

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