Wordpress 메뉴에 사용자 정의 마크업 추가

Wordpress 메뉴에 사용자 정의 마크업 추가

나는 이 문제에 대한 해결책을 찾기 위해 오랫동안 찾고 있지만, 아무것도 찾지 못했기 때문에 너희들이 나의 마지막 희망이 될 거야!

현재 작업 중인 Wordpress 3 사이트에 새로운 CSS3 메뉴를 구축하려고 합니다.디폴트 메뉴 마크업을 연장해야 하는데 어떻게 하는지 모르겠어요.

현재 메뉴를 출력하기 위해 테마에서 사용하고 있는 태그는 다음과 같습니다.

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

현재 기본 메뉴 표시는 다음과 같습니다.

<div class="menu-header">
 <ul id="menu-main-menu" class="menu">
  <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a>
   <ul class="sub-menu">
    <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li>
   </ul>
  </li>
  <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a>
   <ul class="sub-menu">
    <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li>
    <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li>
    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li>
   </ul>
  </li>
  <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li>
 </ul>
</div>

각각 주위에 2개의 div를 더해야 한다.<ul class="sub-menu">...</ul>따라서 다음과 같이 표시해야 합니다.

<div class="menu-header">
 <ul id="menu-main-menu" class="menu">
  <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a>
   <div class="sub-menu-container">
    <div class="submenu">
     <ul class="sub-menu">
      <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li>
     </ul>
    </div>
   </div>
  </li>
  <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a>
   <div class="sub-menu-container">
    <div class="submenu">
     <ul class="sub-menu">
      <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li>
      <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li>
      <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li>
     </ul>
    </div>
   </div>
  </li>
  <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li>
 </ul>
</div>

이거 할 줄 아는 사람 있어요?

Wordpress 설명서 http://codex.wordpress.org/Function_Reference/wp_nav_menu#Example,에 따르면 메뉴에 Walker를 추가하면 됩니다.

<?php wp_nav_menu( array(
    'container_class'=>'menu-header',
    'theme_location'=>'primary',
    'walker'=>new my_Walker_Menu_List() //This is the trick!
)); ?>

그리고 테마의 기능에도 있습니다.php 파일은 다음 코드를 추가합니다.

class my_Walker_MegaMenu extends Walker_Nav_Menu{
    /**
     * @see Walker::start_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        //$output .= "\n$indent<ul class=\"sub-menu\">\n"; //this is default output;

        //if( $depth==0 ) //'0'==>1st-sub-level; '1'=2nd-sub-level; ....
        $output .= "\n$indent<div class=\"sub-menu-container\"><div class=\"submenu\"><ul class=\"sub-menu\">\n";
    }

    /**
     * @see Walker::end_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        //$output .= "$indent</ul>\n"; //this is default output;

        //if( $depth==0 ) //'0'==>1st-sub-level; '1'=2nd-sub-level; ....
        $output .= "$indent</ul></div></div>\n";
    }
}

조건부로 $depth 값을 체크하여 원하는 서브레벨에 대해서만 커스텀 마크업을 출력할 수 있습니다.

상세한 것에 대하여는, 다음의 URL 를 참조해 주세요.http://shinraholdings.com/62/custom-nav-menu-walker-function/ # scode 로 참조해 주세요.

메뉴 마크업은 wp-includes/classes로 생성됩니다.php withWalker클래스, 구체적으로는class Walker_Page extends Walker {

클래스의 함수를 살펴보면 실제 마크업이 생성되는 위치를 알 수 있습니다.

http://codex.wordpress.org/Function_Reference/Walker_Class

다음과 같은 이점이 있습니다.

wp_nav_menu()를 커스텀 워커 클래스와 결합합니다.

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

wp_get_nav_menu_items()와 clean_custom_menus() 함수를 결합합니다.

http://digwp.com/2011/11/html-formatting-custom-menus/

jQuery .wrap 함수를 사용하면 됩니다.

$('div.submenu').wrap('<div class="sub-menu-container" />');

헤더에 적절한 jQuery .js를 추가하는 것을 잊지 마십시오.

.ready() 함수도 사용해야 합니다.

무엇이 필요한지 정확히 알 수 없지만, 여기 커스텀 WP 메뉴 작성에 대한 몇 가지 참고 자료가 있습니다.

데이터베이스에서 wp_posts 테이블을 확인합니다.탐색 메뉴 항목이 있는 위치입니다.

커스텀 CSS 에서는, CSS Editor 를 사용할 수 있습니다.대시보드의 [Presentation]탭의 [Edit CSS]에 있습니다.입력하기 위한 빈 영역과 두 개의 버튼으로 구성됩니다.실시간 변경과 즉시 결과를 볼 수 있습니다.

테마의 기본 메뉴 대신 사용자 정의 탐색 메뉴를 사용하려면 이 기능에 대한 지원이 테마 기능에 등록되어 있어야 합니다.php 파일.

참조: http://codex.wordpress.org/Navigation_Menus 및 http://codex.wordpress.org/Function_Reference/register_nav_menus

언급URL : https://stackoverflow.com/questions/3803360/add-custom-markup-to-wordpress-menu