Share
Los gráficos son una excelente manera de presentar datos. Hacen que los datos sean más digeribles al hacerlos visualmente atractivos. En WordPress, no hay un método integrado para obtener datos de publicaciones y páginas en forma gráfica.
Sin embargo, hay ciertos complementos disponibles que integran Google Analytics con WordPress, pero son excesivos si desea obtener solo una parte de esa información..
Además, nada debe impedirle aprender nuevas técnicas y sumergirse directamente en el tema es la mejor manera de aprender..
Este tutorial está dirigido a los nuevos desarrolladores de WordPress que desean obtener información sobre algunas técnicas útiles que podemos utilizar en nuestro proceso de desarrollo. En este tutorial, vamos a hacer nuestro propio complemento simple que nos presentará datos gráficamente dentro del administrador de WordPress. Usaremos las clases y funciones estándar de WordPress para recuperar datos y luego los mostraremos gráficamente en el administrador de WordPress con la ayuda de un complemento de jQuery llamado HighCharts.
Prepararemos nuestro complemento básico, agregaremos una página para él en el administrador de wp y luego pondremos en cola el JavaScript de nuestro complemento solo en esa página. Luego pasaremos los datos que habíamos obtenido a un script externo mediante el uso de wp_localize_script. A su vez, el script mostrará nuestros datos gráficamente..
Las estadísticas que planeamos mostrar son:
Según su sitio:
Highcharts es una biblioteca de gráficos escrita en HTML5 / JavaScript puro, que ofrece gráficos intuitivos e interactivos a su sitio web o aplicación web. Highcharts actualmente admite líneas, spline, area, areaspline, column, bar, pie, scatter, angulos angulares, arearange, areasplinerange, rango de columnas, burbuja, cuadro de caja, barras de error, embudo, cascada, y tipos de gráficos polares.
Puedes conseguir una copia de su sitio web..
Dicho esto, comencemos a trabajar en nuestro plugin..
Primero haremos un directorio dentro de nuestro wp-content / plugins carpeta llamada "cuadros de admin". Dentro de eso, hagamos la estructura de directorio inicial para nuestro complemento.
Copia el archivo highcharts.js del directorio en el archivo ZIP que descargó del sitio web oficial, a un js carpeta:
En el directorio raíz, haremos un index.php archivo y dentro de eso agregaremos la declaración inicial para nuestro complemento:
Ahora, si va a WP-Admin> Plugins, notará que el plugin se muestra allí, pero aún no funciona..
También añadiremos algunos estilos dentro de nuestro admin_charts.css:
#admin_chart_form margen: 30px 0; etiqueta #admin_chart_form display: inline-block; ancho: 250px;
Nuestro siguiente paso sería agregar una página para el complemento dentro del administrador donde realizaremos todas las operaciones. Para eso, utilizaremos la acción de WordPress. admin_menu. Esta acción se activa después de que la estructura del menú del panel de administración básica está en su lugar y, por lo tanto, se puede utilizar para agregar más menús o submenús en el administrador. El uso básico es el siguiente:
Añadiríamos una función. chart_add_admin_page dentro de nuestro index.php y luego engancharlo en esta acción:
Accentsconagua
add_action ('admin_menu', 'chart_add_admin_page'); Dentro de nuestro chart_add_admin_page función que llamaremos la función nativa de WordPress add_plugins_page:
function chart_add_admin_page () add_plugins_page ('Charts For Wordpress', 'Admin Charts', 'administrador', 'admin-charts', 'render_admin_charts_page'); El primer argumento es el título de la página que se mostrará en el
Ahora, si activa el complemento y se desplaza sobre el menú "Complementos", notará que hemos agregado exitosamente un menú para nuestro complemento:
En esta etapa, hemos agregado con éxito una página vacía para nuestro complemento. Es hora de hacerlo funcional mediante la salida de algunos contenidos..
En nuestro llamado anterior a add_plugins_page nos hemos referido a una función de devolución de llamada render_admin_charts_page. Esta es la función que hemos planeado para generar todo el contenido que queremos tener en nuestra página. Así que vamos a escribir la función.
Bajo la chart_add_admin_page función, agregue el siguiente código:
function render_admin_charts_page () ?>Gráficos de administración
Solo estamos agregando un HTML simple aquí. Hemos agregado un encabezado y un formulario dentro de la clase de CSS nativa de WordPress "envolver".
Dentro del formulario, hemos agregado un cuadro de selección que actualmente solo tiene una opción para mostrar las publicaciones más populares por conteo de comentarios. Debajo del formulario hemos añadido un contenedor. div para nuestros gráficos.
Nuestra página ahora está tomando forma:
Propina: Siempre debe intentar integrarse con la interfaz de usuario nativa de WordPress. Tenemos una gran serie de Stephen Harris sobre el tema.. Es hora de registrar los scripts y estilos necesarios para que podamos ponerlos en cola más tarde. Para eso, utilizaremos el wp_register_script y wp_register_style Función que funciona en colaboración con el gancho de acción. admin_enqueue_scripts Si queremos encolarlos en el lado del administrador..
Pero antes de eso, agreguemos una constante para nuestro directorio raíz de complementos para poder consultarla más adelante cuando estemos definiendo rutas para nuestros scripts y estilos. Entonces, en la parte superior de la página debajo de la declaración del complemento, agregue este bit de código:
define ('ROOT', plugin_dir_url (__FILE__)); Ahora podemos definir nuestra función para registrar nuestros scripts y estilos:
add_action ('admin_enqueue_scripts', 'chart_register_scripts'); function chart_register_scripts () wp_register_script ('highCharts', ROOT. 'js / highcharts.js', array ('jquery'), '3.0', true); wp_register_script ('adminCharts', ROOT. 'js / admin_charts.js', array ('highCharts'), '1.0', true); wp_register_style ('adminChartsStyles', ROOT. 'css / admin_chart.css'); Primero, hemos registrado el script HighCharts que habíamos descargado anteriormente. Le hemos dado un mango "altasCharts". Para el siguiente argumento, hemos definido la ruta donde existe.
A continuación, hemos pasado una serie de secuencias de comandos de las que depende nuestra secuencia de comandos, en este caso es jQuery, ya que estaríamos manipulando el DOM a través de jQuery. De esta manera, no tendremos que preocuparnos por poner en cola jQuery, se pondrá en cola automáticamente cada vez que pongamos en cola altasCharts guión.
Para el tercer argumento, hemos definido un número de versión y para el último argumento, le hemos dicho al wp_register_script para poner en cola el script en el pie de página de la página después del contenido principal. De la misma manera, hemos registrado nuestro segundo script en el que estaríamos agregando todo nuestro código JavaScript necesario..
Ahora podemos poner en cola nuestros scripts y estilos en nuestra página de complementos, pero no queremos que se pongan en cola en cada página del administrador donde no sean necesarios..
Por esa razón, verificaremos una condición antes de poner en cola nuestros scripts:
add_action ('admin_enqueue_scripts', 'chart_add_scripts'); función chart_add_scripts ($ hook) if ('plugins_page_admin-charts' == $ hook) wp_enqueue_style ('adminChartsStyles'); wp_enqueue_script ('adminCharts'); La función que enganchamos con admin_enqueue_scripts en realidad recibe un parámetro para la página de administración en la que estamos actualmente. En nuestro caso, es "plugins_page_admin-charts". Siempre puede verificar este parámetro haciendo eco en su proceso de desarrollo..
Ahora que hemos preparado una base para nuestro complemento, podemos comenzar a trabajar en nuestro objetivo principal, es decir, obtener datos y mostrar estadísticas.
Queremos obtener tres tipos de datos:
Para este tipo de datos, podemos utilizar el WP_Query clase para obtener cinco publicaciones que tienen el mayor número de comentarios. los WP_Query La clase es útil cuando necesitamos buscar publicaciones basadas en diferentes criterios. Usando esta clase, podemos listar publicaciones de la manera que queramos. La consulta para obtener publicaciones con el mayor número de comentarios se puede escribir como:
$ posts = new WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); Ahora tenemos cinco publicaciones que tienen el mayor número de comentarios, en forma de objetos dentro del $ mensajes formación. Siempre puedes repetir la variable para ver con qué estás trabajando..
Necesitamos pasar este objeto junto con otros datos esenciales al JavaScript. Para ello, primero prepararemos una matriz que contendrá el tipo de datos, el tipo de gráfico que necesitamos dibujar y, finalmente, las publicaciones que acabamos de obtener. WP_Query.
$ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'column', 'post_data' => $ posts-> posts); Podemos pasar esta variable a JavaScript a través de wp_localize_script:
wp_localize_script ('adminCharts', 'data', $ data); El primer argumento en la llamada a la función es el identificador del script al que debemos pasar los datos. Habíamos registrado este guión antes. El segundo argumento es el nombre del objeto que estará disponible en JavaScript y el argumento final es la información en sí misma que debemos pasar. El final index.php debería verse así:
'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'column', 'post_data' => $ posts-> posts); wp_localize_script ('adminCharts', 'data', $ data); ?>Gráficos de administración
Pero tenemos que asegurarnos de que WP_Query y wp_localize_script solo llamen cuando hayamos enviado el formulario; Por eso, los encerramos dentro de otro. Si Declaración que comprueba si el formulario ha sido enviado:
if (isset ($ _POST ['show_chart'])) if ('chart_most_popular' == $ _POST ['chart_data_type']) $ posts = new WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'column', 'post_data' => $ posts-> posts); wp_localize_script ('adminCharts', 'data', $ data); Lo único que queda ahora es capturar los datos dentro de nuestro archivo JavaScript y dibujar el gráfico. Dentro de js / admin_charts.js archivo, agregue el siguiente código:
(function ($) if ('chart_most_popular' == data.data_type) var post_titles = [], post_comment_count = []; $ (data.post_data) .each (function () post_titles.push (this.post_title) ; post_comment_count.push (parseInt (this.comment_count));); $ ('# chart-stats'). highcharts (chart: type: data.chart_type, title: text: 'Most Popular Posts (por cantidad de comentarios) ', xAxis: categories: post_titles, yAxis: title: text:' Number of Comments ', series: [name:' Comments Count ', data: post_comment_count]); (jQuery)); los $ datos matriz que habíamos pasado index.php se ha convertido en un objeto dentro de JavaScript. Así podemos manipularlo como cualquier otro objeto JavaScript..
Primero estamos revisando el tipo de datos que viene:
if ('chart_most_popular' == data.data_type) Luego, hemos inicializado dos matrices vacías para títulos de publicaciones y conteo de comentarios respectivamente:
var post_titles = [], post_comment_count = [];
Y finalmente, hemos iterado a través de las publicaciones y hemos capturado los títulos y el recuento de comentarios en los arreglos que hemos inicializado:
$ (data.post_data) .each (function () post_titles.push (this.post_title); post_comment_count.push (parseInt (this.comment_count)););
Ahora es el momento de dibujar el gráfico usando los datos que hemos obtenido, para eso hemos utilizado la API de HighCharts:
$ ('# chart-stats'). highcharts (chart: type: data.chart_type, title: text: 'Mensajes más populares (por número de comentarios)', xAxis: categories: post_titles, yAxis : título: texto: 'Número de comentarios', serie: [nombre: 'Cuenta de comentarios', datos: post_comment_count]); Ahora vuelva a sus complementos> Gráficos de administración y después de seleccionar una opción del menú desplegable, haga clic en el botón de enviar, ahora debería tener un gráfico de columnas de trabajo.
Es posible que desee volver a sus publicaciones, agregar algunos comentarios y luego regresar para ver las estadísticas actualizadas:
Ahora podemos agregar soporte para más tipos de datos en nuestro complemento.
Todo lo que tenemos que hacer ahora es obtener cinco categorías que tengan el mayor número de publicaciones asociadas. Pero antes de eso, agreguemos una opción para este tipo de datos en nuestro menú desplegable de selección. Así que vuelve a la render_admin_charts_page función que habíamos definido anteriormente y actualizarla de la siguiente manera:
Podemos usar la función nativa de WordPress get_categories y pasar en algunos argumentos:
$ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); Luego buscamos nuestros datos de la misma manera que lo habíamos hecho antes:
$ data = array ('data_type' => 'chart_top_cat', 'chart_type' => 'column', 'post_data' => $ categories); Así que el código final debería ser así:
if ('chart_cat_break' == $ _POST ['chart_data_type']) $ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); $ data = array ('data_type' => 'chart_cat_breakup', 'chart_type' => 'pie', 'post_data' => $ categories); wp_localize_script ('adminCharts', 'data', $ data); En el admin_charts.js, inserte este código después de la Si declaración:
else if ('cart_top_cat' == data.data_type) var cat_titles = [], cat_count = []; $ (data.post_data) .each (function () cat_titles.push (this.name); cat_count.push (parseInt (this.count));); $ ('# chart-stats'). highcharts (chart: type: data.chart_type, title: text: 'Top 5 Categories by Posts', xAxis: categories: cat_titles, yAxis: title: texto: 'Número de publicaciones', tickInterval: 5, series: [nombre: 'Cuenta de publicaciones', datos: cat_count]); Estamos haciendo lo mismo que antes, pero esta vez hemos cambiado el título del gráfico y los títulos de los ejes. Ahora deberíamos tener otro gráfico que muestre las cinco categorías principales con la mayor cantidad de publicaciones:
Nuestro último tipo de datos es la división de categorías por número de publicaciones. Para este tipo de datos, usaremos el gráfico circular como es más apropiado en este caso. También tenga en cuenta que una sola publicación puede pertenecer a múltiples categorías.
Usaremos lo mismo get_categories función, pero esta vez no estamos limitando el número de categorías que obtenemos, en lugar de eso necesitamos obtener todas las categorías para mostrar la separación.
Entonces comenzaremos por verificar si la opción ha sido seleccionada para este tipo de datos y luego llamaremos a nuestra función para recuperar las categorías, preparar nuestra matriz y luego pasarla a JavaScript:
if ('chart_cat_breakup' == $ _POST ['chart_data_type']) $ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); $ data = array ('data_type' => 'chart_cat_breakup', 'chart_type' => 'pie', 'post_data' => $ categories); wp_localize_script ('adminCharts', 'data', $ data); Es relativamente simple dibujar un gráfico circular. En admin_charts.js, Agregue el siguiente código después del existente else-if declaración:
else if ('chart_cat_breakup' == data.data_type) var number_posts = []; $ (data.post_data) .each (function () number_posts.push ([this.name, parseInt (this.count)]);); $ ('# chart-stats'). highcharts (title: text: 'Desglose de categorías por número de publicaciones', información sobre herramientas: pointFormat: 'Número series.name: punto.y
series.name Compartir: point.percentage: .1f%', series: [type:' pie ', name:' Posts ', data: number_posts]); 
Tenga en cuenta que hemos formateado la información sobre herramientas para mostrar el porcentaje en lugar de un entero. Casi hemos terminado, excepto por una pequeña función de utilidad que podemos agregar a cada una de nuestras opciones de selección para que persista cuando se carga la página después de enviar el formulario.
Agrega este bit de código dentro index.php después de la render_admin_charts_page función:
función selected_option ($ option) if ($ otpion == $ _POST ['chart_data_type']) echo 'selected = "selected"';
Y luego llame a la función dentro de cada una de nuestras opciones de selección:
Nuestro complemento ahora está completo y ahora tiene tres tablas de trabajo para diferentes tipos de datos. Siéntase libre de jugar y agregar más gráficos para más tipos de datos.
En este tutorial creamos nuestro propio complemento desde el principio y agregamos una página separada en el wp-admin. También hemos analizado algunas de las técnicas que pueden ser útiles al desarrollar para WordPress.
Estos incluyen diferentes maneras de obtener la información requerida sobre las publicaciones y categorías y luego pasarla al JavaScript para que podamos usarla para diferentes propósitos..
Espero que hayas encontrado este tutorial útil y no olvides proporcionar tus comentarios constructivos en los comentarios..
