[ 対応検討中 ] グローバルメニューの下に説明を表示する方法を教えてください

[avusblue]

■ WordPress のバージョン
WordPress 6.4.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
バージョン: 1.20.0

■ 期待する動作
Lightningのメニューのように、グローバルメニューの下に説明を表示したい。
※Vektorさんサイトのキャプチャ画像を添付します

■ 自分で試した事
「ナビゲーション」の詳細ページを確認したところ、説明の入力欄はあったのですが、説明を表示する方法が分かりませんでした。

■ 症状が発生するブラウザ
Chrome バージョン: 121.0.6167.184

■ 実際の症状
グローバルメニューの下に説明を表示するブロック？がわからない。

Attachments:

You must be logged in to view attached files.

[うなこ]

X-T9のご利用ありがとうございます。
X-T9のgithubのissueにはあげさせていただきました。
ご報告ありがとうございます。

お急ぎの場合は 追加 CSS で対応お願いいたします。
外観→エディター　に移動して、右側の画面をどこかクリックしていただくと、上部に月のような半月アイコンが出てきます。
半月アイコンをクリックすると「スタイル」の画面になり、三点アイコン（さらに表示）をクリックすると「追加 CSS」が出てきます。
そちらに以下のCSSを追加してください。
数値などはお好みで変更してください。
いかがでしょうか？

/*説明を表示*/
.wp-block-navigation .wp-block-navigation-item__description {
display: block;
font-size: 0.75rem;
opacity: 0.6;
}
/*左揃え*/
.wp-block-navigation .items-justified-left .wp-block-navigation-item__description{
	text-align: left;
}
/*中央揃えと項目の間隔*/
.wp-block-navigation .items-justified-center .wp-block-navigation-item__description,
.wp-block-navigation .items-justified-space-between .wp-block-navigation-item__description
{
text-align: center;
}
/*右揃え*/
.wp-block-navigation .items-justified-right .wp-block-navigation-item__description
{
text-align: right;
}

Attachments:

You must be logged in to view attached files.

[avusblue]

うなこ様

さっそくご回答いただきありがとうございます。

CSSを適用したところ、無事、説明が表示されました。
ありがとうございます！

/*左揃え*/
/*中央揃えと項目の間隔*/
/*右揃え*/
ですが、「説明」の揃え方という認識でよろしいでしょうか？

説明を中央揃えにしたいと思い、/*中央揃えと項目の間隔*/を適用したのですが、うまく中央揃えになりませんでした。

また、サブメニューがある場合、説明が表示されませんでした。

[うなこ]

また、サブメニューがある場合、説明が表示されませんでした。

たしかにサブメニューがある場合に症状を確認しました
テーマ側のコードの修正が必要になると思いますので、しばらくお待ちください。
実装して初めて分かることもあるため、全てを実装することは難しい場合もございます。
何卒ご了承のほどお願いいたします。

今後とも弊社製品をよろしくお願いいたします。

ーーーーー

もし、みなさまの中で表示方法がわかる方がいらっしゃいましたら、引き続きご回答お待ちしております。

【追記です】
↓gutenbergのissueに上がっているようでした。
https://github.com/WordPress/gutenberg/issues/52505

[avusblue]

> テーマ側のコードの修正が必要になると思いますので、しばらくお待ちください。
> 実装して初めて分かることもあるため、全てを実装することは難しい場合もございます。

十分承知しております。
当フォーラムで回答いただけるだけでもありがたいです。

いつも、ユーザー目線で開発いただきありがとうございます！

[投稿者]

投稿