¿Cómo mostrar estadísticas de gráficos del número mensual de publicaciones en WordPress?

La URL: https://helloacm.com/archives-of-pagesposts/ muestra la lista de publicaciones históricas y he agregado una figura agradable a continuación que representa la cantidad de publicaciones para cada mes.

gráficos-publicaciones-por-mes-wordpress-php-js

Puede ver una actividad aproximada durante los últimos 12 meses. Sí, nos volvemos perezosos en algún momento del año. Esta publicación muestra cómo crear una página de este tipo para obtener las publicaciones, y el siguiente código se puede agregar en la misma página para trazar el gráfico.

Necesitamos incluir una biblioteca de Javascript de gráficos de terceros que se puede encontrar en: 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
  }

Guarde el archivo de plantilla y borre el caché, la trama se hará viva.

TODO: (1) parámetro establecido en 12 meses de forma predeterminada, cámbielo en consecuencia en la instrucción SQL (2) la función inversa de matriz en php invierte los datos de salida para que el eje corresponda al tiempo (de izquierda a derecha). (3) cambie el nombre de la tabla de WordPress si no comienza con el prefijo wp.