Share
Diagram är ett bra sätt att presentera data. De gör data mer smältbara genom att göra det visuellt tilltalande. I WordPress finns det ingen inbyggd metod för att få inlägg och siddata i en grafisk form.
Även om det finns vissa plugins som integrerar Google Analytics med WordPress, men de är överkill om du bara vill få en del av den data.
Också, ingenting borde hålla dig från att lära sig nya tekniker och att dyka rakt in i ämnet är det bästa sättet att lära.
Denna handledning riktar sig till nya WordPress-utvecklare som vill få insikt i några användbara tekniker som vi kan använda i vår utvecklingsprocess. I den här handledningen ska vi göra vårt eget enkla plugin som presenterar oss data grafiskt i WordPress-administratören. Vi använder standard WordPress-klasser och funktioner för att hämta data och sedan visa den grafiskt i WordPress-administratören med hjälp av ett jQuery-plugin som heter HighCharts.
Vi kommer att förbereda vårt grundläggande plugin, lägga till en sida för det i wp-admin och ange sedan bara vår plugin JavaScript på den sidan. Vi skickar sedan data som vi hämtade till ett externt skript genom användningen av wp_localize_script. I sin tur visar skriptet våra data grafiskt.
Den statistik som vi planerar att visa är:
Enligt deras webbplats:
Highcharts är ett kartläggningsbibliotek skrivet i ren HTML5 / JavaScript, och erbjuder intuitiva interaktiva diagram till din webbplats eller webbapplikation. Highcharts stöder för närvarande linje, spline, area, areapline, kolumn, bar, pie, scatter, vinkelmätare, arearange, areasplinerange, columnrange, bubbla, boxritning, felstavar, trappor, vattenfall och polartyper.
Du kan ta dig en kopia från deras hemsida.
Med det sagt, låt oss börja arbeta med vårt plugin.
Vi gör först en katalog i vår wp-content / plugins mapp som heter "admin-diagram". Inuti låter vi göra den ursprungliga katalogstrukturen för vårt plugin.
Kopiera filen highcharts.js från katalogen i ZIP-filen du hämtade från den officiella hemsidan till en js mapp:
I rotkatalogen kommer vi att göra en index.php fil och inuti lägger vi till den ursprungliga deklarationen för vårt plugin:
Nu om du går till WP-Admin> Plugins märker du att plugin visas där, men det är inte funktionellt ännu.
Vi kommer också att lägga till några stilar inom vår admin_charts.css:
#admin_chart_form margin: 30px 0; #admin_chart_form label display: inline-block; bredd: 250px;
Vårt nästa steg skulle vara att lägga till en sida för plugin inuti admin där vi skulle utföra alla operationer. Därför använder vi WordPress-åtgärden admin_menu. Denna åtgärd utlöses efter att den grundläggande adminpanels menystrukturen är på plats och kan därmed användas för att lägga till fler menyer eller undermenyer i admin. Den grundläggande användningen är enligt följande:
Vi skulle lägga till en funktion chart_add_admin_page inuti vårt index.php och koppla sedan in den här åtgärden:
Accentsconagua
add_action ('admin_menu', 'chart_add_admin_page'); Inuti vårt chart_add_admin_page funktion vi kommer att ringa den inbyggda WordPress-funktionen add_plugins_page:
funktion chart_add_admin_page () add_plugins_page ('Charts For Wordpress', 'Admin Charts', 'administrator', 'admin-charts', 'render_admin_charts_page'); Det första argumentet är sidtiteln som kommer att visas i
Nu om du aktiverar plugin och svängare över "Plugins" -menyn märker du att vi har lagt till en meny för vårt plugin:
I det här skedet har vi lagt till en tom sida för vårt plugin. Det är dags att göra det funktionellt genom att utge något innehåll.
I vårt tidigare samtal till add_plugins_page Vi har hänvisat till en återuppringningsfunktion render_admin_charts_page. Det här är den funktion som vi har planerat att producera allt innehåll som vi vill ha på vår sida. Så låt oss skriva funktionen.
Under chart_add_admin_page funktion, lägg till följande kod:
funktion render_admin_charts_page () ?>Admin-diagram
Vi lägger bara till lite enkel HTML här. Vi har lagt till en rubrik och ett formulär inne i WordPress "native CSS class"slå in".
Inuti formuläret har vi lagt till en väljruta som för närvarande bara har ett alternativ för att visa mest populära inlägg enligt kommentarräkningen. Under formuläret har vi lagt till en behållare div för våra diagram.
Vår sida tar nu form:
Tips: Du bör alltid försöka integrera med WordPress 'inbyggda användargränssnitt. Vi har en bra serie av Stephen Harris som täcker ämnet. Det är dags att registrera nödvändiga skript och stilar så att vi kan skaffa dem senare. För det ska vi använda wp_register_script och wp_register_style funktion som fungerar i samarbete med handkroken admin_enqueue_scripts om vi vill skaffa dem på admin sidan.
Men före det, låt oss lägga till en konstant för vår plugin root-katalog så vi kan referera till det senare när vi definierar sökvägar för våra skript och stilar. Så, längst upp på sidan under plugin-deklarationen, lägg till den här koden:
definiera ('ROOT', plugin_dir_url (__FILE__)); Vi kan nu definiera vår funktion för att registrera våra skript och stilar:
add_action ('admin_enqueue_scripts', 'chart_register_scripts'); funktion 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'); För det första har vi registrerat HighCharts-skriptet som vi hämtat tidigare. Vi har gett det ett handtag "highCharts". För nästa argument har vi definierat sökvägen där den finns.
Därefter har vi gått igenom en uppsättning skript som vårt skript beror på, i det här fallet är det jQuery eftersom vi skulle manipulera DOM genom jQuery. På det sättet behöver vi inte oroa oss för enqueuing jQuery, det kommer automatiskt att kalkyleras när vi kollar highCharts manus.
För det tredje argumentet har vi definierat ett versionsnummer och för det sista argumentet har vi sagt till wp_register_script för att skicka manuset i sidfoten efter huvudinnehållet. På samma sätt har vi registrerat vårt andra skript där vi skulle lägga till all vår nödvändiga JavaScript-kod.
Vi kan nu faktiskt skämma ut våra skript och stilar på vår plugin-sida, men vi vill inte att de ska skrivas in på varje enskild sida i adminen där de inte behövs.
Av den anledningen kommer vi att kontrollera ett villkor innan vi skämtar in våra skript:
add_action ('admin_enqueue_scripts', 'chart_add_scripts'); funktion chart_add_scripts ($ hook) if ('plugins_page_admin-charts' == $ krok) wp_enqueue_style ('adminChartsStyles'); wp_enqueue_script ('adminCharts'); Funktionen som vi hakar med admin_enqueue_scripts faktiskt får en parameter för administratörssidan som vi för närvarande är på. I vårt fall är det "plugins_page_admin-diagram". Du kan alltid kolla denna parameter genom att echo den i din utvecklingsprocess.
Nu när vi har utarbetat en bas för vårt plugin kan vi börja arbeta med vårt kärnmål, dvs hämta data och visa statistik.
Vi vill hämta tre typer av data:
För denna typ av data kan vi använda WP_Query klass för att hämta fem inlägg som har det högsta antalet kommentarer. De WP_Query klassen är till nytta när vi behöver hämta inlägg baserat på olika kriterier. Med den här klassen kan vi lista inlägg på något sätt som vi vill ha. Frågan om att hämta inlägg med högsta antal kommentarer kan skrivas som:
$ posts = new WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); Vi har nu fem inlägg som har det högsta antalet kommentarer, i form av föremål inuti $ inlägg array. Du kan alltid echo variabeln för att se vad du arbetar med.
Vi måste vidarebefordra detta objekt tillsammans med annan viktig information till JavaScript. För det ändamålet kommer vi först att förbereda en matris som innehåller datatypen, diagramtypen som vi behöver rita och slutligen de inlägg som vi just har hämtat genom WP_Query.
$ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'kolumn', 'post_data' => $ post-> inlägg); Vi kan skicka denna variabel till JavaScript genom wp_localize_script:
wp_localize_script ('adminCharts', 'data', $ data); Det första argumentet i funktionsanropet är handtaget för det manus som vi behöver för att överföra data. Vi hade tidigare registrerat det här skriptet. Det andra argumentet är namnet på objektet som kommer att finnas tillgängligt i JavaScript och det sista argumentet är själva data som vi måste överföra. Den slutliga index.php ska se så här ut:
'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'kolumn', 'post_data' => $ post-> inlägg); wp_localize_script ('adminCharts', 'data', $ data); ?>Admin-diagram
Men vi måste se till att WP_Query och wp_localize_script får bara ringas när vi har lämnat in formuläret; Därför omsluter vi dem inuti en annan om uttalande som kontrollerar om formuläret har lämnats in:
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' => 'kolumn', 'post_data' => $ post-> inlägg); wp_localize_script ('adminCharts', 'data', $ data); Det enda som kvarstår är att ta tag i data i vår JavaScript-fil och rita diagrammet. Inuti js / admin_charts.js fil, lägg till följande kod:
(funktion ($) if ('chart_most_popular' == data.data_type) var post_titles = [], post_comment_count = []; $ (data.post_data) .each (funktion () post_titles.push (this.post_title) ; post_comment_count.push (parseInt (this.comment_count));); $ ('# chart-stats'). highcharts (diagram: typ: data.chart_type, titel: text: 'Populäraste inlägg antal kommentarer) ', xAxis: kategorier: post_titles, yAxis: title: text:' Antal kommentarer ', serie: [name:' Comments Count ', data: post_comment_count]); (jQuery)); De $ uppgifter array vi hade gått igenom index.php har förvandlats till ett objekt inne i JavaScript. Vi kan således manipulera det som något annat JavaScript-objekt.
Vi kontrollerar först för datatypen som kommer in:
om ('chart_most_popular' == data.data_type) Sedan har vi initierat två tomma arrays för posttitlar respektive postkommentarer:
var post_titles = [], post_comment_count = [];
Och äntligen har vi blivit itererade genom inläggen och tagit titlarna och kommentarräkningen i de arrays vi har initierat:
$ (data.post_data) .each (funktion () post_titles.push (this.post_title); post_comment_count.push (parseInt (this.comment_count)););
Nu är det dags att faktiskt rita tabellen med de data vi har hämtat, för att vi har använt HighCharts API:
$ '# chart-stats'). highcharts (diagram: typ: data.chart_type, titel: text: 'Mest populära inlägg (efter antal kommentarer)', xAxis: kategorier: post_titles, yAxis : title: text: 'Antal kommentarer', serie: [namn: 'Kommentarer Count', data: post_comment_count]);
Gå nu tillbaka till Plugins> Admin Charts och efter att du har valt ett alternativ från rullgardinsmenyn, klicka på Skicka-knappen, så ska du nu ha ett kolumn för arbetskolumn.
Du kanske vill gå tillbaka till dina inlägg, lägga till några kommentarer och sedan komma tillbaka för att se den uppdaterade statistiken:
Vi kan nu lägga till stöd för fler datatyper i vårt plugin.
Allt vi behöver göra nu är att få fem kategorier som har det högsta antalet inlägg som är associerade. Men före det, låt oss lägga till ett alternativ för denna datatyp i vår valda rullgardinsmeny. Så gå tillbaka till render_admin_charts_page funktion som vi definierat tidigare och uppdatera den enligt följande:
Vi kan använda den inbyggda WordPress-funktionen get_categories och passera i några argument:
$ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); Vi hämtar sedan våra data på samma sätt som vi tidigare gjort:
$ data = array ('data_type' => 'chart_top_cat', 'chart_type' => 'kolumn', 'post_data' => $ kategorier); Så den sista delen av koden ska vara så här:
om ('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' => $ kategorier); wp_localize_script ('adminCharts', 'data', $ data); I admin_charts.js, sätt in den här koden efter om påstående:
annars om ('cart_top_cat' == data.data_type) var cat_titles = [], cat_count = []; $ (data.post_data) .each (funktion () cat_titles.push (this.name); cat_count.push (parseInt (this.count));); $ '# chart-stats'). highcharts (diagram: typ: data.chart_type, titel: text: 'Topp 5 kategorier efter inlägg', xAxis: kategorier: cat_titles, yAxis: title: text: 'Antal inlägg', tickInterval: 5, serie: [namn: 'Post Count', data: cat_count]); Vi gör samma sak som tidigare, men den här gången har vi ändrat diagramtiteln och bildtexten för axlarna. Vi borde nu ha ett annat diagram som visar de fem största kategorierna med flest antal inlägg:
Vår senaste datatyp är uppdelningen av kategorier efter antal inlägg. För denna typ av data använder vi cirkeldiagrammet som det är lämpligt i det här fallet. Observera också att ett enda inlägg kan tillhöra flera kategorier.
Vi kommer att använda samma get_categories funktion men den här gången begränsar vi inte antalet kategorier vi får, i stället måste vi få alla kategorier för att visa uppbrytningen.
Så vi börjar med att kolla om alternativet har valts för denna datatyp och sedan ringa vår funktion för att hämta kategorierna, förbereda vår array och sedan skicka den till JavaScript:
om ('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' => $ kategorier); wp_localize_script ('adminCharts', 'data', $ data); Det är relativt enkelt att rita ett cirkeldiagram. I admin_charts.js, lägg till följande kod efter det befintliga Else-om påstående:
annars om ('chart_cat_breakup' == data.data_type) var number_posts = []; $ (data.post_data) .each (funktion () number_posts.push ([this.name, parseInt (this.count)];;); $ '# chart-stats'). highcharts (title: text: 'Uppdelning av kategorier efter antal inlägg', verktygstips: pointFormat: 'Nummer series.name: spetsig
series.name Dela: Point.percentage: .1f%', serie: [typ:' pie ', namn:' Inlägg ', data: number_posts]); 
Observera att vi har formaterat verktygstipset för att visa procentandel istället för ett heltal. Vi är nästan färdiga förutom en liten nyttafunktion som vi kan lägga till i vart och ett av våra väljalternativ så att den kvarstår när sidan laddas efter att du skickat in formuläret.
Lägg till den här koden innanför index.php efter render_admin_charts_page fungera:
funktion selected_option ($ option) if ($ otpion == $ _POST ['chart_data_type']) echo 'selected = "selected"';
Och ring sedan in funktionen i vart och ett av våra väljalternativ:
Vår plugin är nu klar och du har nu tre arbetsdiagram för olika typer av data. Känn dig fri att leka och lägga till fler diagram för fler datatyper.
I den här handledningen har vi gjort vår egen plugin från grunden och lagt till en separat sida i wp-admin. Vi har också tittat på några av de tekniker som kan vara användbara när du utvecklar för WordPress.
Dessa inkluderar olika sätt att få den obligatoriska informationen om inlägg och kategorier och sedan överföra det till JavaScript så att vi kunde använda det för olika ändamål.
Jag hoppas att du har hittat denna handledning användbar och glöm inte att ge din konstruktiva feedback i kommentarerna.
