面白いメニューのサンプルがあったので自分のWordPressテーマに使ってみた

公開日 :

カテゴリー :

WordPressテーマを改修してそれなりに満足できるテーマになっています。PCとモバイルでテーマを分けたことで個々の改修がやりやすくなりました。ヘッダーのメニューがちょっと使いづらいなと思っていてそこでいい感じのメニューを考えていました。そこでSmart Fixed Navigationというメニューサンプルを見つけてYOUNG FLAVORのPCテーマで導入することにしました。

昨今は、PCとモバイル以外にもタブレットがだいぶ来ているのでそちらにも対応しないといけません。YOUNG FLAVORの場合、タブレットはPCのテーマを表示するようにしています。ただPCのテーマの場合、メニューのドロップダウンがホバーで表示する仕様や縦持ちでメニューが崩れるなどお世辞にも使いやすいメニューではありませんでした。

いい感じのSmart Fixed Navigation

Smart Fixed Navigationは、右下にメニューアイコンを表示してメニューアイコンをクリックするとナビゲーションが展開される仕組みになっています。モバイル・タブレットなどディスプレイが小さいサイズのデバイスではアイコンが常時表示され、PCなどのディスプレイサイズが大きいデバイスでは、ページスクロールによってメニューアイコンが表示されます。メニューのアニメーションが綺麗だったり、メニューの表示もスマートで使いやすいのとヘッダーにあるメニューがそのまま使えるのはいいですね。

そんなSmart Fixed NavigationをWordPressでも使いたいと思い自分のPCテーマに組み込んでみました。

Smart Fixed NavigationをWordPressに組み込み

Smart Fixed NavigationをWordPressのPCテーマに組み込んだのですが、wp_nav_menu()やメニューアイコンを表示するなど根本的に対応しないといけない部分のほかにいろいろと問題はありました。Smart Fixed Navigationがドロップダウンを想定していなく、YOUNG FLAVORでは使っていたということと、改造したWalker_Nav_Menuクラスを使っていてその改修を行う必要がありました。

ドロップダウンへの対応

ドロップダウンは、前まではCSSのhoverで出すだけだったのですが、タブレットへの対応やSmart Fixed Menuでも使いやすいかなと思いBootstrap 3のドロップダウンを使用することにしました。Bootstrap 3のドロップダウンは、ドロップダウンを表示するのにクリックが必須でPCではすこし面倒なのでCSSのhoverで表示するよう改造をしています。もちろんタブレットでドロップダウンを表示する場合は、クリックすれば動作します。

組み込んだときのドロップダウンのスタイルを活かしたかったため、Bootstrap 3のドロップダウンは、JSのみをそのまま使用している状態です。スタイルのコードは、Smart Fixed Navigationから面影がないくらいいじっていて出しても参考にならないのでご了承ください。普通にSmart Fixed Navigationのみを使いたい場合は、ダウンロードしたファイルからCSSを使えばいいでしょう。

Walker_Nav_Menuクラスの改修

Walker_Nav_Menuクラスは、WordPressでメニューを表示するために使うPHPクラスで前に「WordPressでBootstrapのドロップダウンを表示するwp-bootstrap-navwalker」で紹介したファイルの親クラスになります。Walker_Nav_Menuクラスを改修するには、Walker_Nav_Menuを継承したクラスを作って使用します。今回の場合だとドロップダウンの表示のためなのでwp-bootstrap-navwalkerを使えば行けるかもしれませんが、Bootstrapのドロップダウンのdividerやヘッダーなどは使わないので自前でドロップダウンを表示できるクラスをつくりました。

いじったところは以下のような感じです

  • 子メニューのulタグの改修
  • ドロップダウンの判定にhrefに「#」が入っているかのチェック
  • メニューアイテムのタグを生成する関数を追加

子メニューの改修は、start_lvl()内の部分でrole属性とaria-labelledbyを追加しています。クラスも変えていますが、クラスはBootstrapのドロップダウンのスタイルを使っているわけではないので自分のスタイルに合わせています。

ドロップダウンの判定は、start_el()内の75行目〜79行目で判定していて$atts[‘href’]に「#」が入っいたらドロップダウン用のメニューのタグ生成関数を呼び、そうじゃない場合は、普通のメニュー用のタグ生成関数を呼びような形です。

メニューアイテムのタグを生成する関数を追加したのは、単純にコードを見やすくするためです。ドロップダウンの判定したものは、make_anchor_tag()とmake_dropdown_toggle_tag()に分岐して生成しています。make_anchor_tag()は通常のメニューアイテムのタグを生成して返し、make_dropdown_toggle_tag()は、Bootstrapのドロップダウンに合わせた属性を追加したメニューアイテムを生成して返しています。

まとめ

この2つを改修することで以下のような感じでPC・タブレットでYOUNG FLAVORをみたときにメニューアイコンが表示されます。

メニューアイコン メニューアイコンオープン メニューアイコンドロップダウン

PCテーマのメニューをいい感じに見せることが出来てSmart Fixed Navigationではできなかったドロップダウンも作ることが出来たので満足です。メニューについては、いろいろと表示のやり方はあると思いますが、Smart Fixed Navigationが僕の中では、一番いいかなと思うのでWordPressに組み込める自身がある方は、試してみてください。

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>