メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【WordPress】TwitterBootstrap使っても”簡単に”カスタムメニューを作成する方法!

wpppppppp

新しいWordPressの仕事が来て、お客様にレスポンシブルで作って下さいレスポンシブルでって丁寧に2回も言っていただいたので対応させて頂く運びとなりました。ありがたい限りですね。それで、案件によってはイチからCSS書く時代でもないと思うのでTwitterBootstrapを初めて実務でも導入してみよっかなーって企みを実行に移して、GreenMindってテーマがVer2系だったけど、オッサレーだった訳ですよ。ほんで、コーディングから先にやっちゃったもんだから、カスタムメニューつけるときにはまりましてね。今Ver3系でコーディングしてるわけです。何故Ver3にしたかと言えば・・・

それはそれは、wp-boostrap-navwalkerがあるから!

これはプラグインではなく、作者によるところユーティリティクラス。カスタムメニューのドロップダウンを出すため専用のプログラムみたいです。必要なファイルは予め読み込みがなされている前提で使われるものなので、初心者が使うのは辛いかもしれませんが、「bootstrap使って、テーマ作っちゃおっかなー☆ミ」みたいな人は簡単に使う事ができますよ。ただしこれ、3系じゃないと使えないので、Ver3にせざるを得なかったというわけでした。

導入手順

とりあえず、こっからおもむろに導入手順を書いて行こうと思います。

wp-boostrap-navwalkerを入手セヨ

Githubからダウンロードして使います。これをダウンロードしたら、解凍して中のwp_bootstrap_navwalker.phpをincフォルダなり面倒臭いならthemeフォルダなりにファイル転送します。僕は面倒くさいのでthemeに放り込んでます。

function.phpを修正セヨ

functions.phpの中で、【wp_bootstrap_navwalker.php】を読み込ませます。その後に、init時に動かす関数を定義してregister_nav_menusっていう管理画面にカスタムメニュー出す関数を呼びます。サンプルコードのしておきます。

こんな感じ。

menuを作成セヨ

これで管理画面の外観とこにメニューって項目が出現します。とりあえずメニューを追加します。試しにテキトーにメニュー二つ作ってみて下さい。

HTML+PHPを追加セヨ

ここまでで準備は整いました。後は、さっき設定した奴を呼び出しましょう。サンプルコードはこんな感じですね。これは、ナビゲーション作りたいとこに書いて下さいね。クラスとかそのままコピーしたのでそうなってますが、グローバルナビとサブナビで、クラスは微調整してください!

二つ書くことで別々のカスタムメニューを作る事が出来ます。例えば、ヘッダで使うナビとサイドバーで使うナビが違うよーってときに便利だったりしますね。あわただしい感じでしたけどこれだけです。手軽に導入できるので、よいとおもいました!

関連記事

コメントをお待ちしております