发表日期:2012-10-24 文章作者:爱永设计 浏览次数:20178 次
我在做许多网站时,经常会遇到这样的问题,就是主导航菜单只能在后台调用中文,不能调用英文,天天苦思冥想,今天终于找到了我想要的效果。下面就由爱永设计分离给大家吧!
在WordPress 3.0中增加了自定义菜单功能,如果你在WordPress后台(外观>菜单)创建一个菜单,你可以在主题中使用wp_nav_menu()
函数来显示这些菜单。但是像图中这种带描述的导航菜单还无法简单实现,本文将教你改变WordPress默认的菜单输出结构,打造个性的导航菜单。
我们要做的第一件事就是到菜单页面,你会发现每个菜单项都有一个“标题属性”,了解网页都知道这是用来显示鼠标移到链接上后的提示性文字,首先把你希望显示的文字先填上~
打开你主题文件中的function.php文件,并添加如下代码:
class description_walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->ID; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = 'COLOR: #339933">. esc_attr( $class_names ) . '"'; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' . $id . $value . $class_names .'>'; $prepend = '<strong>'; $append = '</strong>'; $description = ! empty( $item->attr_title ) ? '<span>' . esc_attr( $item->attr_title ) . '</span>' : ''; if($depth != 0) { $description = $append = $prepend = ""; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; } $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . $prepend . apply_filters( 'the_title', $item->title, $item->ID ) . $append; $item_output .= $description . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }
那么这个类做了什么呢?这个类在WordPress默认的walker代码(位于wp-includes/nav-menu-template.php)基础上添加了几行代码。现在这个walker会检测是否是顶级菜单,如果是就会输出带有描述的菜单结构。
现在我们创建了一个自定义的walker类,我们还要做的就是告诉WordPress去使用我们的walker替代默认的。这步非常简单,只要为 wp_nav_menu() 添加walker参数即可:
<?php wp_nav_menu( array('walker' => new description_walker())); ?>
好了,最后为你的菜单添加CSS样式,一起来制作个性的导航菜单吧~
日期:2024-03-24 浏览次数:55259 次
日期:2020-03-06 浏览次数:258135 次
日期:2018-07-07 浏览次数:329977 次
日期:2017-08-20 浏览次数:330379 次
日期:2016-09-09 浏览次数:330709 次
开发日期:2021-06-21 浏览次数:684807 次
开发日期:2021-04-21 浏览次数:744641 次
开发日期:2020-05-03 浏览次数:802115 次
开发日期:2019-12-02 浏览次数:780114 次
开发日期:2019-10-02 浏览次数:1039226 次
日期:2012-12-15 浏览次数:28735 次
日期:2020-05-27 浏览次数:8658 次
日期:2012-11-24 浏览次数:16258 次
日期:2012-07-08 浏览次数:16254 次
日期:2013-12-29 浏览次数:187500 次
致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!
Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作