Share
Diagrammer er en fin måte å presentere data på. De gjør data mer fordøyelige ved å gjøre det visuelt tiltalende. I WordPress er det ingen innebygd metode for å få innlegg og sidedata i grafisk form.
Selv om det finnes enkelte plugins som integrerer Google Analytics med WordPress, men de er overkill hvis du bare vil få en del av dataene.
Også, ingenting bør holde deg fra å lære nye teknikker og å dykke rett inn i emnet er den beste måten å lære.
Denne opplæringen er rettet mot nye WordPress-utviklere som ønsker å få innblikk i noen nyttige teknikker som vi kan bruke i vår utviklingsprosess. I denne opplæringen skal vi lage vår egen enkle plugin som vil presentere oss data grafisk i WordPress admin. Vi bruker standard WordPress-klasser og funksjoner for å hente data og deretter vise den grafisk i WordPress-administrasjonen ved hjelp av et jQuery-plugin som heter HighCharts.
Vi vil klargjøre vår grunnleggende plugin, legge til en side for den i wp-admin, og bekreft deretter bare vår plugin-JavaScript på den siden. Vi sender da dataene vi hadde hentet til et eksternt skript gjennom bruk av wp_localize_script. I sin tur vil skriptet vise våre data grafisk.
Statistikken som vi planlegger å vise er:
Ifølge deres nettsted:
Highcharts er et kartleggingsbibliotek som er skrevet i ren HTML5 / JavaScript, og tilbyr intuitive, interaktive diagrammer til ditt nettsted eller webapplikasjon. Highcharts støtter for øyeblikket linje, spline, område, områdeskive, kolonne, bar, pie, scatter, vinkelmålere, arearange, areasplinerange, columnrange, bobler, boksplott, feilbarer, trakt, foss og polartyper.
Du kan ta deg en kopi fra deres nettside.
Når det er sagt, la oss begynne å jobbe med vårt plugin.
Vi vil først lage en katalog inni vår wp-innhold / tillegg mappe kalt "admin-diagrammer". På innsiden som la oss lage den første katalogstrukturen for pluginet vårt.
Kopier filen highcharts.js fra katalogen i ZIP-filen du lastet ned fra den offisielle nettsiden til en js mappe:
I rotkatalogen vil vi lage en index.php fil og innsiden vil vi legge til den første deklarasjonen for pluginet vårt:
Nå hvis du går til WP-Admin> Plugins, vil du legge merke til at pluginet blir vist der, men det er ikke funksjonelt ennå.
Vi vil også legge til noen stiler inne i vår admin_charts.css:
#admin_chart_form margin: 30px 0; #admin_chart_form label display: inline-block; bredde: 250px;
Vårt neste skritt ville være å legge til en side for pluginet inne i administrasjonen der vi skulle utføre alle operasjonene. For det vil vi bruke WordPress-handlingen admin_menu. Denne handlingen utløser etter at grunnleggende admin panel meny struktur er på plass og dermed kan brukes til å legge til flere menyer eller undermenyer i admin. Den grunnleggende bruken er som følger:
Vi vil legge til en funksjon chart_add_admin_page inne i vår index.php og koble den til denne handlingen:
Accentsconagua
add_action ('admin_menu', 'chart_add_admin_page'); Inne i vår chart_add_admin_page funksjon vi vil ringe den innfødte WordPress-funksjonen add_plugins_page:
funksjon chart_add_admin_page () add_plugins_page ('Charts For Wordpress', 'Admin Charts', 'administrator', 'admin-charts', 'render_admin_charts_page'); Det første argumentet er sidetittelen som vil bli vist i
Nå, hvis du aktiverer plugin og svinger over "Plugins" -menyen, vil du legge merke til at vi har lagt til en meny for vårt plugin:
På dette stadiet har vi lagt til en tom side for pluginet vårt. Det er på tide å gjøre det funksjonelt ved å utlevere noe innhold.
I vår forrige samtale til add_plugins_page Vi har henvist til en tilbakeringingsfunksjon render_admin_charts_page. Dette er den funksjonen vi har planlagt å utdata alt innholdet vi ønsker å ha på vår side. Så la oss skrive funksjonen.
Under chart_add_admin_page funksjon, legg til følgende kode:
funksjon render_admin_charts_page () ?>Administrasjonskart
Vi legger bare til litt enkel HTML her. Vi har lagt til en overskrift og et skjema i WordPress 'native CSS-klasse "pakke inn".
I skjemaet har vi lagt til en valgboks som for øyeblikket kun har ett alternativ for å vise de mest populære innleggene etter kommentartelling. Under skjemaet har vi lagt til en beholder div for våre diagrammer.
Vår side tar nå form:
Tips: Du bør alltid prøve å integrere med WordPress 'native brukergrensesnitt. Vi har en flott serie av Stephen Harris som dekker emnet. Det er på tide å registrere de nødvendige skript og stiler, slik at vi kan kjenne dem senere. For det vil vi bruke wp_register_script og wp_register_style funksjon som fungerer i samarbeid med handlingen krok admin_enqueue_scripts hvis vi ønsker å enqueue dem på administrasjonssiden.
Men før det, la oss legge til en konstant for vår plugin-rotkatalogen, så vi kan referere til det senere når vi definerer stier for våre skript og stiler. Så, øverst på siden under plugin-erklæringen, legg til denne delen av koden:
define ('ROOT', plugin_dir_url (__FILE__)); Vi kan nå definere vår funksjon for å registrere våre skript og stiler:
add_action ('admin_enqueue_scripts', 'chart_register_scripts'); funksjon chart_register_scripts () wp_register_script ('highCharts', ROOT. 'js / highcharts.js', array ('jquery'), '3.0', sant); wp_register_script ('adminCharts', ROOT. 'js / admin_charts.js', array ('highCharts'), '1.0', true); wp_register_style ('adminChartsStyles', ROOT. 'css / admin_chart.css'); Først har vi registrert HighCharts-skriptet som vi hadde lastet ned tidligere. Vi har gitt det et håndtak "highCharts"For det neste argumentet har vi definert banen hvor den eksisterer.
Deretter har vi bestått en rekke skript som skriptet vårt avhenger av, i dette tilfellet er det jQuery siden vi ville manipulere DOM gjennom jQuery. På denne måten trenger vi ikke å bekymre oss om enqueuing jQuery, det vil bli kalkulert automatisk når vi krever highCharts manus.
For det tredje argumentet har vi definert et versjonsnummer og for det siste argumentet har vi fortalt wp_register_script for å skape skriptet i siden av siden etter hovedinnholdet. På samme måte har vi registrert vårt andre skript hvor vi ville legge til all vår nødvendige JavaScript-kode.
Vi kan nå faktisk skjule våre skript og stiler på vår plugin-side, men vi vil ikke at de skal bli kalkulert på hver enkelt side i administrasjonen der de ikke er nødvendig.
Av den grunn vil vi sjekke for en tilstand før vi legger inn våre skript:
add_action ('admin_enqueue_scripts', 'chart_add_scripts'); funksjon chart_add_scripts ($ hook) if ('plugins_page_admin-charts' == $ krok) wp_enqueue_style ('adminChartsStyles'); wp_enqueue_script ('adminCharts'); Funksjonen som vi hekker med admin_enqueue_scripts Faktisk mottar en parameter for admin siden vi er for tiden. I vårt tilfelle er det "plugins_page_admin-diagrammer". Du kan alltid sjekke denne parameteren ved å ekko den i utviklingsprosessen.
Nå som vi har utarbeidet en base for pluginet vårt, kan vi begynne å jobbe med vårt hovedmål, dvs. å hente data og vise statistikk.
Vi ønsker å hente tre typer data:
For denne typen data kan vi bruke WP_Query klasse for å hente fem innlegg som har høyest antall kommentarer. De WP_Query Klassen kommer til nytte når vi trenger å hente innlegg basert på forskjellige kriterier. Ved hjelp av denne klassen kan vi legge inn innlegg på noen måte vi vil. Spørringen for å hente innlegg med høyest antall kommentarer kan skrives som:
$ posts = new WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); Vi har nå fem innlegg som har høyest antall kommentarer, i form av objekter inne i $ innlegg array. Du kan alltid ekko variabelen for å se hva du jobber med.
Vi må sende dette objektet sammen med andre viktige data til JavaScript. For det formål vil vi først forberede en matrise som vil inneholde datatypen, diagramtypen som vi trenger å tegne, og til slutt innleggene som vi nettopp har hentet gjennom WP_Query.
$ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'kolonne', 'post_data' => $ posts-> innlegg); Vi kan sende denne variabelen til JavaScript gjennom wp_localize_script:
wp_localize_script ('adminCharts', 'data', $ data); Det første argumentet i funksjonssamtalen er håndtaket av skriptet som vi trenger for å sende dataene. Vi hadde registrert dette skriptet tidligere. Det andre argumentet er navnet på objektet som vil være tilgjengelig i JavaScript, og det endelige argumentet er dataene som vi må passere. Finalen index.php skal se slik ut:
'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'kolonne', 'post_data' => $ posts-> innlegg); wp_localize_script ('adminCharts', 'data', $ data); ?>Administrasjonskart
Men vi må sørge for at WP_Query og wp_localize_script bare bli kalt når vi har sendt inn skjemaet; derfor omslutter vi dem inn i en annen hvis uttalelse som kontrollerer om skjemaet er sendt inn:
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' => 'kolonne', 'post_data' => $ posts-> innlegg); wp_localize_script ('adminCharts', 'data', $ data); Det eneste som er igjen, er å ta tak i dataene i vår JavaScript-fil og tegne diagrammet. Inne i JS / admin_charts.js fil, legg til følgende kode:
(funksjon ($) if ('chart_most_popular' == data.data_type) var post_titles = [], post_comment_count = []; $ (data.post_data) .each (funksjon () post_titles.push (this.post_title) ; post_comment_count.push (parseInt (this.comment_count)); $ ('# chart-stats'). highcharts (diagram: type: data.chart_type, tittel: text: 'Mest populære innlegg antall kommentarer) ', xAxis: kategorier: post_titler, yAxis: title: text:' Antall kommentarer ', serie: [navn:' Kommentarer Count ', data: post_comment_count]); (jQuery)); De $ data matrise vi hadde gått gjennom index.php har blitt til en gjenstand inne i JavaScript. Vi kan dermed manipulere det som alle andre JavaScript-objekter.
Vi kontrollerer først datatypen som kommer inn:
hvis ('chart_most_popular' == data.data_type) Deretter har vi initialisert to tomme arrays for posttitler og henholdsvis kommentert tellingstelling:
var post_titles = [], post_comment_count = [];
Og til slutt har vi iterert gjennom innleggene og fanget titlene og kommentarene i arraysene vi har initialisert:
$ (data.post_data) .each (funksjon () post_titles.push (this.post_title); post_comment_count.push (parseInt (this.comment_count)););
Nå er det på tide å faktisk tegne diagrammet ved hjelp av dataene vi har hentet, for det har vi brukt HighCharts API:
$ '# chart-stats'). highcharts (diagram: type: data.chart_type, tittel: text: 'Mest populære innlegg (etter antall kommentarer)', xAxis: kategorier: post_titles, yAxis : title: text: 'Antall kommentarer', serie: [navn: 'Kommentarer Count', data: post_comment_count]);
Gå nå tilbake til Plugins> Admin Charts, og etter å ha valgt et alternativ fra rullegardinmenyen, klikk på send-knappen, nå skal du ha et arbeidskolonne diagram.
Du vil kanskje gå tilbake til innleggene dine, legge til noen kommentarer og deretter komme tilbake for å se den oppdaterte statistikken:
Vi kan nå legge til støtte for flere datatyper i pluginet vårt.
Alt vi trenger å gjøre nå er å få fem kategorier som har det høyeste antallet innlegg som er tilknyttet. Men før det, la oss legge til et alternativ for denne datatypen i vår utvalgte rullegardinmeny. Så gå tilbake til render_admin_charts_page funksjonen vi hadde definert tidligere og oppdatere den som følger:
Vi kan bruke den native WordPress-funksjonen get_categories og passere i noen argumenter:
$ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); Vi henter deretter våre data på samme måte som vi hadde gjort før:
$ data = array ('data_type' => 'chart_top_cat', 'chart_type' => 'kolonne', 'post_data' => $ kategorier); Så den endelige koden skal være slik:
hvis ('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, sett inn denne koden etter hvis uttalelse:
ellers hvis ('cart_top_cat' == data.data_type) var cat_titles = [], cat_count = []; $ (data.post_data) .each (funksjon () cat_titles.push (this.name); cat_count.push (parseInt (this.count));); $ '# chart-stats'). highcharts (diagram: type: data.chart_type, tittel: text: 'Topp 5 kategorier etter innlegg', xAxis: kategorier: cat_titles, yAxis: title: text: 'Antall innlegg', tickInterval: 5, serie: [navn: 'Post Count', data: cat_count]); Vi gjør det samme som før, men denne gangen har vi endret diagramtittel og bildetekster for aksene. Vi burde nå ha et annet diagram som viser de fem beste kategoriene med flest antall innlegg:
Vår siste datatype er oppbrytingen av kategorier etter antall innlegg. For denne typen data bruker vi kakediagrammet slik det er mest hensiktsmessig i dette tilfellet. Vær også oppmerksom på at et enkelt innlegg kan tilhøre flere kategorier.
Vi vil bruke det samme get_categories funksjon, men denne gangen begrenser vi ikke antall kategorier vi får, i stedet må vi få alle kategoriene til å vise oppbrudd.
Så vi begynner med å sjekke om alternativet er valgt for denne datatypen og deretter ring vår funksjon for å hente kategoriene, forberede vårt array og så sende det til JavaScript:
hvis ('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 er relativt enkelt å tegne et kakediagram. I admin_charts.js, Legg til følgende kode etter det eksisterende eller hvis uttalelse:
ellers hvis ('chart_cat_breakup' == data.data_type) var number_posts = []; $ (data.post_data) .each (funksjon () number_posts.push ([this.name, parseInt (this.count)];;); $ '# chart-stats'). highcharts (title: text: 'Oppbrudd av kategorier etter antall innlegg', verktøytips: pointFormat: 'Nummer series.name: Point.y
series.name Del: Point.percentage: 1f%', serie: [type:' pie ', navn:' Innlegg ', data: number_posts]); 
Legg merke til at vi har formatert verktøytipset for å vise prosentandel i stedet for et heltall. Vi er nesten ferdige med unntak av en liten verktøyfunksjon vi kan legge til i hver av våre valgalternativer slik at den vedvarer når siden lastes etter at du har sendt skjemaet.
Legg til denne biten av kode inni index.php etter render_admin_charts_page funksjon:
funksjon selected_option ($ option) if ($ otpion == $ _POST ['chart_data_type']) echo 'selected = "selected"';
Og ring deretter funksjonen i hver av våre valgalternativer:
Vårt plugin er nå ferdig, og du har nå tre arbeidsdiagrammer for ulike typer data. Du kan gjerne spille rundt og legge til flere diagrammer for flere datatyper.
I denne opplæringen laget vi vårt eget plugin fra grunnen og la til en egen side i wp-admin. Vi har også sett på noen av de teknikkene som kan være nyttige når du utvikler for WordPress.
Disse inkluderer forskjellige måter å få den nødvendige informasjonen om innleggene og kategoriene, og deretter overføre det til JavaScript, slik at vi kunne bruke det til forskjellige formål.
Jeg håper at du har funnet denne opplæringen nyttig, og ikke glem å gi din konstruktive tilbakemelding i kommentarene.
