Visualización de los datos del sitio de WordPress a través de gráficos jQuery

En este tutorial usaremos el plugin JQuery Charts Plotting, JQplot, para crear un nuevo plugin de WordPress que puede mostrar parte del tráfico de tu blog, categorías populares y más con algunos gráficos visuales hermosos. ¿Está buscando una manera de resaltar el tablero de un cliente (o el suyo propio) con algunas infografías útiles? ¿No busque más? Te mostraremos cómo se hace aquí..


Paso 1 Creando Tema:

Como una biblioteca de gráficos jQuery, elegimos JQplot, que es fácil de usar y de código abierto bajo las licencias GPL, MIT. Daremos 4 gráficos diferentes en esta publicación, pero luego, utilizando nuestra fantasía, puede crear más gráficos relacionados con los datos de su sitio de WordPress. Llamaremos a nuestro plugin Infograph. Puede descargar e instalar el complemento listo desde el enlace de descarga que se incluye en esta publicación. Ahora veamos la estructura del complemento paso a paso: el complemento contiene 6 funciones (1 para la secuencia de comandos JS, una para CSS y 4 para gráficos), 4 códigos cortos para gráficos y 2 enlaces de acción. Espero que todos sepan qué es código corto y acción, así que continuemos.

Primero agregamos 2 funciones para agregar soporte JS y 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');  función add_css () echo ' '; eco '';  add_action ('wp_enqueue_scripts', 'myscripts'); add_action ('wp_head', 'add_css');

Paso 2 Tabla de "Categorías Populares":

Este gráfico es un pastel que muestra las categorías más populares de tu blog. Puedes colocarlo en cualquier página o post. Simplemente ponga el código corto [mycategories] en cualquier publicación:

 categorías de funciones ($ atts, $ content = ") $ ch_cats = get_categories (array ('orderby' => 'count', 'order' => 'desc')); $ sayy = count ($ ch_cats); $ chl = "; para ($ i = 1; $ i<=5;$i++)  $chl=$chl.'[\".$ch_cats[$i-1]->nombre. '\', '. $ ch_cats [$ i-1] -> count.'], '; // [[[\ 'a \', 25], [\ 'b \', 14], [\ 'c \', 7]]] $ chl = '[['. substr ($ chl, 0 , -1). ']]'; regreso ' 
'; add_shortcode ('mycategories', 'categories');

Paso 3 "Actividad por mes" gráfico:

Este gráfico puede mostrar la actividad de los últimos 12 meses en tu blog. Muestra la cantidad de publicaciones que has publicado los últimos 12 meses por mes..

 function postsbymonth ($ atts, $ content = ") // Contabilizar por mes global $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" select * from (seleccione MONTH (post_date) as mo, YEAR (post_date ) como ye, count (ID) como co de $ wpdb-> posts donde post_status = "publish" group by MONTH (post_date), YEAR (post_date) orden por post_date desc límite 12) una orden por ye asc, mo asc ") ; $ labels = "; $ postcounts ="; foreach ($ postcountbymonth como $ pc) $ labels = $ labels. '\ ". $ pc-> mo.' / '. $ pc-> ye.' \ ','; $ postcounts = $ postcounts. $ pc-> co. ',';  $ postcounts = '['. substr ($ postcounts, 0, -1). ']'; $ labels = '['. substr ($ labels, 0, -1). ']'; regreso '  
'; add_shortcode ('bymonth', 'postsbymonth');

Paso 4 Tabla "Los más comentados":

El tercer gráfico también trata sobre datos interesantes, muestra tus publicaciones más comentadas.

 function mostcommented ($ atts, $ content = ") global $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" seleccione post_title as pt, comment_count como co de $ wpdb-> publicaciones donde post_status = "publish" order por co límite de 5 "); $ labels ="; $ títulos = "; foreach ($ postcountbymonth como $ pc) $ títulos = $ títulos. '[\". $ pc-> pt.' ('. $ pc-> pt.') \ ','. $ pc-> co. '],';  $ títulos = '['. substr ($ títulos, 0, -1). ']'; regreso '   
'; add_shortcode ('mypopularposts', 'mostcommented');

Paso 5 "Blog Velocity" gráfico:

Nuestro último gráfico para este tutorial muestra la velocidad de tu blog. Muestra el número promedio de tus mensajes por mes..

 function velocity ($ atts, $ content = ") global $ wpdb, $ wp_query; $ postcountbymonth = $ wpdb-> get_results (" seleccione post_title como pt, comment_count como co de $ wpdb-> posts donde post_status = "publish" " ); $ postcountresult = round ($ wpdb-> num_rows / 12); $ maxvel = pow (10, strlen ((string) $ postcountresult)); $ ticks = "; $ intervalos = "; para ($ 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 ('velocidad', 'velocidad');

Usando las API de WordPress y los gráficos jQuery puede prolongar esta lista de gráficos, estos 4 gráficos fueron solo ejemplos para desarrolladores interesados.

Eso es todo. Buena suerte.