如何将自定义项目添加到特定的 WordPress 菜单

您想将自定义项目添加到特定的 WordPress 菜单吗？

WordPress 菜单是显示在大多数网站顶部的导航菜单。有时您可能希望在导航菜单中显示除普通链接之外的自定义项目。

在本文中，我们将向您展示如何轻松地将自定义项目添加到特定的 WordPress 菜单。

为什么将自定义项目添加到 WordPress 菜单

WordPress 菜单是通常显示在网站顶部的导航链接。在移动设备上，当您点击菜单图标时通常会显示它们。

由于这是典型WordPress 网站布局中的显着位置，因此明智的做法是在菜单中放置除普通链接之外的自定义项目来利用它。

例如，某些用户可能希望像我们在 WPBeginner 中那样显示搜索表单。会员网站可能想要显示登录和注销链接，或者您可能想要向菜单添加图标或图像。

默认情况下，导航菜单设计为显示纯文本链接。但是，您仍然可以在 WordPress 菜单中放置自定义项目。

话虽这么说，让我们看看如何将自定义项目添加到 WordPress 中的特定菜单，同时保持导航菜单的其余部分完好无损。

将自定义项目添加到 WordPress 中的特定导航菜单

有多种方法可以将自定义项目添加到 WordPress 的导航菜单中。这取决于您尝试添加的自定义项目的类型。

我们将向您展示一些最常见的示例。其中一些需要使用插件，而另一些则需要您添加一些代码。

如果您想跳到某个部分，可以使用此目录：

让我们开始吧。

1. 在 WordPress 菜单中添加搜索弹出窗口

通常，您可以使用默认的搜索小部件或块将搜索表单添加到 WordPress 侧边栏。但是，默认情况下无法将搜索添加到导航菜单。

某些WordPress 主题可以选择将搜索框添加到主菜单区域。但如果你的没有，你可以使用下面的方法。

为此，您需要安装并激活 SearchWP Modal Search Form 插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。

该插件是SearchWP的插件，SearchWP 是市场上最好的 WordPress 搜索插件。

该插件是免费的，并且也可以与默认的 WordPress 搜索一起使用。但是，如果您想改进 WordPress 搜索，我们建议将其与 SearchWP 一起使用。

安装插件后，只需转到外观»菜单页面。在“添加菜单项”列下，单击“SearchWP 模态搜索表单”选项卡将其展开。

选择您的搜索引擎，然后单击“添加到菜单”按钮。

该插件会将搜索添加到您的导航菜单中。单击菜单项下的“模态搜索表单”将其展开，并将标签更改为“搜索”或您想要的任何其他内容。

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

您现在可以访问您的网站以查看已添加到导航菜单中的搜索。单击它将在灯箱弹出窗口中打开搜索表单。

2. 将图标和自定义图像添加到特定菜单

用户经常想要添加到特定菜单的另一个流行的自定义项目是图像或图标。

为此，您需要安装并激活菜单图像图标插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。

激活后，转到外观»菜单页面并将鼠标移到要显示图标或图像的菜单项上。

单击蓝色菜单图像按钮继续。

这将弹出一个弹出窗口。从这里，您可以选择要与该菜单项一起显示的图像或图标。

您还可以选择图像或图标相对于菜单项的位置。例如，您可以在菜单项之前显示图标，如下例所示，甚至隐藏菜单标题，仅显示图标。

不要忘记单击“保存更改”按钮来存储您的设置。如果您需要将图标或图像添加到其他菜单项，请重复此过程。

之后，您可以访问您的网站以查看特定菜单项中的自定义图像或图标。

有关更详细的说明，请参阅有关如何在 WordPress 菜单中添加图像的教程。

如果您正在使用WordPress 会员插件或运行在线商店，那么您可能希望允许用户轻松登录他们的帐户。

默认情况下，WordPress 没有提供在导航菜单中显示登录和注销链接的简单方法。

我们将向您展示如何通过使用插件或使用代码片段来添加它们。

1. 使用插件将登录/注销链接添加到菜单

此方法更简单，建议所有用户使用。

首先，您需要安装并激活登录或注销菜单项插件。之后，您需要访问外观»菜单页面并单击登录/注销选项卡将其展开。

从这里，您需要选择“登录|注销”项目，然后单击“添加到菜单”按钮。

不要忘记单击“保存菜单”按钮来存储您的更改。您现在可以访问您的网站以查看正在运行的自定义登录注销链接。

该链接将根据用户的登录状态动态更改为登录或注销。

在我们的教程中了解有关如何在 WordPress 菜单中添加登录和注销链接的更多信息。

2. 使用自定义代码添加登录/注销链接

此方法需要您向 WordPress 网站添加代码。如果您以前没有这样做过，请查看我们有关如何在 WordPress 中添加自定义代码的指南。

首先，您需要找出您的 WordPress 主题用于特定导航菜单位置的名称。

找到它的最简单方法是访问外观»菜单页面并将鼠标移至菜单位置区域。

右键单击选择 Inspect 工具，然后您将在下面的源代码中看到位置名称。例如，我们的演示主题使用主菜单、页脚菜单和顶栏菜单。

请记下要显示登录/注销链接的目标位置所使用的名称。

接下来，您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中。

12345678910 add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );functionadd_loginout_link( $items, $args) { if(is_user_logged_in() && $args->theme_location == 'primary') { $items.= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>'; } elseif(!is_user_logged_in() && $args->theme_location == 'primary') { $items.= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>'; } return$items;}

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

之后，您可以访问您的网站，您将在导航菜单中看到登录和注销链接。

该动态链接将根据用户的登录状态自动切换到登录或注销。

4. 将自定义文本添加到 WordPress 导航菜单

如果您只想添加文本而不是导航菜单的链接怎么办？

有两种方法可以做到这一点。

1. 将自定义文本添加到特定菜单（简单方法）

只需转到“外观”»“菜单”页面，然后添加一个带有 # 符号作为 URL 的自定义链接，以及要显示的文本作为链接文本。

单击“添加到菜单”按钮继续。

WordPress 会将您的自定义文本添加为左栏中的菜单项。现在，单击将其展开并删除#号。

不要忘记单击“保存菜单”按钮并预览您的网站。您会注意到您的自定义文本出现在导航菜单中。

它仍然是一个链接，但单击它不会对用户执行任何操作。

2. 使用代码将自定义文本添加到导航菜单

对于此方法，您将向您的网站添加代码片段。首先，您需要找到主题位置的名称，如上面登录/注销链接部分所述。

之后，您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中。

1234567 add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );functionyour_custom_menu_item ( $items, $args) { if( $args->theme_location == 'primary') { $items.= '<li><a title="">Custom Text</a></li>'; } return$items;}

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

只需将“自定义文本”替换为您自己的文本即可。

您现在可以保存更改并访问您的网站以查看添加在导航菜单末尾的自定义文本。

如果您想以编程方式将动态元素添加到特定的 WordPress 菜单，则此代码方法可能会派上用场。

5. 在 WordPress 菜单中添加当前日期

您想在 WordPress 的导航菜单中显示当前日期吗？如果您运行经常更新的博客或新闻网站，这个技巧就会派上用场。

只需将以下代码添加到主题的functions.php文件或特定于站点的插件中。

12345678910 add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);functionadd_todaysdate_in_menu( $items, $args) { if( $args->theme_location == 'primary') { $todaysdate= date('l jS F Y'); $items.= '<li><a>'. $todaysdate. '</a></li>'; } return$items;}

由

WPCode与 ❤️ 主办

在 WordPress 中一键使用

不要忘记将“主要”替换为菜单的位置。

您现在可以访问您的网站，在 WordPress 菜单中查看当前日期。

您还可以根据自己的喜好更改日期格式。请参阅我们的教程，了解如何更改 WordPress 中的日期和时间格式。

6.在WordPress菜单中显示用户名

想要为您的导航菜单添加更多个性化内容吗？您可以在导航菜单中通过登录用户的名字来问候他们。

首先，您需要将以下代码添加到主题的functions.php文件或特定于站点的插件中。

12345678910111213141516 add_filter( 'wp_nav_menu_objects', 'username_in_menu_items');functionusername_in_menu_items( $menu_items) { foreach( $menu_itemsas$menu_item) { if( strpos($menu_item->title, '#profile_name#') !== false) { if( is_user_logged_in() ) { $current_user= wp_get_current_user(); $user_public_name= $current_user->display_name; $menu_item->title = str_replace("#profile_name#", " Hey, ". $user_public_name, $menu_item->title . "!"); } else{ $menu_item->title = str_replace("#profile_name#", " Welcome!", $menu_item->title . "!"); } } } return$menu_items;}