オリジナルのtheme(テーマ)を作る18:グローバルメニューを作る

トップページ専用ページを作ってみたものの、現状ではどこのページにも行けないので(^_^;)
グローバルメニューを作ります。

function.php

  1. //カスタムメニュー機能を有効にする
  2. register_nav_menus(array('navigation' => ' NavigationBar '));

カスタムメニューを有効にしておきます。

メニューを複数(日本語でもOKです)

  1. //メニュー有効化
  2. register_nav_menus(array(
  3. 'main-menu' => 'メインメニュー',
  4. 'sub-menu' => 'サブメニュー'
  5. ));

header.php

  1. <header id="header">
  2. <nav class="navbar navbar-inverse">
  3. <div class="container">
  4. <div class="navbar-header">
  5. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#globalmenu" aria-expanded="false">MENU</button>
  6. <h1><a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a><small><?php bloginfo('description'); ?></small></h1>
  7. </div>
  8. <!--//navbar-header -->
  9. <div class="collapse navbar-collapse" id="globalmenu">
  10. <?php wp_nav_menu(array('theme_location' => 'navigation')); ?>
  11. </div>
  12. <!-- //collapse navbar-collapse -->
  13. </div>
  14. <!--//container -->
  15. </nav>
  16. <!--//nav -->
  17. </header>
  18. <!--//#header -->

header.phpに書いてあったメニュー部分(ul li)を削除して、下記のテンプレートタグに書き換えます。

  1. <?php wp_nav_menu(array('theme_location' => 'navigation')); ?>

自動的に、ul li タグが書き出されるので、style.cssで見た目を整えましょうー。
bootstrapを使っているのですが、ulとliが勝手に・・となってしまうので
cssの書き換えが面倒だよーという方はこの部分だけbootstrapでなくてもいいんではないかと。

とりあえずここではbootstrapのまま、cssを書き換えました。

  1. /* #globalmenu
  2. ----------------------------*/
  3. #globalmenu {
  4. }
  5. #globalmenu ul {
  6. list-style: none;
  7. margin: 0;
  8. padding: 0;
  9. }
  10. #globalmenu ul>li {
  11. float: left;
  12. position: relative;
  13. display: block;
  14. }
  15. #globalmenu ul>li>a {
  16. color: #AAA;
  17. height: 100px;
  18. border-left: 1px #000 solid;
  19. border-right: 1px #444 solid;
  20. padding: 25px;
  21. position: relative;
  22. display: block;
  23. line-height: 20px;
  24. }
  25. #globalmenu ul>li:first-child {
  26. border-left: 1px #444 solid;
  27. }
  28. #globalmenu ul>li:last-child {
  29. border-right: 1px #000 solid;
  30. }
  31. #globalmenu ul>li>a:focus,
  32. #globalmenu ul>li>a:hover {
  33. background-color: transparent;
  34. }
  35. @media screen and (min-width: 768px) and (max-width: 1199px){
  36. #globalmenu ul>li>a {
  37. height: auto;
  38. padding: 10px 15px;
  39. }
  40. }
  41. @media screen and (max-width: 767px){
  42. #globalmenu ul>li>a {
  43. height: auto;
  44. border-left: none;
  45. border-bottom: 1px solid #AAA;
  46. padding: 10px 15px;
  47. }
  48. #globalmenu ul>li:last-child>a {
  49. border-right: none;
  50. }
  51. #globalmenu ul>li {
  52. -webkit-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
  53. -moz-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
  54. box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
  55. }
  56. #globalmenu ul>li>a small {
  57. display: inline-block;
  58. text-align: left;
  59. margin-left: 15px;
  60. }
  61. #globalmenu ul>li>a {
  62. padding: 10px 15px;
  63. }
  64. #globalmenu ul>li:last-child {
  65. border-right: none;
  66. }
  67. #globalmenu ul>li {
  68. float: none;
  69. width: 1%;
  70. display: table-cell;
  71. }
  72. }
  73. @media screen and (min-width: 768px){
  74. #globalmenu ul {
  75. float: right!important;
  76. margin-right: -15px;
  77. }
  78. }

ちなみに、ul liの入れ子になった場合についての考慮はしてません。
※項目を入れ子にしなければいいだけw
項目を入れ子にしたい場合は、bootstrapのtoggleを入れる必要がでてくるので
その場合はbootstrapではなく、cssのみで入れ子のメニューを作るようにするといいかなと思います。

スマホでの見え方も考慮してないので、そのへんは考えなければ。
項目名の下にスラッグ等の英語表記を入れたかったんですが、ちょっと厳しかったなー。
もうちょっと試行錯誤が必要・・。

挿入する項目は、左側の外観-メニューから項目を選んでください。
gmenu
これで、無事、メニューが出来たかと思います(^^)

コメントは受け付けていません。