WordPress 中有一个导航菜单函数wp_nav_menu,通过这个函数可以控制菜单输出的HTML 结构,一般开发者用这个函数的一般是在输出HTML 中自定义一些id 或者class 而已,整体的HTML...项目的需求是各种各样的,了解如何自定义导航菜单HTML 结构就十分重要了。 wp_nav_menu 函数 囿于篇幅,本文不会教你怎么使用wp_nav_menu 函数,请自行补习。...Walker_Nav_Menu 的用法(例子) wp_nav_menu 函数中有个参数 $walker,“自定义的遍历对象,调用一个对象定义显示导航菜单。”...例子: 比如说WordPress 中输出二级菜单的话,ul 中类名默认是sub-menu,那我想改为child-menu,怎么办?...更多例子的话,最近发布EaseMobile 主题在导航栏上的图标设置就是采用了Walker_Nav_Menu 类自定义输出。
如果你的主题不支持自定义菜单功能,那么左边的 主题位置 面板会提示你,这个自定义菜单的选项将会在侧边栏显示。...它们后面对应的描述,将会显示在后台的 主题位置 面板上,供你选择。在 'header-menu' => __( 'topnav' ) 这句代码中,我加了__() 这个函数,它是用于跨语言翻译用的。...wp_nav_menu 之后,在主题中添加自定义菜单。在主题中合适的位置,添加下面的函数: 可选,在输出的列表中的 a 标签之前添加文本信息。after 功能类似。...'link_before' => 可选,在输出的列表中的链接文字前面加上文字(注意与上面的区别)。link_after 功能类似。
对于wordpress主题来说 wp的菜单是必不可少的 可以用于制作导航栏 也可以做侧边栏、页脚导航等等 只要熟练掌握 就能利用wp菜单做成想要的东西 话不多说 现在先讲一下菜单的创建 首先要开启导航菜单功能...当然照我所写代码也可 具体怎么使用稍后会讲 然后在wp后台菜单处显示如下 至于怎么设置菜单,具体见下面wordpress大学的教程 https://www.wpdaxue.com/wordpress-nav-menus.html...实际使用我们并不会用到这么多参数 根据实际需要来调整即可 theme_location导航别名 menu期望显示的菜单 container_idul父节点id值 container_classul父节点...class值 menu_classul节点class值 menu_idul节点id值 before菜单链接前的文本 after菜单链接后的文本 link_before每个菜单链接文本前的文本 link_after...://developer.wordpress.org/reference/functions/wp_nav_menu/ 下面是一些实例 如果只用最简单的代码 输出的结构是这样的 (方便起见,不写类名)
WordPress 自定义菜单功能是非常好用的一个功能,但是我们在实际使用的过程当中,却发现一个非常严重的问题,效率非常低下,如果自定义菜单比较复杂的话,会产生多达十几条甚至几十条的 SQL 查询,我认真查看了下...wp_nav_menu 函数的源代码发现其没使用进行缓存,但是 wp_nav_menu 又没有足够多的 hook,于是我只能重写了一个 wpjam_nav_menu 函数,使用 WordPress...Transients API 对生成的菜单进行缓存,大大提高页面的效率: /* Plugin Name: WPJAM Memcached Nav Menu Plugin URI: http://blog.wpjam.com...$menu->term_id, $menu_items, 3600); } return $menu_items; } //后台更新自定义菜单的时候,更新缓存 add_action(...然后在主题模板中(一般在 header.php 文件中)使用 wpjam_nav_menu 函数替代原来的 wp_nav_menu 即可。 ----
WordPress 导航菜单系统的概述 首先我们简单解释下这个导航系统的几个概念: 主题位置:就是定义导航菜单在当前主题位置的名称,比如你在导航位置定义了一个菜单,名字就叫做导航菜单,那么这里就显示...使用 WordPress 的导航菜单 如何激活 WordPress 自带的导航菜单 要使用 WordPress 导航菜单功能,首先要给当前的主题注册导航菜单,从上面我们知道,我们可以注册一个或者多个导航菜单的主题位置...这里我们只注册一个导航菜单的主题位置: register_nav_menu( 'nav-menu', '导航菜单'); nav-menu 是这个导航菜单的名字,用来在函数中定义身份的,而“导航菜单”则是名称...添加和显示导航菜单 注册好之后,就可以到 WordPress 后台 > 外观 > 菜单 添加菜单,添加的菜单的顺序是这样的: 首先定义好一个单独的菜单。 然后吧这个菜单赋给一个主题位置。...然后我们到主题的显示菜单的位置通过以下 wp_nav_menu() 就能把刚才定义的菜单显示出来,当然 wp_nav_menu() 这个函数可以有非常详细的参数,但是这里只要简单使用就可以,在特殊的情况下才可能使用到
我前面撰写了一个新函数 wpjam_nav_menu,它是缓存版的 wp_nav_menu。...升级到 WordPress 3.9 之后,WordPress 提供了 pre_wp_nav_menu filter 接口,我们可以直接通过这个接口来缓存自定义菜单结果了,无需使用新函数了,这样方便了很多...在当前主题的 functions.php 文件中添加如下代码: //给 wp_nav_menu 加上对象缓存,加快效率 add_filter( 'pre_wp_nav_menu', 'wpjam_get_nav_menu_cache...$timestamp ); } // 更新菜单,清理缓存 add_action( 'wp_update_nav_menu', 'wpjam_delete_nav_menu_cache' ); function...menu_data){ set_transient( 'nav-menu-cache-timestamp', time(), 86400 ); } 并且该功能已经整合到 WPJAM Basic 插件中。
如果你是一个 WordPress 主题作者,你肯定会经常到 WordPress 的 Codex 去搜索一些常用的模板函数,每次查询的话,有点麻烦,所以为了方便查询,制作了这个 WordPress 常用模板函数速查表...> 字符集 链接 导航菜单 默认导航菜单 指定的导航菜单 'Project Nav' )); ?> 基于分类的导航 显示时间,格式为:'08-18-07' 链接 显示到文章留言的链接 链接 显示生成当前页面所需的查询数 链接 ----
() 函数启用它们,add_theme_support可以在主题的functions.php中调用,如需在hook中调用的必须在after_theme_setup中调用; add_theme_support...,删除菜单注册 wp_nav_menu($args);给定一个theme_location参数,该函数显示分配给该位置的菜单。...如果不存在这样的位置或没有为其分配菜单,则参数fallback_cb将确定显示的内容。...如果没有给定theme_location参数,函数显示与menu参数给出的 ID、slug 或名称匹配的菜单;否则,第一个非空菜单;否则(或者如果 menu 给定的菜单为空),则输出fallback_cb...has_nav_menu(),判断某个注册的菜单是否已经被分配菜单 wp_nav_menu默认参数 <?
说明:一般来说网站头部有一个导航菜单,有时候由于某些因素我们需要给登陆和未登陆用户分别显示不同的菜单项,这里说下方法。...1、创建两个菜单 先进入WordPress后台-外观-菜单中,创建两个菜单,菜单名称分别设置成:已登陆和未登录,并给这两个菜单分配不同的菜单项。...2、确定菜单位置名称 开始下一步前,我们需要知道菜单位置名称,也就是theme_location参数的值,用文本编辑器打开当前主题目录中的header.php,搜索wp_nav_menu一般都能找到这个值...,代码一般长这样: // theme_location后面的 top 就是我们要找的值 wp_nav_menu( array( 'theme_location' => 'top', 'menu_id'...// 下面的top改成第2步获取到的菜单位置名称 if ($args['theme_location'] == 'top') { if (is_user_logged_in()
Dashicons 是 WordPress 官方出的用于后台的图标字体,可以用于 WordPress 的各个地方,也可以用在 WordPreess 前台,但是你事先要加载相关的 CSS。...各个地方如何使用 Dashicons register_post_type() 中使用: 注册文章类型的时候,如果要自定义文章类型在后台左侧菜单的图标,可以指定 menu_icon 的参数为 dashicons...'menu_icon' => 'dashicons-products', ) ); }); add_menu_page() 中使用: 自定义后台页面的时候,也可以指定第六个图标的参数为...图标呢?...点击「WPJAM」菜单下的「 Dashicon」子菜单,首先看到的按照分类显示的所有 Dashicons 列表: 点击某个 Dashicon,就会显示大图,和其名称,对应的的 HTML 代码:
wordpress添加二级导航功能CSS代码 作者:matrix 被围观: 1,226 次 发布时间:2013-09-21 分类:Wordpress 零零星星 | 无评论 » 这是一个创建于...3267 天前的主题,其中的信息可能已经有所发展或是发生改变。...NGRO主题没有导航菜单,也就只有自己动手了。 最终样式,感觉还不错: 步骤: 1.header.php中添加 'primary'));?...> 2.在style.css中添加 .menu {font-weight: bold;text-align: rightright; position: absolute; margin-left
可以从指定的RSS/ATOM feed源中自动更新发布文章到你的WordPress博客. 想用WordPress做垃圾站的朋友可以好好的研究研究....两个插件虽然都涉及到字数统计, 但实质的字数判断应该是不同的. Category Icons 非常好用的WordPress文章分类图标插件. 可以让你为每个分类指定一个不同的图标....插件主页 postTabs postTabs可以让你用Tab切换模块的方式显示文章或页面. 比较有视觉效果, 或当内容比较多而又具有层次结构的时候使用....Article Templates 和上面介绍的Posts Templates插件一样, 也是为日志发表创建一个模板, 方便同类布局文章的发表. dTabs 这个WordPress插件创建一个Tab切换菜单和下拉菜单在你的控制面板...特别的这份随机日志列表包含每篇文章中的第一张图片, 显示成缩略图. 插件 主页 WP Post Icon 允许博客作者为文章上传和选择主题图标或图标,图标将自动显示在文章内.
,不管他们处于何种环境,而不是假设每个用户以完全相同的方式与媒体播放器交互。...因此,如果你把播放和暂停作为一个具体的例子来看这些图标,你会看到的不是按钮代表按下或未按下的东西,而是一个变化的图标,这意味着将要采取的行动正在变化,并由该图标代表。...例如,当按钮有播放图标时,如果我按下它,这意味着它将播放视频。然后显示暂停按钮图标。如果我按下它,它将暂停视频。...所以,在这种情况下,我们想把它也表示为一个按钮,但在这里,我们希望它仍然使用动词,就像我们对一个瞬间按钮,但不是一个动词,它将以一种与所表示的图标对应的方式改变。...交替锁定按钮 播放速率控制的建模更像是一个交替锁定按钮。它与旧设备的菜单按钮类似,可以让你按一个菜单,然后进入一个菜单状态。
一般我们需要编辑主题的 CSS 文件才能给菜单添加图标,今天就给大家介绍一款 WordPress 插件 Menu Icons,可以让你在 WordPress 后台就能给每个菜单指定一个图标,操作非常简单...安装好 Menu Icons 之后,在 WordPress 后台,外观 > 菜单 界面,我们就会看到页面的左边有一个新叫做 Menu Icons Setting 的窗体,它可以让我们选择用于菜单图标的图标集...,并且设置图标所处的默认位置: 从上图,我们可以看到已有四种最常用的图标字体可供选择,图片选项让我们可以使用 WordPress 媒体库中的已有图片或者新上传一张图片。...另外插件也支持其他字体图标,插件的 FAQ 有关于如何安装 Fontello 字体图标详细的介绍。...点击上图中菜单项的“SELECT Icon”按钮,就会弹出一个选择窗,让你选择该菜单的图标: 下面就是设置好图标之后的效果: 下载:Menu Icons
当您将新内容发布到您的网站时,之前的帖子会关闭并最终移动到存档页面。粘性帖子允许您在WordPress中添加精选帖子,并在您的网站主页上以不同的方式显示它们。...确保内容对您的读者保持相关性、准确性和吸引力! 推荐:Astra主题怎么设置顶部固定菜单/粘性浮动菜单为什么要在WordPress类别添加置顶文章? ...(帖子或自定义帖子类型)选择开关图标的颜色显示开关图标的列的自定义顺序仅使用内置的WordPress功能星形图标开关立即使用 ajax 将帖子保存为置顶状态可选地,将帖子的所有翻译设置为置顶,支持 Polylang...该插件还在WordPress仪表板的帖子设置中添加了一个星形图标。这使您无需打开内容编辑器即可快速将帖子置顶。 3、从WordPress管理面板前往帖子。现在可以单击星形图标使帖子置顶。...请注意,星形图标仅在管理仪表板中可见,现在已经为WordPress中的类别添加了置顶文章。
对于首次使用的用户,张戈博客还是继续介绍下好了! 先贴一下效果截图,了解一下图标字体是个什么东东: ? 其实,就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现,即图标字体。...那如何使用到 WordPress 导航菜单呢?...很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的 class 填入到 CSS 类即可,比如我在官方图标库查到“家”图标的 class 是 fa fa-home,...保存之后,WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。 如果发现点开菜单没有 CSS 类栏位怎么办? 很明显,你没把这个功能开出来。...点击菜单页面右上方的【显示选项】,勾上 CSS 类即可: ? 如果发现点击【显示选项】没动静怎么办? 看来你的 WordPress 也是升级 4.2 了。
目录 DUX主题是基于WordPress程序的主题,由themebetter团队原创开发,是目前比较火的wordpress主题,和大前端主题一样比较优秀的主题还有begin知更鸟,两者功能都很多,界面也比较好看...7.3 新增对WordPress5.0+新版编辑器的兼容支持 新增登录注册找回密码链接的 nofollow 更新Awesome图标库到最新版5.7.2,免费图标都可以用 优化小工具画廊的展示 优化导航二级菜单...,让展示更大气 优化网址导航页面模版细节 修复WordPress5.1后Ajax评论回复功能失效 修复几个开启debug后的错误提示 修复网址导航页面模版左侧菜单抖动问题 DUX主题5.4版本更新内容:...新增全站评论整体关闭选项,主题设置-基本中可设置 新增v2ex头像获取方式,删除多说方式,且可以在后台-设置-讨论中选择默认头像 调整底部友情链接选择只在首页显示时,不在首页分页中显示 调整产品分类的写法以避免因分类过多导致的高度不够用...新增archives页面模版中文章标题后 显示 副标题 调整首页轮换图效率更高,手机端手势滑动更加顺畅 优化产品中心手机端左侧菜单不显示的问题 修复页面左侧菜单一键换色的时候没有换色 更新时间: 以后将持续更新
menu items(在菜单项中显示图标) 在主菜单和上下文菜单中,在项目左侧显示图标。...Menus and Toolbars(菜单和工具栏管理) 自定义菜单和工具栏,使其仅包含所需的操作,对其进行重新组合并配置其图标。 在可用菜单和工具栏列表中,展开要自定义的节点,然后选择所需的项目。...Notifications(通知事项) 可以启用和禁用有关某些事件的通知,发生的事件的信息。更改其显示方式,并有选择地启用其日志记录。 7. Quick Lists(快捷菜单) 一组自定义的弹出。...可以将其视为自定义菜单或工具栏,您可以为其指定快捷方式以进行快速访问。您可以根据需要创建任意数量的快速列表。快速列表中的每个动作均由0到9之间的数字标识。...3.在编辑器中,通过关联的快捷方式访问快速列表。 4.如果您不记得该快捷方式,则可以按其名称搜索快速列表。按Shift两次,然后输入快速列表的名称。 8.
上一篇我们介绍了 WordPress 的 Easy Embeds 功能,它可以让你直接输入一个视频或者其他媒体网站 URL,这个 URL 里面含有的视频或者媒体就自动显示出来。...WordPress 文章 Embed 功能 除了视频和这些媒体网站之外,WordPress 还能插入自己博客或者会其他 WordPress 博客的文章链接,然后以卡片模式显示: https://blog.wpjam.com.../project/wpjam-basic/embed/ 如上所示:可以显示该文章的标题,摘要以及特色图片(如果设置了的话),并且还有站点图标(没有则使用 WordPress 默认图标),评论链接和分享链接...「优化设置」中「增强优化」标签页中「Frame 嵌入」选项是不是设置了:不允许任何网页,改成:只允许同域名网页。...屏蔽文章 Embed 功能 如果不想别人或者自己通过嵌入的方式引入你的文章,我们也可以屏蔽 Embed 功能: remove_action('wp_head', 'wp_oembed_add_discovery_links
WordPress 3.8 版本带来最大的变化就是全新的扁平化后台界面,所有的菜单图标和其他地方的图标都是使用字体图标,所以支持界面放大和缩小,并且能够适应各种配色方案,但是通过插件新增的菜单图标,如果使用图片的话...使用 Dashicons Dashicons 就是 3.8 带入的 WordPress 核心中的图标字体,现在 WordPress 后台所使用的图标就是 Dashicons,这些图标是基于矢量的,可以按照任意大小去缩放都不会失真...所以如果你觉得 dashicons 某个图标适合你的插件,可以直接使用,比如我的 WPJAM WordPress 插件 就是用 Dashicons 中的 cloud 图标: add_menu_page(...使用 SVG 图标 如果 Dashicons 中的图标还不能满足你的需求,那么你可以使用 SVG 图片,和图标字体一样,SVG 图片也是可以任意大小缩放不失真的。...我们可以通过 Data URI scheme 方式插入,比如最新版的微信机器人图标这样设置后台菜单图标(效果如上图): add_menu_page('微信机器人', '微信机器人', 'manage_options
领取专属 10元无门槛券
手把手带您无忧上云