2013-07-16 201 views
0
     <ul> 
         <li><hr class="menu-dotted-line"/></li> 
         <li class="menu-button-bg"> 
          <div class="menu-button">HOME</div> 
          <div class="menu-button-desc">back to hompage</div> 
          <div></div> 
         </li> 
         <li><hr class="menu-dotted-line"/></li> 
         <li class="menu-button-bg hide-sub-menu"> 
          <div class="menu-button">PORTFOLIO</div> 
          <div class="menu-button-desc">view our work</div> 
          <div></div> 
         </li> 
         <li><hr class="menu-dotted-line"/></li> 
        </ul> 

有沒有什麼辦法可以用這種結構實現這個代碼到wordpress中?自定義菜單wordpress

的header.php

<?php wp_nav_menu(array('theme_location' => 'primary')); ?> 

的functions.php

<?php 

    register_nav_menu('primary', __('Primary Menu')); 

?> 
+0

我不是真的WordPress用戶,但有一個堆棧http://wordpress.stackexchange.com/,真的很有幫助。只是以爲我會指出。雖然我確定有人可以在這裏回答它 – Jonnny

+0

這可能有所幫助:http://stackoverflow.com/questions/12250866/how-to-add-custom-html-to-wp-nav-menu – phil

回答

0

問題是固定的。這裏是解決方案:

的functions.php

register_nav_menu('primary', __('Primary Menu')); 

class Menu_With_Description 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; 

     $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item)); 
     $class_names = ' class="' . esc_attr($class_names) . ' menu-button-bg"'; 

     $output .= $indent . '<li><hr class="menu-dotted-line"/></li><li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; 

     $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 .= '<div class="menu-button">' . $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after . '</div>'; 
     $item_output .= '<div class="menu-button-desc">' . $item->description . '</div>'; 
     $item_output .= '</a>'; 
     $item_output .= $args->after; 

     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
    } 
} 

jQuery的

$(document).ready(function() { 
$("#logo-buttons-bg ul li:last").after("<li><hr class='menu-dotted-line'/></li>"); 
} 

的header.php

<?php $walker = new Menu_With_Description; ?> 
<?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker, 'container' => false)); ?>