使用 Conditional Menus 插件让 WordPress 在不同页面显示不同菜单

菜单是每个网站的基本内容，它可以帮助访问者轻松找到他们需要的页面。但是，在结构复杂的网站上，您可能希望每组页面都有单独的菜单。要以这种方式自定义它们，您需要一个插件来创建不同的菜单并将它们分配给您的页面/页面组。

在这篇文章中，我将彻底向您展示如何以最快的方式做到这一点。但首先，让我们看看为每个页面创建单独的菜单如何在特定情况下为您提供帮助。

为每个页面创建单独菜单的情况

在以下情况下，为每个页面设置单独的菜单可能对您有所帮助：

  • 您想在主页的菜单上显示产品页面。每个产品页面都有一个特定的菜单，该菜单有一个链接到产品信息页面的子菜单。例如，产品页面的菜单将包含相应产品的价格、原产国等信息。
  • 您拥有一个连锁店的网站，每个商店都由一个单独的页面表示。主页的菜单将指向商店页面。每个商店的页面都有自己的基本页面菜单，如产品、地址、订单等。

为了更容易理解，我将以一个水果商业网站为例。我的网站在主页上有一个默认菜单，它指向两个页面：Apple 和 Banana。

Conditional Menus 插件教程

我将使用Conditional Menus插件为这两个页面创建另外两个单独的菜单。以下是完成它的步骤：

第 1 步 ：安装并激活 Conditional Menus 插件

Conditional Menus 插件是免费的，可在wordpress.org 上获得。您只需要像其他所有免费插件一样安装和激活它。

Conditional Menus 下载地址：https://litepress.cn/plugins/conditional-menus/

接下来，转到外观 > 菜单，切换到 管理位置，您可以看到插件添加的+ Conditional Menu：

第 2 步：创建菜单

现在我将为 Apple 和 Banana 页面创建单独的菜单。为此，我转到外观 > 菜单 > 编辑菜单 > 创建新菜单。

接下来，命名菜单，选择菜单的显示位置（我想显示在Header 上），然后单击创建菜单。

在添加菜单项部分，您需要添加页面作为子菜单。我将在Apple Menu 中添加两个页面，分别是Apple Origin和Apple Price。单击“保存菜单”。

我现在将执行相同的步骤为Banana页面创建一个单独的菜单：

第 3 步：将菜单设置为相应的页面

仍然在外观 > 菜单，更改为管理位置并选择+ Conditional Menu：

从列表中选择一个菜单（我选择的是Apple Menu）。单击+ 条件以设置显示位置：

将出现一个新的弹出窗口，您将看到不同的选项卡可供选择。您可以选择在每个类别、文章类型、分类、用户角色、或主页、404页面等显示菜单。

我将选择Pages选项卡和Apple页面将菜单设置为此页面。

我会对 Banana 菜单做同样的事情。

最后，不要忘记点击保存更改，否则你所做的一切都会消失。

现在我将去WordPress的前端检查结果。

如您所见，主页、Apple 页面和 Banana 页面现在具有我希望的三个不同的菜单。

总结

如您所见，使用 Conditional Menus 插件为不同的页面创建不同的菜单非常简单且有用。此外，该插件还为您提供了灵活的选择，可以为文章类型、类别、分类法、用户角色等甚至 404 页面创建单独的菜单。

更多关于WordPress使用小技巧请查看下面的相关文章

赞 (0)

相关推荐

  • WordPress中注册菜单与调用菜单的方法详解

    register_nav_menus()(注册菜单) register_nav_menus() 函数用来注册一个菜单,菜单指的是 WordPress 3.0+ 的菜单管理器,注册之后用户就可以在菜单管理器里拖动生成导航菜单了. 用法 register_nav_menus( $locations ); 参数 $locations (数组)(必须)要注册的菜单,键值为菜单 ID,键名为菜单名称,可以一次创建多个. 默认值:None 返回值 该函数无返回值. 例子 /** *建立菜单 *http://

  • 在WordPress的后台中添加顶级菜单和子菜单的函数详解

    在WordPress的后台中添加顶级菜单和子菜单的函数详解

    添加设置页面-add_menu_page函数 add_menu_page(),这个函数是往后台添加顶级菜单先,也就是和"外观"."插件"等一样的顶级菜单. 函数介绍如下: <?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); //page_title页面title标签信息 //$menu_title 菜

  • WordPress开发中自定义菜单的相关PHP函数使用简介

    函数意义 wp_nav_menu () 自定义菜单显示函数 register_nav_menu () 自定义菜单注册函数 – 单数 register_nav_menus () 自定义菜单注册函数 – 复数 (很蛋疼的一个复数形式) 以下举例均用 register_nav_menus () 这个复数形式,以免混淆. 使用位置 register_nav_menus () function.php 文件中,用于注册自定义菜单在后台的代码调用名称和后台显示名称. wp_nav_menu () 主题任意你

  • 在WordPress中获取数据库字段内容和添加主题设置菜单

    在WordPress中获取数据库字段内容和添加主题设置菜单

    get_option() 函数使用技巧 get_option()这个函数,实际上我们在整合后台功能的时候经常会用到的一个函数,主要用来从 WordPress 博客数据库 option 表中取得我们想要的字段内容的一个函数,在目前大部分的主题中,只要是主题集成了后台控制页面,也大都用到了这个函数,虽然 WP 给了我们很多方法去临时存储我们对主题的设置,但是用比较稳定的数据库去存储主题设置还是大部分主题作者的首选. get_option() 函数的解释.用法网上还是有很多中文文献的,包括官方文档该函

  • 以JavaScript来实现WordPress中的二级导航菜单的方法

    以JavaScript来实现WordPress中的二级导航菜单的方法

    导航菜单 导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加. WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单. 可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单. 这是效果演示 既

  • wordpress主题支持自定义菜单及修改css样式实现方法

    自己在制作wordpress主题的时候遇到这个问题,并且遇到了css样式错误,其实很简单,操作如下: 在主题中functions.php中加入: register_nav_menus( array( 'menu' => __( 'menu', '' ), ) ); 在主题导航栏贴上导航代码: <?php wp_nav_menu( 'id=navbar' ); ?> 但是出现了css样式错误: 原来这个函数输出的是下面的格式: 复制代码 代码如下: <div id="men

  • WordPress中制作导航菜单的PHP核心方法讲解

    WordPress中制作导航菜单的PHP核心方法讲解

    WordPress 3.0 引入导航菜单功能, 让页面的导航和链接的管理变得简单易用. WP 向用户提供了菜单管理页面和多种调用方法, 我们先来看一下一般WordPress 的导航菜单都具有哪些功能. 管理菜单页面 页面路径: Appearance > Menus 由从界面来看, 能够创建多个菜单, 并且可以向菜单中添加自定义链接, 页面链接和分类链接. 但有一点需要注意, 如果将页面链接和分类链接加入, 被带入菜单的仅是链接, 而不是页面和分类本身, 也就是说, 子页面和子分类不会成为菜单的一

  • WordPress导航菜单的滚动和淡入淡出效果的实现要点

    滚动导航菜单 滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方. 初期化处理 为了处理更加灵活, 我们需要为它定义一个作为参数的滑动速度, 也就是每一个单位时间间隔, 菜单高度的改变幅度. 另外, 我们需要将菜单的初始高度定为 0. // 速度

  • 使用 Conditional Menus 插件让 WordPress 在不同页面显示不同菜单

    使用 Conditional Menus 插件让 WordPress 在不同页面显示不同菜单

    菜单是每个网站的基本内容,它可以帮助访问者轻松找到他们需要的页面.但是,在结构复杂的网站上,您可能希望每组页面都有单独的菜单.要以这种方式自定义它们,您需要一个插件来创建不同的菜单并将它们分配给您的页面/页面组. 在这篇文章中,我将彻底向您展示如何以最快的方式做到这一点.但首先,让我们看看为每个页面创建单独的菜单如何在特定情况下为您提供帮助. 为每个页面创建单独菜单的情况 在以下情况下,为每个页面设置单独的菜单可能对您有所帮助: 您想在主页的菜单上显示产品页面.每个产品页面都有一个特定的菜单,该

  • 利用Fix Rss Feeds插件修复WordPress的Feed显示错误

    今天突然有个网友留言说博客的Feed挂了,症状如下: Chrome直接打开订阅页面显示如下: This page contains the following errors: error on line 1 at column 1: Document is empty Below is a rendering of the page up to the first error. FeedDemon提示:此Feed包含错误. 添加后也没什么影响,能正常使用. 鲜果阅读器也可阅读,但是没有获取到最新

  • 用js代码和插件实现wordpress雪花飘落效果的四种方法

    用js代码和插件实现wordpress雪花飘落效果的四种方法

    冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els

  • jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

    本文实例讲述了jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果.分享给大家供大家参考,具体如下: function openTopWindow(url, title, width, height) { title = title == undefined ? ' ' : title; width = width == undefined ? 800 : width; height = height == undefined ? 300 : height; if (url

  • ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息.该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定的值,还可以根据用户自定义业务规则,而且错误提示信息,也可以根据用户的要求自定义显示.看来这个插件的功能确实很强大,是不是迫不及待想使用了.好的,那我们就开始简介如何使用它. jQuery validation 插件下载地址:http://plugins.jquery.com/p

  • bootstrap select2插件用ajax来获取和显示数据的实例

    用select2插件,实现以下这个选择框: 1.html代码 <div class="form-group" style='display:none;' id='preParamGroup'> <label for="inputEmail3" class="col-sm-2 control-label">预定义参数</label> <div class="col-sm-8"> &

  • JS插件amCharts实现绘制柱形图默认显示数值功能示例

    JS插件amCharts实现绘制柱形图默认显示数值功能示例

    本文实例讲述了JS插件amCharts实现绘制柱形图默认显示数值功能.分享给大家供大家参考,具体如下: 使用amCharts.js绘制柱形图(column chart)时,有时需要默认显示每一个柱子的数值. 通过在AmCharts.AmGraph中设置labelText属性为[[value]],即可实现上述需求. 效果如下所示: 上例的代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww

  • 解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题

    最近使用了Better Comments这款插件,发现在ts文件中可以显示对应的颜色,但在vue文件中并不显示对应颜色 解决方法如下: 1.打开插件的配置文件夹,即 c盘 -> 用户 -> 用户名 -> .vscode文件夹 2.extensions目录 -> bttter-comments配置文件夹 3.打开配置文件aaron-bond.better-comments-3.0.2 -> out -> parser.js 4.修改配置文件,添加如下代码 case &qu

  • WordPress中获取页面链接和标题的相关PHP函数用法解析

    get_permalink()(获取文章或页面链接) get_permalink() 用来根据固定连接返回文章或者页面的链接.在获取链接时 get_permalink() 函数需要知道要获取的文章的 ID,如果在循环中则自动默认使用当前文章. 用法 get_permalink( $id, $leavename ); 参数 $id (混合)(可选)文章或者页面的 ID(整数):还可以是文章对象. 默认值:在循环中自动调用当前的文章 $leavename (布尔)(可选)转化成链接是是否忽略文章别名

随机推荐