グローバルメニュー以外のメニューにも説明を付ける – Snow Monkey カスタマイズ

本記事は、グローバルメニュー以外のメニューにも説明を付ける 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 が渡されます。返却値は、そのメニューの説明を表示する場合に true の値、説明を表示しない場合に false の値になります。

フックを使用する前に、引数の メニュー階層name について先に理解をしておきましょう。

テネーブル

まずは メニュー階層 についてです。

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

ルミェール

1 以上は親の層に紐づいた子の層となっていくよ。記事の見出しと同じだね。注意するとことは親階層が 0 から始まっているってところだけ。Snow Monkey テーマでは 1 以上の子階層は、標準の場合ならドロップダウンされて表示されているメニューになるよ!

テネーブル

name はメニューを定義する際に指定する name 要素の事です。Snow Monkey テーマのメニュー定義は、次の表にまとめてみました。

nameSnow Monkey の メニューの位置
global-navグローバルナビゲーション(PC用)
drawer-navドロワーナビゲーション(モバイル用)
social-navソーシャルナビゲーション
header-sub-navヘッダーサブナビゲーション
footer-sub-navフッターサブナビゲーション
drawer-sub-navドロワーサブナビゲーション(モバイル用)
footer-sticky-navフッター固定ナビゲーション(モバイル用)

フックを使ってみよう

テネーブル

フックを試す前に、テストサイトで結果を表示確認する為にメニューを設定してくださいね。

ブリエ

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

テネーブル

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

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

My Snow Monkey プラグインに、次のコードを記述してみましょう。

// snow_monkey_nav_menu_item_title_show_description のフック処理を追加
add_filter(
	'snow_monkey_nav_menu_item_title_show_description', 
	'show_description',
	10,
	3
);

// フックのコールバック関数
function show_description( $show_description, $depth, $menu_location ) {
	if ( 'drawer-nav' === $menu_location ) {
		return true;
	}
	return $show_description;
}
テネーブル

このコードを記述後に確認してみましょう。 $menu_locationdrawer-nav の場合に、 true の値を返却するようにしたことにより、ドロワーナビゲーションでも説明が表示されるようになったはずです。

ブリエ

表示されましたが、すべての階層に説明が付いちゃってますよね

テネーブル

階層の条件を設定しないと、すべての階層に反映されます。それでは、次に階層の条件も設定してみましょうか。次のようにコードを修正してみてください。

// snow_monkey_nav_menu_item_title_show_description のフック処理を追加
add_filter(
	'snow_monkey_nav_menu_item_title_show_description', 
	'show_description',
	10,
	3
);

// フックのコールバック関数
function show_description( $show_description, $depth, $menu_location ) {
	if ( 'drawer-nav' === $menu_location && 0 === $depth ) {
		return true;
	}
	return $show_description;
}
テネーブル

条件に、0 === $depth を追加しました。それによって、最上位の親の層でない場合には元の返却値($show_description)が返却されます。その返却値は true では無い為、このコードで確認した場合、子の層の説明は表示されないはずです。

ブリエ

なるほど。特定の階層だけ説明を表示すると言うことも簡単に可能なんですね!

まとめ

ケミ

説明は表示されるようになりましたか?しかし、そのままだと変な表示になっちゃいますよね。その部分は、追加CSSなどでスタイルを調整して見栄えを整えてください。

説明付きのオシャレなドロワーメニューなど、テーマのデザインをカスタマイズを自由に試してみるのは楽しいことです。なので、ここではデザインの説明を割愛します。

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。