WordPress Element zu 1 spezifischen Menüpunkt hinzufügen

Question

Ich habe ein Wordpress-Menü und in diesem Menü gibt es eine Seite Products Ich möchte einen kleinen Zähler zu diesem Menüpunkt hinzuzufügen. Aber ich weiß nicht, wie ich diesen bestimmten Gegenstand bearbeiten soll.

Ich zähle die Produkte, die ich habe, aber ich bin mir nicht sicher, wo ich es echo.

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

Ich mache dies derzeit, aber offensichtlich platziert es es am Ende des Menüs. Ich möchte den Zähler in eine <span></span> in der li des Menüpunktes platzieren.

Answer 1

Ich empfehle Ihnen, Pseudo-Element zu verwenden, und Sie müssen nur die CSS des Menüelements ändern. Sie können so etwas wie dieses:

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

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

So wird Ihr Code wahrscheinlich so aussehen:

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

Sie müssen nur die Klasse Ihres Menüelement zu finden und da es eine Wordpress-Site sollte man in der Lage sein, eine einzigartige (oder vielleicht auch eine ID) zu finden.