WordPress 1の特定のメニュー項目に要素を追加する

Question

私はワードプレスメニューを持っており、このメニューにはページがあります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> 

私は現在これを行っていますが、明らかにメニューの最後に配置します。メニュー項目のliの<span></span>にカウンターを配置したいと思います。

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> 

あなただけのメニュー要素のクラスを見つける必要があり、それはだからあなたはユニークなもの（または多分もID）を見つけることができるはずですワードプレスサイト。