Verbessern Sie Ihren Arbeitsablauf - trennen Sie Ihr Markup von Ihrer Logik!

In diesem Tutorial erkläre ich eine Technik, mit der Sie eine Vorlagendatei für alle Ihre HTML-Anforderungen verwenden können! Sie müssen nicht länger Strings aus Ihren Funktionen heraus "echo" oder sich Gedanken darüber machen, ob Sie PHP ein- oder aussteigen möchten, nur um Markierungen auszugeben.

Ich habe viele Jahre mit MVC-Frameworks (wie Zend und heutzutage Laravel) gearbeitet, bei denen es am besten ist, Ihre 'Programmierlogik' (Funktionen oder Methoden) von Ihrer 'Ansicht' (dem resultierenden HTML-Markup) zu trennen. Diese immer führt zu einer wartungsfreundlicheren Code-Basis und ist eigentlich viel einfacher zu schreiben. Dieser Hintergrund hat mich veranlasst, bei der Entwicklung von Plugins für WordPress eine ähnliche Lösung zu finden! Es ist nichts zu schickes - es ist nur ein kleiner "Helfer", der es Ihnen ermöglicht, alle HTML-Ausschnitte und das unbeholfene "Fluchen" aus Ihren Funktionen zu entfernen und sie sicher in ihrer eigenen "Vorlagendatei" abzulegen.

Ich hoffe, dieses Tutorial klingt für Sie interessant und ohne weiteres, beginnen wir!


Schritt 1 Verstehen, was wir verbessern werden

Lassen Sie uns dieses Tutorial beginnen, indem wir uns genau ansehen, was wir verbessern werden.

Es ist sehr üblich, so etwas in einem Plugin zu sehen: (Dieses Snippet stammt eigentlich von einem meiner eigenen Tutorials auf dieser Site: p)

 add_shortcode ('faq', function () $ posts = get_posts (array (// Holen Sie sich den FAQ-Beitragstyp "numberposts" => 10, 'orderby' => 'menu_order', 'order' => 'ASC' 'post_type' => 'faq',)); $ faq = '
'; // Öffne den Container foreach ($ posts as $ post) // Erzeuge das Markup für jede Frage $ faq. = Sprintf (('

% 1 $ s

'), $ post-> post_title, wpautop ($ post-> post_content)); $ faq. = '
'; // Schließen Sie den Container return $ faq; // Gib den HTML-Code zurück. );

Was stimmt damit nicht?

Tja nichts wirklich. Es könnte jedoch sauberer, leichter zu skalieren und leichter zu warten sein!

Wenn wir von oben nach unten laufen, können wir sehen, dass wir innerhalb einer einzigen Funktion:

  1. Abfragen der Datenbank nach Beiträgen eines bestimmten Typs
  2. Zuweisen einer HTML-Zeichenfolge zu einer Variablen
  3. Durchführen einer Schleife und Verketten weiterer Markierungen mit der Zeichenfolge
  4. Rückgabe der aufgebauten Zeichenfolge

Jetzt können Sie sich das sehr gut ansehen und denken: "Große Sache! Es sind nur ein paar Zeilen HTML, was ist das Problem?" In gewisser Hinsicht sind Sie gut im Recht, so zu denken. Aber denken Sie daran, es sind momentan nur 17 Zeilen Code - was passiert, wenn Sie das Plugin erweitern / verbessern? Was passiert, wenn Ihr Plugin auf 50/100/1000 Codezeilen (oder mehr!) Wächst? Wirst du immer noch glücklich sein, wenn HTML-Strings an verschiedenen Stellen in deiner Funktion verstreut sind? Was passiert, wenn Sie etwas HTML ausgeben möchten, das ein unbeholfenes "Escape" benötigt, um ordnungsgemäß in Ihrem PHP-Code zu funktionieren??

Hoffentlich können Sie feststellen, dass dieser Ansatz zum Erstellen und Ausgeben von HTML Markup sehr problematisch werden kann! Ganz zu schweigen davon, dass es sehr schwierig wird, das HTML zu verwalten und zu verbessern, wenn es nur verstreut ist.

Vor diesem Hintergrund habe ich es mir zur Aufgabe gemacht, die Art und Weise zu ändern, wie Sie HTML in WordPress ausgeben. Für immer.


Schritt 2 Erstellen des View Renderer Plugins

Ok, lass uns damit knacken.

Erstellen Sie die Dateien und Ordner

  1. Erstellen Sie einen neuen Plugin-Ordner mit dem Namen Aussicht
  2. Erstellen Sie in diesem Ordner die Plugin-Datei view_renderer.php
  3. Erstellen Sie nun eine Datei mit dem Namen Ansicht.php - Das wird unsere Klasse sein

Fügen Sie die Klasse hinzu

Unser Plugin ist einfach, es beinhaltet nur das Aussicht Klasse, so dass wir es in allen anderen Plugins verwenden können.

 / * view_renderer.php * / include ('View.php');

Ok, jetzt haben wir die aufgenommen Aussicht Klasse, es ist Zeit, es tatsächlich zu bauen.

Die Ansichtsklasse

Hier haben wir eine Klasse namens Aussicht mit einer einzigen statischen Funktion aufgerufen machen (Dies erlaubt uns die Syntax zu verwenden Ansicht :: Rendern ($ template) von überall in unseren Plugins) und es braucht zwei Parameter:

  1. $ filePath - Der Pfad zur Vorlagendatei. Vergiss nicht, dass wir unsere Vorlagen in der Aussicht Ordner, den wir zuvor erstellt haben
  2. $ viewData - Alle Variablen, auf die wir innerhalb der Vorlage Zugriff haben möchten (später mehr dazu)

Kopieren Sie den Code in Ansicht.php:

 

Was genau hier vor sich geht?

  1. Zuerst prüfen wir, ob die $ viewData varible hat einen Wert (d. h. haben wir etwas gesendet, das in der Vorlage verwendet werden soll?). Wenn ja, extrahieren wir den Inhalt (dazu später mehr)

  2. Dann nutzen wir den Ausgabepuffer von PHP. Es erlaubt uns, eine PHP-Datei zu parsen und den Inhalt in einer Variablen zu speichern

  3. Zum Schluss geben wir den String zurück

Hinweis: Vergessen Sie nicht, das Plugin jetzt im Admin-Bereich zu aktivieren

Scheint ziemlich einfach, nicht wahr? Genau! Obwohl dies nur eine sehr kleine Funktion zu sein scheint, bietet es uns tatsächlich den Luxus, unsere Plugins auf eine super organisierte, skalierbare, wartbare Art und Weise schreiben zu können. Bitte erlauben Sie mir zu demonstrieren…


Schritt 3 Ein reales Beispiel

Erstellen wir ein einfaches Plugin namens Schieberegler

** Hinweis: Dies ist nur zu Demonstrationszwecken. Sie können hier gerne Ihr eigenes Plugin verwenden.

  1. Erstellen Sie einen Ordner mit dem Namen Schieberegler
  2. Erstellen Sie in diesem Ordner eine Datei mit dem Namen Slider.php
  3. Kopieren Sie den Code in Slider.php
 

Fügen Sie einen Shortcode hinzu

OK, jetzt fügen wir einen Shortcode hinzu, der die letzten 5 Beiträge abruft und sie in einer Liste mit Titel und Inhalt anzeigt. (Der Kürze halber fügen wir unsere Plugin-Klasse und unsere Action-Hooks in dieselbe Plugin-Datei ein, aber tun Sie dies bitte nicht in der Realität: p)

 / ** * Füge den Shortcode hinzu (PHP 5.3 und höher) * / add_shortcode ('slider', function () return Slider :: display (););

Das erlaubt uns einfach zu benutzen [Schieberegler] in jedem Beitrag / Seite und es wird das Ergebnis von ausgegeben Slider :: Anzeige ()

Hinzufügen der Slider-Klasse & Anzeige() Methode

 Klasse Slider öffentliche statische Funktionsanzeige () // HIER HTML zurückgeben. 

Holen Sie sich die neuesten 5 Beiträge.

 / * * Die letzten 5 Beiträge abrufen * / public static function display () $ posts = get_posts (array ('numberposts' => 5)); 

Jetzt haben wir eine Reihe von Post Objekte und wir sind bereit, unser HTML aufzubauen, indem wir sie durchlaufen. Aber wir werden hier nicht einfach HTML-Strings in unsere Funktion einfügen! Stattdessen übergeben wir das Array von Objekten an eine Vorlagendatei und lassen den gesamten HTML-Code außerhalb des Schadensbereichs generieren.

Erstellen Sie die Vorlage

  1. Erstellen Sie einen Ordner mit dem Namen Vorlagen
  2. Erstellen Sie in diesem Ordner eine Datei mit dem Namen 01.vorlage.php

Diese Vorlage enthält alle Markups und ermöglicht uns den Zugriff auf die Daten, die wir haben senden später dazu.

Daten an die Vorlage senden

Jedes Mal, wenn wir Variablen in unseren Vorlagen verwenden möchten, können wir dies einfach tun senden indem Sie einen Wert in der $ viewData Array. Jeder, der mit der Verwendung von MVC-Frameworks vertraut ist, wird sich mit diesem Ansatz sehr wohl fühlen.

 $ viewData = array ('posts' => $ posts);

Das Array Schlüssel Hier ('Beiträge') ist wichtig, weil wir uns so auf die Daten in der Vorlage beziehen. (Sie können das nennen, was Sie möchten, aber bleiben Sie bei etwas, das Sinn macht.)

Vorlage erstellen

Ok, also haben wir uns angesehen, wie man die letzten 5 Beiträge abruft und wie man dieses Array von Objekten an die Vorlage sendet. Nun ist es an der Zeit, die Vorlagendatei auszuarbeiten.

 
  • post_title?>

    post_content?>

Ah! Wie schön fühlt es sich an, all diese Auszeichnung in einer eigenen separaten Datei zu haben, abseits unserer Datenabruf- und Programmierlogik? Großartig, ich weiß! Der wichtigste Teil dieses Ansatzes ist, dass wir immer nur von Variablen innerhalb der Vorlage aus auf Daten zugreifen. Die gesamte "Logik" sollte innerhalb der Methode ausgeführt werden, die die Vorlage aufruft. Dies führt zu einem sehr schönen Arbeitsablauf, da Sie die Bedenken völlig voneinander trennen.

Stellen Sie sich vor, wie einfach es jetzt sein wird, wenn Sie bereit sind, auf dieses Plugin aufzubauen. Keine Verkettung von Zeichenketten und Escape-Zeichen innerhalb von Funktionen mehr.

Rendern der gerenderten Vorlage

Ok, wir haben alle Komponenten gesehen. Sehen wir uns an, wie alles zusammenpasst, damit wir eine Vorlage rendern und einen String zurückbekommen können (damit wir zu unserem Shortcode zurückkehren können):

  1. Zuerst müssen wir einen Verweis auf unsere Vorlage in einer statischen Eigenschaft speichern
  2. Dann müssen wir das überprüfen Aussicht Klasse existiert
  3. Dann generieren wir den vollständigen Pfad zu unserer Vorlagendatei, indem wir eine Referenz auf das aktuelle Plugin-Verzeichnis erstellen und unsere statische Eigenschaft verketten $ template
  4. Zum Schluss rufen wir unsere an Ansicht :: render () Methode und übergeben Sie die beiden erforderlichen Parameter

In diesem Fall sind wir Rückkehr das Ergebnis der gerenderten Vorlage, weil so Kurzwahlnummern Arbeit. Aber wenn du es brauchst Echo stattdessen die Ergebnisse (wenn Sie beispielsweise eine Admin-Seite erstellen, erwartet der Callback, dass Ihre Ausgabe direkt ausgedruckt wird), und ersetzen Sie sie einfach Rückkehr mit Echo.

Das Anzeige() Methode vollständig

 Klassenschieber static $ template = '/templates/01.template.php'; public static function display () if (class_exists ('View')) // Die letzten 5 Beiträge abrufen $ posts = get_posts (array ('numberposts' => 5)); // Set view data $ viewData = array ('posts' => $ posts); // Den vollständigen Pfad zur Vorlagendatei abrufen. $ templatePath = dirname (__FILE__). statisch :: $ template; // Rückgabe des gerenderten HTML-Ergebnisses View :: render ($ templatePath, $ viewData);  else return "Sie versuchen, eine Vorlage zu rendern, aber die Ansichtsklasse kann nicht gefunden werden"; 

Ich hoffe, Sie können den Organisationsgrad dieses Ansatzes schätzen! Jetzt dein Anzeige function ist nur dafür verantwortlich, die benötigten Daten zu sammeln und das Ergebnis der gerenderten Vorlage zurückzugeben.


Weiter geht es

Unser Beispiel oben ist so einfach wie es nur geht. Trotzdem ist der Arbeitsfluss erheblich verbessert. Schauen wir uns nun ein weiteres Beispiel an, das zeigt, wie hilfreich es wirklich sein kann.

Angenommen, Ihr Plugin verwendet beispielsweise eine benutzerdefinierte Meta-Box. Dafür müssten wir:

  1. Fügen Sie dem Konstruktor eine Konstruktorfunktion hinzu Schieberegler Klasse
  2. Fügen Sie eine Methode hinzu, um die Metabox zu jedem Beitrag hinzuzufügen
  3. Fügen Sie eine Rückrufmethode hinzu, um den HTML-Code für die Meta-Box darzustellen
  4. Fügen Sie den entsprechenden Hook in der Plugin-Datei hinzu, um die Klasse nur dann zu instanziieren, wenn Sie Beiträge hinzufügen / bearbeiten
  5. Schließlich fügen wir wie zuvor eine Vorlagendatei hinzu und fügen sie am Anfang der Klasse als Eigenschaft hinzu
 Klassenschieber static $ metaBox = '/templates/metabox.template.php'; öffentliche Funktion __construct () add_action ('add_meta_boxes', array ($ this, 'add_some_meta_box'));  / ** * Fügt den Meta-Box-Container hinzu. hoch', );  / ** * Meta-Box-Inhalt rendern * / public function render_meta_box_content () / ** Aus dem Codex ** / echo '

TESTAUSGABE - Dies wird in der Meta-Box dargestellt.

'; // class // füge den Action Hook hinzu Funktion call_Slider () return new Slider (); if (is_admin ()) add_action ('load-post.php', 'call_Slider');

Schauen Sie sich das an render_meta_box_content Methode dort. Dies ist die perfekte Gelegenheit, den View Renderer zu verwenden! Stellen Sie sich ein realistischeres Beispiel vor:

 / ** * Inhalt der Meta-Box rendern * / public function render_meta_box_content ($ post) $ name = get_post_meta ($ post-> ID, "name"); $ fieldName = static :: $ fieldName; Echo '

Dein Name:

'; Echo ''; Echo ''; Echo '';

Urg! Sicher, es erledigt die Arbeit, aber es ist so schwierig, es so zu machen! Wie wäre es, wenn wir stattdessen unseren View Renderer verwenden.

 / ** * Meta-Box-Inhalt wiedergeben * / public function render_meta_box_content ($ post) $ viewData = array ('name' => get_post_meta ($ post-> ID, 'name'), 'field' => statisch :: $ Feldname ); $ templatePath = dirname (__FILE__). statisch :: $ metabox; echo View :: render ($ templatePath, $ viewData); 

Und in der Vorlagendatei:

 

Dein Name:

In diesem Beispiel mag dies nur ein kleiner Vorteil sein. Aber glauben Sie mir, wenn Sie Ihre Bedenken so voneinander trennen, werden Sie schnell zu einem viel besseren WordPress-Entwickler.


Fazit

Ich denke, Sie haben wahrscheinlich ein gutes Verständnis davon, was wir hier erreichen wollen, und ich möchte Sie dringend bitten, diese Technik zu verwenden, wenn Sie in Zukunft Plugins erstellen. Hoffentlich finden Sie 'Trennung der Anliegen', die für Sie von Nutzen ist.

Tutorial-Hinweise:

  • Obwohl wir den View Renderer selbst zu einem Plugin gemacht haben, können Sie ihn stattdessen einfach in vorhandene Plugins einfügen. Dadurch entfällt der zusätzliche Schritt, dass das Plugin aktiviert werden muss, bevor Sie es irgendwo verwenden.
  • Sie sind nicht auf die in diesem Lernprogramm erläuterten Anwendungsfälle beschränkt, sondern können überall dort eingesetzt werden, wo Sie normalerweise HTML ausgeben würden (wie wäre es mit einer Vorlagendatei, um 'inline'-JavaScript auszugeben) oder wie Sie einige spezifische CSS-Regeln verwenden Optionen aus der Datenbank abgerufen?)

Ich würde gerne wissen, welche Verwendung Sie für diese Technik gefunden haben, also teilen Sie diese bitte mit. :)