Як показати статистику діаграми місячної кількості дописів у WordPress?

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

chart-posts-per-months-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.