LoginSignup
4
2

More than 5 years have passed since last update.

WordpressとBootstrapでNavigationBarを実装する。

Last updated at Posted at 2018-10-11

Webはチョットしか触ったこと無いけど、HP制作の際に勉強がてら調べてみました。

時間のあるときに説明分等を書き足せればと思います。

function.php
//======================================
//メニューの<li>からID除去
function removeMenuId( $id ){
    return $id = array();
}
add_filter('nav_menu_item_id', 'removeMenuId', 10);


//======================================
//メニューの<li>からクラス除去
function removeMenuClass( $classes ) {
    return $classes = array();
}
add_filter( 'nav_menu_css_class', 'removeMenuClass', 10, 2 );


//======================================
//メニューの<li>にクラスを付与する
function addMenuClass( $classes ) {

    $classes = array(
        'nav-item',
    );
    return $classes;
}
add_filter( 'nav_menu_css_class', 'addMenuClass', 10, 2 );


//======================================
//メニューの<a>にクラスを付与する
function my_nav_menu_attr_add( $atts, $item, $args ) {

    // aタグに付与したいクラスを入れる。
    $atts['class'] = 'nav-link';

    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'my_nav_menu_attr_add', 10, 3 );
header.php

<div class="headerNavigation">
      <nav class="navbar fixed-top navbar-expand-lg navbar-light">
        <a href="#" class="navbar-brand">
          <img src="イメージファイルのパス" alt="navigation_logo">
          tornado
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse right-content" id="navbarSupportedContent">
          <?php
            wp_nav_menu(array('theme_location'=>'headerNavigation',
                              'container'     => 'div',
                              'depth'         => 0,
                              'items_wrap'    =>'<ul class="navbar-nav mr-auto">%3$s</ul>'
                            ));
          ?>
        </div>
      </nav>
    </div>

これで管理画面からHeaderメニューの編集が簡単にできるかな?と思っています。

参考サイト
HACK NOTE様 :WordPress : カスタムメニューのタグのムダなid/classを除去する
WordPress Snippet様 :wp_nav_menu()のリンクに属性を追加する

(この様に参考にしたサイトは記載したほうがいいんですよね?許可などはもらってないけどマズイんでしょうか。。。?)

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2