Share
Diagrammen zijn een geweldige manier om gegevens te presenteren. Ze maken gegevens beter verteerbaar door het visueel aantrekkelijk te maken. In WordPress is er geen ingebouwde methode om berichten en pagina's in een grafische vorm te krijgen.
Hoewel er bepaalde plug-ins beschikbaar zijn die Google Analytics integreren met WordPress, maar ze zijn overkill als u slechts een deel van die gegevens wilt ontvangen.
Bovendien mag niets je weerhouden om nieuwe technieken te leren en om rechtstreeks in het onderwerp te duiken, is de beste manier om te leren.
Deze tutorial is bedoeld voor nieuwe WordPress-ontwikkelaars die inzicht willen krijgen in enkele nuttige technieken die we kunnen gebruiken in ons ontwikkelingsproces. In deze zelfstudie gaan we onze eigen eenvoudige plug-in maken die ons gegevens grafisch presenteert binnen de WordPress-beheerder. We zullen standaard WordPress-klassen en -functies gebruiken om gegevens op te halen en deze vervolgens grafisch weer te geven in de WordPress-beheerder met behulp van een jQuery-plug-in genaamd HighCharts.
We zullen onze basisplugin voorbereiden, er een pagina voor toevoegen in de wp-admin en vervolgens het JavaScript van onze plug-in alleen op die pagina inpikken. We zullen dan de gegevens die we hadden opgehaald doorgeven aan een extern script wp_localize_script. Op zijn beurt zal het script onze gegevens grafisch weergeven.
De statistieken die we willen laten zien zijn:
Volgens hun site:
Highcharts is een grafiekbibliotheek die is geschreven in pure HTML5 / JavaScript en die intuïtieve, interactieve grafieken biedt voor uw website of webapplicatie. Highcharts ondersteunt momenteel lijn-, spline-, gebied-, gebiedenlijn-, kolom-, staaf-, taart-, verstrooiings-, hoekmeter-, rechthoek-, gebiedsplinerange-, kolombereik-, bubbel-, boxplot-, foutbalk-, trechter-, waterval- en polaire grafiektypen.
Je kunt een kopie van hun website halen.
Dat gezegd hebbende, laten we beginnen met het werken aan onze plug-in.
We zullen eerst een map in ons maken wp-content / plugins map met de naam "admin-charts"Binnenin laten we de initiële directorystructuur voor onze plug-in maken.
Kopieer het bestand highcharts.js uit de map in het ZIP-bestand dat u van de officiële website hebt gedownload, naar een js map:
In de hoofdmap zullen we een maken index.php bestand en binnenin voegen we de initiële aangifte voor onze plug-in toe:
Als u nu naar WP-Admin> Plug-ins gaat, ziet u dat de plug-in daar wordt weergegeven, maar deze is nog niet functioneel.
We zullen ook enkele stijlen toevoegen binnen onze admin_charts.css:
#admin_chart_form margin: 30px 0; #admin_chart_form label display: inline-block; breedte: 250 px;
Onze volgende stap zou zijn om een pagina toe te voegen voor de plug-in in de admin waar we alle bewerkingen zouden uitvoeren. Daarvoor zullen we de WordPress-actie gebruiken ADMIN_MENU. Deze actie wordt geactiveerd nadat de menustructuur van het basisbeheerderspaneel op zijn plaats is en dus kan worden gebruikt om meer menu's of submenu's in de beheerder toe te voegen. Het basisgebruik is als volgt:
We zouden een functie toevoegen chart_add_admin_page in onze index.php en koppel het vervolgens aan deze actie:
Accentsconagua
add_action ('admin_menu', 'chart_add_admin_page'); In onze chart_add_admin_page functie zullen we de native WordPress-functie aanroepen add_plugins_page:
function chart_add_admin_page () add_plugins_page ('Charts For Wordpress', 'Admin Charts', 'administrator', 'admin-charts', 'render_admin_charts_page'); Het eerste argument is de paginatitel die wordt weergegeven in de
Als u nu de plug-in activeert en de muisaanwijzer op het menu "Plug-ins" plaatst, ziet u dat we een menu voor onze plug-in hebben toegevoegd:
In deze fase hebben we met succes een lege pagina voor onze plug-in toegevoegd. Het is tijd om het functioneel te maken door wat inhoud uit te voeren.
In onze vorige oproep aan add_plugins_page we hebben verwezen naar een callback-functie render_admin_charts_page. Dit is de functie die we hebben gepland om alle content uit te voeren die we op onze pagina willen hebben. Dus laten we de functie schrijven.
Onder de chart_add_admin_page functie, voeg de volgende code toe:
functie render_admin_charts_page () ?>Admin-diagrammen
We voegen hier eenvoudig enkele HTML toe. We hebben een kop en een formulier toegevoegd in de native CSS-klasse van WordPress "wikkelen".
In het formulier hebben we een selectiekader toegevoegd dat momenteel slechts één optie heeft om de meest populaire berichten te tonen op basis van het aantal reacties. Onder het formulier hebben we een container toegevoegd div voor onze grafieken.
Onze pagina krijgt nu vorm:
Tip: Je moet altijd proberen te integreren met de native UI van WordPress. We hebben een geweldige serie van Stephen Harris over het onderwerp. Het is tijd om de nodige scripts en stijlen te registreren, zodat we ze later kunnen in de wacht slepen. Daarvoor gebruiken we de wp_register_script en wp_register_style functie die werkt in samenwerking met de actiehaak admin_enqueue_scripts als we ze aan de adminkant willen inlijven.
Maar laten we vóór die tijd een constante toevoegen voor de hoofdmap van onze plug-in, zodat we er later naar kunnen verwijzen als we paden definiëren voor onze scripts en stijlen. Dus, bovenaan de pagina onder de pluginverklaring, voeg dit stukje code toe:
define ('ROOT', plugin_dir_url (__FILE__)); We kunnen nu onze functie definiëren om onze scripts en stijlen te registreren:
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'); Ten eerste hebben we het HighCharts-script geregistreerd dat we eerder hadden gedownload. We hebben het een handvat gegeven "HighchartsVoor het volgende argument hebben we het pad gedefinieerd waar het bestaat.
Vervolgens hebben we een reeks scripts doorstaan waarop ons script is gebaseerd, in dit geval is het jQuery omdat we de DOM via jQuery zouden manipuleren. Op deze manier hoeven we ons geen zorgen te maken over het in de hand houden van jQuery, het zal automatisch worden uitgelokt wanneer we in de wachtrij gaan Highcharts script.
Voor het derde argument hebben we een versienummer gedefinieerd en voor het laatste argument hebben we het verteld wp_register_script om het script in de voettekst van de pagina op te halen na de hoofdinhoud. Op dezelfde manier hebben we ons tweede script geregistreerd waar we al onze noodzakelijke JavaScript-code zouden toevoegen.
We kunnen nu onze scripts en stijlen op onze plugin-pagina inhalen, maar we willen niet dat ze op elke pagina in de admin in de wachtrij worden geplaatst waar ze niet nodig zijn.
Om die reden zullen we een voorwaarde controleren voordat we onze scripts in de wachtrij zetten:
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'); De functie waar we aan vasthaken admin_enqueue_scripts ontvangt eigenlijk een parameter voor de beheerderspagina waar we momenteel aan toe zijn. In ons geval is het "plugins_page_admin-chartsU kunt deze parameter altijd controleren door deze in uw ontwikkelingsproces te retoucheren.
Nu we een basis voor onze plug-in hebben voorbereid, kunnen we beginnen aan onze kerndoelstelling, namelijk het ophalen van gegevens en het weergeven van statistieken.
We willen drie soorten gegevens ophalen:
Voor dit type gegevens kunnen we de WP_Query klasse om vijf berichten met het hoogste aantal reacties op te halen. De WP_Query klas komt van pas als we berichten moeten ophalen op basis van verschillende criteria. Met deze klasse kunnen we berichten op elke gewenste manier weergeven. De query voor het ophalen van berichten met het hoogste aantal opmerkingen kan worden geschreven als:
$ posts = new WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); We hebben nu vijf berichten met het hoogste aantal reacties, in de vorm van objecten in de $ posts matrix. Je kunt altijd de variabele echoën om te zien waarmee je werkt.
We moeten dit object samen met andere essentiële gegevens doorgeven aan JavaScript. Daartoe zullen we eerst een array voorbereiden met het gegevenstype, het grafiektype dat we moeten tekenen en ten slotte de berichten die we zojuist hebben opgehaald WP_Query.
$ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'column', 'post_data' => $ posts-> berichten); We kunnen deze variabele doorgeven aan JavaScript wp_localize_script:
wp_localize_script ('adminCharts', 'data', $ data); Het eerste argument in de functieaanroep is de handle van het script waarnaar we de gegevens moeten doorgeven. We hadden dit script eerder geregistreerd. Het tweede argument is de naam van het object dat beschikbaar is in JavaScript en het laatste argument is de gegevens zelf die we moeten doorgeven. De laatste index.php zou er als volgt uit moeten zien:
'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'column', 'post_data' => $ posts-> berichten); wp_localize_script ('adminCharts', 'data', $ data); ?>Admin-diagrammen
Maar we moeten ervoor zorgen dat WP_Query en wp_localize_script wordt pas gebeld als we het formulier hebben verzonden; daarom sluiten we ze binnen in een andere als verklaring die controleert of het formulier is ingediend:
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-> berichten); wp_localize_script ('adminCharts', 'data', $ data); Het enige dat nu overblijft is om de gegevens in ons JavaScript-bestand te pakken en de grafiek te tekenen. Binnen in de js / admin_charts.js bestand, voeg de volgende code toe:
(functie ($) 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, titel: text: 'Meest populaire berichten (door aantal reacties) ', xAxis: categories: post_titles, yAxis: title: text:' Number of Comments ', series: [name:' Comments Count ', data: post_comment_count]); (jQuery)); De $ data array waar we doorheen waren gegaan index.php is veranderd in een object in JavaScript. We kunnen het dus manipuleren zoals elk ander JavaScript-object.
We controleren eerst het gegevenstype dat binnenkomt:
if ('chart_most_popular' == data.data_type) Vervolgens hebben we twee lege arrays voor posttitels geïnitialiseerd en respectievelijk het aantal reacties genoteerd:
var post_titles = [], post_comment_count = [];
En tot slot hebben we de berichten herhaald en de titels en het aantal reacties verzameld in de arrays die we hebben geïnitialiseerd:
$ (data.post_data) .each (function () post_titles.push (this.post_title); post_comment_count.push (parseInt (this.comment_count)););
Nu is het tijd om de grafiek daadwerkelijk te tekenen met behulp van de gegevens die we hebben opgehaald, daarvoor hebben we de HighCharts API gebruikt:
$ ('# chart-stats'). highcharts (chart: type: data.chart_type, titel: text: 'Meest populaire berichten (op aantal reacties)', xAxis: categories: post_titles, yAxis : title: text: 'Number of Comments', series: [name: 'Comments Count', data: post_comment_count]); Ga nu terug naar uw plug-ins> Beheergrafieken en klik na het selecteren van een optie in de vervolgkeuzelijst op de knop Verzenden, u zou nu een werkkolomgrafiek moeten hebben.
Misschien wil je teruggaan naar je berichten, opmerkingen toevoegen en dan terugkomen om de bijgewerkte statistieken te bekijken:
We kunnen nu ondersteuning voor meer gegevenstypen toevoegen in onze plug-in.
Het enige dat we nu hoeven te doen, is om vijf categorieën te krijgen die het hoogste aantal aan elkaar gekoppelde berichten bevatten. Maar laten we vóór die tijd een optie toevoegen voor dit gegevenstype in onze vervolgkeuzelijst. Dus ga terug naar de render_admin_charts_page functie die we eerder hadden gedefinieerd en update deze als volgt:
We kunnen de native WordPress-functie gebruiken get_categories en geef enkele argumenten door:
$ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); Vervolgens halen we onze gegevens op dezelfde manier op die we eerder hadden gedaan:
$ data = array ('data_type' => 'chart_top_cat', 'chart_type' => 'kolom', 'post_data' => $ categorieën); Het laatste stukje code zou dus als volgt moeten zijn:
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' => 'taart', 'post_data' => $ categorieën); wp_localize_script ('adminCharts', 'data', $ data); In de admin_charts.js, voeg deze code in na de als uitspraak:
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, titel: text: 'Top 5 Categories by Posts', xAxis: categories: cat_titles, yAxis: title: text: 'Aantal berichten', tickInterval: 5, serie: [name: 'Post Count', data: cat_count]); We doen hetzelfde als voorheen, maar deze keer hebben we de titel van het diagram en de bijschriften voor de assen gewijzigd. We zouden nu een ander diagram moeten hebben met de top vijf categorieën met het meeste aantal berichten:
Ons laatste gegevenstype is het opsplitsen van categorieën op aantal posten. Voor dit type gegevens gebruiken we het cirkeldiagram zoals het in dit geval het meest geschikt is. Merk ook op dat een enkel bericht mogelijk tot meerdere categorieën behoort.
We zullen hetzelfde gebruiken get_categories functie maar deze keer beperken we niet het aantal categorieën dat we krijgen, in plaats daarvan moeten we alle categorieën krijgen om het uiteenvallen te tonen.
We zullen dus beginnen door te controleren of de optie is geselecteerd voor dit gegevenstype en vervolgens onze functie bellen om de categorieën op te halen, onze array voor te bereiden en deze vervolgens door te geven aan 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' => 'taart', 'post_data' => $ categorieën); wp_localize_script ('adminCharts', 'data', $ data); Het is relatief eenvoudig om een cirkeldiagram te tekenen. In admin_charts.js, voeg de volgende code toe na het bestaande anders-if uitspraak:
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: 'Opsplitsing van categorieën op aantal berichten', tooltip: pointFormat: 'Number series.name: puntig
series.name Delen: Point.percentage: .1f%', serie: [type:' taart ', naam:' Berichten ', data: number_posts]); 
Merk op dat we de tooltip hebben opgemaakt om het percentage in plaats van een integer te tonen. We zijn bijna klaar, behalve voor een kleine utility-functie die we kunnen toevoegen aan elk van onze geselecteerde opties, zodat deze blijft bestaan wanneer de pagina wordt geladen nadat het formulier is verzonden.
Voeg dit stukje code aan de binnenkant toe index.php na de render_admin_charts_page functie:
function selected_option ($ option) if ($ otpion == $ _POST ['chart_data_type']) echo 'selected = "selected"';
En bel dan de functie binnen onze geselecteerde opties:
Onze plug-in is nu voltooid en je hebt nu drie werkgrafieken voor verschillende soorten gegevens. Voel je vrij om rond te spelen en meer kaarten toe te voegen voor meer gegevenstypen.
In deze tutorial hebben we onze eigen plugin vanaf de grond opgebouwd en een aparte pagina toegevoegd in de wp-admin. We hebben ook gekeken naar enkele van de technieken die nuttig kunnen zijn bij het ontwikkelen voor WordPress.
Deze bevatten verschillende manieren om de vereiste informatie over de berichten en categorieën te krijgen en die vervolgens door te geven aan het JavaScript, zodat we het voor verschillende doeleinden kunnen gebruiken.
Ik hoop dat je deze tutorial nuttig hebt gevonden en vergeet niet om je constructieve feedback te geven in de comments.
