Créer un compteur d’articles par catégories

Créer un compteur d’articles par catégories dans wordpress

Voici ce à quoi nous voulons parvenir :

A l »intérieur d’une section de page, nous voulons créer un compteur qui affiche le nombre d’articles par catégories. Celui-ci doit démarrer lorsque la section rentre au scroll dans le view port. Voici le code php à placer dans la page où l’on veut afficher le compteur.

<section id="section_scores" class="section_half">
					<div class="container flex justify-content-center align-items-center">
						<?php $categories =  get_categories();
						foreach($categories as $category){ ?>
						<div class="scores center col-span-2">
							<div class="scores_number">
								<span class="count"><?php echo $category->count  ;?></span>
							</div>
							<div class="divider"></div>
							<div class="scores_item"><?php echo $category->name ;?></div>
						</div>
						
						<?php } ?>
					</div>
			</section>

Et voici le js,commenté

/*--------------------------------------------------------------
## SECTION SCORES
--------------------------------------------------------------*/
jQuery(document).ready(function($){
    /*Première fonction pour faire démarrer le compteur au scroll*/
    var counterTeaserL = $('#section_scores');
    var winHeight = $(window).height();
    if (counterTeaserL.length) {
        var firEvent = false,
        objectPosTop = $('#section_scores').offset().top;

        //when element shows at bottom
        var elementViewInBottom = objectPosTop - winHeight;
        $(window).on('scroll', function() {
            var currentPosition = $(document).scrollTop();
        //when element position starting in viewport
            if (currentPosition > elementViewInBottom && firEvent === false) {
            firEvent = true;
            animationCounter();
            }   
        });
    }
    function animationCounter(){
        /*la fonction d'animation dy compteur*/
        $('.count').each(function () {
        var $this = $(this);
        jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
            duration: 2000,
            easing: 'swing',
            step: function () {
              $this.text(Math.ceil(this.Counter));
                }
            });
        });
    }

});

Il restera alors à styliser le tout à votre convenance !

Mis à jour le Par Copier coller | Dans jQuery