{"id":230908,"date":"2022-12-22T18:32:00","date_gmt":"2022-12-22T15:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230908"},"modified":"2022-12-22T18:34:19","modified_gmt":"2022-12-22T15:34:19","slug":"wordpress-widgets-refactoring-del-13","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-widgets-refactoring-del-13\/","title":{"rendered":"WordPress-widgets: Refactoring, del 13"},"content":{"rendered":"\n<p>Vi \u00e4r \u00e4ntligen vid det sista inl\u00e4gget i serien om omstrukturering av WordPress Widget Boilerplate. I slutet av det h\u00e4r inl\u00e4gget kommer vi att ha utvecklingsgrenen av v\u00e5r kod klar, och vi kommer att vara redo att sl\u00e5 samman allt i huvudgrenen.<\/p>\n<p>Det \u00e5terst\u00e5r dock en del att g\u00f6ra. <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-widgets-refactoring-del-12\/\" title=\"N\u00e4mligen\">N\u00e4mligen<\/a> :<\/p>\n<blockquote>\n<p>Det sista vi kommer att titta p\u00e5 efter detta \u00e4r att sk\u00e4rpa upp en del av den villkorliga logiken tillsammans med ett ord om cachning av data (eftersom vi redan g\u00f6r lite av det i tidigare inl\u00e4gg).<\/p>\n<\/blockquote>\n<p>S\u00e5 det \u00e4r de tv\u00e5 sakerna vi kommer att titta p\u00e5 i det h\u00e4r inl\u00e4gget. Specifikt kommer vi att titta p\u00e5 hantering av villkorlig logik f\u00f6r front-end och sedan hur man implementerar grundl\u00e4ggande cachelagring.<\/p>\n<h2>WordPress Widget Boilerplate: Refactoring del 13<\/h2>\n<p>Innan vi g\u00e5r in i den sista omg\u00e5ngen med detaljer vill jag f\u00f6rs\u00e4kra mig om att du k\u00f6r <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">den senaste versionen av koden<\/a> eftersom det h\u00e4r \u00e4r en g\u00e5ng d\u00e5 jag tror att det \u00e4r absolut n\u00f6dv\u00e4ndigt att ha koden redo f\u00f6r den sista omg\u00e5ngen av \u00e4ndringar.<\/p>\n<p>S\u00e5 om du inte har koden k\u00f6rd p\u00e5 din maskin \u00e4r det dags nu. Den sista biten kod som vi beh\u00f6ver arbeta med \u00e4r ganska liten.<\/p>\n<p>Men det \u00e4r viktigt att se till att du k\u00f6r den senaste versionen. S\u00e5 n\u00e4r du har gjort en dragning av den senaste koden \u00e4r vi redo att avsluta detta.<\/p>\n<h3>1 Rendering av front-end<\/h3>\n<p>Minns i det f\u00f6rra inl\u00e4gget \u00e5tergav vi allm\u00e4n widgetinformation \u2013 titeln, inneh\u00e5llet och om titeln ska visas eller inte \u2013 genom att helt enkelt visa v\u00e4rdena i front-end.<\/p>\n<p>Men nu \u00e4r det dags att st\u00e4lla in information f\u00f6r att s\u00e4kerst\u00e4lla att vi inte bara kommer att rendera information baserat p\u00e5 alternativen i administrationsomr\u00e5det f\u00f6r widgeten, utan \u00e4ven om det finns n\u00e5gon information alls.<\/p>\n<p>S\u00e5 vi b\u00f6rjar med det enklaste alternativet: Alternativet som l\u00e5ter oss v\u00e4xla om titeln visas. Med andra ord, vi kommer att anta om v\u00e4rdena \u00e4r ifyllda och det alternativet \u00e4r markerat i backend.<\/p>\n<p>Kom\u00a0 ih\u00e5g att filen <strong>Widget.php<\/strong> f\u00f6r n\u00e4rvarande ser <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-00-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ut s\u00e5 h\u00e4r<\/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>S\u00e5 vi ska f\u00f6rst omstrukturera den h\u00e4r delen. Visst \u00e4r det en relativt enkel sak att introducera, eller hur? Det vill s\u00e4ga, logiken ser ut s\u00e5 h\u00e4r:<\/p>\n<ul>\n<li>Om alternativet f\u00f6r att visa titeln \u00e4r markerat visar vi titeln; annars g\u00f6r vi inte det.<\/li>\n<\/ul>\n<p>Detta kan l\u00f6sas med ett enkelt <strong>if<\/strong> &#8211; uttalande genom att utv\u00e4rdera v\u00e4rdet av\u00a0 alternativet f\u00f6r <strong>visningstitel<\/strong> vi har. P\u00e5 grund av hur vi har byggt funktionen genom hela den h\u00e4r serien, om alternativet \u00e4r markerat har det alternativet <strong>p\u00e5<\/strong> ; annars \u00e4r det tomt.<\/p>\n<p>Det betyder att vi kan st\u00e4lla in en villkorlig s\u00e5dan h\u00e4r i samma kod som vi har <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-01-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">delat ovan<\/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>P\u00e5 detta s\u00e4tt, om alternativet \u00e4r markerat, kommer titeln att visas.<\/p>\n<h3>En f\u00f6ljd av detta<\/h3>\n<p>En sak som jag tycker \u00e4r v\u00e4rd att n\u00e4mna \u00e4r att det finns tillf\u00e4llen d\u00e5 m\u00e4nniskor kan aktivera widgets men v\u00e4ljer att inte ha n\u00e5got inneh\u00e5ll. Visst, du kan argumentera att om de g\u00f6r det s\u00e5 \u00e4r det deras fel.<\/p>\n<p>Det ligger sanning i det.<\/p>\n<p>Men jag tror ocks\u00e5 att det kan hj\u00e4lpa dem att ta hand om anv\u00e4ndare som kanske klurar p\u00e5 saker eller som av misstag har gjort n\u00e5got som de inte visste. Kanske g\u00f6r det oss ansvarsfulla utvecklare (eller kanske g\u00f6r det oss mer aggressiva \u2013 v\u00e4lj sj\u00e4lv, jag \u00e4r med i den f\u00f6rra).<\/p>\n<p>S\u00e5 i det h\u00e4r fallet tycker jag att det \u00e4r v\u00e4rt att se till att titeln och inneh\u00e5llet inte \u00e4r tomma. Om de \u00e4r det, rendera inte n\u00e5got.<\/p>\n<p>Koden ser d\u00e5 ut <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-02-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">s\u00e5 h\u00e4r<\/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>Och det kommer att avsluta det h\u00e4r n\u00e4r det g\u00e4ller front-end. Men hur \u00e4r det med cachen som vi pratade om i ett tidigare inl\u00e4gg?<\/p>\n<h3>2 Introduktion av cachelagring<\/h3>\n<p>Cachning, f\u00f6r en s\u00e5dan h\u00e4r widget, \u00e4r n\u00e5got som jag anser vara valfritt, men eftersom vi har byggt in den grundl\u00e4ggande funktionaliteten i Boilerplate f\u00f6r att spola cachen s\u00e5 f\u00f6ljer det logiskt att introducera funktionaliteten f\u00f6r att cache data, eller hur?<\/p>\n<p>S\u00e5 l\u00e5t oss g\u00f6ra det. Det borde inte vara sv\u00e5rt heller. I verkligheten tar vi helt enkelt titeln, inneh\u00e5llet och kryssrutan och cachelagrar v\u00e4rdena f\u00f6r den givna instansen av widgeten.<\/p>\n<p>F\u00f6r att g\u00f6ra detta m\u00e5ste vi hitta <strong>widgetfunktionen<\/strong> och sedan g\u00f6ra f\u00f6ljande:<\/p>\n<p>F\u00f6rst introducerar vi <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-03-cache-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">en funktion f\u00f6r att cachelagra widgeten<\/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>Sedan introducerar vi en funktion f\u00f6r att h\u00e4mta <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-04-get-cached-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">den cachade versionen av widgeten<\/a> :<\/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>Sedan g\u00e5r vi tillbaka till den ursprungliga funktionen f\u00f6r att se till att vi visar det som beh\u00f6vs. Om cachen \u00e4r tom g\u00f6r vi inget annat \u00e4n att visa v\u00e4rdena <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-05-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">som de st\u00e5r<\/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>Och det avslutar funktionaliteten f\u00f6r den helt omstrukturerade Widget Boilerplate.<\/p>\n<h2>Slutet<\/h2>\n<p>Det h\u00e4r allvarliga har varit l\u00e4nge. Personligen har det varit riktigt bra att \u00e5terbes\u00f6ka WordPress Widget Boilerplate och f\u00e5 upp den till modernare standarder.<\/p>\n<p>Det finns fortfarande n\u00e5gra saker jag beh\u00f6ver g\u00f6ra, som att uppdatera README-filen och sedan ge n\u00e5gra fler instruktioner innan jag sl\u00e5r ihop den i <strong>mastergrenen<\/strong>, men om du har f\u00f6ljt hela den h\u00e4r serien, \u00e4r du troligen ombord med allt. Vidare, jag uppskattar din tid att h\u00e4nga med det, och jag hoppas att det var till nytta f\u00f6r dig p\u00e5 vissa niv\u00e5er.<\/p>\n<p>Med det sagt, jag kommer att se \u00f6ver att g\u00e5 \u00f6ver till kortare premiuminneh\u00e5ll eftersom den h\u00e4r serien och den senaste var ganska l\u00e5nga. Som vanligt kan du alltid kontakta mig eller erbjuda pull-f\u00f6rfr\u00e5gningar vid behov \u2013 det \u00e4r \u00f6ppen k\u00e4llkod och v\u00e4lkomnar f\u00f6rb\u00e4ttringar ocks\u00e5.<\/p>\n<p>F\u00f6r nu avslutar detta dock den h\u00e4r serien.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>H\u00e4r slutf\u00f6r vi den uppdaterade versionen av WordPress Widget Boilerplate genom att uppdatera vad anv\u00e4ndarna ser p\u00e5 front-end och genom att arbeta med cachning.<\/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":[848,901,724,868],"tags":[1173],"class_list":["post-230908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=230908"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230908\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/236089"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=230908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=230908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=230908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}