Как показать диаграмму статистики ежемесячного количества сообщений в WordPress?

URL-адрес: https://helloacm.com/archives-of-pagesposts/ показывает список исторических сообщений, и я добавил следующую симпатичную цифру, которая отображает количество сообщений за каждый месяц.

диаграмма-сообщений-в-месяцы-wordpress-php-js

Вы можете увидеть грубую активность за последние 12 месяцев. Да, мы иногда ленимся в течение года. В этом сообщении показано, как создать такую ​​страницу для получения сообщений, и следующий код можно добавить на ту же страницу для построения графика.

Нам нужно включить стороннюю библиотеку javascript Chart, которую можно найти по адресу: 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
  }

Сохраните файл шаблона и очистите кеш, тогда сюжет оживет.

TODO: (1) параметр установлен на 12 месяцев по умолчанию, измените его соответствующим образом в операторе SQL (2) функция реверсирования массива в php реверсирует выходные данные так, чтобы ось соответствовала времени (слева направо). (3) измените имя таблицы WordPress, если оно не начинается с префикса wp.