web-dev-qa-db-ja.com

WordPressでwp_get_nav_menu_itemsを使用してカスタムメニュー/サブメニューシステムを生成するにはどうすればよいですか？

_wp_nav_menu_コードのカスタマイズを必要とするhtml構造があります。

これは私が生成する必要があるhtmlです：

_<ul class="main-nav">
    <li class="item">
        <a href="http://example.com/?p=123" class="title">Title</a>
        <a href="http://example.com/?p=123" class="desc">Description</a>
        <ul class="sub-menu">
            <li class="item">
                <a href="http://example.com/?p=123" class="title">Title</a>
                <a href="http://example.com/?p=123" class="desc">Description</a>
            </li>
        </ul>
    </li>
     <li class="item">
        <a href="http://example.com/?p=123" class="title">Title</a>
        <a href="http://example.com/?p=123" class="desc">Description</a>
    </li>
</ul>
_

現在、メニューからすべてのアイテムを配列として取得するために_wp_get_nav_menu_items_を使用しています。

現在、次のコードを使用して、上記のhtml サブメニューなしを生成できます。

_<?php

$menu_name = 'main-nav';
$locations = get_nav_menu_locations()
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );

foreach ( $menuitems as $item ):

    $id = get_post_meta( $item->ID, '_menu_item_object_id', true );
    $page = get_page( $id );
    $link = get_page_link( $id ); ?>

    <li class="item">
        <a href="<?php echo $link; ?>" class="title">
            <?php echo $page->post_title; ?>
        </a>
        <a href="<?php echo $link; ?>" class="desc">
            <?php echo $page->post_excerpt; ?>
        </a>
    </li>

<?php endforeach; ?>
_

_wp_nav_menu_関数を使用してメニューを生成しますが、_$page->post_excerpt_を使用して表示される説明が必要です。

親メニューアイテムのIDを提供する_$item->menu_item_parent_という各アイテムのプロパティがあることがわかりました。

foreachループでサブメニューを生成するにはどうすればよいですか？または、Googleが言及し忘れていた_wp_nav_menu_を使用した本当に簡単な方法はありますか？

phpwordpressmenuwordpress-themingsubmenu
41
hitautodestruct

同様の何かに取り組む人のために、ここに私の解決策があります：

要点の簡単なコード例

ここにコードがあります github Gistで、コピーペーストアクションに参加したい人のために。

TL; DR

TL; DRリストをループし、サブメニューがある場合はドリルダウンし、サブメニューとメニューの最後に達したら閉じます。

完全なコードの説明

まず、メニュー項目をフラット配列として取得します。

<?php
$menu_name = 'main_nav';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
?>

次に、メニュー項目の配列を反復処理します。

<nav>
<ul class="main-nav">
    <?php
    $count = 0;
    $submenu = false;

    foreach( $menuitems as $item ):
        // set up title and url
        $title = $item->title;
        $link = $item->url;

        // item does not have a parent so menu_item_parent equals 0 (false)
        if ( !$item->menu_item_parent ):

        // save this id for later comparison with sub-menu items
        $parent_id = $item->ID;
    ?>

最初の親アイテムを書きます<li>：

    <li class="item">
        <a href="<?php echo $link; ?>" class="title">
            <?php echo $title; ?>
        </a>
    <?php endif; ?>

このアイテムの親IDが保存されている親IDと一致することを確認します。

        <?php if ( $parent_id == $item->menu_item_parent ): ?>

サブメニューを開始<ul>と設定$submenuフラグは、後で参照するためにtrueに設定します。

            <?php if ( !$submenu ): $submenu = true; ?>
            <ul class="sub-menu">
            <?php endif; ?>

サブメニュー項目を記述します。

                <li class="item">
                    <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
                </li>

次のアイテムに同じ親IDがなく、サブメニューが宣言されている場合、サブメニューを閉じます<ul>

            <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
            </ul>
            <?php $submenu = false; endif; ?>

        <?php endif; ?>

繰り返しますが、配列内の次の項目に同じ親IDがない場合は、<li>

    <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
    </li>                           
    <?php $submenu = false; endif; ?>

<?php $count++; endforeach; ?>

  </ul>
</nav>
66
hitautodestruct

最善の方法は、独自のWalkerクラスを作成して、ニーズに合わせて出力を調整することです。このようなもの：

class Excerpt_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 = ' class="' . 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 .'>';

        $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 . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

        /*GET THE EXCERPT*/
        $q = new WP_Query(array('post__in'=>$item->object_id));
        if($q->have_posts()) : while($q->have_posts()) : $q->the_post();
            $item_output .= '<span class="menu-excerpt">'.get_the_excerpt().'</span>';
        endwhile;endif;
        /*****************/

        $item_output .= '</a>';
        $item_output .= $args->after;

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

そして、次のように呼び出します：

<?php
wp_nav_menu(array('walker' => new Excerpt_Walker()));
?>

この例のGET THE EXCERPTマーカーの前後はすべて、wp-includes/nav-menu-template.phpのstart_el関数の直接コピーでした。私の例では、WP_Queryを使用して、投稿/ページに抜粋があるかどうかを判断し、リンクタイトルの後のspanタグの間に抜粋を配置します。

アイデアは、ホバー時にのみspanタグを表示することです。これはCSSを使用して実行できます。

ウォーカーの詳細はこちら：

WP Nav Menu Codex

Walkerクラスの使用

Walkerクラスを使用した別の適切な例

9
maiorano84
      //Just set your variable and apply.. for sub menu
     <ul>
     <?php

     $activeclass = '';
    $activeclass1='';
     $count=0;
    $submenu = FALSE;
    foreach ( $primaryNav as $navItem ) {
            $activeclass = '';  
         if($navItem->object_id == $getid){
            $activeclass = 'class="live-act"';
         }
         if (!$navItem->menu_item_parent ){
            $parent_id = $navItem->ID;
        echo '<li><a href="'.$navItem->url.'" '.$activeclass.'   title="'.$navItem->title.'">'.$navItem->title.'</a>';
         }
         ?>
        <?php if ( $parent_id == $navItem->menu_item_parent ) { ?>
      <?php if ( !$submenu ): $submenu = true; ?>
        <ul>
        <?php endif; ?>
             <li>
                <a href="<?php echo $navItem->url; ?>" class="title"><?php echo $navItem->title; ?></a>
            </li>
       <?php if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ){ ?>
        </ul>
        <?php $submenu = false; 
       }
        ?>
        <?php }
         if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id ){ ?>
        </li>                            
            <?php $submenu = false; } ?>

        <?php $count++;   ?>


        <?php } ?>
         </ul>
0
GAJENDRA patel