Wie zeige ich Diagrammstatistiken der monatlichen Anzahl von Posts in WordPress an?

Die URL: https://helloacm.com/archives-of-pagesposts/ zeigt die Liste der historischen Posts und ich habe eine folgende schöne Abbildung hinzugefügt, die die Anzahl der Posts für jeden Monat darstellt.

chart-posts-pro-monate-wordpress-php-js

Sie können eine grobe Aktivität in den letzten 12 Monaten sehen. Ja, wir werden irgendwann im Jahr faul. Dieser Beitrag zeigt, wie man eine solche Seite erstellt, um die Beiträge zu erhalten, und der folgende Code kann auf derselben Seite hinzugefügt werden, um das Diagramm zu zeichnen.

Wir müssen eine Diagramm- Javascript – Bibliothek eines Drittanbieters einbinden, die unter https://helloacm.com/js/chart.js zu finden ist

  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
  }

Speichern Sie die Vorlagendatei und leeren Sie den Cache, der Plot wird dann lebendig gemacht.

TODO: (1) Parameter standardmäßig auf 12 Monate gesetzt, ändern Sie das entsprechend in der SQL -Anweisung (2) Array- Reverse-Funktion in PHP Kehrt die Ausgabedaten um, sodass die Achse der Zeit entspricht (von links nach rechts). (3) Ändern Sie den WordPress -Tabellennamen, wenn er nicht mit dem Präfix wp beginnt.