Jak wyświetlić statystyki wykresu dotyczące miesięcznej liczby postów w WordPress?

Adres URL: https://helloacm.com/archives-of-pagesposts/ pokazuje listę historycznych postów i dodałem następującą ładną liczbę, która przedstawia liczbę postów na każdy miesiąc.

wykres-posty-na-miesiące-wordpress-php-js

Możesz zobaczyć surową aktywność przez ostatnie 12 miesięcy. Tak, przez cały rok robimy się leniwi. Ten post pokazuje, jak utworzyć taką stronę, aby uzyskać posty, a następujący kod można dodać na tej samej stronie, aby wykreślić wykres.

Musimy dołączyć bibliotekę javascript Chart, którą można znaleźć pod adresem: 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
  }

Zapisz plik szablonu i wyczyść pamięć podręczną, a fabuła zostanie ożywiona.

TODO: (1) parametr ustawiony domyślnie na 12 miesięcy, zmień go odpowiednio w instrukcji SQL (2) funkcja odwracania tablicy w php odwraca dane wyjściowe tak, aby oś odpowiadająca czasowi (od lewej do prawej). (3) zmień nazwę tabeli WordPress, jeśli nie zaczyna się od prefiksu wp.