Arbeta med klasser, mallar och delar i WordPress
När jag satte mig för att börja det här inlägget, planerade jag att skriva något mycket mer involverat än vad jag ska dela med mig av. Till att börja med ville jag gå igenom en av två saker:
- Den kompletta guiden för att ställa in en utvecklingsmiljö,
- Integrera kodkvalitetsverktyg i PhpStorm
Den första skulle vara att fokusera på en mängd andra saker jag har pratat om, att knyta ihop dem alla och ha en definitiv referens. Men det här är något som jag vill ta tid att sätta ihop för att se till att det görs rätt.
Den andra är en som jag tycker är viktig men jag är i lite av en övergångsfas med några av mina egna verktyg. Tills det är gjort vill jag helst inte skriva om det.
Ändå finns det alltid något att täcka, eller hur? Så idag har jag valt något enklare: Att bryta ner användningen av klasser, mallar och delar i WordPress-plugins med ett enkelt exempel.
Klasser, mallar och delar i WordPress
För just detta ämne är en omedelbar fråga som kan komma att tänka på enkel: Varför bry sig om att prata om detta?
Eftersom det är 2018 och vi ser fortfarande en grov blandning av PHP, CSS, uppmärkning och JavaScript i en enda fil. Detta är inte för att slå på andra tekniker som gör detta som standard (som React). Jag pratar specifikt om WordPress-plugins och att skriva underhållbar kod på ett sådant sätt att det är lätt att [uppenbarligen] underhålla, skriva och läsa.
Ett praktiskt exempel
Låt oss säga att du arbetar på en undermenysida för något som kommer att visas under en anpassad meny. Du registrerar din sida med WordPress API:
<?php
public function addMenuPage()
{
add_menu_page(
'Acme Menu',
'Acme Menu',
'manage_options',
'acme-custom-menu',
array($this, 'display'),
'dashicons-dashboard',
30
);
add_submenu_page(
'acme-custom-menu',
'Acme Menu',
'Acme Menu',
'Acme Menu',
'acme-custom-menu',
array($this, 'display')
);
}
Men när du ställer in en återuppringningsfunktion för att visa sidan, använder du inte funktionen för att blanda alla olika språk tillsammans. Istället använder du den för att inkludera en fil.
<?php
public function display()
{
include_once $this->pluginPath. 'views/acme-settings.php';
}
Observera att i filen ovan refererar jag till en egenskap $this->pluginPath. Detta är inställt i konstruktorn för klassen så att jag enkelt kan komma åt roten av plugin.
Hur som helst, hur kan den här filen se ut?
En mall och en del
I det här fallet antar jag att din mall är det som kommer att ge information till användaren och kommer att begära deras input. Den partiella kommer att vara ansvarig för att visa ett framgångs-, fel- eller varningsmeddelande för användaren.
En mall
För att göra det enkelt kommer jag att hålla både mallen och den partiella så smal som möjligt. I det här fallet, anta att vi ska rendera en sida, be användaren att spara ett värde, och om värdet sparas framgångsrikt (och därmed finns i tabellen wp_options ), visar vi framgångsmeddelandet.
Detta betyder:
- mallen visar sidans titel, information, inmatning och spara-knapp,
- den partiella visar framgångsmeddelandet vid behov.
Ta en titt på koden för mallen nedan:
<?php
/**
* Renders the settings page for the plugin.
*/
?>
<div class="wrap">
<h1 class="wp-heading-inline"><?php echo get_admin_page_title(); ?></h1>
<?php if ($this->showSuccessMessage()) { ?>
<?php include_once 'partials/settings-saved.php'; ?>
?>
<div id="acme-settings-schedule">
<form id="acme-form" method="post" action="<?php echo esc_html(admin_url('admin-post.php')); ?>"">
<!-- This is where your settings go. -->
<p>
<?php
submit_button(
'Save',
'primary',
'acme-save-settings',
false
);
wp_nonce_field(
'acme-save',
'acme-save-nonce'
);
?>
</p>
</form>
</div>
</div>
Lägg märke till att, ja, den har en ingång, en spara-knapp och en nonce som alla är viktiga (men utanför ramen för detta inlägg) för att spara information.
Men lägg också märke till att den har en hjälpfunktion som jag använder för att kontrollera förekomsten av framgångsrikt sparande av information. Denna funktion finns i samma klass som ansvarar för att rendera mallen.
Partiell
Det ser ut ungefär så här:
<?php
public function showSuccessMessage()
{
return (false !== get_option('acme_custom_setting'));
}
Och den resulterande delen är mycket enkel:
<?php
/**
* Renders the success message if the option has been properly saved.
*/
?>
<div class="notice-success notice is-dismissible">
<p>Your settings have been successfully saved.</p>
<button type="button" class="notice-dismiss">
<span class="screen-reader-text">Dismiss this notice.</span>
</button>
</div>
Självklart kan din implementering av funktionen variera. Syftet är inte så mycket att visa hur man implementerar funktionen utan hur man använder en funktion för att kontrollera information för att visa en del.
Det finns mer (men inte här)
Kanske är detta något som bör placeras i början av artikeln.
För att vara ärlig tror jag att det är en av de saker där vissa kan tycka att det är mer användbart att se det från början (men då saknar kontexten för koden) och andra tycker att det är mer användbart i slutet eftersom de kan se hur det hela passar in. tillsammans.
Oavsett vilket hoppas jag att det i slutändan ger klarhet i hur allt detta hänger ihop.
Dessutom finns det mycket utrymme på platser för saker som kan anpassas som:
- kontrollerar att användaren har tillstånd att spara,
- verifiera nonce-värdet,
- sanering och validering av data,
- avgöra vad som är framgång, varningar och fel.
Men om jag ska täcka allt ovanstående tittar vi på ett utomordentligt långt inlägg eller en lång rad inlägg. Det är inget jag är emot, men det är också något som jag inte nu är värt ansträngningen vid det här laget.
Tveka aldrig att ge feedback. Men under tiden hoppas jag att allt detta hjälper dig att ge dig en grund att bygga på när du arbetar med ditt nästa projekt.