アコーディオンメニュー – Nextend Accordion Menu

上にある「Nextend Accordion Menu」は投稿本文上に配置したウィジェットです。

過去に作成した資料を WordPress で編集しようと思っていた。
昔はそれほど何も考えず編集していたのだが、少し見やすくしようと思って編集したのだが、どうもメニューが…見づらいのである。

なので、アコーディオンタイプのメニューを探していたら、いいのがありました。

Nextend Accordion Menu と言うプラグインです。
カスタイマイズもできるしとてもお気に入りです。

作者の Nextend 様ありがとうございます。

ダウンロードはこちらです。

アコーディオンメニューを作ってみる

「Nextend Accordion Menu」はカスタムメニューを使用するので「ダッシュボード」→「メニュー」で適当に作っておきます。
ここでは「アコーディオンメニュー テスト用」と言うカスタムメニューを作りました。
20180412-acmenu-01.png

ダッシュボード」から「Accordion Menus」→「Add New menu」とたどりると以下の画面になります。
20180412-acmenu-02.png

作成するメニューのタイトルを入力します。
ここでは「アコーディオンメニュー テスト」としました。
20180412-acmenu-03.png

メニューを選択します。
上の画面「Type」の右にある「CONFIGURE」をクリックすると以下の画面が現れるので先ほど作った「アコーディONメニュー テスト用」を選択します。
20180412-acmenu-04.png
画面では少し隠れていますが、「Menu」は通常 Root を選択すればいいと思います。
※ Root 以外の特定のページ、投稿を選択することもできます。

画面下にあるオプションは以下の通りです。

  • Singe root as menuitem
    選択したルートメニュー(最上位階層)を表示するかどうか。
  • Display number of subitems
    「ON」にすると、親メニューのサブアイテムの数を表示する。

オプションなどを決めて完了したら「APPLY」をクリックします。

前画面に戻るので右上の大きな緑色の「SAVE」ボタンを押します。
下の画像のように「Accordion Menu published.」が表示されたら完成です。
とりあえずは、これだけで使えます。20180412-acmenu-05.png

スポンサーリンク

アコーディオンメニューを配置する

ウィジェットに配置する

ウィジェット画面へ行くと「Nextend Accordion Menu」と言うメニューがあるので、配置したい場所に置きます。
20180412-acmenu-06.png

ウィジェットにタイトルを入力します。
「Accordion Menu」が複数ある場合は選択します。20180412-acmenu-07.png

「保存」を押して完了です。

サンプル
この投稿の一番上にあるのが、ウィジェットに配置した「Accordion Menu」です。

ショートコードでページ、投稿に表示する

「ダッシュボード」→「Accordion Menus」を見ると作成した「アコーディオンメニュー」一覧があり、それぞれのショートコードが記載されています。
これをページに貼りつけるだけで表示される。

こちらがショートコードで配置したサンプルです。

サンプルのショートコードは以下の通りです。
※ 下のサンプルコードは角カッコ [ と ] を全角にしてありますが、本来は半角で書きます

[accordionmenu id="unique4cea258" accordionmenu="9105"]

メニューのカスタマイズ

「Nextend Accordion Menu」は以下の画面から様々なカスタマイズが可能です。

20180412-acmenu-02.png

大きく分けて以下のパラメーターがあります。

  1. Basic parameters
  2. Advanced parameters
  3. Animation parameters
  4. 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」をクリックします。
20180412-acmenu-08.png

下の画面でカスタマイズします。
20180412-acmenu-09.png

各階層ごとに文字色を変更できます。
メニュー先頭にあるアイコンの色も変更できます。

それぞれの階層の最下部に「FONT」ボタンがあり、これをクリックすると次の画面が現れます。
20180412-acmenu-10.png

この画面で文字色、サイズ等を変更できます。
右上の「Text」「Active」「Link」「Hover」をクリックして、それぞれの文字色を変更することが可能です。

メニュー先頭アイコンの加工

文字色はカスタマイズできるんですが、僕はメニュー先頭のアイコンを変更したかったんです。
アイコンの色だけは変更できるんですが、形はここでは変更できませんでした。

調べてみると、このアイコンは wp-content/cache/image/static/ 内にありました。
それぞれのファイル名は以下の通りでした。

  • 閉じているメニューに使用されている画像
    colorizecae9154c38af9f90f09f4c4c4af35dc457883bff548722.png
  • 開いているメニューに使用されている画像
    colorizeec0895edcc4837effa5ece54d3f1966cd66060ff548722.png

僕は、この画像をそれぞれ加工して使用しています。

興味のある方は本サイトの固定ページ「Excelを使ったデータベース操作」を見ていただくとよいかと思います。

サンプルページ

取りあえず思い通りになってよかったよかった…!!

コメント