Share
I grafici sono un ottimo modo per presentare i dati. Rendono i dati più digeribili rendendoli visivamente attraenti. In WordPress, non esiste un metodo incorporato per ottenere i dati di post e pagine in una forma grafica.
Sebbene, ci siano alcuni plugin disponibili che integrano Google Analytics con WordPress, ma sono eccessivi se si desidera ottenere solo una parte di tali dati.
Inoltre, nulla dovrebbe impedirti di apprendere nuove tecniche e di immergerti direttamente nell'argomento è il modo migliore per imparare.
Questo tutorial si rivolge ai nuovi sviluppatori di WordPress che desiderano approfondire alcune tecniche utili che possiamo utilizzare nel nostro processo di sviluppo. In questo tutorial, creeremo il nostro semplice plugin che ci presenterà i dati graficamente all'interno dell'amministratore di WordPress. Useremo classi e funzioni standard di WordPress per recuperare i dati e visualizzarli graficamente nell'amministratore di WordPress con l'aiuto di un plugin jQuery chiamato HighCharts.
Prepareremo il nostro plugin di base, aggiungeremo una pagina per questo nel wp-admin e quindi accodare il codice JavaScript del nostro plugin solo su quella pagina. Passeremo quindi i dati che abbiamo recuperato su uno script esterno tramite l'uso di wp_localize_script. A sua volta, lo script mostrerà i nostri dati graficamente.
Le statistiche che intendiamo mostrare sono:
Secondo il loro sito:
Highcharts è una libreria di diagrammi scritta in puro HTML5 / JavaScript, che offre grafici intuitivi e interattivi sul tuo sito web o applicazione web. Grafici elevati attualmente supporta linee linea, spline, area, areepline, colonne, barre, piezometri, spaziature, spigoli angolari, arearange, areeplinerange, columnrange, bolle, riquadrature di caselle, barre di errore, imbuto, cascata e polari.
Puoi prenderti una copia dal loro sito web.
Detto questo, iniziamo a lavorare sul nostro plugin.
Prima creeremo una directory all'interno della nostra wp-content / plugins cartella denominata "admin-grafici"All'interno di questo facciamo la struttura della directory iniziale per il nostro plugin.
Copia il file highcharts.js dalla directory nel file ZIP scaricato dal sito Web ufficiale a js cartella:
Nella directory root, faremo un index.php file e dentro che aggiungeremo la dichiarazione iniziale per il nostro plugin:
Ora se vai su WP-Admin> Plugin, noterai che il plug-in viene mostrato lì, ma non è ancora funzionante.
Aggiungeremo anche alcuni stili all'interno del nostro admin_charts.css:
#admin_chart_form margin: 30px 0; #admin_chart_form label display: inline-block; larghezza: 250 px;
Il nostro prossimo passo sarebbe quello di aggiungere una pagina per il plugin all'interno dell'amministratore in cui dovremmo eseguire tutte le operazioni. Per questo, useremo l'azione WordPress admin_menu. Questa azione si attiva dopo che la struttura del menu del pannello di amministrazione di base è a posto e quindi può essere utilizzata per aggiungere più menu o sottomenu nell'amministratore. L'utilizzo di base è il seguente:
Vorremmo aggiungere una funzione chart_add_admin_page dentro il nostro index.php e quindi agganciarlo a questa azione:
Accentsconagua
add_action ('admin_menu', 'chart_add_admin_page'); Dentro il nostro chart_add_admin_page funzione chiameremo la funzione nativa di WordPress add_plugins_page:
function chart_add_admin_page () add_plugins_page ('Charts For Wordpress', 'Admin Chart', 'administrator', 'admin-charts', 'render_admin_charts_page'); Il primo argomento è il titolo della pagina che verrà mostrato nel
Ora se attivi il plug-in e tieni il mouse sopra il menu "Plugin", noterai che abbiamo aggiunto con successo un menu per il nostro plug-in:
In questa fase, abbiamo aggiunto con successo una pagina vuota per il nostro plug-in. È ora di renderlo funzionale emettendo alcuni contenuti.
Nella nostra precedente chiamata a add_plugins_page ci siamo riferiti a una funzione di callback render_admin_charts_page. Questa è la funzione che abbiamo programmato per produrre tutto il contenuto che vogliamo avere sulla nostra pagina. Quindi scriviamo la funzione.
Sotto il chart_add_admin_page funzione, aggiungi il seguente codice:
function render_admin_charts_page () ?>Grafici di amministrazione
Stiamo solo aggiungendo del semplice HTML qui. Abbiamo aggiunto un'intestazione e un modulo all'interno della classe CSS nativa di WordPressavvolgere".
All'interno del modulo, abbiamo aggiunto una casella di selezione che al momento ha solo un'opzione per mostrare i post più popolari in base al numero di commenti. Sotto il modulo abbiamo aggiunto un contenitore div per i nostri grafici.
La nostra pagina sta prendendo forma:
Mancia: Dovresti sempre provare ad integrarti con l'interfaccia utente nativa di WordPress. Abbiamo una grande serie di Stephen Harris che copre l'argomento. È ora di registrare gli script e gli stili necessari in modo da poterli accodare in seguito. Per questo, useremo il wp_register_script e wp_register_style funzione che funziona in collaborazione con il gancio di azione admin_enqueue_scripts se vogliamo accodarli sul lato amministrativo.
Ma prima, aggiungiamo una costante per la nostra directory root dei plugin in modo che possiamo riferirci in seguito quando definiremo i percorsi per i nostri script e stili. Quindi, nella parte superiore della pagina sotto la dichiarazione del plugin, aggiungi questo bit di codice:
define ('ROOT', plugin_dir_url (__FILE__)); Ora possiamo definire la nostra funzione per registrare i nostri script e stili:
add_action ('admin_enqueue_scripts', 'chart_register_scripts'); function chart_register_scripts () wp_register_script ('highCharts', ROOT. 'js / highcharts.js', array ('jquery'), '3.0', vero); wp_register_script ('adminCharts', ROOT. 'js / admin_charts.js', array ('highCharts'), '1.0', vero); wp_register_style ('adminChartsStyles', ROOT. 'css / admin_chart.css'); Innanzitutto, abbiamo registrato lo script HighCharts che avevamo scaricato in precedenza. Gli abbiamo dato una maniglia "HighchartsPer il prossimo argomento, abbiamo definito il percorso in cui esiste.
Successivamente, abbiamo passato una serie di script da cui dipende il nostro script, in questo caso è jQuery dal momento che dovremmo manipolare il DOM attraverso jQuery. In questo modo, non dovremo preoccuparci di accodare jQuery, sarà accodato automaticamente ogni volta che accodare il Highcharts copione.
Per il terzo argomento, abbiamo definito un numero di versione e per l'ultimo argomento, abbiamo detto al wp_register_script per accodare lo script nel piè di pagina dopo il contenuto principale. Allo stesso modo, abbiamo registrato il nostro secondo script in cui aggiungeremo tutto il nostro codice JavaScript necessario.
Ora possiamo in realtà accodare i nostri script e stili alla nostra pagina di plugin, ma non vogliamo che siano accodati ad ogni singola pagina nell'admin dove non sono necessari.
Per questo motivo, controlleremo una condizione prima di accodare i nostri script:
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 funzione con cui agganciamo admin_enqueue_scripts riceve effettivamente un parametro per la pagina di amministrazione in cui ci troviamo attualmente. Nel nostro caso, è "plugins_page_admin-graficiMsgstr "Puoi sempre controllare questo parametro riecheggiandolo nel tuo processo di sviluppo.
Ora che abbiamo preparato una base per il nostro plug-in, possiamo iniziare a lavorare sul nostro obiettivo principale: recupero dei dati e visualizzazione delle statistiche.
Vogliamo recuperare tre tipi di dati:
Per questo tipo di dati, possiamo usare il WP_Query classe per recuperare cinque post con il maggior numero di commenti. Il WP_Query la classe è utile quando dobbiamo recuperare i messaggi in base a criteri diversi. Usando questa classe, possiamo elencare i post nel modo che vogliamo. La query per recuperare i post con il maggior numero di commenti può essere scritta come:
$ posts = new WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); Ora abbiamo cinque post con il maggior numero di commenti, sotto forma di oggetti all'interno di $ messaggi array. Puoi sempre echo la variabile per vedere con cosa stai lavorando.
Abbiamo bisogno di passare questo oggetto insieme ad altri dati essenziali al JavaScript. A tale scopo, prepareremo prima un array che conterrà il tipo di dati, il tipo di grafico che dobbiamo disegnare e infine i post che abbiamo appena recuperato WP_Query.
$ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'column', 'post_data' => $ posts-> posts); Possiamo passare questa variabile a JavaScript attraverso wp_localize_script:
wp_localize_script ('adminCharts', 'data', $ data); Il primo argomento nella chiamata alla funzione è l'handle dello script a cui dobbiamo passare i dati. Avevamo registrato questo script in precedenza. Il secondo argomento è il nome dell'oggetto che sarà disponibile in JavaScript e l'argomento finale è il dato stesso che dobbiamo passare. Il finale index.php dovrebbe assomigliare a questo:
'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'column', 'post_data' => $ posts-> posts); wp_localize_script ('adminCharts', 'data', $ data); ?>Grafici di amministrazione
Ma dobbiamo assicurarci che WP_Query e wp_localize_script viene chiamato solo quando abbiamo inviato il modulo; quindi, li stiamo racchiudendo in un altro Se dichiarazione che controlla se il modulo è stato inviato:
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-> posts); wp_localize_script ('adminCharts', 'data', $ data); L'unica cosa rimasta adesso è prendere i dati all'interno del nostro file JavaScript e disegnare il grafico. Dentro il JS / admin_charts.js file, aggiungi il seguente codice:
(function ($) 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: tipo: data.chart_type, titolo: testo: 'Messaggi più popolari (di numero di commenti) ', xAxis: categories: post_titles, yAxis: title: text:' Numero di commenti ', serie: [name:' Commenti Count ', dati: post_comment_count]); (jQuery)); Il $ data array che avevamo attraversato index.php è diventato un oggetto all'interno di JavaScript. Possiamo quindi manipolarlo come qualsiasi altro oggetto JavaScript.
Per prima cosa controlliamo il tipo di dati in arrivo:
if ('chart_most_popular' == data.data_type) Quindi abbiamo inizializzato due array vuoti per i titoli dei post e il conteggio dei commenti rispettivamente:
var post_titles = [], post_comment_count = [];
E infine abbiamo iterato attraverso i post e abbiamo afferrato i titoli e il conteggio dei commenti negli array che abbiamo inizializzato:
$ (data.post_data) .each (function () post_titles.push (this.post_title); post_comment_count.push (parseInt (this.comment_count)););
Ora è il momento di disegnare il grafico usando i dati che abbiamo recuperato, per questo abbiamo utilizzato l'API HighCharts:
$ ('# chart-stats'). highcharts (chart: tipo: data.chart_type, titolo: testo: 'Messaggi più popolari (per numero di commenti)', xAxis: categorie: post_titoli, yAxis : title: text: 'Numero di commenti', serie: [nome: 'Conteggio commenti', dati: post_comment_count]); Ora torna ai tuoi Plugin> Grafici di amministrazione e dopo aver selezionato un'opzione dal menu a discesa, fai clic sul pulsante di invio, ora dovresti avere un grafico a colonne funzionante.
Potresti voler tornare ai tuoi post, aggiungere alcuni commenti e poi tornare per vedere le statistiche aggiornate:
Ora possiamo aggiungere il supporto per più tipi di dati nel nostro plugin.
Tutto quello che dobbiamo fare ora è ottenere cinque categorie con il maggior numero di post associati. Ma prima, aggiungiamo un'opzione per questo tipo di dati nel nostro menu a discesa di selezione. Quindi torna al render_admin_charts_page funzione che avevamo definito in precedenza e aggiornarlo come segue:
Possiamo usare la funzione nativa di WordPress get_categories e passare alcuni argomenti:
$ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc'))); Quindi recuperiamo i nostri dati nello stesso modo in cui lo avevamo fatto prima:
$ data = array ('data_type' => 'chart_top_cat', 'chart_type' => 'column', 'post_data' => $ categorie); Quindi la parte finale del codice dovrebbe essere così:
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' => $ categorie); wp_localize_script ('adminCharts', 'data', $ data); Nel admin_charts.js, inserisci questo codice dopo il Se dichiarazione:
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, titolo: text: 'Top 5 Categories by Posts', xAxis: categories: cat_titles, yAxis: title: testo: 'Numero di post', tickInterval: 5, serie: [nome: 'Post Count', dati: cat_count]); Stiamo facendo la stessa cosa di prima, ma questa volta abbiamo cambiato il titolo del grafico e le didascalie per gli assi. Dovremmo ora avere un altro grafico che mostri le prime cinque categorie con il maggior numero di post:
Il nostro ultimo tipo di dati è la separazione delle categorie per numero di post. Per questo tipo di dati, utilizzeremo il grafico a torta come è più appropriato in questo caso. Si noti inoltre che un singolo post potrebbe appartenere a più categorie.
Useremo lo stesso get_categories funzione ma questa volta non stiamo limitando il numero di categorie che otteniamo, ma abbiamo bisogno di ottenere tutte le categorie per mostrare la rottura.
Quindi inizieremo controllando se l'opzione è stata selezionata per questo tipo di dati e quindi chiama la nostra funzione per recuperare le categorie, preparare il nostro array e quindi passarlo al codice 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' => $ categorie); wp_localize_script ('adminCharts', 'data', $ data); È relativamente semplice disegnare un grafico a torta. Nel admin_charts.js, aggiungi il seguente codice dopo quello esistente else-if dichiarazione:
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: 'Breakup of Categories by Number of Posts', tooltip: pointFormat: 'Number series.name: Punto.Ý
series.name Condividi: Point.percentage: .1f%', serie: [type:' pie ', nome:' Posts ', data: number_posts]); 
Nota che abbiamo formattato il suggerimento per mostrare la percentuale invece di un intero. Abbiamo quasi finito, fatta eccezione per una piccola funzione di utilità che possiamo aggiungere a ciascuna delle nostre opzioni di selezione in modo che continui quando la pagina viene caricata dopo aver inviato il modulo.
Aggiungi questo pezzo di codice all'interno index.php dopo il render_admin_charts_page funzione:
function selected_option ($ option) if ($ otpion == $ _POST ['chart_data_type']) echo 'selected = "selected"';
E poi chiama la funzione all'interno di ciascuna delle nostre opzioni di selezione:
Il nostro plug-in è ora completato e ora disponi di tre grafici di lavoro per diversi tipi di dati. Sentiti libero di giocare e aggiungi più grafici per più tipi di dati.
In questo tutorial abbiamo creato il nostro plugin da zero e aggiunto una pagina separata nel wp-admin. Abbiamo anche esaminato alcune delle tecniche che possono essere utili durante lo sviluppo di WordPress.
Questi includono diversi modi per ottenere le informazioni richieste sui post e sulle categorie e quindi passarle a JavaScript in modo da poterle utilizzare per scopi diversi.
Spero che tu abbia trovato utile questo tutorial e non dimenticare di fornire il tuo feedback costruttivo nei commenti.
