Affichage des données de site WordPress via les graphiques jQuery

Dans ce didacticiel, nous allons utiliser le plugin jQuery Charts Plotting, JQplot, pour créer un nouveau plugin WordPress pouvant afficher une partie du trafic de votre blog, des catégories populaires, et plus encore, avec de magnifiques graphiques visuels. Vous cherchez un moyen d'extraire le tableau de bord d'un client (ou le vôtre!) Avec quelques infographies utiles? Cherchez pas plus loin? nous allons vous montrer comment ça se passe ici.


Étape 1 Créer un thème:

En tant que bibliothèque de graphiques jQuery, nous avons choisi JQplot, qui est facile à utiliser et à code source ouvert sous licences GPL, MIT. Nous donnerons 4 graphiques différents dans ce post, mais en utilisant notre fantaisie, vous pourrez créer plus de graphiques liés aux données de votre site WordPress. Nous appellerons notre plugin Infograph. Vous pouvez télécharger et installer le plug-in ready à partir du lien de téléchargement indiqué dans cet article. Examinons maintenant la structure du plug-in pas à pas: le plug-in contient 6 fonctions (1 pour le script JS, 1 pour le CSS et 4 pour les graphiques), 4 codes courts pour les graphiques et 2 crochets d'action. J'espère que vous savez tous ce qu'est le shortcode et l'action, alors continuons.

Premièrement, nous ajoutons 2 fonctions pour l’ajout du support JS et 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');  fonction add_css () echo ' '; écho '';  add_action ('wp_enqueue_scripts', 'myscripts'); add_action ('wp_head', 'add_css');

Etape 2 Tableau "Catégories populaires":

Ce graphique est une tarte qui montre les catégories les plus populaires de votre blog. Vous pouvez le placer sur n'importe quelle page ou publication. Il suffit de mettre le shortcode [mycategories] à n’importe quel message:

 catégories de fonctions ($ atts, $ content = ") $ ch_cats = get_categories (array ('orderby' => 'count', 'order' => 'desc')); $ sayy = count ($ ch_cats); $ chl = "; pour ($ i = 1; $ i<=5;$i++)  $chl=$chl.'[\".$ch_cats[$i-1]->nom. '\', '. $ ch_cats [$ i-1] -> count.'], '; // [[[\ 'a \', 25], [\ 'b \', 14], [\ 'c \', 7]]] $ chl = '[['. substr ($ chl, 0 ,-1).']]'; revenir ' 
'; add_shortcode ('mycategories', 'categories');

Etape 3 Tableau "Activité par mois":

Ce graphique peut afficher l'activité des 12 derniers mois sur votre blog. Il montre combien de messages vous avez posté 12 derniers mois par mois.

 function postsbymonth ($ atts, $ content = ") // Nombre de messages par mois global $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" select * à partir de (sélectionnez MONTH (post_date) sous la forme mo, YEAR (post_date ) en tant que vous, comptez (ID) en tant que co à partir de $ wpdb-> posts où post_status = "publish" groupe par MOIS (post_date), YEAR (post_date) order by post_date desc limit 12) une commande de 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). ']'; $ labels = '['. substr ($ labels, 0, -1). ']'; revenir '  
'; add_shortcode ('bymonth', 'postsbymonth');

Etape 4 "Tableau des articles les plus commentés":

Le troisième graphique concerne également des données intéressantes, il montre les messages les plus commentés..

 fonction la plus commentée ($ atts, $ content = ") globale $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" select post_title as pt, comment_count as co from $ wpdb-> posts where post_status = "publish" order par co desc limite 5 "); $ labels ="; $ Titres = "; foreach ($ postcountbymonth as $ pc) $ titres = $ titres. '[\". $ pc-> pt.' ('. $ pc-> pt.') \ ','. $ pc-> co. '],';  $ titres = '['. substr ($ Titres, 0, -1). ']'; revenir '   
'; add_shortcode ('mypopularposts', 'le plus commenté');

Etape 5 "Graphique de la vitesse du blog":

Notre dernier graphique de ce didacticiel indique la vélocité de votre blog. Il montre le nombre moyen de vos messages par mois.

 fonction vélocité ($ atts, $ content = ") global $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" sélectionnez post_title comme pt, comment_count comme co à partir de $ wpdb-> posts où post_status = "publish" " ); $ postcountresult = round ($ wpdb-> num_rows / 12); $ maxvel = pow (10, strlen ((chaîne) $ postcountresult)); $ ticks = "; $ intervalles = "; pour ($ 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 ('vélocité', 'vélocité');

En utilisant les API WordPress et les graphiques jQuery, vous pouvez prolonger cette liste, ces 4 graphiques n’étaient que des exemples pour les développeurs intéressés..

C'est tout. Bonne chance.