Comment afficher les statistiques du graphique du nombre mensuel de messages dans WordPress ?

L’URL : https://helloacm.com/archives-of-pagesposts/ affiche la liste des publications historiques et j’ai ajouté un joli chiffre suivant qui trace le nombre de publications pour chaque mois.

graphique-messages-par-mois-wordpress-php-js

Vous pouvez voir une activité difficile au cours des 12 derniers mois. Oui, nous devenons paresseux tout au long de l’année. Ce message montre comment créer une telle page pour obtenir les messages, et le code suivant peut être ajouté dans la même page pour tracer le graphique.

Nous devons inclure une bibliothèque javascript Chart tierce qui peut être trouvée à: https://helloacm.com/js/chart.js

  echo '<script language="Javascript" src="<a class="vglnk" target="_blank" href="https://helloacm.com/js/chart.js" rel="nofollow"><span>https</span><span>://</span><span>helloacm</span><span>.</span><span>com</span><span>/</span><span>js</span><span>/</span><span>chart</span><span>.</span><span>js</span></a>"></script>'."n";
  global $wpdb; // <a class="vglnk" target="_blank" href="http://helloacm.com" rel="nofollow"><span>helloacm</span><span>.</span><span>com</span></a>
  
  // count the posts number group by each month
  $query = "
      select 
        concat(year(`post_date`), '-', month(`post_date`)) as `month`, 
        count(1) as `cnt` 
      from 
        `wp_posts` 
      where 
        (post_type='page' or post_type='post') and 
        `post_status` = 'publish' 
      group by 
        `month` 
      order by 
        `post_date` desc
      limit
         12
";  // change this to include more months. the default is 12 months in the past.
      
  $result = array_reverse($wpdb->get_results($query));// reverse the data to get a normal logic flow
  if ($result) {
?>
 
<div id='ReportBarChartContainerMonthly'>
    <div id='ReportBarChartComponentMonthly' style='margin: 15px;'>
        <canvas id="myChartMonthly" style='max-width:100%;height:auto'></canvas>
    </div>
</div>
    
<script language="Javascript">
    var data = {
        labels: [
        
            <?php
    foreach ($result as $month) {
      echo '"'.$month->month.'", ';  
    }        
            ?>
        ],
        datasets: [
            {
                label: "Number of Posts",
                fillColor: "rgba(200,200,250,0.7)",
                strokeColor: "rgba(150,150,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [
            <?php
    foreach ($result as $month) {
      echo '"'.$month->cnt.'", ';  
    }        
            ?>
                ]
            }
        ]
    };
 
    var ctx = document.getElementById("myChartMonthly").getContext("2d");
    var myNewChart = new Chart(ctx).Line(data, {
        bezierCurve: true
    });
</script>
<?php
  }

Enregistrez le fichier modèle et videz le cache, le tracé sera alors rendu vivant.

TODO : (1) paramètre défini sur 12 mois par défaut, modifiez-le en conséquence dans l’ instruction SQL (2) la fonction array reverse dans php inverse les données de sortie afin que l’axe correspondant au temps (de gauche à droite). (3) modifiez le nom de la table WordPress s’il ne commence pas par le préfixe wp.