jQueryプラグイン「MeanMenu」を使ってWordPressのメニューをスマホ対応にする

2016/4/19更新

当サイトで使わせてもらっているjQueryプラグイン「MeanMenu」
メニューを階層構造にして表示してくれるアコーディオン型で表示してくれます。
アコーディオン型のいいところはメニュー項目が多くても対応できるということですね。

当サイトではWordpressのカスタムメニューとMeanMenuを組み合わせて使っています。

カスタムメニュー

カスタムメニューを使うと、メニューの並び順などを簡単に変更出来ます。

今回は

  • カスタムメニューの設定方法
  • MeanMenuの組み込み

についてご紹介します。

カスタムメニューの設定

まずはカスタムメニューを使えるようにします。function.phpに▼を追加してください。

[globalnav]はメニューIDになります。配列になっているのでここで何個もメニューを設定ができるので、実際に設置する時にこのIDで指定します。[グローバルナビ]は管理画面での表示名になります。
これでカスタムメニューが表示されるようになります。「外観」で「メニュー」が表示されていることを確認してください。

メニュー

「メニュー」が表示されていたらOKです。

実際に表示させる時はheader.phpなどに▼を記述してください。

ここで先ほど設定したメニューIDを指定してあげてください。

MeanMenuを組み込む

さきほど作ったカスタムメニューにMeanMenuを組み込みます。
MeanMenuを使うときはulがツリー式になっている必要がありますが、カスタムメニューを使うと自動でツリー式にしてくれるので、こちらでそのあたりを設定する必要はありません。

1, ファイルをダウンロード

下記リンク先からファイルを一式ダウンロードしてください

2, <head>内に▼を追加

3, カスタムメニューにidを追加

4, javascriptを追加

こちらはヘッダでもフッタでもどちらでも大丈夫です。

いろいろとオプションを設定できますので、よければ調べてみてください。

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トラックバック:https://recost-design.com/2013.html/trackback