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つの問題に遭遇します。
- プライマリーナビ表示
- 「ブログコンテンツ」と表示
- グローバルナビが表示
グローバルナビの見出しに「ブログコンテンツ」と表示されてしまう
グローバルナビにはトップ・お問い合わせ等のメニューを設定していますので「ブログコンテンツ」ではありません。
この出力は管理画面から変更することはできません。
スクロールしないと表示されない位置までグローバルナビが下がってしまう
上述したようにプライマリーナビはドロップダウン表示されるので、多くのメニューを設定してもレイアウトを崩す心配がありません。
しかしプライマリーナビの下段にグローバルナビが表示されるので、グローバルナビが押し下げられてしまいます。
大表示の際にはグローバルナビはヘッダー上段に表示されます。
中・小表示であってもグローバルナビはプライマリーナビよりも優先するべきだと思います。
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>同様にフッターも変更します。
<?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 } ?>
<?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
?>
