Hur visar man diagramstatistik över månatligt antal inlägg i WordPress?

Webbadressen: https://helloacm.com/archives-of-pagesposts/ visar listan över historiska inlägg och jag har lagt till en följande fin figur som plottar antalet inlägg för varje månad.

chart-posts-per-months-wordpress-php-js

Du kan se en grov aktivitet under de senaste 12 månaderna. Ja, vi blir lata någon gång under året. Det här inlägget visar hur man skapar en sådan sida för att få inläggen, och följande kod kan läggas till på samma sida för att plotta grafen.

Vi måste inkludera ett JavaScript- bibliotek från tredje part som kan hittas på: 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
  }

Spara mallfilen och rensa cachen, handlingen kommer sedan att göras levande.

TODO: (1) parameter inställd på 12 månader som standard, ändra det i enlighet med SQL- satsen (2) array reverse funktion i php vända utdata så att axeln som motsvarar tiden (från vänster till höger). (3) ändra WordPress- tabellnamnet om det inte börjar med wp- prefix.