上にある「Nextend Accordion Menu」は投稿本文上に配置したウィジェットです。
過去に作成した資料を WordPress で編集しようと思っていた。
昔はそれほど何も考えず編集していたのだが、少し見やすくしようと思って編集したのだが、どうもメニューが…見づらいのである。
なので、アコーディオンタイプのメニューを探していたら、いいのがありました。
Nextend Accordion Menu と言うプラグインです。
カスタイマイズもできるしとてもお気に入りです。
作者の Nextend 様ありがとうございます。
ダウンロードはこちらです。
アコーディオンメニューを作ってみる
「Nextend Accordion Menu」はカスタムメニューを使用するので「ダッシュボード」→「メニュー」で適当に作っておきます。
ここでは「アコーディオンメニュー テスト用」と言うカスタムメニューを作りました。
ダッシュボード」から「Accordion Menus」→「Add New menu」とたどりると以下の画面になります。
作成するメニューのタイトルを入力します。
ここでは「アコーディオンメニュー テスト」としました。
メニューを選択します。
上の画面「Type」の右にある「CONFIGURE」をクリックすると以下の画面が現れるので先ほど作った「アコーディONメニュー テスト用」を選択します。
画面では少し隠れていますが、「Menu」は通常 Root を選択すればいいと思います。
※ Root 以外の特定のページ、投稿を選択することもできます。
画面下にあるオプションは以下の通りです。
- Singe root as menuitem
選択したルートメニュー（最上位階層）を表示するかどうか。 - Display number of subitems
「ON」にすると、親メニューのサブアイテムの数を表示する。
オプションなどを決めて完了したら「APPLY」をクリックします。
前画面に戻るので右上の大きな緑色の「SAVE」ボタンを押します。
下の画像のように「Accordion Menu published.」が表示されたら完成です。
とりあえずは、これだけで使えます。
アコーディオンメニューを配置する
ウィジェットに配置する
ウィジェット画面へ行くと「Nextend Accordion Menu」と言うメニューがあるので、配置したい場所に置きます。
ウィジェットにタイトルを入力します。
「Accordion Menu」が複数ある場合は選択します。
「保存」を押して完了です。
サンプル
この投稿の一番上にあるのが、ウィジェットに配置した「Accordion Menu」です。
ショートコードでページ、投稿に表示する
「ダッシュボード」→「Accordion Menus」を見ると作成した「アコーディオンメニュー」一覧があり、それぞれのショートコードが記載されています。
これをページに貼りつけるだけで表示される。
こちらがショートコードで配置したサンプルです。
サンプルのショートコードは以下の通りです。
※ 下のサンプルコードは角カッコ [ と ] を全角にしてありますが、本来は半角で書きます。
［accordionmenu id="unique4cea258" accordionmenu="9105"］
メニューのカスタマイズ
「Nextend Accordion Menu」は以下の画面から様々なカスタマイズが可能です。
大きく分けて以下のパラメーターがあります。
- Basic parameters
- Advanced parameters
- Animation parameters
- Other parameters
1. の解説ページはこちらです。
2. の解説ページはこちらです。
3. と 4. の解説ページはこちらです。
Basic parameters
- Theme
フリー版なので操作できないですが、Pro 版ではいろんなテーマが用意されているようです。 - Title theme
「ON」にするとメニューの上にタイトルが表示されます。
例の場合は「アコーディオンメニュー テスト」。 - Parent items as link
「ON」にすると最上位階層のメニューにリンクが貼られます。
- Accordion mode
Normal
メニューを開くと、開いたもう1つのメニューが閉じます。
Improved
Normal とほぼ同様だが、アクティブなが上に移動します。
Multiple opening
メニューは、それぞれ独立して開閉できます。 - Activator event
各メニューを開閉するときのマウス操作を選択します。
Click
マウスでクリックすることにより、メニューを開閉します。
Mouse enter
マウスオーバーでを開きますが、マウス操作で閉じることはできません。
Click + Mouse enter
マウスオーバーでをメニュー開きます。閉じる時はクリックします。
Mouse enter + leave
マウスオーバーでメニューを開きます。マウスが離れるとが閉じます。（クリックしなくてもメニューが閉じます）。
※これらの動作は「Accordion mode」を「Multiple opening」にして確認するといいと思います。
Advanced parameters
- Active
アクティブなアイテムのハイライト動作を設定できます。
Disabled
アクティブなハイライト機能を無効にすることができる。
Item
現在のページにマークを付けることができる。
Branch
現在のページとその親をマークすることができる。 - Opened
ページが開かれた時の「Accordion Menu」の動作を指定します。
Disabled
ニューは何も表示されない。
All
すべてのメニューが開く。
Active item
アクティブメニューは、その下の最初のサブメニューとともに開く。
Active branch
アクティブなメニューの親メニューとその最初のサブメニューが開く。
State saving with cookies
ブラウザのクッキーが保存され、メニューの開き方は、次に開いたページ継承される。 - Always opened
選択したレベルのメニューを常に開く。 - Menu slice
アクティブなメニューのブランチからのみ表示することができる。 - Tooltip
「ON」にすると「Open」「Close」に記載された文字列がツールチップとして表示される。
Animation parameters,Other parameters
僕はこのパラメーターは使用しませんでした。
興味のある方は解説ページを見て下さいね。
文字色などのカスタマイズ
メニューの文字色をカスタマイズするには、「Basic parameters」内の「Theme」の右にある「CONFIGURE」をクリックします。
下の画面でカスタマイズします。
各階層ごとに文字色を変更できます。
メニュー先頭にあるアイコンの色も変更できます。
それぞれの階層の最下部に「FONT」ボタンがあり、これをクリックすると次の画面が現れます。
この画面で文字色、サイズ等を変更できます。
右上の「Text」「Active」「Link」「Hover」をクリックして、それぞれの文字色を変更することが可能です。
メニュー先頭アイコンの加工
文字色はカスタマイズできるんですが、僕はメニュー先頭のアイコンを変更したかったんです。
アイコンの色だけは変更できるんですが、形はここでは変更できませんでした。
調べてみると、このアイコンは wp-content/cache/image/static/ 内にありました。
それぞれのファイル名は以下の通りでした。
- 閉じているメニューに使用されている画像
colorizecae9154c38af9f90f09f4c4c4af35dc457883bff548722.png - 開いているメニューに使用されている画像
colorizeec0895edcc4837effa5ece54d3f1966cd66060ff548722.png
僕は、この画像をそれぞれ加工して使用しています。
興味のある方は本サイトの固定ページ「Excelを使ったデータベース操作」を見ていただくとよいかと思います。
サンプルページ
取りあえず思い通りになってよかったよかった…！！
コメント