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

Question

我有一个 wordpress 菜单，在这个菜单中有一个页面 Products我想为这个菜单项添加一个小计数器。但我不知道如何编辑该特定元素。

我数了数我拥有的产品，但我不确定在哪里回应。

<?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>

我目前这样做，但显然它将它放在菜单的末尾。我想将计数器放在 <span></span> 中在li菜单项。

Answer 1

我建议你使用伪元素，你只需要修改菜单元素的CSS。你可能有这样的事情:

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

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

所以你的代码可能看起来像这样:

<?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>

你只需要找到你的菜单元素的类，因为它是一个 wordpress 网站，你应该能够找到一个唯一的(或者也可能是一个 id)。