Share
Graficele reprezintă o modalitate excelentă de a prezenta date. Ele fac datele mai digestibile făcând-o vizibilă. În WordPress, nu există o metodă integrată pentru a obține date și pagini într-o formă grafică.
Deși există anumite pluginuri disponibile care integrează Google Analytics cu WordPress, dar sunt depășite dacă doriți să obțineți doar o parte din acele date.
De asemenea, nimic nu vă va împiedica să învățați noi tehnici și să vă aruncați direct în subiect este cel mai bun mod de a învăța.
Acest tutorial vizează noii dezvoltatori WordPress care doresc să înțeleagă câteva tehnici utile pe care le putem folosi în procesul nostru de dezvoltare. În acest tutorial, vom face propriul plugin simplu care ne va prezenta datele grafic în cadrul administratorului WordPress. Vom folosi clasele și funcțiile WordPress standard pentru a prelua datele și apoi le vom afișa grafic în administratorul WordPress cu ajutorul unui plugin jQuery numit HighCharts.
Vom pregăti plugin-ul nostru de bază, vom adăuga o pagină pentru el în wp-admin și apoi vom închide JavaScript plugin-ul nostru numai pe acea pagină. Apoi vom transmite datele pe care le-am adus la un script extern prin utilizarea lui wp_localize_script. La rândul său, scriptul ne va afișa datele în mod grafic.
Statisticile pe care intenționăm să le afișăm sunt:
Potrivit site-ului lor:
Highcharts este o bibliotecă de diagrame scrisă în HTML5 / JavaScript pur, oferind diagrame intuitive și interactive pentru site-ul dvs. web sau pentru aplicația web. Highcharts suportă în prezent linia, spline, zona, zonele, coloanele, barele, plăcile, scatterul, marginea angulară, arearange, areasplinerange, columnrange, bubble,.
Puteți lua o copie de pe site-ul lor.
Acestea fiind spuse, să începem să lucrăm la plugin-ul nostru.
Mai întâi vom face un director în interiorul nostru wp-content / plugins dosarul numit "admin-diagrame"În interiorul căruia să facem structura inițială a directorului pentru plugin-ul nostru.
Copiați fișierul highcharts.js din directorul din fișierul ZIP pe care l-ați descărcat de pe site-ul oficial, la un js pliant:
În directorul rădăcină, vom face a index.php fișier și în interiorul căruia vom adăuga declarația inițială pentru pluginul nostru:
Acum, dacă accesați WP-Admin> Plugin-uri, veți observa că plugin-ul este afișat acolo, dar nu este încă funcțional.
Vom adăuga, de asemenea, unele stiluri în interiorul nostru admin_charts.css:
#admin_chart_form margin: 30px 0; #admin_chart_form etichetă display: inline-block; lățime: 250px;
Următorul nostru pas ar fi să adăugăm o pagină pentru pluginul din interiorul adminului în care să efectuăm toate operațiile. Pentru aceasta, vom folosi acțiunea WordPress admin_menu. Această acțiune declanșează după ce structura de meniu a panoului de administrare de bază este instalată și poate fi utilizată pentru a adăuga mai multe meniuri sau submeniuri în admin. Utilizarea de bază este după cum urmează:
Am adăuga o funcție chart_add_admin_page în interiorul nostru index.php și apoi l-ați cuplat în această acțiune:
Accentsconagua
add_action ('admin_menu', 'chart_add_admin_page'); În interiorul nostru chart_add_admin_page vom numi funcția WordPress nativă add_plugins_page:
funcția chart_add_admin_page () add_plugins_page ("Diagrame pentru Wordpress", "Diagrame de administrare", "administrator", "diagrame de administrare", "render_admin_charts_page"); Primul argument este titlul paginii care va fi afișat în
Acum, dacă activați pluginul și plasați cursorul peste meniul "Pluginuri", veți observa că am adăugat cu succes un meniu pentru pluginul nostru:
În această etapă, am adăugat cu succes o pagină goală pentru pluginul nostru. Este timpul să-l facem funcțional prin afișarea unui anumit conținut.
În apelul nostru anterior către add_plugins_page ne-am referit la o funcție de apel invers render_admin_charts_page. Aceasta este funcția pe care am planificat să o scoatem din conținutul pe care vrem să-l avem pe pagina noastră. Deci, să scriem funcția.
Sub chart_add_admin_page funcția, adăugați următorul cod:
funcția render_admin_charts_page () ?>Diagrame de administrare
Adăugăm doar câteva HTML simple aici. Am adăugat o rubrică și un formular în interiorul clasei CSS native CSS "împacheta".
În interiorul formularului, am adăugat o casetă selectată care are în prezent doar o singură opțiune pentru afișarea celor mai populare postări după numărul de comentarii. Sub forma am adăugat un container div pentru graficele noastre.
Pagina noastră este în prezent formată:
Bacsis: Întotdeauna trebuie să încercați să vă integrați în interfața UI de la WordPress. Avem o serie serioasă de Stephen Harris care acoperă subiectul. Este momentul să înregistrați scripturile și stilurile necesare pentru a le putea enerva mai târziu. Pentru asta, vom folosi wp_register_script și wp_register_style care funcționează în colaborare cu cârligul de acțiune admin_enqueue_scripts dacă vrem să le scoatem din administrare.
Dar, înainte de aceasta, să adăugăm o constantă pentru directorul rădăcină al plugin-ului nostru, astfel încât să ne putem referi mai târziu când definim căi pentru scenariile și stilurile noastre. Deci, în partea de sus a paginii sub declarația pluginului, adăugați acest cod de cod:
define ('ROOT', plugin_dir_url (__FILE__)); Putem defini acum funcția noastră de a înregistra scripturile și stilurile noastre:
add_action ('admin_enqueue_scripts', 'chart_register_scripts'); funcția 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'); În primul rând, am înregistrat scriptul HighCharts pe care l-am descărcat mai devreme. I-am dat un mâner "highCharts"Pentru următorul argument, am definit calea în care există.
Apoi, am trecut o serie de scenarii pe care depinde scriptul nostru, în acest caz este jQuery, deoarece vom manipula DOM prin jQuery. În acest fel, nu va trebui să ne facem griji cu privire la introducerea jQuery, ci va fi enqueued în mod automat ori de câte ori intrăm highCharts scenariu.
Pentru al treilea argument, am definit un număr de versiune iar pentru ultimul argument am spus wp_register_script pentru a închide scriptul în subsolul paginii după conținutul principal. În același mod, am înregistrat al doilea script în care adăugăm tot codul nostru JavaScript necesar.
Putem acum să enqueue script-urile noastre și stilurile noastre pe pagina de plugin-ul nostru, dar nu vrem ca acestea să fie enqueued pe fiecare pagină din admin unde nu sunt necesare.
Din acest motiv, vom verifica o condiție înainte de a ne encrima scripturile:
add_action ('admin_enqueue_scripts', 'chart_add_scripts'); funcția chart_add_scripts ($ hook) if ('plugins_page_admin-charts' == $ hook) wp_enqueue_style ('adminChartsStyles'); wp_enqueue_script ('adminCharts'); Funcția cu care ne-am legat admin_enqueue_scripts primește de fapt un parametru pentru pagina de admin pe care suntem în prezent. În cazul nostru, este "plugins_page_admin-diagrame"Puteți verifica întotdeauna acest parametru prin ecouarea acestuia în procesul de dezvoltare.
Acum, că am pregătit o bază pentru pluginul nostru, putem începe să lucrăm la obiectivul nostru principal, și anume să preluăm datele și să afișăm statistici.
Dorim să preluăm trei tipuri de date:
Pentru acest tip de date, putem folosi WP_Query pentru a aduce cele cinci posturi care au cel mai mare număr de comentarii. WP_Query clasa vine la îndemână atunci când avem nevoie pentru a prelua posturi pe baza unor criterii diferite. Folosind această clasă, putem lista postările în orice fel dorim. Interogarea pentru preluarea postărilor cu cel mai mare număr de comentarii poate fi scrisă ca:
$ post = noul WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); Acum avem cinci posturi care au cel mai mare număr de comentarii, sub forma obiectelor din interiorul posturi $ matrice. Puteți reflecta întotdeauna variabila pentru a vedea cu ce lucrați.
Trebuie să transmitem acest obiect împreună cu alte date esențiale către JavaScript. În acest scop, vom pregăti mai întâi o matrice care va conține tipul de date, tipul de diagramă pe care trebuie să îl desenați și, în final, posturile pe care tocmai le-am atras WP_Query.
$ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'coloana', 'post_data' => $ posts-> posts); Putem trece această variabilă la JavaScript prin intermediul wp_localize_script:
wp_localize_script ("adminCharts", "date", $ date); Primul argument din apelul funcției este mânerul scriptului la care trebuie să transmitem datele. Am înregistrat acest script mai devreme. Al doilea argument este numele obiectului care va fi disponibil în JavaScript, iar argumentul final este datele în sine pe care trebuie să le trecem. Finala index.php ar trebui să arate astfel:
'post', 'orderby' => 'comment_count', 'comanda' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'coloana', 'post_data' => $ posts-> posts); wp_localize_script ("adminCharts", "date", $ date); ?>Diagrame de administrare
Dar trebuie să ne asigurăm asta WP_Query și wp_localize_script primiți doar atunci când am trimis formularul; prin urmare, îi încadram în interiorul altui dacă declarație care verifică dacă formularul a fost depus:
dacă is_set (_post 'show_chart'])) if ('chart_most_popular' == $ _POST ['chart_data_type']) $ posts = new WP_Query (array (post_type = => 'comment_count', 'comanda' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'coloana', 'post_data' => $ posts-> posts); wp_localize_script ("adminCharts", "date", $ date); Singurul lucru pe care l-am lăsat acum este să prindeți datele din fișierul JavaScript și să desenați graficul. În interiorul js / admin_charts.js fișier, adăugați următorul cod:
(funcția ($) if ('map_most_popular' == data.data_type) var post_titles = [], post_comment_count = []; $ (data.post_data) .each (function () post_titles.push (this.post_title) (chart: type: data.chart_type, title: text: "Cele mai populare postări (după numărul de comentarii) ', xAxis: categories: post_titles, yAxis: title: text:' Numărul de comentarii ', seria: [name:' Comments Count ', data: post_comment_count]); (jQuery)); $ date am trecut prin index.php sa transformat într-un obiect în interiorul JavaScript. Astfel putem manipula ca orice alt obiect JavaScript.
Verificăm mai întâi tipul de date care vine în:
dacă ('chart_most_popular' == data.data_type) Apoi am inițializat două tablouri goale pentru titlurile postului și, respectiv, numărul de comentarii:
var post_titles = [], post_comment_count = [];
Și în cele din urmă am repetat prin posturi și am apucat titlurile și comentând numărătoarea în matricele pe care le-am inițializat:
$ (date.post_data). fiecare (funcția () post_titles.push (this.post_title); post_comment_count.push (parseInt (this.comment_count)););
Acum este momentul să tragem graficul utilizând datele pe care le-am preluat, pentru că am folosit API-ul HighCharts:
(text: "Cele mai populare postări (după numărul de comentarii)", xAxis: categories: post_titles, yAxis : title: text: 'Numărul de comentarii', seria: [name: 'Count Count', data: post_comment_count]);
Acum, reveniți la Pluginurile> Diagramele de administrare și după ce selectați o opțiune din meniul derulant, faceți clic pe butonul Trimiteți, acum ar trebui să aveți o diagramă a coloanelor de lucru.
Poate doriți să vă întoarceți la postările dvs., să adăugați câteva comentarii și apoi să reveniți pentru a vedea statisticile actualizate:
Acum putem adăuga suport pentru mai multe tipuri de date în pluginul nostru.
Tot ce trebuie să facem acum este să obținem cinci categorii care au cel mai mare număr de posturi asociate. Dar înainte de aceasta, să adăugăm o opțiune pentru acest tip de date în meniul nostru selectat. Deci, du-te înapoi la render_admin_charts_page funcția pe care am definit-o mai devreme și o actualizăm după cum urmează:
Putem folosi funcția WordPress nativă get_categories și treceți în câteva argumente:
$ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); Apoi, preluăm datele noastre în același mod ca și noi:
$ data = array ('data_type' => 'chart_top_cat', 'chart_type' => 'coloana', 'post_data' => categorii $); Deci, ultimul cod de cod ar trebui să fie astfel:
dacă ('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' => categorii $); wp_localize_script ("adminCharts", "date", $ date); În admin_charts.js, introduceți acest cod după dacă afirmație:
altfel dacă ('cart_top_cat' == date.data_type) var cat_titles = [], cat_count = []; $ (date.post_data). fiecare (functie () cat_titles.push (this.name); cat_count.push (parseInt (acest.count));); $ top-of-the-art Categorii: Categorii: Categorii: text: 'Numărul de postări', tickInterval: 5, seria: [name: 'Post Count', data: cat_count]); Facem același lucru ca înainte, dar de data aceasta am schimbat titlul de diagramă și legendele pentru axe. Ar trebui să avem acum o altă diagramă care să afișeze primele cinci categorii cu cel mai mare număr de postări:
Ultimul tip de date este divizarea categoriilor după numărul de postări. Pentru acest tip de date, vom folosi diagrama plăcilor în acest caz. De asemenea, rețineți că o singură postare ar putea aparține mai multor categorii.
Vom folosi aceleași lucruri get_categories dar de data aceasta nu limităm numărul de categorii pe care le primim, în schimb trebuie să obținem toate categoriile pentru a arăta despărțirea.
Așadar, vom începe prin a verifica dacă opțiunea a fost selectată pentru acest tip de date și apoi apelați funcția noastră pentru a prelua categoriile, a pregăti matricea noastră și apoi a le transmite la JavaScript:
dacă ('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' => categorii $); wp_localize_script ("adminCharts", "date", $ date); Este relativ simplu să desenați o diagrama plăcintă. În admin_charts.js, adăugați următorul cod după cel existent altfel, dacă afirmație:
altfel dacă ('chart_cat_breakup' == data.data_type) var number_posts = []; $ (date.post_data). fiecare (funcția () numărul_posts.push ([this.name, parseInt (this.count)]);); $ ('chart-stats'). highcharts (title: text: 'Breakup de Categorii după numărul de mesaje', tooltip: pointFormat: 'Number series.name ascutit
serial.name Trimiteți: Point.percentage: .1f%', seria: [tip: "plăcintă", nume: "Mesaje", date: număr_posturi]); 
Rețineți că am formatat indicația pentru a afișa procentul în loc de un întreg. Aproape am terminat, cu excepția unei mici funcții de utilitate pe care o putem adăuga la fiecare dintre opțiunile selectate, astfel încât să persiste în momentul încărcării paginii după trimiterea formularului.
Adăugați acest bit de cod înăuntru index.php după render_admin_charts_page funcţie:
funcția select_option ($ opțiune) if ($ otpion == $ _POST ['chart_data_type']) echo 'selected = "selectat"';
Apoi, apelați funcția din interiorul fiecărei opțiuni selectate:
Pluginul nostru este acum finalizat și acum aveți trei diagrame de lucru pentru diferite tipuri de date. Simțiți-vă liber să jucați și să adăugați mai multe diagrame pentru mai multe tipuri de date.
În acest tutorial am făcut propriul plugin de la bază și am adăugat o pagină separată în wp-admin. De asemenea, ne-am uitat la câteva dintre tehnicile care pot fi utile atunci când se dezvoltă pentru WordPress.
Acestea includ modalități diferite de a obține informațiile necesare despre postări și categorii și apoi să le transmiteți JavaScript, astfel încât să îl putem folosi în scopuri diferite.
Sper că ați găsit acest tutorial util și nu uitați să furnizați feedback constructiv în comentarii.
