IT実践

WordPressテーマXeory Extensionのナビメニューを修整する

  • このエントリーをはてなブックマークに追加
  • LINEで送る

Xeory Extensionには「グローバルナビ」と「プライマリーナビ」の2種類のメニューを設定できますが、ヘッダーへの表示について1週間悩みましたがUI的に一部使い勝手の悪い部分があったので簡単な修正をしました。

対象

WordPressのテンプレート「Xeory Extension」を使ってコンテンツとブログを両方表示させている方。

Xeory Extensionのナビメニューを修整する

グローバルナビには「トップ」「お問い合わせ」などの固定ページを設定します。

プライマリーナビはブログメニューとして投稿カテゴリーなどを設定します。

ヘッダーに表示されるナビメニューはレスポンシブに対応していて、画面の幅によって以下の3段階に分けられています。

  • width > 991px(幅が991pxよりも大きい)
    以降「大」と呼びます
  • 767px < width ≦ 991px(幅が767pxよりも大きくて991px以下)
    以降「中」と呼びます
  • width ≦ 767px(幅が767px以下)
    以降「小」と呼びます

グローバルナビは、大で表示した場合にヘッダーに横並びに表示されますので、多くても5項目程度になると思います。
一方プライマリーナビはドロップダウンで表示されますのでブログメニューとして複数のカテゴリを登録したり、注目記事そのものを登録したりすることができます。

この場合、大での表示は良いのですが、中・小で表示した際に、Xeory Extensionでは以下の順で出力されるため2つの問題に遭遇します。

  1. プライマリーナビ表示
  2. 「ブログコンテンツ」と表示
  3. グローバルナビが表示

グローバルナビの見出しに「ブログコンテンツ」と表示されてしまう

グローバルナビにはトップ・お問い合わせ等のメニューを設定していますので「ブログコンテンツ」ではありません。
この出力は管理画面から変更することはできません。

スクロールしないと表示されない位置までグローバルナビが下がってしまう

上述したようにプライマリーナビはドロップダウン表示されるので、多くのメニューを設定してもレイアウトを崩す心配がありません。
しかしプライマリーナビの下段にグローバルナビが表示されるので、グローバルナビが押し下げられてしまいます。

大表示の際にはグローバルナビはヘッダー上段に表示されます。
中・小表示であってもグローバルナビはプライマリーナビよりも優先するべきだと思います。

header.phpの書き換え

グローバルナビはheader-cont-content属性のついたdiv要素になります。
プライマリーナビはheader-cont-about属性のついてdiv要素になります。

以下の修正を行います。

  • グローバルナビのh4見出しタグを任意の文言に変更する
  • プライマリーナビに新たにh4見出しタグを追加する
  • グローバルナビとプライマリーナビの出力順を入れ替える

[修正前]header.phpの以下の部分修整します。

    <div class="grid-wrap">
            <div id="header-cont-about" class="grid-3">
          <?php if( has_nav_menu( 'footer_nav' ) ){ 
          
            wp_nav_menu(
              array(
                'theme_location'  => 'footer_nav',
                'menu_class'      => '',
                'menu_id'         => 'fnav',
                'container'       => 'nav',
                'items_wrap'      => '<ul id="footer-nav" class="%2$s">%3$s</ul>'
              )
            );
          } //if footer_nav 
          ?>
        </div>
        <div id="header-cont-content" class="grid-6">
          <h4>ブログコンテンツ</h4>
                <?php
        wp_nav_menu(
          array(
            'theme_location'  => 'global_nav',
            'menu_class'      => 'clearfix',
            'menu_id'         => 'gnav-ul-sp',
            'container'       => 'div',
            'container_id'    => 'gnav-container-sp',
            'container_class' => 'gnav-container'
          )
        );?>
        </div>
        
    </div>

[修正後]header.php

    <div class="grid-wrap">
        <div id="header-cont-content" class="grid-6">
          <h4>メインメニュー</h4>
                <?php
        wp_nav_menu(
          array(
            'theme_location'  => 'global_nav',
            'menu_class'      => 'clearfix',
            'menu_id'         => 'gnav-ul-sp',
            'container'       => 'div',
            'container_id'    => 'gnav-container-sp',
            'container_class' => 'gnav-container'
          )
        );?>
        </div>
        <div id="header-cont-about" class="grid-3">
          <?php if( has_nav_menu( 'footer_nav' ) ){ 
          
            echo '<h4>ブログメニュー</h4>';
            wp_nav_menu(
              array(
                'theme_location'  => 'footer_nav',
                'menu_class'      => '',
                'menu_id'         => 'fnav',
                'container'       => 'nav',
                'items_wrap'      => '<ul id="footer-nav" class="%2$s">%3$s</ul>'
              )
            );
          } //if footer_nav 
          ?>
        </div>
        
    </div>

footer.phpの書き換え

同様にフッターも変更します。

[修正前]footer.php

      <?php if( has_nav_menu( 'footer_nav' ) ){
      //bzb_get_nav_menu_name();
        echo '<div id="footer-cont-about" class="gr4">';
        echo "<h4>" . get_option('footer_menu_title') . "</ph4>";
        wp_nav_menu(
          array(
            'theme_location'  => 'footer_nav',
            'menu_class'      => '',
            'menu_id'         => 'fnav',
            'container'       => 'nav',
            'items_wrap'      => '<ul id="footer-nav" class="%2$s">%3$s</ul>'
          )
        );
        echo '</div>';
      } //if footer_nav
      ?>

    <?php if( has_nav_menu( 'global_nav' ) ){ ?>

            <div id="footer-cont-content" class="gr4">
              <h4>ブログコンテンツ</h4>
      <?php
        wp_nav_menu(
          array(
            'theme_location'  => 'global_nav',
            'menu_class'      => 'clearfix',
            'menu_id'         => 'footer-gnav-ul',
            'container'       => 'div',
            'container_id'    => 'footer-gnav-container',
            'container_class' => 'gnav-container'
          )
        );?>
    </div>
    <?php } ?>

[修正後]footer.php

    <?php if( has_nav_menu( 'global_nav' ) ){ ?>
            <div id="footer-cont-content" class="gr4">
              <h4>メインメニュー</h4>
      <?php
        wp_nav_menu(
          array(
            'theme_location'  => 'global_nav',
            'menu_class'      => 'clearfix',
            'menu_id'         => 'footer-gnav-ul',
            'container'       => 'div',
            'container_id'    => 'footer-gnav-container',
            'container_class' => 'gnav-container'
          )
        );?>
    </div>
    <?php } ?>
      <?php if( has_nav_menu( 'footer_nav' ) ){
      //bzb_get_nav_menu_name();
        echo '<div id="footer-cont-about" class="gr4">';
        echo '<h4>ブログメニュー</h4>';
        wp_nav_menu(
          array(
            'theme_location'  => 'footer_nav',
            'menu_class'      => '',
            'menu_id'         => 'fnav',
            'container'       => 'nav',
            'items_wrap'      => '<ul id="footer-nav" class="%2$s">%3$s</ul>'
          )
        );
        echo '</div>';
      } //if footer_nav
      ?>

関連記事