Visualizzazione dei dati dei siti WordPress tramite i grafici jQuery

In questo tutorial utilizzeremo il plug-in di plottaggio di JQuery Charts, JQplot, per creare un nuovo plug-in di WordPress in grado di visualizzare parte del traffico del tuo blog, categorie popolari e molto altro con alcuni splendidi grafici visivi. Alla ricerca di un modo per esaltare la dashboard di un cliente (o il tuo!) Con alcune utili infografiche? Non guardare oltre? ti mostreremo come è fatto qui.


Passaggio 1 Creazione del tema:

Come libreria di grafici jQuery scegliamo JQplot che è facile da usare e open-source sotto licenze GPL, MIT. Daremo 4 grafici diversi in questo post, ma poi usando la nostra fantasia puoi creare più grafici relativi ai dati del tuo sito WordPress. Chiameremo il nostro plugin Infograph. Puoi scaricare e installare il plug-in pronto dal link di download fornito in questo post. Ora vediamo la struttura del plugin passo dopo passo: Il plugin contiene 6 funzioni (1 per JS script enque, uno per CSS e 4 per i grafici), 4 shortcode per grafici e 2 hook di azione. Spero che tutti sappiate cos'è lo shortcode e l'azione, quindi andiamo avanti.

Per prima cosa aggiungiamo 2 funzioni per aggiungere il supporto per JS e CSS:

 function myscripts () wp_deregister_script ('jquery'); wp_register_script ('jquery', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/jquery-1.3.2.min.js"); wp_enqueue_script ( 'jquery'); wp_register_script ('jqplot', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/jquery.jqplot.js"); wp_enqueue_script ('jqplot'); wp_register_script ('bar', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/plugins/jqplot.barRenderer.js"); wp_enqueue_script ('bar'); wp_register_script ('cax', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/plugins/jqplot.categoryAxisRenderer.js"); wp_enqueue_script ('cax'); wp_register_script ('pol', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/plugins/jqplot.pointLabels.js"); wp_enqueue_script ('pol'); wp_register_script ('fun', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/plugins/jqplot.funnelRenderer.js"); wp_enqueue_script ('fun'); wp_register_script ('pie', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/plugins/jqplot.pieRenderer.js"); wp_enqueue_script ('pie'); wp_register_script ('meg', get_bloginfo ('wpurl'). "/wp-content/plugins/infograph/src/plugins/jqplot.meterGaugeRenderer.js"); wp_enqueue_script ('meg');  function add_css () echo ' '; eco '';  add_action ('wp_enqueue_scripts', 'myscripts'); add_action ('wp_head', 'add_css');

Passaggio 2 Grafico "Categorie popolari":

Questo grafico è una torta che mostra le categorie più popolari del tuo blog. Puoi posizionarlo su qualsiasi pagina o post. Basta inserire shortcode [mycategories] in qualsiasi post:

 categorie di funzioni ($ atts, $ content = ") $ ch_cats = get_categories (array ('orderby' => 'count', 'order' => 'desc')); $ sayy = count ($ ch_cats); $ chl = "; per ($ i = 1; $ i<=5;$i++)  $chl=$chl.'[\".$ch_cats[$i-1]->. Nome '\', '$ ch_cats [$ i-1] -> count.'], '; // [[[\ 'a \', 25], [\ 'b \', 14], [\ 'c \', 7]]] $ chl = '[['. substr ($ chl, 0 , -1) ']]'.; ritorno ' 
'; add_shortcode ('mycategories', 'categories');

Passaggio 3 Grafico "Attività per mese":

Questo grafico può visualizzare l'attività degli ultimi 12 mesi nel tuo blog. Mostra quanti post hai pubblicato gli ultimi 12 mesi per mese.

 function postsbymonth ($ atts, $ content = ") // Numero di post per mese globale $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" seleziona * da (seleziona MONTH (post_date) come mo, YEAR (post_date ) come te, conteggio (ID) come co da $ wpdb-> post dove post_status = "pubblica" gruppo per MONTH (post_date), YEAR (post_date) ordina per post_date desc limite 12) un ordine per ye asc, mo asc ") ; $ labels = "; $ postcounts ="; foreach ($ postcountbymonth as $ pc) $ labels = $ labels. '\ ". $ pc-> mo.' / '. $ pc-> ye.' \ ''; . $ Postcounts = $ postcounts $ PC-> co '.';  $ postcounts = '['. substr ($ postcounts, 0, -1). ']'; $ etichette = '[' substr ($ etichette, 0, -1).. ']'; ritorno '  
'; add_shortcode ('bymonth', 'postsbymonth');

Passaggio 4 "Grafico dei post più commentati":

Il terzo grafico riguarda anche dati interessanti, mostra i tuoi post più commentati.

 funzione mostcommented ($ atts, $ content = ") globale $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" seleziona post_title come pt, comment_count come co da $ wpdb-> post dove post_status = "pubblica" ordine per co desc limite 5 "); $ labels ="; $ titles = "; foreach ($ postcountbymonth as $ pc) $ titles = $ titles. '[\". $ pc-> pt.' ('. $ pc-> pt.') \ ','. $ pc-> co. '],';  $ titles = '['. substr ($ titoli, 0, -1). ']'; ritorno '   
'; add_shortcode ('mypopularposts', 'mostcommented');

Step 5 "Blog Velocity" Grafico:

Il nostro ultimo grafico per questo tutorial mostra la velocità del tuo blog. Mostra il numero medio del numero di post per mese.

 function velocity ($ atts, $ content = ") globale $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" seleziona post_title come pt, comment_count come co da $ wpdb-> post dove post_status = "publish" " ) $ postcountresult = round ($ wpdb-> num_rows / 12); $ maxvel = pow (10, strlen ((stringa) $ postcountresult)); $ ticks = "; $ intervalli = "; for ($ i = 1; $ i<=6;$i++) $ticks=$ticks.($maxvel*($i-1)/5).','; if($i % 2 != 0)  $intervals=$intervals.($maxvel*($i-1)/5).',';   $ticks='['.substr($ticks,0,-1).']'; $intervals='['.substr($intervals,0,-1).']'; return '  
'; add_shortcode ('velocity', 'velocity');

Utilizzando le API di WordPress e i grafici jQuery è possibile prolungare questo elenco di grafici, questi 4 grafici erano solo esempi per gli sviluppatori interessati.

È tutto. In bocca al lupo.