Share
Diagramme sind eine großartige Möglichkeit, Daten darzustellen. Sie machen Daten leichter verdaulich, indem sie sie optisch ansprechend machen. In WordPress gibt es keine integrierte Methode zum Abrufen von Posts und Seitendaten in grafischer Form.
Es gibt zwar bestimmte Plugins, die Google Analytics mit WordPress integrieren, sie sind jedoch übertrieben, wenn Sie nur einen Teil dieser Daten erhalten möchten.
Auch sollte nichts Sie davon abhalten, neue Techniken zu erlernen, und direkt in das Thema einzutauchen, ist der beste Weg, um zu lernen.
Dieses Tutorial richtet sich an neue WordPress-Entwickler, die Einblick in einige nützliche Techniken erhalten möchten, die wir in unserem Entwicklungsprozess verwenden können. In diesem Tutorial erstellen wir ein eigenes einfaches Plugin, das uns Daten grafisch innerhalb des WordPress-Administrators darstellt. Wir werden standardmäßige WordPress-Klassen und -Funktionen verwenden, um Daten abzurufen und diese dann mithilfe eines jQuery-Plugins namens HighCharts grafisch im WordPress-Administrator anzuzeigen.
Wir bereiten unser Basis-Plugin vor, fügen im Wp-Admin eine Seite hinzu und geben dann das JavaScript des Plugins nur auf dieser Seite ein. Wir werden dann die Daten, die wir abgerufen haben, durch die Verwendung von an ein externes Skript übergeben wp_localize_script. Das Skript zeigt unsere Daten wiederum grafisch an.
Die Statistiken, die wir zeigen wollen, sind:
Laut ihrer Website:
Highcharts ist eine Diagrammbibliothek, die in reinem HTML5 / JavaScript geschrieben ist und intuitive, interaktive Diagramme für Ihre Website oder Webanwendung bietet. Highcharts unterstützt derzeit Linien-, Spline-, Flächen-, Flächen-, Säulen-, Balken-, Torten-, Streu-, Winkelanzeigen, Flächenbereiche, Flächenunterschiede, Säulenbereiche, Bläschen, Boxdiagramm, Fehlerbalken, Trichter-, Wasserfall- und Polardiagrammtypen.
Sie können sich eine Kopie von ihrer Website holen.
Beginnen wir mit der Arbeit an unserem Plugin.
Wir werden zuerst ein Verzeichnis in unserem erstellen WP-Inhalt / Plugins Ordner mit dem Namen "Admin-Diagramme". Innen erstellen wir die anfängliche Verzeichnisstruktur für unser Plugin.
Kopieren Sie die Datei highcharts.js von dem Verzeichnis in der ZIP-Datei, die Sie von der offiziellen Website heruntergeladen haben, in ein Verzeichnis js Mappe:
Im Stammverzeichnis werden wir eine index.php Datei und darin werden wir die erste Deklaration für unser Plugin hinzufügen:
Wenn Sie nun zu WP-Admin> Plugins gehen, werden Sie feststellen, dass das Plugin dort angezeigt wird, aber noch nicht funktionsfähig ist.
Wir werden auch einige Stile in unsere einfügen admin_charts.css:
#admin_chart_form margin: 30px 0; #admin_chart_form label display: Inline-Block; Breite: 250px;
Unser nächster Schritt wäre, eine Seite für das Plugin im Admin hinzuzufügen, auf der wir alle Operationen ausführen würden. Dafür verwenden wir die WordPress-Aktion admin_menu. Diese Aktion wird ausgelöst, nachdem die grundlegende Menüstruktur des Admin-Panels vorhanden ist. Sie kann daher verwendet werden, um weitere Menüs oder Untermenüs im Admin hinzuzufügen. Die grundlegende Verwendung ist wie folgt:
Wir würden eine Funktion hinzufügen chart_add_admin_page in unserem index.php und haken Sie es in diese Aktion ein:
Accentsconagua
add_action ('admin_menu', 'chart_add_admin_page'); In unserem chart_add_admin_page Funktion rufen wir die native WordPress-Funktion auf add_plugins_page:
function chart_add_admin_page () add_plugins_page ('Diagramme für Wordpress', 'Admin-Diagramme', 'Administrator', 'Admin-Diagramme', 'render_admin_charts_page'); Das erste Argument ist der Seitentitel, der im angezeigt wird
Wenn Sie nun das Plugin aktivieren und den Mauszeiger über das Menü "Plugins" bewegen, werden Sie feststellen, dass wir erfolgreich ein Menü für unser Plugin hinzugefügt haben:
Zu diesem Zeitpunkt haben wir erfolgreich eine leere Seite für unser Plugin hinzugefügt. Es ist an der Zeit, es durch Ausgabe von Inhalten funktionsfähig zu machen.
In unserem vorherigen Anruf an add_plugins_page Wir haben auf eine Rückruffunktion verwiesen render_admin_charts_page. Dies ist die Funktion, die wir geplant haben, um alle Inhalte auszugeben, die wir auf unserer Seite haben möchten. Also schreiben wir die Funktion.
Unter dem chart_add_admin_page Funktion, fügen Sie den folgenden Code hinzu:
Funktion render_admin_charts_page () ?>Admin-Diagramme
Wir fügen hier nur ein paar einfache HTML ein. Wir haben eine Überschrift und ein Formular in die native CSS-Klasse von WordPress eingefügt.wickeln".
Innerhalb des Formulars haben wir ein Auswahlfeld hinzugefügt, das derzeit nur eine Option zum Anzeigen der beliebtesten Beiträge nach Anzahl der Kommentare enthält. Unter dem Formular haben wir einen Container hinzugefügt div für unsere Charts.
Unsere Seite nimmt jetzt Form an:
Spitze: Sie sollten immer versuchen, die native Benutzeroberfläche von WordPress zu integrieren. Wir haben eine großartige Serie von Stephen Harris, die das Thema behandelt. Es ist an der Zeit, die erforderlichen Skripte und Stile zu registrieren, damit wir sie später einpflegen können. Dafür verwenden wir die wp_register_script und wp_register_style Funktion, die mit dem Action-Hook zusammenarbeiten admin_enqueue_scripts wenn wir sie auf der Admin-Seite aufnehmen wollen.
Aber vorher fügen wir eine Konstante für unser Plugin-Stammverzeichnis hinzu, damit wir später darauf zurückgreifen können, wenn wir Pfade für unsere Skripts und Stile definieren. Fügen Sie am oberen Rand der Seite unterhalb der Plug-in-Deklaration folgendes Code-Bit hinzu:
define ('ROOT', plugin_dir_url (__FILE__)); Wir können jetzt unsere Funktion definieren, um unsere Skripte und Stile zu registrieren:
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'); Zunächst haben wir das zuvor heruntergeladene HighCharts-Skript registriert. Wir haben ihm einen Griff gegeben "HighChartsFür das nächste Argument haben wir den Pfad definiert, in dem er existiert.
Als Nächstes haben wir eine Reihe von Skripts übergeben, auf die unser Skript angewiesen ist. In diesem Fall ist es jQuery, da wir das DOM durch jQuery manipulieren würden. Auf diese Weise müssen wir uns keine Sorgen um das Einreihen von jQuery machen, es wird automatisch in die Warteschlange gestellt, wenn wir die HighCharts Skript.
Für das dritte Argument haben wir eine Versionsnummer definiert und für das letzte Argument haben wir der wp_register_script das Skript in der Fußzeile der Seite hinter dem Hauptinhalt einreihen. Auf die gleiche Weise haben wir unser zweites Skript registriert, in das wir unseren gesamten JavaScript-Code einfügen würden.
Wir können unsere Skripts und Stile jetzt tatsächlich auf unserer Plugin-Seite einreihen, aber wir möchten nicht, dass sie auf jeder einzelnen Seite des Administrators in eine Warteschlange gestellt werden, auf der sie nicht benötigt werden.
Aus diesem Grund prüfen wir, ob eine Bedingung vorliegt, bevor wir unsere Skripts aufnehmen:
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'); Die Funktion, mit der wir uns verbinden admin_enqueue_scripts erhält tatsächlich einen Parameter für die Verwaltungsseite, auf der wir uns gerade befinden. In unserem Fall ist es "plugins_page_admin-charts". Sie können diesen Parameter jederzeit überprüfen, indem Sie ihn in Ihrem Entwicklungsprozess wiederholen.
Nun, da wir eine Basis für unser Plugin vorbereitet haben, können wir mit der Arbeit an unserem Kernziel, dem Abrufen von Daten und Anzeigen von Statistiken, beginnen.
Wir möchten drei Arten von Daten abrufen:
Für diese Art von Daten können wir die verwenden WP_Query Klasse, um fünf Beiträge mit der höchsten Anzahl an Kommentaren abzurufen. Das WP_Query Eine Klasse ist praktisch, wenn wir Beiträge nach verschiedenen Kriterien abrufen müssen. Mit dieser Klasse können wir Beiträge beliebig auflisten. Die Abfrage zum Abrufen von Beiträgen mit der höchsten Anzahl an Kommentaren kann wie folgt geschrieben werden:
$ posts = new WP_Query (array ('post_type' => 'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); Wir haben jetzt fünf Beiträge mit der höchsten Anzahl von Kommentaren in Form von Objekten im $ Beiträge Array. Sie können die Variable jederzeit anzeigen lassen, um zu sehen, womit Sie arbeiten.
Wir müssen dieses Objekt zusammen mit anderen wichtigen Daten an JavaScript übergeben. Zu diesem Zweck bereiten wir zuerst ein Array vor, das den Datentyp, den Diagrammtyp, den wir zeichnen müssen, und schließlich die gerade durchgelaufenen Posts enthält WP_Query.
$ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'spalte', 'post_data' => $ posts-> posts); Wir können diese Variable an JavaScript übergeben wp_localize_script:
wp_localize_script ('adminCharts', 'data', $ data); Das erste Argument im Funktionsaufruf ist das Handle des Skripts, an das wir die Daten übergeben müssen. Wir hatten dieses Skript zuvor registriert. Das zweite Argument ist der Name des Objekts, das in JavaScript verfügbar sein wird, und das letzte Argument sind die Daten selbst, die wir übergeben müssen. Die endgültige index.php sollte so aussehen:
'post', 'orderby' => 'comment_count', 'order' => 'DESC', 'posts_per_page' => 5)); $ data = array ('data_type' => 'chart_most_popular', 'chart_type' => 'spalte', 'post_data' => $ posts-> posts); wp_localize_script ('adminCharts', 'data', $ data); ?>Admin-Diagramme
Aber das müssen wir sicherstellen WP_Query und wp_localize_script Sie werden erst dann angerufen, wenn wir das Formular abgeschickt haben. Deshalb schließen wir sie in eine andere ein ob Erklärung, die überprüft, ob das Formular übermittelt wurde:
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' => 'spalte', 'post_data' => $ posts-> posts); wp_localize_script ('adminCharts', 'data', $ data); Jetzt müssen Sie nur noch die Daten in unsere JavaScript-Datei packen und das Diagramm zeichnen. In der js / admin_charts.js Datei, fügen Sie den folgenden Code hinzu:
(Funktion ($) 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: 'Beliebteste Beiträge (von Anzahl der Kommentare) ', xAxis: categories: post_titles, yAxis: title: text:' Anzahl der Kommentare ', Serie: [Name:' Anzahl der Kommentare ', Daten: post_comment_count]); (jQuery)); Das $ data Array, das wir durchlaufen hatten index.php hat sich in JavaScript in ein Objekt verwandelt. Wir können es daher wie jedes andere JavaScript-Objekt manipulieren.
Wir prüfen zunächst den Datentyp, der in die Datenbank kommt:
if ('chart_most_popular' == data.data_type) Dann haben wir zwei leere Arrays für Posttitel bzw. die Anzahl der Kommentarkommentare initialisiert:
var post_titles = [], post_comment_count = [];
Und schließlich haben wir die Posts durchlaufen und die Titel und die Anzahl der Kommentare in den von uns initialisierten Arrays erfasst:
$ (data.post_data) .each (function () post_titles.push (this.post_title); post_comment_count.push (parseInt (this.comment_count)););
Jetzt ist es an der Zeit, das Diagramm anhand der von uns abgerufenen Daten zu zeichnen. Dafür haben wir die HighCharts-API verwendet:
$ ('# chart-stats'). highcharts (chart: type: data.chart_type, Titel: Text: 'Beliebteste Beiträge (nach Anzahl der Kommentare)', xAxis: categories: post_titles, yAxis : title: text: 'Anzahl der Kommentare', Serie: [Name: 'Anzahl der Kommentare', Daten: post_comment_count]); Gehen Sie nun zurück zu Ihren Plugins> Admin-Diagramme und klicken Sie nach Auswahl einer Option aus der Dropdown-Liste auf die Schaltfläche "Senden". Nun sollten Sie ein Arbeitsspaltendiagramm haben.
Möglicherweise möchten Sie zu Ihren Posts zurückkehren, Kommentare hinzufügen und dann zurückkehren, um die aktualisierten Statistiken anzuzeigen:
Wir können jetzt Unterstützung für weitere Datentypen in unserem Plugin hinzufügen.
Alles, was wir jetzt tun müssen, ist, fünf Kategorien zu erhalten, die die höchste Anzahl von Posts aufweisen. Zuvor fügen wir jedoch eine Option für diesen Datentyp in unserer Auswahlliste hinzu. Also geh zurück zum render_admin_charts_page zuvor definierte Funktion und aktualisieren sie wie folgt:
Wir können die native WordPress-Funktion verwenden get_categories und einige Argumente übergeben:
$ categories = get_categories (array ('orderby' => 'count', 'order' => 'desc')); Wir rufen dann unsere Daten auf die gleiche Weise ab wie zuvor:
$ data = array ('data_type' => 'chart_top_cat', 'chart_type' => 'spalte', 'post_data' => $ categories); Das letzte Stück Code sollte also so aussehen:
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' => $ categories); wp_localize_script ('adminCharts', 'data', $ data); In dem admin_charts.js, Fügen Sie diesen Code nach dem ein ob Aussage:
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 Kategorien nach Beiträgen', xAxis: categories: cat_titles, yAxis: title: text: 'Anzahl der Beiträge', tickInterval: 5, Serie: [Name: 'Anzahl der Beiträge', data: cat_count]); Wir machen das gleiche wie zuvor, aber diesmal haben wir den Diagrammtitel und die Beschriftungen für die Achsen geändert. Wir sollten jetzt ein weiteres Diagramm haben, das die fünf Hauptkategorien mit den meisten Posts anzeigt:
Unser letzter Datentyp ist die Aufteilung der Kategorien nach Anzahl der Beiträge. Für diese Art von Daten verwenden wir das Kreisdiagramm, da es in diesem Fall am besten geeignet ist. Beachten Sie auch, dass ein einzelner Beitrag zu mehreren Kategorien gehören kann.
Wir werden das Gleiche verwenden get_categories Funktion, aber diesmal beschränken wir uns nicht auf die Anzahl der Kategorien, die wir erhalten, sondern wir müssen alle Kategorien dazu bringen, die Trennung anzuzeigen.
Wir werden also zunächst prüfen, ob die Option für diesen Datentyp ausgewählt wurde, und dann unsere Funktion aufrufen, um die Kategorien abzurufen, unser Array vorzubereiten und es an das JavaScript zu übergeben:
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' => $ categories); wp_localize_script ('adminCharts', 'data', $ data); Es ist relativ einfach, ein Kreisdiagramm zu zeichnen. Im admin_charts.js, Fügen Sie den folgenden Code nach dem vorhandenen hinzu sonst-wenn Aussage:
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: 'Aufteilung der Kategorien nach Anzahl der Beiträge'), Tooltip: pointFormat: 'Number series.name: point.y
series.name Freigabe: point.percentage: .1f%', series: [type:' pie ', Name:' Posts ', data: number_posts]); 
Beachten Sie, dass wir die QuickInfo formatiert haben, um den Prozentsatz anstelle einer Ganzzahl anzuzeigen. Wir sind fast fertig, mit Ausnahme einer kleinen Hilfsfunktion, die wir zu jeder unserer Auswahloptionen hinzufügen können, so dass sie auch nach dem Senden des Formulars beim Laden der Seite erhalten bleibt.
Fügen Sie dieses Bit Code hinzu index.php nach dem render_admin_charts_page Funktion:
Funktion selected_option ($ option) if ($ otpion == $ _POST ['chart_data_type']) echo 'selected = "selected"';
Rufen Sie dann die Funktion in jeder unserer Auswahloptionen auf:
Unser Plugin ist nun fertiggestellt und Sie haben jetzt drei Arbeitsdiagramme für verschiedene Datentypen. Fühlen Sie sich frei, um herumzuspielen und weitere Diagramme für weitere Datentypen hinzuzufügen.
In diesem Tutorial haben wir unser eigenes Plugin von Grund auf erstellt und eine eigene Seite in den WP-Admin eingefügt. Wir haben uns auch einige Techniken angesehen, die bei der Entwicklung für WordPress nützlich sein können.
Dazu gehören verschiedene Methoden, um die erforderlichen Informationen zu den Beiträgen und Kategorien abzurufen und diese dann an JavaScript zu übergeben, damit wir sie für verschiedene Zwecke verwenden können.
Ich hoffe, dass Sie dieses Tutorial für nützlich gehalten haben und vergessen Sie nicht, Ihr konstruktives Feedback in den Kommentaren zu geben.
