我的编程空间,编程开发者的网络收藏夹
学习永远不晚
位置:首页-资讯-开源

wordpress制作自定义菜单的方法

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

wordpress制作自定义菜单的方法

要想实现自定义菜单,需要用到的函数是wp_nav_menu(),给这个函数传递一些参数就可以输出自定义菜单菜单,下面简单讲讲如何使用使用这个函数。

首先,在主题目录下的functions.php的 <?php ….. ?> 之间,添加以下菜单注册代码,这样你就可以在主题文件中使用wp_nav_menu函数了:


复制代码代码如下:

// This theme uses wp_nav_menu() in one location.

register_nav_menus();

接着我们在主题的导航栏处调用wp_nav_menu(),即可输出导航菜单HTML代码:


复制代码代码如下:

<?php

// 列出顶部导航菜单,菜单名称为mymenu,只列出一级菜单

wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );

?>

以上代码输出的HTML代码形式如下:

<div class="menu-menu-container">

<ul class="menu" id="menu-menu">

<li class="..." id="menu-item-1"><a href="...">首页</a></li>

<li class="..." id="menu-item-2"><a href="...">分类A</a></li>

...

</ul>

</div>

这里列出的 li 项为你在后台 – 外观 – 菜单添加的栏目,如果你还没有在后台添加菜单,导航栏将列出所有页面。另外,wp_nav_menu会为每个 li 添加class,不同的class标记这个菜单项的属性,如当前打开的是某个文章页面,分类A 就是这篇文章所属的分类,那么 分类A 所在的 li 将会如下代码所示:


复制代码代码如下:

<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

     如果是在首页,那么首页的菜单项的 li 可能会如下所示:


复制代码代码如下:

<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

从这些class的名称就知道它们的作用,通过给这些class添加css属性,可以达到如高亮当前导航菜单的目的,如将当前菜单链接定义成红色:

.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {

color: red;

}

     好了,WordPress 3.0的自定义菜单的调用就是这么简单。wp_nav_menu还有很多参数,如自定义 ul 节点、ul 父节点的id和clawww.cppcns.comss的参数等等,详情可以参考文档:官方文档 | 中文文档

使用分类和页面作为导航栏

     在 WordPress 3.0 之前,大部分WordPress主题都是拿页面作为导航栏的,导航中只能添加页面,显得不够自由。我刚用WordPress 2.7的时候,就为此问题烦恼,最后翻了文档,查了一些资料,实现了在导航中添加分类,详情请看我之前写的文章:WordPress 分类做导航栏,并高亮显示

非常规导航栏的制作

     以上提到的两种方式,都是使用WordPress自带的函数来实现,他们输入的HTML代码也都是限定好的,就是使用 ul li 的形式来构建菜单列表:如:


复制代码代码如下:

<ul>

<li class="..">...</li>

<li class="..">...</li>

</ul>

如果主题的前端代码不是你写的,而且导航栏的代码写得很龟毛,这根本不是上面的WordPress标准的 ul 导航栏形式编程客栈,如下面的代码:


复制代码代码如下:

<dl>

<dt><strong>标题</strong></dt>

<dd><a target="_blank" title="#" href="#">菜单A</a></dd>

<dd><a target="_blank" title="#" href="#">菜单B</a></dd>

</dl>

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

wordpress制作自定义菜单的方法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

wordpress制作自定义菜单的方法

要想实现自定义菜单,需要用到的函数是wp_nav_menu(),给这个函数传递一些参数就可以输出自定义菜单菜单,下面简单讲讲如何使用使用这个函数。首先,在主题目录下的functions.php的 之间
2022-06-12

WordPress自定义多个边栏的方法

在主题的functi编程客栈on.php文件中,可以找到形如如下内容的语句:复制代码代码如下:if ( function_exists(‘register_sidebar’) ) regis编程客栈ter_si
2022-06-12

Android编程自定义菜单实现方法详解

本文实例讲述了Android编程自定义菜单实现方法。分享给大家供大家参考,具体如下: 在android开发的过程中系统自带的菜单往往满足不了开发中的一些需求,比如说一排最多只能放置三个菜单,坐多只能放置6个,再多的话就会折叠起来,如果我们想
2022-06-06

wordpress自定义上传文件类型的方法

前言 众所周知WordPress默认支持大部分图片等文件格式的上传,但也有一些文件格式是不支持的,根据个人需要,我们需要增加一些格www.cppcns.com式,一些格式也可以禁止上传,设置非编程客栈常非常简单,下面来一起看看吧。 方法如下
2022-06-12

Android编程实现自定义系统菜单背景的方法

本文实例讲述了Android编程实现自定义系统菜单背景的方法。分享给大家供大家参考,具体如下: 不多说,上图,见代码。package lab.sodino.menutest; import android.content.Context;
2022-06-06

WordPress自定义表情及其路径的方法

下面讲解使用方法: 第一步:下载weisay_smiley.zip,解压,将表情文件夹smiley和smiley.php一起上传到你目前使用的主题目录下面。 编程客栈DownLoad   www.cppcns.com第二步:在functio
2022-06-12

eclipse构建自定义菜单的实现

1.1 简介在开发工具上添加自己需要的功能,可以基于eclipse的插件进行扩展以满足新功能的需要。下面就说说如何在eclipse上如何添加菜单项。1.2 建立工程新建eclipse插件工程
2023-06-02

自定义wordpress登录页的一些技巧方法

下文提到的所有代码,都是添加到主题的funshions.php 文件的最后一个 ?> 的前面。 制作一个名为 login_logo.png 的图片,放在主题下的images文件夹里(也可以根据自己的实际修改,只要下面的代码引用的Logo地址
2022-06-12

WordPress 自定义文章列表列的实现方法

上一篇,我们使用 Meta Box 为文章添加了一个“推荐指数”字段。添加后用了一段时间,似编程客栈乎不那么方便,编辑文章虽然方便了,但是在文章列表里却不能直观的显示出文章推荐指数,而且不能根据推荐指数来排序文章,鉴
2022-06-12

wordpress去掉自带的logo或者左侧栏的菜单方法

去掉logo或者左侧栏的菜单,防止被改掉。 在使用模板下的functions.php下修改 复制代码代码如下: function my_edit_toolbar($wp_toolbar) { $wp_toolbar->remove_node
2022-06-12

android 自定义Android菜单背景的代码

代码如下: public class MenuEx extends Activity { private static final String TAG = "android123"; @Override public void onCre
2022-06-06

Android开发技巧之我的菜单我做主(自定义菜单)

Android SDK本身提供了一种默认创建菜单的机制。但通过这种机制创建的菜单虽然从功能上很完备,但在界面效果上实在是有点“土”。对于一个拥有绚丽界面的程序配上一个有点“土”的菜单,会使用户感觉很怪,甚至会使绚丽的界面大打折扣。
2022-06-06

Android实现自定义的卫星式菜单(弧形菜单)详解

一、前言 Android 实现卫星式菜单也叫弧形菜单,主要要做的工作如下:1.动画的处理2.自定义ViewGroup来实现卫星式菜单View(1)自定义属性 a. 在attrs.xml中定义属性 b. 在布局中使用自
2022-06-06

wordpress后台中的侧边栏添加菜单或子菜单的方法

复编程客栈制代码代码如下: //该方法为向已经存在的菜单中添加子菜单 function add_submenu() { add_submenu_pRDLypage( 'themes.php', 'my_backu编程客栈p', '测试',
2022-06-12

WordPress管理页面底部自定义文字的方法

本文实例讲述了在WordPress管理页面底部自定义文字的方法,分享给大家供大家参考。具体实现方法如下: 把下面的代码复制到主题functions.php文件中:复制代码代码如下:
2022-06-12

自定义drupal注册表单的方法

本文实例讲述了自定义drupal注册表单的方法。分享给大家供大家参考。具体实现方法如下: drupal默认用户注册表单中只有用户名称,帐号密码,邮箱等字段,如果想对用户做一些好的交互,必须要用到用户一些稍微详细的信息,而drupal的hoo
2022-06-12

如何自定义Ubuntu系统的引导菜单

这篇文章主要为大家展示了“如何自定义Ubuntu系统的引导菜单”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何自定义Ubuntu系统的引导菜单”这篇文章吧。Grub2是Ubuntu的默认引导工
2023-06-16

WordPress数据库备份的方法:WordPress管理区的管理菜单

我们都知道文件需要创建一个备份,已成为我们的日常工作(办公室工作)的强制性部分。我http://www.cppcns.com们应该有我们的文件的备份,以便在崩溃的文件或其他任何故障的情况下,我们可以使用该文件的备份。如今,它已成为一个非常普
2022-06-12

编程热搜

  • wordpress错位如何解决
    这篇文章主要介绍“wordpress错位如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“wordpress错位如何解决”文章能帮助大家解决问题。wordpress
    wordpress错位如何解决
  • 帝国cms调用栏目别名的修改步骤
    请留意下面的修改方法 修改后栏目别名使用 !--bname--] 调用 打开e/class/t_functions.php搜索定位到带模板的栏目导航标签修改1复制代码代码如下://替换变量$bclassname=$class_r[$clas
    帝国cms调用栏目别名的修改步骤
  • 动易Cms MAC验证视图失败的解决方法
    “/”应用程序中的服务器错误。 -------------------------------------------------------------------------------- 验证视图状态 MAC
    动易Cms  MAC验证视图失败的解决方法
  • DEDECMS如何支持中文水印
    DEDECMS如何支持中文水印?修改/include/inc_photograph.php,在165行处加这行代码:$w_text = iconv("GB2312","UTF-8",$w_text);OK,现在可以用中文做水印了,但默认的字体大小是5,中文字体
    DEDECMS如何支持中文水印
  • 快速了解Discuz!程序文件功能
    相信有不少人热衷于基于修改原有系统文件所做的插件,当然了解程序文件功能是最重要的,下面我把Discuz! X2.0主要的程序文件功能说一下。Tips:Q:针对说明的文件是?A:我只基于原版文件对upload目录中基本的程序文件(php,ht
    快速了解Discuz!程序文件功能
  • DedeCMS编辑器fck更换成eWebEditor编辑器具体步骤
    将eWebEditor编辑器插入DEDE后台的效果: 完全Word在线编辑的功能,让你从此摆脱发可编辑器卡得死,进入流畅干净编辑界面新时代。 下面是具体步骤: 首先,你要知道eWebEditor是一个什么工具。 eWebEditor是由国
    DedeCMS编辑器fck更换成eWebEditor编辑器具体步骤
  • 允许 WordPress 上传任意文件的方法
    此时如果上传一个不在预定义编程客栈的安全扩展名列表,如.lrc,会报kAtKhHRl错: F编程客栈ile type does not meet security guidelines. Try another. 解决此问题有两方法: 在
    允许 WordPress 上传任意文件的方法
  • dedecms 软件下载模块中添加下载方式为迅雷下载联盟代码
    修改 /plus/download.php 文件 www.cppcns.com查找
    dedecms 软件下载模块中添加下载方式为迅雷下载联盟代码
  • dedecms网站tag标签全部静态化的解决方法
    更改tags.php文件在根目录 找到$tag = FilterSearch(urldecode($tag)); 替换为:$tag = urldecode($tag); 更改文件arc.taglist.class.php文件文件所在的路径是
    dedecms网站tag标签全部静态化的解决方法
  • 帝国CMS远程保存图片的方法
    本文实例讲述了帝国cms远程保存图片的方法。分享给大家供大家参考。 具体实现方法如下:复制代码代码如下:
    帝国CMS远程保存图片的方法

目录