この記事は公開から9年、最終更新日からも8年経過しています。内容が古くなっている可能性があります。
当サイトはAmazonアソシエイトとして、適格販売により収入を得ています。
久しぶりの記事です。
概要
WordPressのグローバルメニューに設定する各メニューの個数が変わった時に、各メニューの表示幅を自動で設定する方法です。
使用例
・グローバルメニューが増減した際に、画面のウインドウ幅に対して等分割で各メニューを表示したい場合に使用します。
前提条件
・WordPress4.6.1で動作確認しています。
実際に実装した際の表示例(スクリーンショット)
※メニューが６個の場合
サンプルプログラム
ソース
<?php
//ナビゲーションメニューの親メニューの個数を数える
$locations = get_nav_menu_locations();
$items = wp_get_nav_menu_items( $locations['primary'] );
$num_menu = 0;
foreach( $items as $item ) {
if( $item->menu_item_parent == 0 ){ //親メニューの場合、menu_item_parentの値が0、子メニューの場合、親メニューの番号が戻り値
$num_menu++;
}
}
?>
<!-- 親メニューの個数によって各メニューの幅を自動的に変える -->
<!-- 「.main-navigation .primary-menu > li」の箇所はテーマによって異なります。 -->
<style type="text/css">
<!--
.main-navigation .primary-menu > li {
width:<?php echo sprintf( "%.4f" , (100/$num_menu)) ."%" ?>;
}
-->
</style>
</head>
WordPress関数補足
・get_nav_menu_locations
・wp_get_nav_menu_items
最後に
以前より、メニューの個数が変わった場合、CSSを直接書き換えていたのですが、クライアントさんに納品する際に、CSS書き換えが難しいクライアントさんもいらっしゃるわけでそういう場合には、この方法、有効だと思います。さらにいえばフォントサイズ等もケアすればいうことないのでしょうが、それはまた機会を改めて。
