WPBeginner Sites»WPBeginner»ブログ»チュートリアル»WordPressナビゲーションメニューにタイトル属性を追加する方法

WordPressナビゲーションメニューにタイトル属性を追加する方法

By Editorial Staff | Reviewed by Syed Balkhi | 3月 18, 2024 | Reader Disclosure

WPBeginnerでは、画像やリンクにtitle属性を追加しています。ユーザーがこれらの項目にマウスオーバーすると、title属性がツールチップにポップアップ表示され、役立つ説明が表示されます。

ツールチップを使用するもう一つの便利な場所は、WordPressのナビゲーションメニューです。メニュー項目にtitle属性を追加することで、サイトにごちゃごちゃした印象を与えることなく、クリックしたときにどこに行くのか、もう少し詳しく説明することができます。

この投稿では、クラシックテーマでも新しいブロックテーマでも、WordPressのメニューにこれらのタイトル属性を簡単に追加する方法を紹介します。簡単な調整で、サイトを少しユーザーフレンドリーにすることができます。

How to Add Title Attribute in WordPress Navigation Menus

ナビゲーションメニュー項目にタイトル属性を追加する理由

WordPressでは、HTML要素をよりよく説明するためにtitle属性を追加することができます。これは、ユーザーがマウスオーバーしたときにツールチップとして表示される追加情報を提供するために、リンクや画像でよく使用されます。

これは、画像のタイトル属性をツールチップに表示した例です。ユーザーは画像の上にマウスを移動させることで、画像に関するさらに詳しい情報を知ることができます。

さらに詳しくは、画像のaltテキストとタイトルの違いについてのガイドをご覧ください。

また、投稿にリンクを追加する際は、title属性を使用することをお勧めします。これにより、ユーザーはリンクをクリックする前に、そのリンクがどこに飛ぶのかを確認することができます。

SEOの専門家の中には、リンク属性が検索エンジン最適化（SEO）に役立つと考える人もいる。

title属性は、視覚障害ユーザーが使うスクリーン・リーダーでも読み上げられるかもしれません。しかし、しばしば無視され、代わりにアンカー・テキストが読まれます。

ということで、WordPressのナビゲーション・メニューにtitle属性を追加する方法を見ていきましょう。以下のリンクから、あなたのテーマに合った方法にジャンプできます：

Adding a Title Attribute to Classic Theme Menu Items
Adding a Title Attribute to Block Theme Menu Items
Expert Guides for Customizing WordPress Navigation Menus

クラシックテーマのメニュー項目にタイトル属性を追加する

クラシックWordPressテーマを使用している場合、ダッシュボードの外観 ” メニューからナビゲーションメニューをカスタマイズすることができます。

しかし、初期設定ではメニュー項目にtitle属性を追加することはできません。

この機能を追加するには、画面の右上にある「表示オプション」タブをクリックする必要があります。するとメニューが表示されますので、「タイトル属性」設定の隣にあるチェックボックスをクリックしてください。

Enabling Image Attributes in Screen Options

これにより、メニューエントリーを作成または編集する際に、タイトル属性フィールドが追加されます。

これで、既存のメニューの項目をスクロールダウンしてクリックし、展開することができます。タイトル属性フィールドが表示されます。

Adding a Title Attribute to a Classic Theme Menu Item

タイトルとして使用したいテキストを追加することができます。また、他のメニュー項目を展開して、タイトル属性を追加することもできます。

ページ下部の「メニューを保存」ボタンをクリックし、変更内容を保存することをお忘れなく。

WordPressのサイトにアクセスし、ナビゲーション・メニューのリンクにマウスを乗せると、タイトル属性がツールチップとして表示されます。title属性がツールチップとして表示されます。

Preview of a Menu Entry Title Attribute When Using a Classic Theme

ブロックテーマのメニュー項目にタイトル属性を追加する

ブロックテーマを使用している場合、フルサイトエディターを使ってナビゲーションメニューをカスタマイズすることができます。このエディターでは初期設定でメニュー項目にタイトル属性を追加することができます。

まず、WordPress管理エリアの外観 ” エディターに移動し、「ナビゲーション」オプションをクリックしてメニューを見つけます。

Go to the Navigation Section of the Full Site Editor and Select a Menu

リストから編集したいメニューを選択する必要があります。

左側のプレビューペインをクリックすると、エディターがフルスクリーンで表示されます。左側の設定ペインが表示されていることを本当に〜してもよいですか？表示されていない場合は、画面上部の「設定」ボタンをクリックして表示できます。

次に、設定ペインで編集したいメニュー項目をクリックします。タイトル属性を含む、そのエントリーのオプションが表示されます。

タイトル属性」フィールドにタイトルを入力するだけです。

Add a Tiitle Attribute in the Settings Pane

画面上部の「保存」ボタンをクリックして、新しい設定を保存してください。確認のため、もう一度「保存」ボタンをクリックする必要があります。

では、あなたのサイトにアクセスして、メニューのタイトル属性を実際に見てみましょう。

Preview of a Menu Entry Title Attribute in a Block Theme

WordPressナビゲーションメニューカスタマイズのエキスパートガイド

このチュートリアルで、WordPressのナビゲーションメニューにtitle属性を追加する方法を学んでいただければ幸いです。WordPress ナビゲーションメニューのカスタマイザーに関する他の投稿もご覧ください：

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

WPBeginnerで人気今すぐだ！

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源をご覧ください。3$編集プロセスをご覧ください。

について Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

17件のコメント返信を残す

Moinuddin Waheed

I find it interesting to know that seo is more human than we are and it has more consideration for all than we do.
I mean when we do seo taking care of title and alt tags and we try to make sure it optimizes on seo parameters, it in turn lets screen readers to view and read clearly.
I didn’t know that menu options also does have option for title attribute. thanks for this addition.

返信
Ralph Miller

This was incredibly helpful. I didn’t know there was a menu for screen options. My title attribute had disappeared and this absolutely helped me find it. Thank you!

返信
- WPBeginner Support
  
  You’re welcome, glad our guide was helpful
  
  返信
  
  管理者
Otto

My God!
Thanks a lot, you are amazing people!

返信
- WPBeginner Support
  
  You’re welcome, glad our article was helpful
  
  返信
  
  管理者
Fifa

I don’t know why all the praises here but I’ve tried to follow a few of instructions from this site and NOTHING WORKS.

返信
- WPBeginner Support
  
  At least a few of our articles should work for every site, are you using WordPress.com with our WordPress.org tutorials? https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
  
  返信
  
  管理者
Jim

Wow, thank you! I’ve been tearing my hair out all day trying to inject the title attribute with the nav_menu_link_attributes, Nothing would work. This was so easy and worked great. I had no idea all that stuff was hidden in Screen Options. Thanks again!

返信
Amauri

Thanks, you saved me. A crystal clear tutorial.

返信
Linda Paul

This did not work at all for me. In the example screen shots you say to scroll down and click any menu item and expand it. The screen shot clearly shows URL, Navigation Lable, Title Attribute. But when I expand the menu item I want to edit, there IS NO URL associated with it. I am trying to make this one category read in ascending order (oldest to newest.)

返信
Hüsna Hüner

Thank you very much for menu title attirube. I am turkish not speak english bro

返信
- WPBeginner Support
  
  Hi Hüsna,
  
  You are welcome
  
  返信
  
  管理者
Kalanda

i need to own-org website

返信
- WPBeginner Support
  
  Hi Kalanda,
  
  Check out our step by step guide on how to start a WordPress blog.
  
  返信
  
  管理者
Minhazul Islam

nice tutorial

返信
Mike Maxson

Thanks for this, did not even know this feature existed. You learn something new everyday.

返信