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

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

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

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

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

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

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

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

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

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

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

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

如果您想跳到特定部分,可以使用此目录:

  • 向您的 WordPress 菜单添加搜索弹出窗口
  • 向您的菜单添加图标或图像
  • 向您的菜单添加登录/注销链接
  • 添加自定义文本到WordPress 菜单
  • 将当前日期添加到菜单
  • 在菜单中显示用户名
  • 在不同页面上显示不同菜单

让我们开始吧。

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

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

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

为此,您需要安装并激活 SearchWP 模态搜索表单插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。

此插件是 SearchWP 的插件,SearchWP 是市场上最好的 WordPress 搜索插件。

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

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

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

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

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

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

有关更多详细信息,请参阅我们有关如何向 WordPress 菜单添加搜索按钮的指南。

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

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

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

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

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

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

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

不要忘记单击“保存更改”按钮来存储您的设置。雷佩亚如果您需要向其他菜单项添加图标或图像,请执行此过程。

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

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

3.将登录/注销链接添加到特定 WordPress 菜单

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

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

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

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

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

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

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

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

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

在我们的教程中详细了解如何在 WordPress 菜单中添加登录和注销链接。

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

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

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

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

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

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

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

add_filter( ‘wp_nav_menu_items’, ‘add_loginout_link’, 10, 2 );
函数 add_loginout_link( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == ‘primary’) {
$items .= ‘

  • 退出
  • ‘;
    }
    elseif (!is_user_logged_in() && $args->theme_location == ‘primary’) {
    $items .= ‘

  • 登录
  • ;’;
    }
    返回$items;
    }

    由 WPCode 与 ❤️ 主办

    在 WordPress 中一键使用

    之后,您可以访问您的网站,并且您将在导航菜单中看到登录我们的注销链接。

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

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

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

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

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

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

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

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

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

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

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

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

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

    add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
    函数 your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == ‘主要’) {
    $items .= ‘

  • 自定义文本
  • ‘;
    }
    返回$items;
    }

    由 WPCode 与 ❤️ 主办

    在 WordPress 中一键使用

    简单地替换ce 其中显示“自定义文本”和您自己的文本。

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

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

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

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

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

    add_filter(‘wp_nav_menu_items’,’add_todaysdate_in_menu’, 10, 2);
    函数 add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == ‘主要’) {

    $todaysdate = date(‘l jS F Y’);
    $items .= ‘

  • ‘ 。 $今天日期。 ‘<;/li>’;

    }
    返回$items;
    }

    由 WPCode 与 ❤️ 主办

    在 WordPress 中一键使用

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

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

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

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

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

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

    add_filter( ‘wp_nav_menu_objects’, ‘username_in_menu_items’ );
    函数 username_in_menu_items( $menu_items ) {
    foreach ( $menu_items 作为 $menu_item ) {
    如果(strpos($menu_item->title, ‘#profile_name#’) !== false) {
    如果( is_user_logged_in() ){
    $current_user = wp_get_current_user();
    $user_public_name = $current_user->display_name;
    $menu_item->title = str_replace(“#profile_name#”, “嘿,”。$user_public_name, $menu_item->title .”!”);
    } 别的 {
    $menu_item->title = str_replace(“#profile_name#”, “欢迎!”, $menu_item->title . “!”);
    }
    }
    }

    返回$menu_items;
    }

    由 WPCode 与 ❤️ 主办

    在 WordPress 中一键使用

    此代码首先检查您是否添加了带有 #profile_name# 作为链接文本的菜单项。之后,它会用登录用户名或非登录用户的通用问候语替换该菜单项。

    接下来,您需要转到外观 » 菜单页面并添加一个新的自定义链接,其中 #profile_name# 作为链接文本。

    别忘了点击“保存”e 菜单按钮可存储您的更改。之后,您可以访问您的网站,在 WordPress 菜单中查看登录用户的名称。

    7.在 WordPress 中动态显示条件菜单

    到目前为止,我们已经向您展示了如何将不同类型的自定义项目添加到特定的 WordPress 菜单。但是,有时您可能需要向用户动态显示不同的菜单项。

    例如,您可能只想向登录用户显示菜单。另一种情况是当您希望菜单根据用户正在查看的页面进行更改时。

    此方法允许您创建多个菜单,并且仅在满足某些条件时才显示它们。

    首先,您需要安装并激活条件菜单插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。

    激活后,您需要访问外观»菜单页面。从这里你需要d 创建一个要显示的新菜单。例如,在此示例中,我们仅为登录用户创建了一个新菜单。

    创建菜单后,切换到“管理位置”选项卡。

    从这里,您需要单击菜单位置旁边的“条件菜单”链接。

    之后,您需要从下拉菜单中选择之前创建的菜单。

    然后,单击“+ 条件”按钮继续。

    这将弹出一个窗口。

    从这里,您可以选择显示此菜单所需满足的条件。

    该插件提供了一系列条件可供选择。例如,您可以根据特定页面、类别、帖子类型、分类法等显示菜单。

    您还可以根据用户角色和登录状态显示不同的菜单。例如,您可以在会员网站上向现有会员显示不同的菜单。

    我们希望本文帮助您了解如何将自定义项目添加到特定的 WordPress 菜单。您可能还想查看我们关于如何选择最佳网页设计软件的指南,或者我们对小型企业最佳实时聊天软件的专家比较。

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

  • By

    发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注