Kuinka näyttää kaaviotilastot kuukausittaisesta viestien määrästä WordPressissä?

Viimeisin päivitys helmi 2, 2023

URL-osoite: https://helloacm.com/archives-of-pagesposts/ näyttää luettelon historiallisista viesteistä, ja olen lisännyt seuraavan mukavan kuvan, joka näyttää kunkin kuukauden viestien määrän.

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

Näet karkean toiminnan viimeisen 12 kuukauden aikana. Kyllä, olemme laiskoja joskus ympäri vuoden. Tämä viesti näyttää, kuinka luodaan tällainen sivu viestien saamiseksi, ja seuraava koodi voidaan lisätä samalle sivulle kaavion piirtämistä varten.

Meidän on sisällytettävä kolmannen osapuolen Chart javascript -kirjasto, joka löytyy osoitteesta: 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
  }

Tallenna mallitiedosto ja tyhjennä välimuisti, niin juoni elävöityy.

TODO: (1) parametri on oletuksena 12 kuukautta, muuta sitä vastaavasti SQL – lauseessa (2) array käänteinen funktio php:ssä kääntää lähtötiedot siten, että akseli vastaa aikaa (vasemmalta oikealle). (3) muuta WordPress – taulukon nimi, jos se ei ala wp – etuliitteellä.

: helloacm.com