Förbättra ditt arbetsflöde - Separera din uppmärksamhet från din logik!

I den här handledningen ska jag förklara en teknik som låter dig använda en mallfil för alla dina HTML-behov! Inte längre kommer du behöva "echo" strängar från insidan av dina funktioner, eller oroa dig för att släppa in och ut ur PHP bara för att mata ut några mark-up.

Jag har tillbringat många år med MVC-ramar (till exempel Zend och nu Laravel) där det är en bra metod att skilja din "programmeringslogik" (funktioner eller metoder) från din "visning" (den resulterande HTML-markeringen). Detta alltid leder till en mer underhållbar kodbas och det är faktiskt mycket lättare att skriva. Med denna bakgrund har jag fått en liknande lösning när jag utvecklar plugins för WordPress! Det är inte alltför snyggt - det är bara en liten "hjälpreda" som låter dig ta bort alla HTML-snippets och besvärliga "escaping" från dina funktioner och placera dem på ett säkert sätt i sin egen "mall" -fil.

Så jag hoppas att denna handledning låter intressant för dig och utan ytterligare ado, låt oss börja!


Steg 1 Förstå vad vi ska förbättra

Låt oss sparka av den här handledningen genom att ta en titt på exakt vad vi ska förbättra.

Det är väldigt vanligt att se något liknande i en plugin: (detta stycke kommer faktiskt från en av mina egna handledning på den här sidan: p)

 add_shortcode ('faq', funktion () $ posts = get_posts (array (// Hämta FAQ Anpassad posttyp 'numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC' 'post_type' => 'faq',)); $ faq = '
'; // Öppna behållaren foreach ($ inlägg som $ post) // Generera markeringen för varje Question $ faq. = Sprintf (('

% 1 $ s

'), $ post-> post_title, wpautop ($ post-> post_content)); $ faq. = '
'; // Stäng behållaren returnera $ faq; // Återgå HTML. );

Vad är fel med det?

Jo ingenting, verkligen. Men det kan vara renare, lättare att skala och mer underhållbart!

Running från topp till botten kan vi se att allt inom en enda funktion är vi:

  1. Fråga databasen för inlägg av en viss typ
  2. Tilldela en HTML-sträng till en variabel
  3. Utföra en slinga och sammanfoga ytterligare markering till strängen
  4. Återkommer den uppbyggda strängen

Nu kan du mycket väl titta på det här och tänka "Big deal! Det är bara några rader av HTML, vad är problemet?" I vissa avseenden är du bra inom dina rättigheter att tänka på det. Men kom ihåg att det bara finns 17 kodrubriker just nu - vad händer när du utökar / förbättrar plugin? Vad händer när din plugin växer till 50/100/1000 kodkod (eller mer!). Kommer du fortfarande vara glad att ha HTML-strängar prickade runt din funktion på olika ställen? Vad händer när du vill skriva ut lite HTML som behöver lite besvärligt "fly" för att fungera korrekt i din PHP-kod?

Förhoppningsvis kan du se att det här sättet att skapa och skriva ut HTML Markup kan bli mycket problematiskt! För att inte tala om att det blir mycket svårt att behålla och förbättra HTML när det bara sprids runt.

Så med allt detta i åtanke har jag tagit det på mig själv för att ändra hur du tänker på att skriva ut HTML i WordPress. Evigt.


Steg 2 Bygga View Renderer Plugin

Okej, låt oss knäcka med det här.

Skapa filer och mappar

  1. Skapa en ny plugin-mapp som heter Se
  2. Inne i den mappen skapar du pluginfilen view_renderer.php
  3. Skapa nu en fil som heter View.php - Detta kommer att bli vår klass

Inkludera klassen

Vår plugin är enkel, den innehåller bara Se klass så att vi kan använda den i någon av våra andra plugins.

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

Ok, nu när vi har inkluderat Se klass, det är dags att faktiskt bygga den.

Visningsklassen

Här har vi en klass kallad Se med en enda statisk funktion som heter göra (det här låter oss använda syntaxen Visa :: render ($ mall) från var som helst i våra plugins) och det tar två parametrar:

  1. $ filepath - Vägen till mallfilen. Glöm inte att vi ska behålla våra mallar inom Se mapp som vi skapade tidigare
  2. $ viewdata - Eventuella variabler som vi skulle vilja ha tillgång till inom mallen (mycket mer om detta senare)

Kopiera koden nedan till View.php:

 

Så vad exakt går på här?

  1. Först och främst kontrollerar vi om $ viewdata varibel har ett värde (dvs skickade vi något som ska användas i mallen?). Om det gör tar vi ut innehållet (mer om detta senare)

  2. Då använder vi oss av PHP: s utgångsbuffert. Det tillåter oss att analysera en PHP-fil och spara innehållet till en variabel

  3. Slutligen returnerar vi strängen

Obs! Glöm inte att aktivera plugin nu från administratörspanelen

Verkar ganska enkelt va? Exakt! Men samtidigt som det verkar vara en mycket enkel liten funktion, ger det oss verkligen lyxen att kunna skriva våra plugins på ett superorganiserat, skalbart och underhållbart sätt. Snälla, låt mig visa ...


Steg 3 Ett verkligt exempel på världen

Låt oss skapa ett enkelt plugin som heter Slider

** Obs! Det här är endast för demonstration. Använd gärna ditt eget plugin här.

  1. Skapa en mapp som heter Slider
  2. I den mappen skapar du en fil som heter Slider.php
  3. Kopiera koden nedan till Slider.php
 

Lägg till en kortnummer

OK, nu ska vi lägga till en kortnummer som hämtar de senaste 5 inläggen och visar dem i en lista med titeln och innehållet. (För korthetens skull lägger vi till plugin-klassen och våra action krokar i samma plugin-fil, men gör det inte i "real life": p)

 / ** * Lägg till kortnumret (PHP 5.3 och högre) * / add_shortcode ("slider", funktion () returnera Slider :: display (););

Det gör det möjligt för oss att helt enkelt använda [Reglaget] i vilken post / sida som helst och det kommer att ge resultatet av Slider :: display ()

Lägg till skjutreglaget & visa() Metod

 klassreglaget public static function display () // Retur HTML HÄR. 

Få de senaste 5 inläggen.

 / * * Få de senaste 5 inläggen * / offentlig statisk funktionsdisplay () $ posts = get_posts (array ('numberposts' => 5)); 

Nu har vi en rad av posta objekt och vi är redo att bygga upp vår HTML genom att gå igenom dem. Men vi kommer inte bara att börja infoga HTML-strängar i vår funktion här! I stället kommer vi att skicka massan av objekt till en mallfil och få all HTML genererad av skadans sätt.

Skapa mallen

  1. Skapa en mapp som heter mallar
  2. Inne i den mappen skapar du en fil som heter 01.template.php

Den här mallen kommer att rymma all vår markering och tillåter oss att komma åt de data vi har skicka till det senare.

Sänder data till mallen

Varje gång vi vill använda några variabler i våra mallar kan vi helt enkelt skicka dem genom att ange ett värde i $ viewdata array. Någon som är bekant med att använda MVC-ramar kommer att känna sig mycket hemma med detta tillvägagångssätt.

 $ viewData = array ('posts' => $ inlägg);

Arrayen nyckel- här ('inlägg') är viktigt eftersom det är hur vi hänvisar till data från mallen. (Du kan kalla detta vad du än vill, men håll dig till något som är meningsfullt.)

Bygga mallen

Okej, så vi har tittat på hur man hämtar de senaste 5 inläggen och hur man skickar den mängden objekt till mallen, det är dags att kasta ut mallfilen.

 
  • post_title?>

    post_content?>

Ah! Hur trevligt känns det att ha all den markeringen i sin egen separata fil, bort från vår datainsamling och programmeringslogik? Bra, jag vet! Den viktigaste delen av detta tillvägagångssätt är att vi endast någonsin "åtkomst" till data från variabler i mallen. Alla "logik" ska göras inom den metod som kallar mallen. Detta leder till ett mycket trevligt arbetsflöde eftersom du har fullständig åtskillnad mellan problem.

Tänk dig hur lätt det är nu när du är redo att bygga på det här pluginet. Inga mer sammanlänkande strängar och flyktiga tecken inom funktioner.

Returnerar den återförda mallen

Okej, vi har sett alla komponentdelar, låt oss se hur allt passar samman för att vi ska kunna göra en mall och få en sträng tillbaka (som vi kan återgå till vår kortnummer):

  1. Först måste vi lagra en referens till vår mall i en statisk egenskap
  2. Då måste vi kontrollera att Se klass existerar
  3. Då genererar vi hela sökvägen till vår mallfil genom att ta en referens till den aktuella plugin-katalogen och sammanfoga vår statiska egenskap $ mall
  4. Slutligen kallar vi vår Se :: render () metod och ge det två parametrar som behövs

I det här fallet vi lämna tillbaka resultatet av den gjorda mallen eftersom det är så kortkoder arbete. Men om du skulle behöva eko resultaten i stället (till exempel när du skapar en administratörssida, förväntar återuppringningen att din utskrift ska skrivas ut direkt), så ersätt helt enkelt lämna tillbaka med eko.

De visa() Metod i full

 klassreglaget static $ template = '/templates/01.template.php'; public static display () if class_exists ('View')) // Få de senaste 5 inlägga $ posts = get_posts (array ('numberposts' => 5)); // Ange visa Data $ viewData = array ('posts' => $ inlägg); // Hämta hela sökvägen till mallfilen. $ templatePath = dirname (__FILE__). statisk :: $ mall; // Returnera den renderade HTML-räntan Visa :: render ($ templatePath, $ viewData);  else return "Du försöker göra en mall, men vi kan inte hitta View Class"; 

Jag hoppas att du kan uppskatta organisationsnivån, det här sättet ger dig råd! Nu är din visa funktionen är endast ansvarig för att samla in de data som behövs och återställa resultatet av den gjorda mallen.


Ta det vidare

Vårt exempel ovan är ungefär lika grundläggande som det blir. Ändå är det fortfarande ett väsentligt förbättrat arbetsflöde. Låt oss nu titta på ett annat exempel som visar hur bra det verkligen kan vara.

Säg, till exempel, använder ditt plugin en anpassad metakassa. För att göra det skulle vi behöva:

  1. Lägg till en konstruktörsfunktion till Slider klass
  2. Lägg till en metod för att lägga till metaboxen för varje inlägg
  3. Lägg till en återuppringningsmetod för att göra HTML för metakassen
  4. Lägg till lämplig krok i pluginfilen för att omedelbart ordna klassen när du lägger till / redigerar inlägg
  5. Slutligen skulle vi lägga till en mallfil som vi gjorde tidigare och lägga till den som en egenskap i början av klassen
 klassreglaget static $ metaBox = '/templates/metabox.template.php'; allmän funktion __construct () add_action ('add_meta_boxes', array ($ this, 'add_some_meta_box'));  / ** * Lägger till meta box-behållaren * / allmän funktion add_some_meta_box () add_meta_box ('some_meta_box_name', 'Some Meta Box Headline', array ($ this, 'render_meta_box_content'), 'post', 'advanced' hög', );  / ** * Render Meta Box innehåll * / offentlig funktion render_meta_box_content () / ** Från Codex ** / echo '

TEST UTGÅNG - det här görs inom meta-rutan.

'; // class // lägg till funktionskrokfunktionen call_Slider () returnera ny slider (); om (is_admin ()) add_action ('load-post.php', 'call_Slider');

Ta en titt på render_meta_box_content metod där. Det är det perfekta tillfället att använda View Renderer! Föreställ dig ett mer realistiskt exempel som detta:

 / ** * Render Meta Box innehåll * / offentlig funktion render_meta_box_content ($ post) $ name = get_post_meta ($ post-> ID, "name"); $ fieldName = statiskt :: $ fieldName; eko "

Ditt namn:

'; eko "'; eko "'; eko "';

Urg! Visst, det blir jobbet gjort, men det är så svårt att göra det så här! Vad sägs om att vi använder vår View Renderer istället.

 / ** * Render Meta Box-innehåll * / offentlig funktion render_meta_box_content ($ post) $ viewData = array ('name' => get_post_meta ($ post-> ID, 'name'), 'field' => statisk :: $ fält namn ); $ templatePath = dirname (__FILE__). statisk :: $ Metabox; echo View :: render ($ templatePath, $ viewData); 

Och i mallfilen:

 

Ditt namn:

Det kan bara tyckas som en mycket liten fördel i det här exemplet. Men lita på mig, om du håller dina bekymmer separata så här blir du en mycket bättre WordPress-utvecklare ganska snabbt.


Slutsats

Jag tror att du förmodligen har en bra förståelse för vad vi försöker uppnå här och jag uppmanar dig att försöka använda den här tekniken när du bygger plugins i framtiden. Förhoppningsvis hittar du "separation av oro" för att vara till nytta för dig.

Tutorial Notes:

  • Även om vi gjorde View Renderer i ett plugin av sig själv, kan du ganska enkelt bara lägga till det i befintliga plugins istället. Detta kommer att ta bort det extra steget att se till att plugin-enheten är aktiverad innan du använder den någonstans.
  • Du är inte begränsad till användningsfallen som förklaras i denna handledning, den kan användas var du än normalt skulle skriva ut HTML (Hur använder du en mallfil för att mata ut någon in-line JavaScript? Eller hur är det med vissa specifika CSS-regler baserade på alternativ som hämtas från databasen?)

Jag skulle vara intresserad av att veta vilka användningsområden du har hittat för denna teknik, så snälla dela i kommentarerna :)