D\u00e4refter ska vi titta p\u00e5 rendering av inneh\u00e5ll p\u00e5 front-end. Vi n\u00e4rmar oss slutet, av omstruktureringen av Boilerplate, men det finns bara lite mer att g\u00f6ra innan vi \u00e4r redo att sl\u00e5 samman den i kodbasens huvudgren.<\/p>\n<\/blockquote>\n
S\u00e5 i det h\u00e4r inl\u00e4gget ska vi plocka upp d\u00e4r. Om du nu har f\u00f6ljt med fram till denna punkt b\u00f6r du ha allt du beh\u00f6ver fr\u00e5n utvecklingsgrenen.<\/p>\n
Om inte, var noga med att dra det eftersom det \u00e4r d\u00e4r vi kommer att ta upp i resten av inl\u00e4gget.<\/p>\n
WordPress Widget Boilerplate: Refactoring del 12<\/h2>\n
Nu n\u00e4r det kommer till gr\u00e4nssnittet \u00e4r det l\u00e4tt att t\u00e4nka p\u00e5 gr\u00e4nssnittet som allt som anv\u00e4ndaren ser framf\u00f6r sig, oavsett om det \u00e4r i det administrativa omr\u00e5det eller inte.<\/p>\n
Den h\u00e4r serien har dock varit tydlig med att vi delar upp vad anv\u00e4ndaren ser mellan det administrativa omr\u00e5det och det offentliga omr\u00e5det p\u00e5 webbplatsen.<\/p>\n
S\u00e5 vad vi kommer att g\u00f6ra \u00e4r att arbeta med omr\u00e5det f\u00f6r koden som \u00e5terger information f\u00f6r anv\u00e4ndaren p\u00e5 det offentliga omr\u00e5det p\u00e5 webbplatsen. Vi kommer att b\u00f6rja med att helt enkelt l\u00e4sa informationen och visa den.<\/p>\n
Sedan i n\u00e4sta inl\u00e4gg kommer vi att titta p\u00e5 att arbeta med villkorlig logik ang\u00e5ende n\u00e5gra av alternativen f\u00f6r att se om det \u00e4r n\u00e5got vi beh\u00f6ver g\u00f6ra.<\/p>\n
Med det sagt, l\u00e5t oss g\u00e5 in i koden.<\/p>\n
P\u00e5 data vi kommer att visa<\/h3>\n
Kom ih\u00e5g att widgeten vid det h\u00e4r laget har tre saker som p\u00e5verkar dess visning:<\/p>\n
- \n
- widgettiteln,<\/li>\n
- widgetinneh\u00e5llet,<\/li>\n
- en v\u00e4xel om vi ska visa titeln eller inte<\/li>\n<\/ol>\n
Det tredje alternativet \u00e4r i f\u00f6rsta hand att visa hur man anv\u00e4nder en annan typ av element. F\u00f6r tekniskt sett, om vi inte ville visa widgettiteln, skulle vi helt enkelt inte l\u00e4gga in n\u00e5got i widgeten.<\/p>\n
Men jag tror att det hj\u00e4lper att visa att anv\u00e4nda olika elementtyper och deras v\u00e4rden p\u00e5 ett praktiskt (eller semi-praktiskt) s\u00e4tt.<\/p>\n
Hur som helst, med det sagt, vi vet att f\u00f6r varje given instans av widgeten lagras data med titeln<\/strong>, inneh\u00e5llet<\/strong> och visningstitelns<\/strong> namn och ID som tillhandah\u00e5lls av WordPress.<\/p>\n
D\u00e4rf\u00f6r kommer vi att anv\u00e4nda dem i v\u00e5r front-end-kod f\u00f6r att visa v\u00e4rdena.<\/p>\n
F\u00f6rbereder displayfunktionerna<\/h3>\n
Vanligtvis \u00e4r widgetfunktionen<\/strong> ansvarig f\u00f6r att visa utdata fr\u00e5n widgeten. Men en av sakerna vi har f\u00f6rs\u00f6kt g\u00f6ra \u00e4r att dela upp problemen med v\u00e5r widget i en mer fokuserad upps\u00e4ttning klasser och funktioner.<\/p>\n
Det f\u00f6rsta vi vill g\u00f6ra \u00e4r att skriva en WidgetDisplay-<\/strong> klass som kommer att ansvara f\u00f6r, vilket s\u00e4kert \u00e4r uppenbart, visa inneh\u00e5llet i widgeten.<\/p>\n
F\u00f6r n\u00e4rvarande kommer detta ovillkorligen att inkludera titeln, inneh\u00e5llet och v\u00e4rdet av om titeln ska inkluderas eller inte. WordPress g\u00f6r ocks\u00e5 tillg\u00e4ngligt visst inneh\u00e5ll som uppm\u00e4rkning som ska visas f\u00f6re widgeten och efter widgeten, s\u00e5 vi kommer att se till att inkludera det ocks\u00e5.<\/p>\n
Men f\u00f6rst, l\u00e5t oss bara sl\u00e4nga ut klassen<\/a> :<\/p>\n
<?php\n\nnamespace WordPressWidgetBoilerplateWordPress;\n\nclass WidgetDisplay\n{\n private $widgetSlug;\n\n public function __construct(string $widgetSlug)\n {\n $this->widgetSlug = $widgetSlug;\n }\n\n public function show($args, $instance)\n {\n \/\/ More to come\n }\n}\n<\/code><\/pre>\nEfter det m\u00e5ste vi se till att vi skriver upp det till de andra klasserna ocks\u00e5. F\u00f6rst ska vi se till att inkludera det i v\u00e5r Widget-klass<\/a> :<\/p>\n
<?php\npublic function widget($args, $instance)\n{\n return $this->widgetDisplay->show($args, $instance);\n}<\/code><\/pre>\nOch sedan l\u00e4gger<\/a> vi till den i WidgetAdmin-klassen (eftersom det \u00e4r h\u00e4r de centrala Widget API-funktionerna finns \u2013 den delegerar bara ansvaret till r\u00e4tt klass):<\/p>\n
<?php\n\npublic function __construct($widgetSlug)\n{\n parent::__construct($widgetSlug);\n $this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());\n $this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());\n}<\/code><\/pre>\nF\u00f6r n\u00e4rvarande visar vi ingenting \u00e4nnu. Vi \u00e4r n\u00e4ra och vi kommer att fokusera p\u00e5 det snart.<\/p>\n
Visar data<\/h3>\n
F\u00f6rutsatt att du kan l\u00e4gga till ovanst\u00e5ende kod utan fel, \u00e4r det dags att visa inneh\u00e5llet i widgeten.<\/p>\n
Vi kan g\u00f6ra detta p\u00e5 valfritt antal s\u00e4tt fr\u00e5n en enkel var_dump<\/strong> till att faktiskt arbeta f\u00f6r att visa inneh\u00e5llet p\u00e5 ett mer anv\u00e4ndarv\u00e4nligt s\u00e4tt. Och jag \u00e4r mycket mer ett fan av det sistn\u00e4mnda.<\/p>\n
S\u00e5 l\u00e5t oss g\u00f6ra det.<\/p>\n
L\u00e4gg till f\u00f6ljande kod<\/a> i showfunktionen<\/strong> f\u00f6r din WidgetDisplay-<\/strong> klass :<\/a><\/p>\n
<?php\npublic function show($args, $instance)\n{\n include_once 'Views\/Widget.php';\n}<\/code><\/pre>\n
![\"WordPress-widgets:](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160763-61e7125f80aab.png\")
<\/a><\/p>\n