できる!Snow Monkey カスタマイズ – 第7回

この記事は、不定期連載「できる!Snow Monkey カスタマイズ 」の第7回目。今回の記事の内容はsnow_monkey_nav_menu_item_title_show_descriptionフックについて語ります。

先日、Snow Monkeyフォーラムで要望をしたところ作者のキタジマさんがきちんと対応してくださったので、そのフックについて記事にしました。

要望をした経緯

Snow Monkey v7.9.0未満では、グローバルメニュー以外のメニューには説明を入力してもかなりのカスタマイズをしなければ<small>タグで説明を表示できない問題がありました。

カスタマイズを案件で行なっていると、メニューのカスタマイズを依頼される事は度々あり、ドロワーメニューやフッターサブメニューでもルビのように説明要素を使う事が多かったのが要望のキッカケです。

フックが対応された事で簡単に

要望を行なって対応されましたsnow_monkey_nav_menu_item_title_show_descriptionフックはそう言った現場にある説明要素のカスタマイズ問題を解決するには凄く良いフックになる…と思ってます。

Snow Monkey テーマフック一覧 – snow_monkey_nav_menu_item_title_show_description

使ってみる前にメニューについて事前理解しよう

snow_monkey_nav_menu_item_title_show_descriptionフックの引数は、メニューの断層nameが渡されるフックです。
断層nameについて理解しておきましょう。

テネーブル

メニューで言う断層とは、メニューの断層です。0から始まる整数です。一番上の親の層が0となります。

テネーブル(アイコン03)
ルミェール

1以上は親の層に紐づいた子の層となるよ。
Snow Monkeyテーマではドロップダウンされて表示されているメニューだね!

ルミェール(アイコン01)
テネーブル

nameはメニューを定義する際に指定するname要素の事です。
Snow Monkeyテーマのメニュー定義は下記の通りです。

テネーブル(アイコン01)
name説明
global-navグローバルナビゲーション(PC用)
drawer-navドロワーナビゲーション(モバイル用)
social-navソーシャルナビゲーション
header-sub-navヘッダーサブナビゲーション
footer-sub-navフッターサブナビゲーション
drawer-sub-navドロワーサブナビゲーション(モバイル用)
footer-sticky-navフッター固定ナビゲーション(モバイル用)

フックを使ってみよう

テネーブル

フックを試す前に、使用を試されるテストサイトにて結果を表示確認する為にもメニューを設定してみましょう。

ドロワーナビゲーションとグローバルナビゲーションを説明文章も入れて設定してください。

テネーブル(アイコン01)
テネーブル

それで表示を確認しましても、グローバルナビゲーションにしか説明が表示されていないと思います。

それではフックを使うカスタマイズをしてみましょう。

テネーブル(アイコン03)

My Snow Monkeyプラグインに下記のコードを設定してみましょう。

add_filter(
	'snow_monkey_nav_menu_item_title_show_description', 
	function( $show_description, $depth, $menu_location ) {
		if ( $menu_location === 'drawer-nav'  ) {
			return true;
		}
		return $show_description;
	},
	10,
	3
);
テネーブル

$menu_locationがdrawer-navの場合にtrueを返却するようにした事でドロワーナビゲーションでも説明が表示されるようになりました。

テネーブル(アイコン01)
ルミェール

でも、すべての断層に説明が付いちゃってるよ?

ルミェール(アイコン04)
テネーブル

そうなりますね。
断層の条件を設定しないとすべての断層に反映されますので断層の条件も設定してみましょう。

コードを足してくださいね。

テネーブル(アイコン01)
add_filter(
	'snow_monkey_nav_menu_item_title_show_description', 
	function( $show_description, $depth, $menu_location ) {
		if ( $menu_location === 'drawer-nav'  && $depth === 0 ) {
			return true;
		}
		return $show_description;
	},
	10,
	3
);
テネーブル

条件に、$depth === 0を追加した事で、最上位の親の層で無い場合は元の返却値($show_description)が返却されるので、子の層の説明が表示されない形になったと思います。

テネーブル(アイコン01)
ルミェール

説明はそのままだと変な表示になっちゃってる。

その部分は追加CSSなどでスタイルを調整して見栄えを整えちゃおう!

ルミェール(アイコン01)
テネーブル

説明付きのオシャレなドロワーメニューなど、是非カスタマイズで作ってみましょー!!

テネーブル(アイコン03)