WordPressの人気テーマSTINGER5に複数階層のドロップダウン式のメニューを実装する手順です。PCでの表示にのみでモバイルのメニューでは既存のをそのままにしています。
カスタムメニューを対応させているので、liタグなどのコードを記述する必要はありません!メニューの変更はカスタムメニューですることができるので簡単です。
こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。
ドロップダウンメニュー【CSS3 animated dropdown menu】
ドロップダウンメニューはCSS3 animated dropdown menuというサイトを参考にしました。ドロップダウンの動きのデモもこちらでご確認することができます。
header.phpへの記述
header.phpへは</header>すぐ上の <!–メニュー–>の部分を以下に書き換えます。
追記:navの開始タグにsmanoneとclearfixの記述が抜けておりましたので追加しました。
<nav class="smanone clearfix"> <?php wp_nav_menu( array( 'container' => false , 'items_wrap' => '<ul id="menu">%3$s</ul>' ) ); ?> </nav>
カスタムメニューの余計なdivタグやクラス名を決して、コードをすっきりさせています。liタグのクラス名はそのまま余計な物が付いているのでそれを消す方法は以下のエントリーでご紹介しています。
js/base.jsに追記
jsという名前のファイル内にあるbase.jsに以下のコードをコピペします
/*--------------------------- ドロップダウンメニュー ------------------------------*/ $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('li').has('ul').mouseover(function(){ $(this).children('ul').css('visibility','visible'); }).mouseout(function(){ $(this).children('ul').css('visibility','hidden'); }) } });
style.cssを書き換え
600行目付近にある【メニュー】というコメントアウトを見つけ出します。そしてそのメニュー部分のコードをすべて以下のものに書き換えます。
#menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu { width: 100%; margin: 60px auto; border: 1px solid #222; background-color: #111; background-image: linear-gradient(#444, #111); border-radius: 6px; box-shadow: 0 1px 1px #777; } #menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom:1; } #menu li { float: left; border-right: 1px solid #222; box-shadow: 1px 0 0 #444; position: relative; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 0 #000; font-size:12px; } #menu li:hover > a { color: #fafafa; } #menu ul { margin: 20px 0 0 0; opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: #444; background: linear-gradient(#444, #111); box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; transition: all .2s ease-in-out; } #menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { box-shadow: none; } #menu ul a { padding: 10px; width: 130px; display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { border-radius: 3px 3px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #menu ul li:last-child > a { border-radius: 0 0 3px 3px; }
これでドロップダウンメニューの設置は完了です。色などはお好みの物に変更してください。
ドロップダウン式のメニューを設置時の注意
ドロップダウンのメニューの階層項目が開いた際、アドセンスに重なってしまうとアドセンスのポリシー違反になってしまうようです。

カスタムメニューで順番を変えるなど調整を行うようにしてくださいね!
まとめ
【CSS3 animated dropdown menu】は少ないJQueryコードとcss3でかっこいいエフェクトのドロップダウンメニューが装備できます。カテゴリの整理などにドロップダウンメニューの設置、いかがでしょうか?
いつか使おうと思います。
2 件のコメント
報告になります。
記事内の通りに、ファイルをいじってみたら出来ました。
しかしながら、それ以外がいじれないためデザイン的に上下が離れてしまったので、いったん、元に巻き戻して、デザイン的にカスタマイズ等ができるようになってから再チャレンジしてみようと思います。
いずれにしましても勉強になりました。深謝します。
とても参考になりました。ありがとうございます。
WP初心者で、特に深く考えずに記事をたくさんアップしていったところ、記事を全体的に整理してトップページからの導線をしっかりとしたいと思うようになった際に、こちらのサイトにたどり着きました。
ちょっとファイルいじるの怖いですが、頑張ってやってみようと思います。