Kuidas kuvada WordPressis igakuise postituste arvu diagrammi statistikat?

Viimati uuendatud veebr. 2, 2023

URL: https://helloacm.com/archives-of-pagesposts/ näitab ajalooliste postituste loendit ja olen lisanud järgmise kena joonise, mis näitab iga kuu postituste arvu.

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

Viimase 12 kuu jooksul on näha jämedat tegevust. Jah, me oleme mõnikord aastaringselt laisad. See postitus näitab, kuidas luua selline leht postituste saamiseks ning graafiku joonistamiseks saab samale lehele lisada järgmise koodi.

Peame kaasama kolmanda osapoole diagrammi javascripti teegi, mille leiate aadressilt: 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
  }

Salvestage mallifail ja tühjendage vahemälu, seejärel muudetakse süžee elavaks.

TODO: (1) parameetri väärtuseks on määratud vaikimisi 12 kuud, muutke vastavalt SQL – lauses (2) massiivi pöördfunktsioon php-s väljundandmed vastupidiseks nii, et telg vastab ajale (vasakult paremale). (3) muutke WordPressi tabeli nime, kui see ei alga wp- eesliitega.

: helloacm.com