1. ホーム
  2. php

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

2022-02-05 05:04:21

質問

のカスタマイズが必要なhtml構造を持っています。 wp_nav_menu のコードになります。

これは私が生成する必要がある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 .

という各項目のプロパティがあることがわかりました。 $item->menu_item_parent これは、親メニュー項目のIDを与えるものです。

のサブメニューはどのように生成するのでしょうか? foreach ループを使用することはできますか? それとも wp_nav_menu Googleが言及し忘れたのでしょうか?

解決方法は?

同じようなことに取り組んでいる人のために、私の解決策を紹介します。

gistにある簡単なコード例

以下はそのコードです。 を 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>