{"id":231504,"date":"2022-12-22T18:19:00","date_gmt":"2022-12-22T15:19:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231504"},"modified":"2022-12-22T18:19:24","modified_gmt":"2022-12-22T15:19:24","slug":"wordpress-widgetit-refaktorointi-osa-13","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-widgetit-refaktorointi-osa-13\/","title":{"rendered":"WordPress-widgetit: Refaktorointi, osa 13"},"content":{"rendered":"\n<p>Olemme vihdoin WordPress Widget Boilerplaten uudelleenmuodostusta k\u00e4sittelev\u00e4n sarjan viimeisess\u00e4 viestiss\u00e4. T\u00e4m\u00e4n viestin loppuun menness\u00e4 olemme saaneet koodimme kehityshaaran valmiiksi ja olemme valmiita yhdist\u00e4m\u00e4\u00e4n kaiken p\u00e4\u00e4haaraan.<\/p>\n<p>Ty\u00f6t\u00e4 on kuitenkin viel\u00e4 v\u00e4h\u00e4n. <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-widgetit-refaktorointi-osa-12\/\" title=\"Nimitt\u00e4in\">Nimitt\u00e4in<\/a> :<\/p>\n<blockquote>\n<p>Viimeinen asia, jota tarkastelemme t\u00e4m\u00e4n j\u00e4lkeen, on ehdollisen logiikan tiukentaminen ja sana v\u00e4limuistiin tallentamisesta (koska teemme sit\u00e4 jo aiemmissa viesteiss\u00e4).<\/p>\n<\/blockquote>\n<p>Joten n\u00e4m\u00e4 ovat kaksi asiaa, joita aiomme tarkastella t\u00e4ss\u00e4 viestiss\u00e4. Tarkastellaan erityisesti k\u00e4ytt\u00f6liittym\u00e4n ehdollisen logiikan k\u00e4sittely\u00e4 ja sitten perusv\u00e4limuistin toteuttamista.<\/p>\n<h2>WordPress Widget Boilerplate: Refactoring osa 13<\/h2>\n<p>Ennen kuin siirrymme viimeiseen yksityiskohtiin, haluan varmistaa, ett\u00e4 k\u00e4yt\u00e4t <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">koodin viimeisint\u00e4 versiota,<\/a> koska uskon, ett\u00e4 t\u00e4ll\u00e4 hetkell\u00e4 koodin on oltava valmis viimeist\u00e4 muutoskierrosta varten.<\/p>\n<p>Joten jos sinulla ei ole koodia k\u00e4ynniss\u00e4 koneellasi, nyt on aika. Viimeinen koodin bitti, jota meid\u00e4n on ty\u00f6stett\u00e4v\u00e4, on melko pieni.<\/p>\n<p>Mutta on t\u00e4rke\u00e4\u00e4 varmistaa, ett\u00e4 k\u00e4yt\u00e4t uusinta versiota. Joten kun olet hankkinut uusimman koodin, olemme valmiita p\u00e4\u00e4tt\u00e4m\u00e4\u00e4n t\u00e4m\u00e4n.<\/p>\n<h3>1 Etuosan render\u00f6iminen<\/h3>\n<p>Muista, ett\u00e4 edellisess\u00e4 viestiss\u00e4 n\u00e4ytimme yleiset widgetin tiedot \u2013 otsikon, sis\u00e4ll\u00f6n ja sen, pit\u00e4isik\u00f6 otsikko n\u00e4ytt\u00e4\u00e4 vai ei \u2013 n\u00e4ytt\u00e4m\u00e4ll\u00e4 arvot k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n<p>Mutta nyt on aika m\u00e4\u00e4ritt\u00e4\u00e4 tiedot varmistaaksemme, ett\u00e4 emme ainoastaan \u200b\u200bhahmonna tietoja widgetin hallinta-alueen vaihtoehtojen perusteella, vaan my\u00f6s jos tietoja on ollenkaan.<\/p>\n<p>Joten aloitamme yksinkertaisimmalla vaihtoehdolla: vaihtoehdolla, jonka avulla voimme vaihtaa, jos otsikko n\u00e4ytet\u00e4\u00e4n. Toisin sanoen oletetaan, ett\u00e4 arvot t\u00e4ytet\u00e4\u00e4n ja t\u00e4m\u00e4 vaihtoehto on valittu taustaohjelmassa.<\/p>\n<p>Muista, ett\u00e4 <strong>Widget.php-<\/strong> tiedosto n\u00e4ytt\u00e4\u00e4 t\u00e4ll\u00e4 hetkell\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-00-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4lt\u00e4<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin &lt;tom@tommcfarlin.com&gt;\n *\n * This source file is subject to the GPL license that is bundled\n * with this source code in the file LICENSE.\n *\/\n?&gt;\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n    &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n    &lt;pre&gt;&lt;?php echo $instance['display-title']; ?&gt;&lt;\/pre&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>Joten aiomme muokata t\u00e4t\u00e4 osaa ensin. Tietysti se on suhteellisen helppo esitell\u00e4, eik\u00f6? Eli logiikka menee n\u00e4in:<\/p>\n<ul>\n<li>Jos otsikon n\u00e4ytt\u00e4misvaihtoehto on valittuna, n\u00e4yt\u00e4mme otsikon; muuten emme.<\/li>\n<\/ul>\n<p>T\u00e4m\u00e4 voidaan ratkaista yksinkertaisella <strong>if<\/strong> &#8211; lauseella arvioimalla k\u00e4ytett\u00e4viss\u00e4mme olevan <strong>n\u00e4ytt\u00f6-otsikko-<\/strong> vaihtoehdon arvo. Koska olemme rakentaneet funktion koko t\u00e4ss\u00e4 sarjassa, jos vaihtoehto on valittuna, siin\u00e4 on vaihtoehto <strong>on<\/strong> ; muuten se on tyhj\u00e4.<\/p>\n<p>T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voimme m\u00e4\u00e4ritt\u00e4\u00e4 t\u00e4llaisen ehdon samaan koodiin, jonka olemme <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-01-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jakaneet yll\u00e4<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin &lt;tom@tommcfarlin.com&gt;\n *\n * This source file is subject to the GPL license that is bundled\n * with this source code in the file LICENSE.\n *\/\n?&gt;\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n  &lt;?php if (isset($instance['display-title']) &amp;&amp; 'on' === $instance['display-title']): ?&gt;\n        &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;?php endif; ?&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>T\u00e4ll\u00e4 tavalla, jos vaihtoehto on valittuna, otsikko tulee n\u00e4kyviin.<\/p>\n<h3>Seuraus t\u00e4h\u00e4n<\/h3>\n<p>Yksi asia on mielest\u00e4ni mainitsemisen arvoinen, ett\u00e4 on aikoja, jolloin ihmiset voivat aktivoida widgetej\u00e4, mutta valita, ettei niill\u00e4 ole sis\u00e4lt\u00f6\u00e4. Toki voit v\u00e4itt\u00e4\u00e4, ett\u00e4 jos he tekev\u00e4t niin, se on heid\u00e4n vikansa.<\/p>\n<p>Siin\u00e4 on totuus.<\/p>\n<p>Mutta uskon my\u00f6s, ett\u00e4 huolehtiminen k\u00e4ytt\u00e4jist\u00e4, jotka ehk\u00e4 keksiv\u00e4t asioita tai ovat vahingossa tehneet jotain, jota he eiv\u00e4t tienneet voivansa auttaa heit\u00e4. Ehk\u00e4 se tekee meist\u00e4 vastuullisia kehitt\u00e4ji\u00e4 (tai ehk\u00e4 se tekee meist\u00e4 aggressiivisempia \u2013 valitse, min\u00e4 olen edellisen puolella).<\/p>\n<p>Joten t\u00e4ss\u00e4 tapauksessa mielest\u00e4ni kannattaa varmistaa, ett\u00e4 otsikko ja sis\u00e4lt\u00f6 eiv\u00e4t ole tyhji\u00e4. Jos ne ovat, \u00e4l\u00e4 render\u00f6i mit\u00e4\u00e4n.<\/p>\n<p>Koodi n\u00e4ytt\u00e4\u00e4 sitten <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-02-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4lt\u00e4<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin &lt;tom@tommcfarlin.com&gt;\n *\n * This source file is subject to the GPL license that is bundled\n * with this source code in the file LICENSE.\n *\/\n?&gt;\n\n&lt;?php if (empty($instance['title']) &amp;&amp; empty($instance['content'])): return;\nendif; ?&gt;\n\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n    &lt;?php if (isset($instance['display-title']) &amp;&amp; 'on' === $instance['display-title']): ?&gt;\n        &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;?php endif; ?&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>Ja t\u00e4m\u00e4 p\u00e4\u00e4tt\u00e4\u00e4 t\u00e4m\u00e4n etup\u00e4\u00e4n osalta. Mutta ent\u00e4 v\u00e4limuisti, josta puhuimme aikaisemmassa viestiss\u00e4?<\/p>\n<h3>2 Esittelyss\u00e4 v\u00e4limuisti<\/h3>\n<p>V\u00e4limuistin tallentaminen t\u00e4llaiselle widgetille on mielest\u00e4ni valinnainen, mutta koska olemme rakentaneet Boilerplateen perustoiminnot v\u00e4limuistin tyhjent\u00e4miseksi, seuraa loogisesti tietojen v\u00e4limuistin tallentamisen toimintojen k\u00e4ytt\u00f6\u00f6notto, eik\u00f6 niin?<\/p>\n<p>Joten tehd\u00e4\u00e4n se. Ei senk\u00e4\u00e4n pit\u00e4isi olla vaikeaa. Todellisuudessa otamme vain otsikon, sis\u00e4ll\u00f6n ja valintaruudun ja tallennamme widgetin tietyn esiintym\u00e4n arvot v\u00e4limuistiin.<\/p>\n<p>T\u00e4t\u00e4 varten meid\u00e4n on l\u00f6ydett\u00e4v\u00e4 <strong>widget<\/strong> &#8211; toiminto ja teht\u00e4v\u00e4 seuraava:<\/p>\n<p>Ensin esittelemme <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-03-cache-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">toiminnon widgetin v\u00e4limuistiin tallentamiseen<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Caches the values for the instance of this widget.\n *\n * @param array $args     argument provided by WordPress that may be useful in rendering the widget\n * @param array $instance the values of the widget\n *\/\nprivate function cacheWidget($args, $instance)\n{\n    $cache = [];\n    $cache['widget_id'] = $args['widget_id'];\n    $cache['title'] = empty($instance['title'])? '': $instance['title'];\n    $cache['content'] = empty($instance['content'])? '': $instance['content'];\n\n    $instance['display-title'] = isset($instance['display-title'])? $instance['display-title']: '';\n    $cache['display-title'] = $instance['display-title'];\n\n    wp_cache_set($this-&gt;getWidgetSlug(), $cache, 'widget');\n}<\/code><\/pre>\n<p>Sitten esittelemme toiminnon <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-04-get-cached-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">widgetin v\u00e4limuistiversion<\/a> noutamiseen :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * @return array the cached instance of this widget if it's not empty\n *\/\nprivate function getCachedWidget()\n{\n    $cache = wp_cache_get($this-&gt;getWidgetSlug(), 'widget');\n    if (!empty($cache)) {\n        return $cache;\n    }\n    return [];\n}<\/code><\/pre>\n<p>Sitten palaamme alkuper\u00e4iseen toimintoon varmistaaksemme, ett\u00e4 n\u00e4yt\u00e4mme sen, mit\u00e4 tarvitaan. Jos v\u00e4limuisti on tyhj\u00e4, emme tee muuta kuin n\u00e4yt\u00e4mme arvot <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-05-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sellaisenaan<\/a>.<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Displays the widget based on the contents of the included template.\n *\n * @param array $args     argument provided by WordPress that may be useful in rendering the widget\n * @param array $instance the values of the widget\n *\/\npublic function widget($args, $instance)\n{\n    \/\/ Get a cached version of the widget. If it's empty, cache what we have.\n    $cache = $this-&gt;getCachedWidget();\n    if (empty($cache)) {\n        $this-&gt;cacheWidget($args, $instance);\n    }\n\n    return $this-&gt;widgetDisplay-&gt;show($args, $instance);\n}<\/code><\/pre>\n<p>Ja se p\u00e4\u00e4tt\u00e4\u00e4 t\u00e4ysin uudelleen muotoillun Widget Boilerplaten toiminnot.<\/p>\n<h2>Loppu<\/h2>\n<p>T\u00e4m\u00e4 erityisen vakava on kest\u00e4nyt kauan. Henkil\u00f6kohtaisesti on ollut todella hyv\u00e4 k\u00e4yd\u00e4 uudelleen WordPress Widget Boilerplatessa ja saattaa se nykyaikaisempien standardien tasolle.<\/p>\n<p>Minun on viel\u00e4 teht\u00e4v\u00e4 muutamia asioita, kuten p\u00e4ivitett\u00e4v\u00e4 README-tiedosto ja annettava sitten muutama lis\u00e4ohje ennen kuin yhdist\u00e4n sen <strong>p\u00e4\u00e4haaraan<\/strong>, mutta jos olet seurannut koko sarjaa, olet todenn\u00e4k\u00f6isesti mukana kaiken kanssa. Lis\u00e4ksi arvostan aikaasi sen parissa, ja toivon, ett\u00e4 siit\u00e4 oli sinulle hy\u00f6ty\u00e4 jollain tasolla.<\/p>\n<p>T\u00e4m\u00e4n sanottuani aion siirty\u00e4 lyhyemp\u00e4\u00e4n premium-sis\u00e4lt\u00f6\u00f6n, koska t\u00e4m\u00e4 sarja ja viimeinen olivat melko pitki\u00e4. Kuten tavallista, voit aina ottaa minuun yhteytt\u00e4 tai tarjota pull-pyynt\u00f6j\u00e4 tarpeen mukaan \u2013 se on avoimen l\u00e4hdekoodin ja se on my\u00f6s tervetullut parannuksiin.<\/p>\n<p>Toistaiseksi t\u00e4m\u00e4 kuitenkin p\u00e4\u00e4tt\u00e4\u00e4 t\u00e4m\u00e4n sarjan.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4\u00e4ll\u00e4 viimeistelemme WordPress Widget Boilerplaten p\u00e4ivitetyn version p\u00e4ivitt\u00e4m\u00e4ll\u00e4 sen, mit\u00e4 k\u00e4ytt\u00e4j\u00e4t n\u00e4kev\u00e4t k\u00e4ytt\u00f6liittym\u00e4ss\u00e4, ja ty\u00f6skentelem\u00e4ll\u00e4 v\u00e4limuistin kanssa.<\/p>\n","protected":false},"author":1,"featured_media":236089,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,895,843,864],"tags":[1166],"class_list":["post-231504","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/231504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=231504"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/231504\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/236089"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=231504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=231504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=231504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}