Mis puutub WordPressi vidina katlaplaadi ümbertöötamisse – eriti arvestades seda, kui kaugele oleme pärast projekti kaheksa aastat tagasi alustamist jõudnud – oleme teinud palju tööd.
Oleme viinud selle palju kaasaegsemale standardile ja muudame sellega töötamise palju lihtsamaks, nii et tulevaste vidinate loomine peaks olema lihtsam. Ja see ei tulene ainult katlaplaadi standardist, vaid objektorienteeritud standardist, nii et hooldus- ja koodikvaliteet on kõrgem.
Viimases postituses lõpetasime suure osa haldusala tööst ja oleme valmis alustama tööd kasutajaliidese koodi kallal.
Me ütlesime:
Järgmisena vaatame sisu renderdamist esiotsas. Oleme Boilerplate’i ümbertöötlemise lõpule jõudmas, kuid veel on vaja natuke teha, enne kui oleme valmis ühendama selle koodibaasi põhiharuga.
Nii et selles postituses jätkame seal. Nüüd, kui olete seda siiani jälginud, peaks teil arendusharust kõik vajalik olema.
Kui ei, siis tõmmake see kindlasti välja, sest see on koht, kus me postituse ülejäänud osas üles võtame.
WordPressi vidina katlaplaat: ümberkujundamine, 12. osa
Nüüd, mis puudutab esiosa, on lihtne pidada esiotsaks kõike, mida kasutaja enda ees näeb, olenemata sellest, kas see asub haldusalas või mitte.
See seeria on aga selge, et jagame selle, mida kasutaja näeb, saidi haldusala ja avalikkusele suunatud ala vahel.
Seega töötame selle koodi ala kallal, mis annab kasutajale teavet saidi avalikul alal. Alustame lihtsalt teabe lugemisest ja selle kuvamisest.
Järgmises postituses vaatleme mõne valiku osas töötamist tingimusliku loogikaga, et näha, kas meil on midagi vaja teha.
Seda öeldes liigume koodi juurde.
Andmete kohta, mida me kuvame
Pidage meeles, et vidinal on praegu kolm asja, mis mõjutavad selle kuvamist.
- vidina pealkiri,
- vidina sisu,
- lüliti selle kohta, kas peaksime pealkirja kuvama või mitte
Kolmas võimalus on eelkõige näidata, kuidas kasutada teist tüüpi elemente. Sest tehniliselt, kui me ei tahaks vidina pealkirja näidata, siis me lihtsalt ei paneks vidinasse midagi.
Kuid ma arvan, et see aitab näidata erinevate elementide tüüpide ja nende väärtuste praktilist (või poolpraktilist) kasutamist.
Igatahes teame, et iga vidina eksemplari kohta salvestatakse andmed koos pealkirja, sisu ja kuvatava pealkirja nime ja ID-dega, nagu WordPress pakub.
Seega kasutame väärtuste kuvamiseks neid oma esiotsa koodis.
Kuvamisfunktsioonide ettevalmistamine
Tavaliselt vastutab vidina funktsioon vidina väljundi kuvamise eest. Kuid üks asi, mida oleme püüdnud teha, on jagada oma vidinaga seotud probleemid rohkem keskendunud klasside ja funktsioonide kogumiks.
Esimene asi, mida tahame teha, on kirjutada WidgetDisplay klass, mis vastutab, nagu on ilmselge, vidina sisu kuvamise eest.
Praegu hõlmab see tingimusteta pealkirja, sisu ja pealkirja lisamise või mitte kaasamise väärtust. WordPress teeb kättesaadavaks ka teatud sisu, näiteks märgistuse, mis peaks ilmuma enne vidinat ja pärast vidinat, seega lisame kindlasti ka selle.
Aga kõigepealt lõpetame klassi :
<?php
namespace WordPressWidgetBoilerplateWordPress;
class WidgetDisplay
{
private $widgetSlug;
public function __construct(string $widgetSlug)
{
$this->widgetSlug = $widgetSlug;
}
public function show($args, $instance)
{
// More to come
}
}
Pärast seda peame veenduma, et kirjutame selle ka teistele klassidele. Esiteks lisame selle kindlasti oma vidinaklassi :
<?php
public function widget($args, $instance)
{
return $this->widgetDisplay->show($args, $instance);
}Ja siis lisame selle WidgetAdmini klassi (kuna siin asuvad vidina API põhifunktsioonid – see lihtsalt delegeerib vastutuse õigele klassile):
<?php
public function __construct($widgetSlug)
{
parent::__construct($widgetSlug);
$this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());
$this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());
}Praegu me veel midagi ei kuva. Oleme lähedal ja keskendume sellele varsti.
Andmete kuvamine
Eeldades, et saate ülaltoodud koodi vigadeta lisada, on aeg kuvada vidina sisu.
Saame seda teha mitmel erineval viisil alates lihtsast var_dump -st kuni sisu kasutajasõbralikumaks kuvamiseks. Ja ma olen palju rohkem viimase fänn.
Nii et teeme seda.
Lisage oma WidgetDisplay klassi kuvamisfunktsiooni järgmine kood :
<?php
public function show($args, $instance)
{
include_once 'Views/Widget.php';
}Ja siis võib malli vaade olla nii lihtne :
<div id="<?php echo $args['id']; ?>">
<h3 class="widget-title"><?php echo $instance['title']; ?></h3>
<p><?php echo $instance['content']; ?></p>
<pre><?php echo $instance['display-title']; ?></pre>
</div><!-- #<?php echo $args['id']; ?>-->See tagab, et kogu sisu jaoks enne vidinat on õige märgistus, vidina sisu ja sisu on korralikult renderdatud.
Jällegi pidage meeles, et kuvame sisu, mida selle lõplikus versioonis ei ole, kuid me oleme selle lähedal ja käsitleme seda järgmises postituses.
Soovitaksin mängida valikuga Kuva pealkiri, et näha, kuidas see meie pakutud märgistust arvestades esiotsas renderdab.
Praegu peaks vidina väljund välja nägema umbes selline:
Kuid see on kõik, mida selles postituses käsitleda.
Lõplikku Refaktorisse
Viimane asi, mida me pärast seda vaatame, on tingimusliku loogika karmistamine koos sõnaga andmete vahemällu salvestamise kohta (kuna me teeme seda juba varasemates postitustes).
Praegu aga võite vabalt mängida sellega, mis meil siin on, ja koodiga, mida me pole kaasanud (nt mida saab kuvada enne või pärast vidinat.
Need on sellest näitest teadlikult välja jäetud, kuid olenevalt teie tehtud tööst ei pruugi neid alati välja jätta.