自定义walker用<a>

时间:2015-07-02 12:36:49

标签: css wordpress

I m a bit new to WP

i want to use semantic UI Menu in wp_menu() of WordPress... how to achieve that.. Please guide.

this much i have achieved but how to change the li into or to remove the LI and than give class to so semantic ui menu can takes its shape

this is my output i want to remove the < DIV id='menu-tem-8' > and than give class = "item" to corresponding

    <div class="ui secondary  menu">
       <div id='menu-item-8'  class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="http://localhost/wordpress/lbs/">Home</a>
       </div>
   </li> 

   <div id='menu-item-11'  class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children">
        <a href="http://localhost/wordpress/lbs/company/">Company</a>
   </div>
   </li> 

   <div id='menu-item-27'  class="menu-item menu-item-type-post_type menu-item-object-page">
        <a  href="http://localhost/wordpress/lbs/services/">Services</a>
   </div>
   </li>

    <div id='menu-item-26'  class="menu-item menu-item-type-post_type menu-item-object-page">
            <a  href="http://localhost/wordpress/lbs/portfolio/">Portfolio</a>
    </div>
    </li> 

    <div id='menu-item-46'  class="menu-item menu-item-type-post_type menu-item-object-page">
            <a  href="http://localhost/wordpress/lbs/shop/">Shop</a>
    </div>
    </li> 

    </div>
    </div>

============================================================ Leo and James King: Thanx for your reply....

This is in function.php

// navigation walker

class Description_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    {
        $classes = empty($item->classes) ? array () : (array) $item->classes;
        $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        !empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"';
        $output .= "<div id='menu-item-$item->ID' $class_names>";
        $attributes  = '';
        !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = $args->before
        . "<a $attributes>"
        . $args->link_before
        . $title
        . '</a></div>'
        . $args->link_after
        . $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

this is in Header.php

                        wp_nav_menu(
                            array (
                                'menu' => 'top-menu',
                                'container' => 'div', // parent container 
                                'container_class' => 'ui secondary  menu', //parent container ID
                                'depth' => 1,
                                'menu_class' =>item,
                                'items_wrap' => '%3$s', // removes ul
                                'walker' => new Description_Walker // custom walker to replace li with div
                            )
                        );

            ?>

1 个答案:

答案 0 :(得分:2)

Leo和James King:感谢你的回答......

实际上我想要实现的是这个

<div class="someclass"> // in place of <ul>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
.
.
.
</div>

这是水平菜单的语义UI使用的模式

我已经取得了这么多成就

<div class="ui secondary  menu">
<a href="http://localhost/wordpress/lbs/services/">Services</a>
<a href="http://localhost/wordpress/lbs/portfolio/">Portfolio</a>
<a href="http://localhost/wordpress/lbs/shop/">Shop</a>
</div>

使用代码

      <div class="ui secondary  menu">
      <?php
      $menuParameters = array(
                'menu' => 'top-menu',
                'container'       => false,
                'echo'            => false,
                'items_wrap'      => '%3$s',
                'depth'           => 0,
              );

              echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
      ?>
      </div>

但我想添加

  

类= “项目”

  

<a href="http://localhost/wordpress/lbs/services/">Services</a>

请指导..

thankx