我们在开发网站使用 WordPress 制作导航菜单，会使用 wp_nav_menu 函数，它可以自动调用出后台创建的导航菜单。但是使用默认的 wp_nav_menu 函数生成的菜单结构比较单调，有时很难. G 9 = P V A达到我们自己的需要。
下面学做介绍一下 WordPress 如何使用 wp_nav_menu 函数生成需要的 class 结构。
第一步：将下的函数代码保存为 function-W 1 (nav.php（或者直接在文^ u @ y章底部B v R K b A ,下载这个 PHP 文件）；
- <?php
- /*自定义二级菜单导航开始*/
- class wp_bootstrap_navwalker extends WalH g A G = =ker_Nav_Menu && J a @ C#123;
- public function start_lvl( &$output, $de$ 8 4 S } 1 R y ppth = 0, $args = array() ) j r ] Q J Y ?123;
- $indent = str_repeat( "\t", $depth );
- $output .= "\n$indent&l? [ J V 6 pt;ul role="menu" class=" dropdoV E o Vwn-menu">\n"; //00001-I V 3 9下拉UL样式
- }
- public function start_el( &$output, $item, $depth = 0, $argsh \ j w o f [ = array(), $id = 0 ) {
- $indent = ( $depth ) ? str_repeat( "\t", $depth 4 b I41^ o t H K _ w; : '';
- //判断标题文字是不是指定文字，然后显示样式
- if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depA c O l pth === 1 ) # } N D J123;
- $outp? p ! [ M W ; = 8ut .= $indent . '<li role="pres* ^ kentatio/ X g i 9 yn" cla8 G c C [ =ss="divider">';
- } else if ( sU x 6 v v U otrcasecmp( $item->title, 'divider'~ 6 o i) ==& ! u 7 R 0 && $depth === 1 9 K k q p # j k (1; {
- $output .= $indenb ) G l V } ) h Pt . '<li role="presentation" class="divider"&g$ c k ) k f ! 4 Ht;';
- } else if ( strcasec= T Pmp( $item->attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
- $output .= $indent . '<li role=&q^ s , D :uot;presentation&; _ 6 F v ? , ^quot; class="dropdown-header"&j | G E d G 4 + dgt;' . esc_attr( $item->tZ 7 r ` z ^ Uitj G F qle );
- } else if V ( 5 A0; strcasecmp($item->attr_til ? \ @ # b 0tle, 'disablz E l . * u ^ | wed' ) == 0 ) {
- $output .= $indent . '<li role="presentation" class="U M D . 0 w y s;disabled"><a href="#" rel="external nofollow" >' . esc_attr( $item->t: w ( W & = vitle ) . '</a>';
- } else {
- $class_na9 k | b ` 2mes = $value = '';
- /*=================控制LI开始===========! b Y ~ p H & e=============*/
- $classes = empe t . 3 e 3 A V ,ty(W ` f 7 X G $item-&- T T X & , 7 k wgt;cl# u X c Passes ) ? array() : (array) $item->cU v : s : / C H :lasses;
- $classes[] =D 1 . O 'menu-item-' . $item->ID; //00002-所有li添加class，包含一级二级li
- $class_names = join( ' ', apply_filte% 6 w q - G :rs( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
- if ( $args->has_\ * . c % p 1 lchiZ ) Oldr@ h B n E *en )
- $class_names .= ' dropdown nav-item'; //00003-有下拉菜单的父LI的添加class
- if ( !$args->W ^ ^ F F;has_childU T kren && $depth === 0 )
- $cl! B a 0 U \ N Z }ass_names .= ' nav-item';//00004-没有下拉菜单的父LI添加class
- if ( !$args->has_children && $depth === 1 )
- $class_names .= ' nav3';//00005-二级子菜单LI添加class
- /*============C D ? b X=====控制LI结束=t i 6 / ^=======================*/
- if ( in_array( 'current-menu-item', $classes ) )
- $class_names .= ' active'; //00006-当前样式
- $class_names = $class_names ? ' class="' . escM ! m @ (_& = aattr{ Q N( $class_names ) . '"' : '';
- $id = apply_filters( 'nav_menu_item_id', ' menu-item-'. $item->; 0 r S 4ID, $item, $args ); //00007-菜单所有li的添加ID，包含一级二级li，没多大用
- $id5 N - q k y 3 6 # = $id ? ' id=&qud Z B 8ot;' . esc_attr( $id ) . '"& y i;' : '';
- $output .= $indent . '<li' . $id . $value . $class_names .'>';
- $atts = array(g g J U m 7 ]&| 1 Y#41;;
- $atts['title'] = ! empty7 ( 8 ^ n j n j ]( $item->title ) ? $item->title : '';
- $atts['targe, y t W ^t'] = ! empty( $item->target ) ? $item-- * k>target : '';
- $atts['rel'] = ! empty( $item->xfnd V n f _ R Y k ) ? $item->xfn : '';
- /*? ( C Z g z &=================控制A开始========================*/
- //J [ n . 1 b + z c If item has_children aK * - \ xdd atts to a.
- if ( $args-&z n pgt;has_children && $depth === 0 ) {
- $atts['href'] = $item->url;
- $atts&h & 3 Y k G = v#91;'data-tog3 f : N Z u , c 3gle'] = 'drG & $opdown'; //00008-控制有下拉的父A点击是否跳转; = ,，如果删除将跳转到链接地址
- $atts[x Z D \ W d l I ,'class'] = 'd@ M = % Xropdown-toggle'; /\ g h Z O . 3/00009-有下拉的第一个父AZ n j n的CLAV ^ w 4 Y \ R sSS
- $v ! [ { w _ 7atts['aria-haspopup'] = true;
- }
- elseif ( !$args->has_children && $deptv h s D p Wh === 1 ) {
- $atts['href'] = ! empty( $item->url ) ? $item->url : '';
- $atts['class'] = 'zilink'; //000010-有下拉的二级子菜单里A的CLASS
- }
- else {
- $atts['href'] = ! empty( $item->url ) ? $item->url : '';
- $atts['class'] = 'toplink'; //000011-没有下拉菜单里A的CLASS
- }
- /*=================控制A结束========================*j ` ]/
- $atts = apply_fF 4 Eiln u = D P ` | + Yters( 'nav_menu_link_attributes', $atts, $item, $args );
- $attributes = '';
- foreach ( $atts as $attr => $value q ? T x j 01; {
- if ( ! empty(+ / x t a s g r W $val3 o j 6 a i T K *ue ) ) {
- $value = ( 'href' ==) + T ! 4= $attr ) ? esc_url( $value ) : esc_attr( $value );
- $attributes .= ' ' . $attr . '="' . $value . '"';
- P t q w 6 s5;
- }
- $item_output = $args->before;M @ O t | M
- if ( ! empty( $item->attr_title ) )
- $item_output .= '<a'. $attributes .'>&* O Ilt;spai 5 hn class="glyphicon ' . esc_atz # W j O &tr( $item->attr_title ) . '"></span> ';
- elseif ( $args->has_children && $dep: r } M C ith === 0 ) {
- /*=================给 【% e | f ( r ,A标签开始标签】 前面、里面添加其它内容或者标签开始========v n G================*/
- $item_output .= '<a'. $attributes .'><span class="s1"></span>';//000012-在有@ @ g T ! Q下拉的父A前、里添加内容
- ; ~ ! x 2 G 4 b125;
- else5 Z 7 1 B \ z I Nif ( !$args->has_chir C k | rldren && $depth === 1 ) {
- $item_output .= '<a'. $attributes .'><span c, / T : glass="s2"></span>';//000013-在二级菜单A前、里添- k & v 6 %加内容
- }
- el/ Y S r j u 1 Rse S - ?123;
- $item_output .= '<a'. $attributes .'><span class="s0"></span>';//000014-没有下拉菜单A前、里添加内容
- }
- /*=================给 【A标签开始标签】 前面、里面添加其它内容或者标签结束========================*/
- $item_output .= $args->link_before . apply_filters! I B a A + $ .( 'the_title', $item->title, $item->ID ) . $args->link_after;e [ \
- /*=================给 【A标签结束标签】 后面添加其它内容或者标签) 8 X O l 7开始====? 8 K = a E d====================*/
- if ( $args->0 o \ @ Y Chas_children &&1 S lamp; $depth === 0 )0 ~ b {
- $item_output .= ' &\ E A flt;spa@ : 3 | Y N q S ?n class="c1"></span></6 e F p Aa>';//000015-在有下拉的父A后、里添加内容
- . 6 e ? a N 15;
- elseif ( !$args->has_childrt L ? % (en &am{ N : R hp;& $depth === 1 ) {
- $item_output .= ' <span class="c2"></span></a>';//000016-在二级菜单A后S Z ] z L ~、里添加内容
- }
- else {
- $item_output .= ' <span class^ m & k Z h o * }="c0"></span></a>';//000017-没有下拉菜单A后、里添加内容
- }
- /*===========P Y k J . w C======给 【A标签结束标签】 后面添加其它内容或者标签结束========================*/
- $item_output .= $argS i A j { ]s->after;
- $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
- }
- }
- public function display_element( $element, &a7 ^ ? 6 Amp;$chik F H s ` m 1 7 Ildren_elements, $max_2 ` ldepth, $depth, $args, &$output ) &A v !#123;
- if ( ! $elem4 v ? + / _ W ?ent )
- return;
- $id_field = $this-K Y G b =>db_fields['id'];
- // Display this elemenZ t N _ G p | 7 +t.
- if ( is_object( $arb H ^ C C P \gs[0] ) )
- $args[0]->has= s e a ,_children = ! emptyZ ~ = / n X ; 3( $children_elements[ $element6 L ^->$id_field ] );
- parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $outpP ! [ut );
- }
- }
- /*自定义二级菜单导航结束*/
- ?>
二步：将下载的 function-nav.php 上传到自己的 WordPress 模板文件夹下，在自己的模板函数文件 functions.phQ K Y {p 中，使用下面T 4 7 ! # #的代码引\ $ p /入这个 function-nav.php 文件；
- require_once( TEMPLATEPATH . '/function-nav.php'_ D = ` S H \ 0);
第三步：使用以下的代码来调用菜单。
- <?php
- wp_nav_menul E s ( 340; array(
- '? A X V |theme_location' => 'topmenu',
- 'depth': & F $ ( => 2,
- 'container' => false,
- 'menu_class' => 'nav navbar-nav navlist',
- 'menu_id' => 'topmeau',
- 'fallback_cb' => 'wp_page_menu',
- /7 l ^ F & 6/添加或更改walker参数
- 'walker' => new wp_bootstrap_navwalker(C 5 [ } n k , P1;)
- );
- ?>
如果想修改 class 类，可以在第一步的代码中修改，达到y + u N ]自己需要的 class 结构。
