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>的{{1}}中。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

所以你的代码可能会是这样的：

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

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

1 个答案: