【備忘録】Bootstrapを使ってwordpressのナビメニューを使う方法。data-toggle出すのがややめんどい。ultimate-ez.comホーム開発メモwordpress【備忘録】Bootstrapを使ってwordpressのナビメニューを使う方法。data-toggle出すのがややめんどい。前置き!相変わらずぼちぼちのペースで新テーマ作りはじめています。基本的にフレームワークの類は使わずにフルスクラッチで作っちゃろう!と意気込んでいたんですが、仕事のカラミでBootstrapのお勉強をする必要がでてきた(今さら!)ので、そのお勉強も兼ねてBootstrapを導入することにしました。Awesome」も導入してみました。Awesomeの導入方法というわけで、あとはBootstrapの機能をバリバリに使いながらテーマを作っていこうと思ったんですが、いきなりつまずいてしまいました。Bootstrapでナビを作るには?というのも、僕はwordpressの便利機能「カスタムメニュー」ってのを使っておりまして。メニューをダッシュボードからカスタマイズできる(ナビをテンプレートにベタ書きせずに、いつでもダッシュボードから追加や変更が可能)ってのはかなり魅力的なんですが、これをBootstrapに対応させるのがなかなか大変でした。そもそも、Bootstrapの機能を使ってナビを表示するためには、以下のような構造が必要でして。href="#">子アイテム4</a></li></ul></li></ul>[/xml](li要素に「dropdown」というクラス名を付与したり、子階層を持つアイテムのa要素に「data-toggle=”dropdown”」というアトリビュートを付ける必要がある。?>[/php]このテンプレートタグで使えるパラメータにはいろいろあるものの、「子階層がある場合にli要素にクラス名を付与する」とか「子階層がある場合のaタグにはアトリビュートを付ける」なんていう細かいパラメータは存在しなくて。そのため、「walker」とうオプションを使って、期待通りの出力になるように変更を加える必要があります。いうわけでBootstrapを使ってwordpressのナビメニューを使う方法はコレだ!まあ、必至でググって、以下の海外フォーラムを参考にしながらゴリゴリと処理を書いてみただけですが。?>[/php]これは、後述する自作のwalkerクラスで設定を上書きしているだけです。「子」のulにクラス名「dropdown-menu」をつける。$cb_args);}}[/php]と、これで期待通りの表示になりました。一つ懸念点が、、、ひとつ気になるのは、僕自身が上述の処理について100%理解できているわけではないというところ。コピペに次ぐコピペの産物なので、なかなか自信を持って「こう書くべし!」とは言えない感じでして。メモ」ということで、「とりあえず動くけど、何で動くのかよくわかってない」という状態で公開しておきたいと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。2018/12/30人気記事1僕は父でしかない。views4一分の隙もなく美しい映画。