{"id":230775,"date":"2022-12-19T17:49:00","date_gmt":"2022-12-19T14:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230775"},"modified":"2022-12-19T17:50:40","modified_gmt":"2022-12-19T14:50:40","slug":"wordpress-widgets-refactoring-del-8","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-widgets-refactoring-del-8\/","title":{"rendered":"WordPress-widgets: Refactoring, del 8"},"content":{"rendered":"\n<p>N\u00e4r det kommer till att omstrukturera WordPress Widget Boilerplate har vi gjort mycket arbete f\u00f6r att f\u00e5 upp kodbasen till en mer objektorienterad standard. Vidare har vi introducerat en m\u00e4ngd andra verktyg som g\u00f6r att vi kan h\u00f6ja v\u00e5r kod till modernare standarder<\/p>\n<p>Nu n\u00e4r vi har lagt ner tid p\u00e5 att g\u00f6ra det \u00e4r det dags att hoppa tillbaka in i koden och b\u00f6rja omstrukturera den p\u00e5 ett s\u00e5dant s\u00e4tt som till\u00e5ter anv\u00e4ndning av <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/abstrakta-klasser-del-1-abstraherande-beteende\/\" title=\"abstrakta klasser\">abstrakta klasser<\/a> och prenumeranter (som fungerar som en del av det <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/grunderna-foer-action-hooks-i-wordpress\/\" title=\"h\u00e4ndelsedrivna designm\u00f6nstret\">h\u00e4ndelsedrivna designm\u00f6nstret<\/a> ).<\/p>\n<p>I slutet av f\u00f6rra inl\u00e4gget skrev jag:<\/p>\n<blockquote>\n<p>I de kommande inl\u00e4ggen kommer vi att titta p\u00e5 hur vi kan implementera prenumeranter f\u00f6r den offentliga sidan av webbplatsen (det vill s\u00e4ga d\u00e4r widgetinneh\u00e5llet visas). Och vi kommer att g\u00f6ra samma sak f\u00f6r sajtens administrationsomr\u00e5de.<\/p>\n<\/blockquote>\n<p>S\u00e5 i det h\u00e4r inl\u00e4gget ska vi g\u00f6ra precis det. Specifikt kommer vi att b\u00f6rja med att arbeta p\u00e5 en prenumerant f\u00f6r widgeten och sedan f\u00e5 baswidgeten att visas p\u00e5 den administrativa sidan av webbplatsen f\u00f6rst.<\/p>\n<h2>WordPress Widget Boilerplate: Refactoring, del 8<\/h2>\n<p>Anledningen till att jag \u00e4r intresserad av att i f\u00f6rsta hand fokusera p\u00e5 den administrativa sidan av webbplatsen \u00e4r att den till\u00e5ter oss att:<\/p>\n<ul>\n<li>f\u00e5 koll p\u00e5 hur prenumeranter fungerar,<\/li>\n<li>se hur kodbasen m\u00e5ste organiseras,<\/li>\n<li>h\u00e5rdkoda lite information innan du arbetar med serialisering.<\/li>\n<\/ul>\n<p>N\u00e4r allt detta \u00e4r p\u00e5 plats kommer vi att vara i en bra position att rikta v\u00e5r uppm\u00e4rksamhet mot mer avancerade saker. Vi kommer n\u00e4mligen att kunna introducera prenumeranter f\u00f6r att visa information i administrationsomr\u00e5det och prenumeranter f\u00f6r att sanera, serialisera, h\u00e4mta, validera och visa data.<\/p>\n<p>Men f\u00f6rst, l\u00e5t oss g\u00f6ra det arbete som kr\u00e4vs f\u00f6r att skapa en ny klass, konfigurera autoloadern och visa inneh\u00e5ll i det administrativa omr\u00e5det p\u00e5 webbplatsen.<\/p>\n<h3>1 Den abstrakta prenumeranten<\/h3>\n<p><a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-00-abstract-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">L\u00e5t oss granska<\/a> den abstrakta prenumeranten f\u00f6rst eftersom detta \u00e4r vad alla prenumeranter kommer att implementera.<\/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\nnamespace WordPressWidgetBoilerplateSubscriber;\n\n\/**\n * An abstract implementation of a subscriber that requires a hook and the ability to\n * start the class.\n *\/\nabstract class AbstractSubscriber\n{\n    \/**\n     * @var string a reference to the hook to which the subscriber should be registered\n     *\/\n    protected $hook;\n\n    \/**\n     * @param string $hook the hook to which the subscriber is registered\n     *\/\n    public function __construct(string $hook)\n    {\n        $this-&gt;hook = $hook;\n    }\n\n    \/**\n     * @return string the hook to which the subscriber is registered\n     *\/\n    public function getHook(): string\n    {\n        return $this-&gt;hook;\n    }\n\n    \/**\n     * Implements the domain logic for the concrete class implementating this subcriber.\n     *\/\n    abstract public function load();\n}\n<\/code><\/pre>\n<p>Observera att den har tv\u00e5 offentliga funktioner \u2013 konstruktionen som s\u00e4tter kroken och en funktion f\u00f6r att h\u00e4mta kroken. Den har ocks\u00e5 en abstrakt laddningsfunktion som \u00e4r d\u00e4r varje klass som ut\u00f6kar denna klass implementerar sin specifika funktionalitet.<\/p>\n<p>Kom ih\u00e5g att p\u00e5 grund av hur WordPress hanterar \u00e5tg\u00e4rder och filter \u00e4r allt kopplat till en specifik krok (antingen de <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Hooks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">som WordPress definierar<\/a> eller anpassade krokar).<\/p>\n<h3>2 WordPress-namnutrymmet<\/h3>\n<p>N\u00e4r jag arbetar med funktionalitet som \u00e4r t\u00e4tt kopplad till WordPress f\u00f6rs\u00f6ker jag se till att jag placerar den i ett WordPress-namnomr\u00e5de. Detta indikerar f\u00f6r mig och andra utvecklare att allt som finns i det h\u00e4r namnutrymmet inte kan skiljas fr\u00e5n k\u00e4rnapplikationen.<\/p>\n<p>S\u00e5 inom <strong>src-<\/strong> katalogen, skapa en <strong>WordPress-<\/strong> katalog. Det \u00e4r h\u00e4r klassen Widgets k\u00e4rna kommer att finnas tillsammans med alla andra klasser som kommer att introduceras i den h\u00e4r serien.<\/p>\n<p>Det betyder att vi inte l\u00e4ngre beh\u00f6ver klassen i API-katalogen. S\u00e5 se till att flytta klassen, uppdatera dess namnutrymme och ta bort katalogen. Jag ska ha en sk\u00e4rmdump och lite kod f\u00f6r detta lite senare.<\/p>\n<p>Dessutom, minns tidigare i serien, placerade vi <strong>Views-<\/strong> katalogen i roten av <strong>src-<\/strong> katalogen, men nu kan vi flytta den till <strong>WordPress-<\/strong> katalogen. S\u00e5 forts\u00e4tt och g\u00f6r det nu.<\/p>\n<p>Det slutliga resultatet b\u00f6r se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n<p>Nu kan vi rikta v\u00e5r uppm\u00e4rksamhet mot koden.<\/p>\n<h3>3 En titt p\u00e5 widgetklassen<\/h3>\n<p>Vi kommer att f\u00f6renkla klassen core widget lite i det h\u00e4r inl\u00e4gget. Det kommer att \u00e5ngra en del av det arbete vi har gjort, men vi beh\u00f6vde det tidigare arbetet f\u00f6r att f\u00e5 oss till denna punkt.<\/p>\n<p>F\u00f6r tillf\u00e4llet fokuserar vi p\u00e5 konstruktorn och funktionen f\u00f6r att h\u00e4mta widgetsnigeln. Detta \u00e4r vad som i slut\u00e4ndan kommer att till\u00e5ta oss att se n\u00e5got inom det administrativa omr\u00e5det f\u00f6r WordPress.<\/p>\n<p>S\u00e5 f\u00f6rst, se till att din Widget-klass ser <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-01-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\nnamespace WordPressWidgetBoilerplateWordPress;\n\nuse WP_Widget;\n\nclass Widget extends WP_Widget\n{\n    \/**\n     * @var string unique identifier for your widget\n     *\/\n    protected $widgetSlug;\n\n    \/**\n     * Initializes the plugin by setting its properties and calling the parent class with the description.\n     *\n     * @param mixed $widgetSlug\n     *\/\n    public function __construct($widgetSlug)\n    {\n        $this-&gt;widgetSlug = $widgetSlug;\n\n        parent::__construct(\n            $this-&gt;getWidgetSlug(),\n            __('Widget Name', $this-&gt;getWidgetSlug()),\n            [\n                'classname' =&gt; $this-&gt;getWidgetSlug().'-class',\n                'description' =&gt; __('Short description of the widget goes here.', $this-&gt;getWidgetSlug()),\n            ]\n        );\n    }\n\n    \/**\n     * Return the widget slug.\n     *\n     * @return string slug variable\n     *\/\n    public function getWidgetSlug()\n    {\n        return $this-&gt;widgetSlug;\n    }\n}<\/code><\/pre>\n<p>Sedan, eftersom vi har flyttat den h\u00e4r filen till <strong>WordPress<\/strong> &#8211; namnutrymmet, m\u00e5ste vi uppdatera avsnittet f\u00f6r automatisk laddning av <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-02-composer-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">v\u00e5r Composer-konfigurationsfil<\/a> :<\/p>\n<pre><code>\"autoload\": {\n    \"psr-4\": {\n        \"WordPressWidgetBoilerplate\": \"src\/\",\n        \"WordPressWidgetBoilerplateUtilities\": \"src\/Utilities\/\",\n        \"WordPressWidgetBoilerplateSubscriber\": \"src\/Subscriber\/\",\n        \"WordPressWidgetBoilerplateWordPress\": \"src\/WordPress\/\"\n    }\n},<\/code><\/pre>\n<p>D\u00e4refter m\u00e5ste vi introducera en prenumerant.<\/p>\n<h3>4 Introduktion av Widget-abonnenten<\/h3>\n<p>N\u00e4r jag har en k\u00e4rnklass av n\u00e5got slag f\u00f6rs\u00f6ker jag i allm\u00e4nhet skapa en enkel prenumerant som instansierar k\u00e4rnklassen och l\u00e5ter den g\u00f6ra sitt arbete.<\/p>\n<p>Jag g\u00f6r detta eftersom WordPress, som n\u00e4mnts, anv\u00e4nder det h\u00e4ndelsedrivna designm\u00f6nstret vilket inneb\u00e4r att allt m\u00e5ste registreras till n\u00e5gon typ av krok. Och jag gillar inte att blanda dom\u00e4nlogik med samma klass som hakar in i WordPress. S\u00e5 jag skiljer dem \u00e5t.<\/p>\n<p>Och det \u00e4r vad en prenumerant g\u00f6r. Den registrerar sig sj\u00e4lv med WordPress och anropar sedan klassen som \u00e4r ansvarig f\u00f6r att faktiskt utf\u00f6ra arbetet.<\/p>\n<p>Med det sagt, v\u00e4nd din uppm\u00e4rksamhet till <strong>Subscriber<\/strong> -katalogen och l\u00e4gg till en klass som heter <strong>WidgetSubscriber<\/strong>. <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-03-widget-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">L\u00e4gg till f\u00f6ljande kod<\/a> i den klassen :<\/p>\n<pre><code>&lt;?php\n\n&lt;?php\n\nnamespace WordPressWidgetBoilerplateSubscriber;\n\nuse WordPressWidgetBoilerplateWordPressWidget;\n\n\/**\n * Initializes the core Widget class that's used by WordPress to instantiate the widget,\n * renders the administrative area, provide serialization functionality, and displays the\n * public-facing view.\n *\/\nclass WidgetSubscriber extends AbstractSubscriber\n{\n    \/**\n     * {@inheritdoc}\n     *\/\n    public function __construct(string $hook)\n    {\n        parent::__construct($hook);\n    }\n\n    \/**\n     * Registers the core Widget class using the WordPress APIs.\n     *\/\n    public function load()\n    {\n        register_widget(new Widget('widget-name'));\n    }\n}\n<\/code><\/pre>\n<p>Konstrukt\u00f6ren kommer att registrera klassen med en specifik krok som vi kommer att granska om ett \u00f6gonblick; d\u00e5 kommer den att anv\u00e4nda WordPress API f\u00f6r att instansiera v\u00e5r widget (vilket \u00e4r vad som h\u00e4nder i <strong>laddningsfunktionen<\/strong> ).<\/p>\n<h3>5 Bootstrap<\/h3>\n<p>Slutligen m\u00e5ste vi uppdatera bootstrap s\u00e5 att det:<\/p>\n<ul>\n<li>registrerar <strong>WidgetSubscriber<\/strong> med r\u00e4tt krok,<\/li>\n<li>l\u00e4gger till abonnenten i <strong>registret<\/strong> ,<\/li>\n<li>och startar plugin (vilket vi har gjort).<\/li>\n<\/ul>\n<p>Bootstrap, efter allt detta, b\u00f6r se <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-04-bootstrap-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ut s\u00e5<\/a> h\u00e4r :<\/p>\n<pre><code>&lt;?php\n\nnamespace WordPressWidgetBoilerplate;\n\nuse WordPressWidgetBoilerplateUtilitiesRegistry;\nuse WordPressWidgetBoilerplatePlugin;\nuse WordPressWidgetBoilerplateSubscriberWidgetSubscriber;\n\n\/\/ Prevent this file from being called directly.\ndefined('WPINC') || die;\n\n\/\/ Include the autoloader.\nrequire_once __DIR__. '\/vendor\/autoload.php';\n\n\/\/ Setup a filter so we can retrieve the registry throughout the plugin.\n$registry = new Registry();\nadd_filter('wpwBoilerplateRegistry', function() use ($registry) {\n    return $registry;\n});\n\n\/\/ Add the Widget base class to the Registry.\n$registry-&gt;add('widgetSubscriber', new WidgetSubscriber('widgets_init'));\n\n\/\/ Start the machine.\n(new Plugin($registry))-&gt;start();<\/code><\/pre>\n<p>D\u00e4refter b\u00f6r du kunna logga in p\u00e5 WordPress och aktivera plugin.<\/p>\n<h2>En titt p\u00e5 f\u00f6rvaltningsomr\u00e5det<\/h2>\n<p>Vid det h\u00e4r laget finns det inte mycket att titta p\u00e5, men vi n\u00e4rmar oss. F\u00f6rst b\u00f6r du l\u00e4gga m\u00e4rke till att widgeten nu visas i omr\u00e5det som inneh\u00e5ller de tillg\u00e4ngliga widgetarna:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175c46bcc.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175c46bcc.png\" alt=\"WordPress-widgets: Refactoring, del 8\"><\/a><\/p>\n<p>Och du b\u00f6r ocks\u00e5 se att n\u00e4r du drar widgeten till ett widgetiserat omr\u00e5de (eller n\u00e5gon sidof\u00e4lt) att den inte har n\u00e5gra tillg\u00e4ngliga alternativ.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175f91557.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175f91557.png\" alt=\"WordPress-widgets: Refactoring, del 8\"><\/a><\/p>\n<p>Som sagt, vi \u00e4r p\u00e5 ett bra st\u00e4lle att forts\u00e4tta bygga p\u00e5 det vi har. Du kan alltid forts\u00e4tta att f\u00f6lja utvecklingen av boilerplate <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e5 GitHub<\/a>.<\/p>\n<h2>Forts\u00e4tter p\u00e5<\/h2>\n<p>D\u00e4refter forts\u00e4tter vi att bygga ut funktionalitet f\u00f6r det administrativa omr\u00e5det f\u00f6r widgeten. Efter det kommer vi att rikta v\u00e5r uppm\u00e4rksamhet mot den offentliga sidan av widgeten samt serialiseringsfunktionalitet.<\/p>\n<p>Du borde kunna se hur saker och ting b\u00f6rjar ta form n\u00e4r vi b\u00f6rjar dela upp logiken i dess olika komponenter. Om inte, men oroa dig inte \u2013 det finns mycket mer p\u00e5 g\u00e5ng.<\/p>\n<p>Och den slutliga versionen av Boilerplate kommer naturligtvis att visa alla principer som vi bygger p\u00e5 genom hela den h\u00e4r serien av inl\u00e4gg.<\/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>Vi kommer att b\u00f6rja bryta is\u00e4r de olika komponenterna som ing\u00e5r i att skapa WordPress-widgets med b\u00f6rjan p\u00e5 det administrativa omr\u00e5det.<\/p>\n","protected":false},"author":1,"featured_media":234945,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[848,724,868],"tags":[1173],"class_list":["post-230775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230775","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=230775"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230775\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/234945"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=230775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=230775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=230775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}