Share
Les graphiques sont un excellent moyen de présenter des données. Ils rendent les données plus digestibles en les rendant attrayantes visuellement. Dans WordPress, il n’existe pas de méthode intégrée permettant d’obtenir des données de publication et de page sous forme graphique..
Bien que certains plugins intègrent Google Analytics à WordPress, ils sont excessifs si vous souhaitez obtenir uniquement une partie de ces données..
En outre, rien ne devrait vous empêcher d’apprendre de nouvelles techniques et plonger directement dans le sujet est le meilleur moyen d’apprendre.
Ce didacticiel s’adresse aux nouveaux développeurs WordPress qui souhaitent mieux comprendre certaines techniques utiles que nous pouvons utiliser dans notre processus de développement. Dans ce tutoriel, nous allons créer notre propre plugin simple qui nous présentera les données graphiquement au sein de l’administrateur WordPress. Nous allons utiliser des classes et des fonctions WordPress standard pour récupérer des données, puis les afficher graphiquement dans l’administrateur de WordPress à l’aide d’un plugin jQuery appelé HighCharts..
Nous allons préparer notre plugin de base, lui ajouter une page dans wp-admin, puis mettre en file d'attente le JavaScript de notre plugin uniquement sur cette page. Nous transmettrons ensuite les données que nous avons récupérées à un script externe en utilisant wp_localize_script. À son tour, le script affichera nos données graphiquement.
Les statistiques que nous prévoyons montrer sont:
Selon leur site:
Highcharts est une bibliothèque de graphiques écrite en HTML5 / JavaScript pur, offrant des graphiques intuitifs et interactifs sur votre site Web ou votre application Web. Les Highcharts prennent actuellement en charge les types de ligne, spline, surface, secteur, secteur, colonne, barre, camembert, scatter, jauges angulaires, arearange, areaplinerange, gamme de colonnes, bulle, graphique en barres, entonnoir, cascade et diagramme polaire.
Vous pouvez vous en procurer une copie sur leur site web.
Cela dit, commençons à travailler sur notre plugin.
Nous allons d’abord créer un répertoire dans notre wp-content / plugins dossier nommé "organigramme". A l'intérieur, faisons la structure de répertoire initiale de notre plugin.
Copier le fichier highcharts.js depuis le répertoire du fichier ZIP que vous avez téléchargé sur le site officiel, vers un js dossier:
Dans le répertoire racine, nous ferons un index.php fichier et à l'intérieur de celui-ci, nous ajouterons la déclaration initiale de notre plugin:
Maintenant, si vous allez dans WP-Admin> Plugins, vous remarquerez que le plugin est affiché ici, mais il n'est pas encore fonctionnel.
Nous allons également ajouter quelques styles dans notre admin_charts.css:
#admin_chart_form margin: 30px 0; #admin_chart_form label display: inline-block; largeur: 250px;
Notre prochaine étape serait d’ajouter une page pour le plugin à l’intérieur de l’administrateur où nous effectuerions toutes les opérations. Pour cela, nous allons utiliser l'action WordPress admin_menu. Cette action se déclenche une fois que la structure de menu de base du panneau d'administration est en place et peut donc être utilisée pour ajouter d'autres menus ou sous-menus dans l'administrateur. L'utilisation de base est la suivante:
Nous ajouterions une fonction chart_add_admin_page à l'intérieur de notre index.php puis accrochez-le à cette action:
Accentsconagua
add_action ('admin_menu', 'chart_add_admin_page'); À l'intérieur de notre chart_add_admin_page fonction, nous appellerons la fonction native WordPress add_plugins_page:
function chart_add_admin_page () add_plugins_page ('Graphiques pour Wordpress', 'Graphiques de l'administrateur', 'administrateur', 'administrateurs-graphiques', 'render_admin_charts_page'); Le premier argument est le titre de la page qui sera affiché dans le
Maintenant, si vous activez le plugin et survolez le menu "Plugins", vous remarquerez que nous avons ajouté avec succès un menu pour notre plugin:
A ce stade, nous avons ajouté avec succès une page vide pour notre plugin. Il est temps de le rendre fonctionnel en affichant du contenu.
Dans notre précédent appel à add_plugins_page nous avons parlé d'une fonction de rappel render_admin_charts_page. C’est la fonction que nous avons planifiée pour afficher tout le contenu que nous voulons avoir sur notre page. Alors écrivons la fonction.
Sous le chart_add_admin_page fonction, ajoutez le code suivant:
fonction render_admin_charts_page () ?>Tableaux d'administration
Nous ajoutons simplement du code HTML simple ici. Nous avons ajouté un en-tête et un formulaire dans la classe CSS native de WordPress "emballage".
Dans le formulaire, nous avons ajouté une zone de sélection qui ne propose actuellement qu'une seule option pour afficher les messages les plus populaires en fonction du nombre de commentaires. En dessous du formulaire, nous avons ajouté un conteneur div pour nos cartes.
Notre page est en train de prendre forme:
Pointe: Vous devriez toujours essayer d'intégrer l'interface utilisateur native de WordPress. Nous avons une grande série de Stephen Harris sur le sujet. Il est temps d'enregistrer les scripts et les styles nécessaires afin de pouvoir les remettre en file d'attente ultérieurement. Pour cela, nous allons utiliser le wp_register_script et wp_register_style fonction qui fonctionne en collaboration avec le crochet d'action admin_enqueue_scripts si on veut les mettre en file d'attente côté admin.
Mais avant cela, ajoutons une constante pour le répertoire racine de notre plugin afin que nous puissions y faire référence ultérieurement, lorsque nous définirons des chemins pour nos scripts et nos styles. Donc, en haut de la page sous la déclaration du plugin, ajoutez ce morceau de code:
define ('ROOT', plugin_dir_url (__FILE__)); Nous pouvons maintenant définir notre fonction pour enregistrer nos scripts et nos styles:
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'); Premièrement, nous avons enregistré le script HighCharts que nous avions téléchargé précédemment. Nous lui avons donné une poignée "HighCharts". Pour l'argument suivant, nous avons défini le chemin où il existe.
Ensuite, nous avons passé un tableau de scripts dont dépend notre script. Dans ce cas, il s’agit de jQuery puisque nous manipulerions le DOM via jQuery. De cette façon, nous n'aurons plus à nous soucier de la mise en file d'attente de jQuery, il sera automatiquement mis en file d'attente à chaque fois HighCharts scénario.
Pour le troisième argument, nous avons défini un numéro de version et pour le dernier argument, nous avons indiqué à wp_register_script mettre en file d'attente le script dans le pied de page après le contenu principal. De la même manière, nous avons enregistré notre deuxième script où nous ajouterions tout notre code JavaScript nécessaire..
Nous pouvons maintenant mettre nos scripts et nos styles en file d'attente sur notre page de plug-in, mais nous ne voulons pas qu'ils soient mis en file d'attente sur chaque page de l'administrateur où ils ne sont pas nécessaires..
Pour cette raison, nous allons vérifier une condition avant de mettre nos scripts en file d'attente:
add_action ('admin_enqueue_scripts', 'chart_add_scripts'); function chart_add_scripts ($ hook) if ('plugins_page_admin-charts' == $ hook) wp_enqueue_style ('adminChartsStyles'); wp_enqueue_script ('adminCharts'); La fonction que nous accrochons admin_enqueue_scripts reçoit en fait un paramètre pour la page d'administration sur laquelle nous nous trouvons actuellement. Dans notre cas, c'est "plugins_page_admin-charts". Vous pouvez toujours vérifier ce paramètre en le répercutant dans votre processus de développement.
Maintenant que nous avons préparé une base pour notre plugin, nous pouvons commencer à travailler sur notre objectif principal, à savoir récupérer des données et afficher des statistiques..
Nous voulons récupérer trois types de données:
Pour ce type de données, on peut utiliser le WP_Query classe pour aller chercher cinq articles qui ont le plus grand nombre de commentaires. le WP_Query La classe est pratique lorsque nous devons récupérer des publications en fonction de différents critères. En utilisant cette classe, nous pouvons lister les messages de la manière que nous voulons. La requête pour récupérer les publications avec le plus grand nombre de commentaires peut être écrite ainsi:
$ posts = new WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); Nous avons maintenant cinq articles qui ont le plus grand nombre de commentaires, sous la forme d'objets à l'intérieur du $ posts tableau. Vous pouvez toujours faire écho à la variable pour voir avec quoi vous travaillez.
Nous devons transmettre cet objet avec d’autres données essentielles au code JavaScript. Pour cela, nous allons d’abord préparer un tableau qui contiendra le type de données, le type de graphique que nous devons dessiner et enfin les publications que nous venons de récupérer. WP_Query.
$ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'colonne', 'post_data' => $ posts-> posts); Nous pouvons passer cette variable à JavaScript via wp_localize_script:
wp_localize_script ('adminCharts', 'data', $ data); Le premier argument de l'appel de fonction est le descripteur du script auquel nous devons transmettre les données. Nous avions enregistré ce script plus tôt. Le second argument est le nom de l'objet qui sera disponible en JavaScript et le dernier argument est la donnée elle-même que nous devons transmettre. Le final index.php devrait ressembler à ceci:
'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'colonne', 'post_data' => $ posts-> posts); wp_localize_script ('adminCharts', 'data', $ data); ?>Tableaux d'administration
Mais nous devons nous assurer que WP_Query et wp_localize_script être appelé uniquement lorsque nous avons soumis le formulaire; par conséquent, nous les enfermons dans un autre si déclaration qui vérifie si le formulaire a été soumis:
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' => 'colonne', 'post_data' => $ posts-> posts); wp_localize_script ('adminCharts', 'data', $ data); Il ne reste plus qu’à récupérer les données dans notre fichier JavaScript et à dessiner le graphique. À l'intérieur de js / admin_charts.js fichier, ajoutez le code suivant:
(function ($) if ('chart_most_popular' == data.data_type) var post_titles = [], post_comment_count = []; $ (data.post_data) .each (fonction () post_titles.push (this.post_title) ; post_comment_count.push (parseInt (this.comment_count));); $ ('# chart-stats'). highcharts (chart: type: data.chart_type, titre: text: 'Posts les plus populaires (par nombre de commentaires) ', xAxis: catégories: post_titles, yAxis: titre: texte:' Nombre de commentaires ', série: [nom:' Nombre de commentaires ', données: post_comment_count]); (jQuery)); le $ data tableau que nous avions traversé index.php est devenu un objet dans JavaScript. On peut donc le manipuler comme n'importe quel autre objet JavaScript.
Nous vérifions d’abord le type de données qui arrive:
if ('chart_most_popular' == data.data_type) Ensuite, nous avons initialisé deux tableaux vides pour les titres et le nombre de commentaires après:
var post_titles = [], post_comment_count = [];
Enfin, nous avons parcouru les articles et récupéré les titres et le nombre de commentaires dans les tableaux que nous avons initialisés:
$ (data.post_data) .each (function () post_titles.push (this.post_title); post_comment_count.push (parseInt (this.comment_count)););
Il est maintenant temps de dessiner le graphique à l'aide des données que nous avons extraites. Pour cela, nous avons utilisé l'API HighCharts:
$ ('# chart-stats'). highcharts (chart: type: data.chart_type, titre: text: 'Messages les plus consultés (par nombre de commentaires)'], xAxis: categories: post_titles, yAxis : titre: texte: 'Nombre de commentaires', série: [nom: 'Nombre de commentaires', données: post_comment_count]); Maintenant, retournez à votre page Plugins> Organigrammes et après avoir sélectionné une option dans le menu déroulant, cliquez sur le bouton Soumettre, vous devriez maintenant avoir un diagramme à colonnes fonctionnel..
Vous voudrez peut-être revenir à vos messages, ajouter des commentaires, puis revenir pour voir les statistiques mises à jour:
Nous pouvons maintenant ajouter un support pour plus de types de données dans notre plugin.
Tout ce que nous avons à faire maintenant est d’obtenir cinq catégories associées au plus grand nombre de postes. Mais avant cela, ajoutons une option pour ce type de données dans notre liste déroulante de sélection. Alors retourne à la render_admin_charts_page fonction que nous avions définie précédemment et le mettre à jour comme suit:
Nous pouvons utiliser la fonction native WordPress get_categories et passer quelques arguments:
$ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); Nous récupérons ensuite nos données de la même manière que nous le faisions auparavant:
$ data = array ('data_type' => 'chart_top_cat', 'chart_type' => 'column', 'post_data' => $ categories); Le code final devrait donc ressembler à ceci:
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); dans le admin_charts.js, insérez ce code après le si déclaration:
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, titre: text: 'Top 5 catégories par messages', xAxis: catégories: cat_titles, yAxis: title: texte: 'Nombre de messages', tickInterval: 5, série: [nom: 'Nombre de messages', data: cat_count]); Nous faisons la même chose qu'auparavant, mais cette fois nous avons changé le titre du graphique et les légendes des axes. Nous devrions maintenant avoir un autre graphique affichant les cinq premières catégories avec le plus grand nombre de publications:
Notre dernier type de données est la séparation des catégories par le nombre de posts. Pour ce type de données, nous utiliserons le graphique à secteurs comme il convient le mieux dans ce cas. Notez également qu’un seul message peut appartenir à plusieurs catégories..
Nous allons utiliser le même get_categories mais cette fois, nous ne limitons pas le nombre de catégories que nous obtenons, nous devons obtenir toutes les catégories pour afficher la rupture.
Nous allons donc commencer par vérifier si l'option a été sélectionnée pour ce type de données, puis appeler notre fonction pour extraire les catégories, préparer notre tableau, puis le transmettre à 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); C'est relativement simple de dessiner un camembert. Dans admin_charts.js, ajouter le code suivant après l'existant sinon déclaration:
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: 'Répartition des catégories par le nombre de posts'), info-bulle: pointFormat: 'Number series.name: point.y
series.name Partager: point.percentage: .1f%', série: [type:' pie ', nom:' Messages ', data: nombre_posts]); 
Notez que nous avons formaté l'info-bulle pour afficher le pourcentage au lieu d'un entier. Nous avons presque terminé, à l'exception d'une petite fonction utilitaire que nous pouvons ajouter à chacune de nos options de sélection pour qu'elle persiste au chargement de la page après la soumission du formulaire..
Ajouter ce morceau de code à l'intérieur index.php après le render_admin_charts_page une fonction:
function selected_option ($ option) if ($ otpion == $ _POST ['chart_data_type']) echo 'selected = "selected"';
Et appelez ensuite la fonction dans chacune de nos options de sélection:
Notre plugin est maintenant terminé et vous disposez maintenant de trois graphiques de travail pour différents types de données. N'hésitez pas à jouer et ajouter plus de graphiques pour plus de types de données.
Dans ce tutoriel, nous avons créé notre propre plugin à partir de rien et ajouté une page séparée dans wp-admin. Nous avons également examiné certaines techniques pouvant être utiles lors du développement pour WordPress..
Celles-ci incluent différentes manières d'obtenir les informations requises sur les publications et les catégories, puis de les transmettre à JavaScript afin que nous puissions les utiliser à différentes fins..
J'espère que vous avez trouvé ce tutoriel utile et n'oubliez pas de fournir vos commentaires constructifs dans les commentaires..
