WordPress 将元素添加到 1 个特定菜单项

Question

I have a wordpress menu and in this menu there is a page Products I want to add a small counter to this menu item. But I don't know how to edit that specific item.

I count the products that I have but I am not sure where to echo it.

<?php
$countProducts = wp_count_posts('product');
?>

<section role="banner" style="min-height: 150px;">
    <header id="header" class="not-homepage-header">
        <div class="header-content clearfix"> <a class="logo" href="#"><img src="<?= get_template_directory_uri(); ?>/dist/images/logo.png" alt=""></a>
            <nav class="navigation" role="navigation">
                <?php
                if (has_nav_menu('primary_navigation')) :
                    wp_nav_menu(
                        array(
                            'theme_location'    => 'primary_navigation',
                            'depth'             => 2,
                            'container'         => 'ul',
                            'container_class'   => 'collapse navbar-collapse',
                            'container_id'      => 'bs-example-navbar-collapse-1',
                            'menu_class'        => 'primary-nav mr-auto',
                            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                            'walker'            => new WP_Bootstrap_Navwalker()
                        )
                    );
                endif;
                ?>
                <li>
                    <?php echo $countProducts->publish; ?>
                </li>
            </nav>
            <a href="#" class="nav-toggle">Menu<span></span></a> </div>
    </header>
</section>

I currently do this but obviously it places it at the end of the menu. I would like to place the counter in a <span></span> in the li of the menu item.

Answer 1

I suggest you to use pseudo element and you have to only modify the CSS of the menu element. You may have something like this :

 .menu-item:after { content:" 3" /* then add the style needed*/ }

 <ul> <li>Home</li> <li class="menu-item">product</li> </ul>

So your code will probably look like this :

<?php
$countProducts = wp_count_posts('product');
?>

<style>
.class_of_menu_item:after {
  content:"<?php echo $countProducts; ?>";
}
</style>
<section role="banner" style="min-height: 150px;">
    <header id="header" class="not-homepage-header">
        <div class="header-content clearfix"> <a class="logo" href="#"><img src="<?= get_template_directory_uri(); ?>/dist/images/logo.png" alt=""></a>
            <nav class="navigation" role="navigation">
                <?php
                if (has_nav_menu('primary_navigation')) :
                    wp_nav_menu(
                        array(
                            'theme_location'    => 'primary_navigation',
                            'depth'             => 2,
                            'container'         => 'ul',
                            'container_class'   => 'collapse navbar-collapse',
                            'container_id'      => 'bs-example-navbar-collapse-1',
                            'menu_class'        => 'primary-nav mr-auto',
                            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                            'walker'            => new WP_Bootstrap_Navwalker()
                        )
                    );
                endif;
                ?>
                <li>
                    <?php echo $countProducts->publish; ?>
                </li>
            </nav>
            <a href="#" class="nav-toggle">Menu<span></span></a> </div>
    </header>
</section>

You only need to find the class of your menu element and since it's a wordpress site you should be able to find a unique one (or maybe an id too).