如何在WordPress导航菜单中添加标题属性

Recently, one of our readers asked if there’s a way to add title attribute in WordPress menus? Title attribute allows you to provide extra information about a link. It often appears as tooltip text when the mouse moves over the link. In this article, we will show you how to add title attribute in WordPress navigation menus.

最近,我们的一位读者问是否可以在WordPress菜单中添加标题属性? 标题属性允许您提供有关链接的其他信息。 当鼠标移到链接上时,它通常显示为工具提示文本。 在本文中,我们将向您展示如何在WordPress导航菜单中添加标题属性。

How to Add the Title Attributes in WordPress Menus
为什么在菜单中使用标题属性? (Why Use Title Attribute in Menus?)

Title attribute is an HTML attribute that can be added to any element, but it is most commonly used with links and images.

标题属性是可以添加到任何元素HTML属性,但是最常用于链接和图像。

It allows you to provide additional information about the link or the image. See our guide on the difference between what’s the difference between image alt text vs title.

它允许您提供有关链接或图像的其他信息。 请参阅我们的指南, 了解图片替代文字与标题之间的区别

Title attribute displayed as a tooltip for an image

Typically web browsers display the title attribute on mouseover. This allows users to see where this link will take them before they click on it.

通常,Web浏览器在鼠标悬停时显示title属性。 这使用户可以在单击链接之前查看此链接会将他们带到何处。

Screen readers may also read title attribute, but many screen readers will ignore it and will only read the anchor text.

屏幕阅读器可能还会读取标题属性,但是许多屏幕阅读器会忽略它,而只会读取锚文本。

Some SEO experts believe that it is not useful while others claim it is useful for SEO as it allows you to provide more context.

一些SEO专家认为它没有用,而另一些人则声称它对SEO有用,因为它可以提供更多上下文。

WordPress removed title attribute from insert link popup in version 4.2. However, you can easily add the title and rel=nofollow options in insert link popup.

WordPress从4.2版的插入链接弹出窗口中删除了标题属性。 但是,您可以在插入链接弹出窗口中轻松添加title和rel = nofollow选项

Having said that, let’s take a look at how to add title attribute in WordPress navigation menus.

话虽如此,让我们看一下如何在WordPress导航菜单中添加title属性。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明,请继续阅读。

在WordPress导航菜单项中添加标题属性 (Adding Title Attribute in WordPress Navigation Menu Items)

First you need to visit Appearance » Menus page and click on the ‘Screen Options‘ tab in the top right corner of the screen.

首先,您需要访问外观»菜单页面,然后点击屏幕右上角的“ 屏幕选项 ”标签。

Enable title attribute for navigation menus in WordPress

This will bring down a menu where you need to click on the check box next to Title Attribute option.

这将弹出一个菜单,您需要在其中单击“标题属性”选项旁边的复选框。

After that, simply scroll down and click on any menu item in your existing menu to expand it. You will now see the title attribute field.

之后,只需向下滚动并单击现有菜单中的任何菜单项即可将其展开。 现在,您将看到标题属性字段。

Add title attribute to the menu item

You can now add the text you want to use as title and then repeat it for all menu items in your navigation menu.

现在,您可以添加要用作标题的文本,然后对导航菜单中的所有菜单项重复该文本。

Don’t forget to click on the save menu button to store your changes.

不要忘记单击“保存”菜单按钮来存储您的更改。

You can now visit your website and take your mouse to a link in navigation menu. You will see the title attribute displayed as tooltip.

现在,您可以访问您的网站,并将鼠标移至导航菜单中的链接。 您将看到标题属性显示为工具提示。

Title displayed in tooltip

You can take title attributes even further with jQuery by adding fancy tooltips on mouseover effect.

通过在鼠标悬停效果上添加漂亮的工具提示,您甚至可以使用jQuery使用title属性。

We hope this article helped you learn how to add title attribute in WordPress navigation menus. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

我们希望本文能帮助您学习如何在WordPress导航菜单中添加标题属性。 您可能还需要查看我们的15个最佳教程列表, 以掌握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.

如果您喜欢这篇文章,请订阅我们的YouTube频道 WordPress视频教程。 您也可以在TwitterFacebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-add-title-attribute-in-wordpress-navigation-menus/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值