[WordPress]ナビゲーションメニューのメニューの個数を数えて各メニュー幅のサイズを自動調整する #WordPress

  • スポンサーリンク

  • スポンサーリンク

久しぶりの記事です。

概要

WordPressのグローバルメニューに設定する各メニューの個数が変わった時に、各メニューの表示幅を自動で設定する方法です。

使用例

・グローバルメニューが増減した際に、画面のウインドウ幅に対して等分割で各メニューを表示したい場合に使用します。

前提条件

・WordPress4.6.1で動作確認しています。

実際に実装した際の表示例(スクリーンショット)


※メニューが6個の場合

サンプルプログラム

ソース

<?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書き換えが難しいクライアントさんもいらっしゃるわけでそういう場合には、この方法、有効だと思います。さらにいえばフォントサイズ等もケアすればいうことないのでしょうが、それはまた機会を改めて。


  • スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA