wordpress 菜单_如何在WordPress主题中添加菜单说明

最新推荐文章于 2023-06-30 10:43:35 发布

cumohuo9136

最新推荐文章于 2023-06-30 10:43:35 发布

阅读量842

点赞数

文章标签： java python php html wordpress

原文链接：https://www.wpbeginner.com/wp-themes/how-to-add-menu-descriptions-in-your-wordpress-themes/

版权

本教程介绍了如何在WordPress主题中启用和显示菜单描述，以提升用户体验。通过开启菜单说明、添加沃克类、在`wp_nav_menu`中启用沃克以及样式化描述，你可以让你的WordPress菜单更加易用。注意，这需要HTML、CSS和WordPress主题开发的基本知识。

摘要由CSDN通过智能技术生成

wordpress 菜单

WordPress menu system has a built-in feature where you can add descriptions with menu items. However, this feature is hidden by default. Even when enabled, displaying them is not supported without adding some code. Most themes are not designed with menu-item descriptions in mind. In this article we will show you how to enable menu descriptions in WordPress and how to add menu descriptions in your WordPress themes.

WordPress菜单系统具有内置功能，您可以在其中添加菜单项的描述。但是，默认情况下此功能是隐藏的。即使启用，不添加一些代码也不支持显示它们。大多数主题在设计时都没有考虑菜单项的描述。在本文中，我们将向您展示如何在WordPress中启用菜单描述以及如何在WordPress主题中添加菜单描述。

How to add menu descriptions in WordPress themes

Note: This tutorial requires you to have fair understanding of HTML, CSS, and WordPress theme development.

注意：本教程要求您对HTML，CSS和WordPress主题开发有一定的了解。

什么时候以及为什么要添加菜单说明？ (When and Why You Would Want to Add Menu Descriptions?)

Some users think think that adding menu description will help with the SEO. However, we think that the main reason why you would want to use them is to offer a better user experience on your site.

一些用户认为添加菜单描述将有助于SEO。但是，我们认为您要使用它们的主要原因是为了在您的网站上提供更好的用户体验。

Descriptions can be used to tell visitors what they will find if they clicked on a menu item. An intriguing description will attract more users to click on menus.

描述可用于告诉访问者单击菜单项会发现什么。有趣的描述将吸引更多用户点击菜单。

步骤1：开启选单说明 (Step 1: Turn on Menu Descriptions)

Go to Appearance » Menus. Click on Screen Options button at top right corner of the page. Check the Descriptions box.

转到外观»菜单 。单击页面右上角的屏幕选项按钮。选中说明框。

This will enable descriptions field in your menu items. Like this:

这将启用菜单项中的描述字段。像这样：

Now you can add menu descriptions to items in your WordPress menu. However, these descriptions will not yet appear in your themes. To display menu descriptions we will have to add some code.

现在，您可以将菜单描述添加到WordPress菜单中的项目。但是，这些描述仍不会出现在您的主题中。为了显示菜单说明，我们将不得不添加一些代码。

步骤2：添加沃克类： (Step 2: Add the walker class:)

Walker class extends the existing class in WordPress. It basically just adds a line of code to display menu item descriptions. Add this code in your theme’s functions.php file.

Walker类扩展了WordPress中的现有类。它基本上只是添加一行代码来显示菜单项描述。将此代码添加到主题的functions.php文件中。


class Menu_With_Description extends Walker_Nav_Menu {
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
		
		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="' . esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
		$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
		$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

步骤3.在wp_nav_menu中启用Walker (Step 3. Enable Walker in wp_nav_menu)

WordPress themes use wp_nav_menu() function to display menus. We have also published a tutorial for beginners about how to add custom navigation menus in WordPress Themes. Most WordPress themes add menus in header.php template. However, it is possible that your theme may have used some other template file to display menus.

WordPress主题使用wp_nav_menu()函数显示菜单。我们还为初学者发布了有关如何在WordPress主题中添加自定义导航菜单的教程。大多数WordPress主题在header.php模板中添加菜单。但是，您的主题可能使用了其他模板文件来显示菜单。

What we need to do now is find wp_nav_menu() function in your theme (most likely in header.php) and change it like this.

现在我们需要做的是在您的主题中找到wp_nav_menu()函数(很可能在header.php中)并像这样更改它。



<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

In the first line we set $walker to use walker class we defined earlier in functions.php. In the second line of code, the only extra argument we need to add to our existing wp_nav_menu arguments is 'walker' => $walker.

在第一行中，我们将$walker设置$walker使用前面在functions.php定义的walker类。在第二行代码中，我们需要添加到现有wp_nav_menu参数中的唯一额外参数是'walker' => $walker 。

步骤4：样式化描述 (Step 4. Styling the Descriptions)

The walker class we added earlier displays item descriptions at this line of code:

我们之前添加的walker类在以下代码行中显示项目描述：


$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

The above code adds a line break to the menu item by adding a tag and then wraps your descriptions in a span with class sub. Like this:

上面的代码通过添加一个换行符到菜单项标记，然后用class sub将您的描述包装在一个范围内。像这样：


<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>

To change how your descriptions appear on your site, you can add CSS in your theme’s stylesheet. We were testing this on Twenty Twelve and used this css.

要更改描述在网站上的显示方式，可以在主题的样式表中添加CSS。我们正在“十二十二”上对此进行测试，并使用了此CSS。


.menu-item {
border-left: 1px solid #ccc;
}

span.sub { 
font-style:italic;
font-size:small;
}

We hope that you will find this article useful and it will help you create cool looking menus with menu descriptions in your theme. Questions? Leave them in comments below.

希望本文对您有所帮助，并且可以帮助您创建带有主题菜单说明的美观菜单。有什么问题吗将它们留在下面的评论中。