{"id":230757,"date":"2022-12-18T19:02:00","date_gmt":"2022-12-18T16:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230757"},"modified":"2022-12-18T19:02:12","modified_gmt":"2022-12-18T16:02:12","slug":"wordpress-widgets-refactoring-del-7","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-widgets-refactoring-del-7\/","title":{"rendered":"WordPress-widgets: Refactoring, del 7"},"content":{"rendered":"\n<p>I de senaste inl\u00e4ggen har vi gjort mycket arbete f\u00f6r att f\u00e5 koden upp till den punkt av refaktorering som kommer att behandlas i den h\u00e4r artikeln.<\/p>\n<p>Specifikt har vi t\u00e4ckt:<\/p>\n<ul>\n<li>krokar,<\/li>\n<li>ett <a href=\"https:\/\/tommcfarlin.com\/wordpress-widgets-part-4\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">register<\/a> ,<\/li>\n<li>och <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/wordpress-widgets-refactoring-del-3\/\" title=\"prenumeranter\">prenumeranter<\/a>.<\/li>\n<\/ul>\n<p>Alla dessa kommer att spela en roll i vad vi ska g\u00f6ra idag.<\/p>\n<h2>WordPress Widget Boilerplate: Refactoring, del 7<\/h2>\n<p>F\u00f6r de som \u00e4r bekanta med <a href=\"https:\/\/codex.wordpress.org\/Widgets_API\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Widgets API<\/a> vet du f\u00f6rmodligen att det inte har f\u00f6r\u00e4ndrats mycket under de senaste \u00e5ren.<\/p>\n<p>Dessutom best\u00e5r den egentligen bara av fyra funktioner (varav en \u00e4r konstrukt\u00f6ren):<\/p>\n<ol>\n<li>Konstrukt\u00f6ren \u00e4r ansvarig f\u00f6r att st\u00e4lla in flera egenskaper p\u00e5 widgeten, oftast dess namn och beskrivningen av den.<\/li>\n<li>Widgetfunktionen \u00e4r ansvarig f\u00f6r att rendera inneh\u00e5llet i widgeten.<\/li>\n<li>Formul\u00e4rfunktionen ansvarar f\u00f6r att visa formul\u00e4ret i administrationsomr\u00e5det f\u00f6r WordPress n\u00e4r du arbetar med widgeten.<\/li>\n<li>Uppdateringsfunktionen ansvarar f\u00f6r att uppdatera de alternativ som sparas i databasen (eller initieras och sedan spara de alternativ som kanske \u00e4nnu inte finns i databasen).<\/li>\n<\/ol>\n<p>Det fina \u00e4r att just detta tillv\u00e4gag\u00e5ngss\u00e4tt uppn\u00e5s genom att \u00e4rva en funktionalitet f\u00f6r klassen <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Widget<\/a>.<\/p>\n<p>Problemet \u00e4r dock att det \u00e4r mycket arbete f\u00f6r en enskild klass att g\u00f6ra.<\/p>\n<p>Ist\u00e4llet borde vi separera var och en av funktionerna i sitt eget funktionsomr\u00e5de.<\/p>\n<p>Som med allt inom programmering kommer det att finnas s\u00e4tt d\u00e4r vissa saker \u00e4r tydliga om hur de kan g\u00f6ras och sedan kommer det att finnas n\u00e5gra saker som kan g\u00f6ras p\u00e5 flera s\u00e4tt.<\/p>\n<p>Det jag ska presentera \u00e4r hur jag f\u00f6rh\u00e5ller mig till det nu. Detta kan f\u00f6r\u00e4ndras i framtiden, eller kanske inte, och andra kan ha en annan syn p\u00e5 det.<\/p>\n<p>Oavsett vilket kommer implementeringen att bli mycket mer objektorienterad och kommer att ge varje klass sin egen upps\u00e4ttning ansvarsomr\u00e5den.<\/p>\n<p>Den f\u00f6rsta fr\u00e5gan \u00e4r dock hur vi delar upp en klass med fyra funktioner och som \u00e4rver fr\u00e5n en \u00f6verordnad klass?<\/p>\n<h3>Uppdaterar The Bootstrap<\/h3>\n<p>F\u00f6r det f\u00f6rsta finns det n\u00e5gra saker vi beh\u00f6ver justera i pluginets bootstrap. Vi beh\u00f6ver n\u00e4mligen g\u00f6ra f\u00f6ljande:<\/p>\n<ol>\n<li>instansiera registret och g\u00f6ra det tillg\u00e4ngligt genom projektet,<\/li>\n<li>uppdatera plugin-klassen s\u00e5 att den accepterar ett register och laddar prenumeranterna,<\/li>\n<li>granska bootstrapen<\/li>\n<\/ol>\n<p>H\u00e4r \u00e4r en titt p\u00e5 alla tre ovanst\u00e5ende.<\/p>\n<h3>1 Instantiera registret<\/h3>\n<p>Eftersom vi redan har tagit upp detta tidigare i serien borde det vara klart hur man g\u00f6r detta.<\/p>\n<p>Se f\u00f6rst <a href=\"https:\/\/gist.github.com\/tommcfarlin\/9c39ba3635c823f85447d0378c8976d2#file-00-instantiate-the-registry-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">f\u00f6ljande kod<\/a> :<\/p>\n<pre><code>&lt;?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});<\/code><\/pre>\n<p>L\u00e4gg sedan m\u00e4rke till att vi instansierar registret (vi kommer att prata om dess namnomr\u00e5de f\u00f6r en stund) och sedan kopplar vi in \u200b\u200bdet i ett anpassat filter som l\u00e5ter oss komma \u00e5t det genom hela pluginet n\u00e4r vi vill.<\/p>\n<h3>2 Uppdatera pluginklassen<\/h3>\n<p>D\u00e4refter m\u00e5ste vi uppdatera k\u00e4rnpluginklassen (som finns i <strong>src-<\/strong> katalogen) s\u00e5 att den refererar till registret och laddar <a href=\"https:\/\/gist.github.com\/tommcfarlin\/9c39ba3635c823f85447d0378c8976d2#file-01-update-the-plugin-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">alla registrerade prenumeranter<\/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 WordPressWidgetBoilerplate;\n\nuse WordPressWidgetBoilerplateUtilitiesRegistry;\n\n\/**\n * The base class for this plugin. Maintains a copy of the registry and starts\n * all of the objects that should hook into WordPress.\n *\/\nclass Plugin\n{\n    \/**\n     * @var Registry a reference to the simple container used to maintain plugin objects\n     *\/\n    private $registry;\n\n    \/**\n     * @param Registry $registry a reference to the simple container used to maintain plugin objects\n     *\/\n    public function __construct(Registry $registry)\n    {\n        $this-&gt;registry = $registry;\n    }\n\n    \/**\n     * Iterates through each of the subscribers maintained in the registry and registers them\n     * to the proper WordPress hook.\n     *\/\n    public function start()\n    {\n        array_map(function ($subscriber) {\n            add_action($subscriber-&gt;getHook(), [$subscriber, 'load']);\n        }, $this-&gt;registry-&gt;getRegisteredSubscribers());\n    }\n}<\/code><\/pre>\n<p>Observera dock att vi inte riktigt har skapat n\u00e5gra prenumeranter \u00e4n. Vi b\u00f6rjade med det h\u00e4r tidigare i serien och nu \u00e4r det dags att \u00e5terkomma till det men vi g\u00f6r det senare.<\/p>\n<p>Vi beh\u00f6ver dock <a href=\"https:\/\/gist.github.com\/tommcfarlin\/9c39ba3635c823f85447d0378c8976d2#file-03-new-registry-function-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4gga till en funktion<\/a> \u2013 \u00e4ven om den \u00e4r tillf\u00e4llig \u2013 s\u00e5 att vi kan l\u00e4gga till klasser som inte \u00e4r explicita h\u00e4ndelseprenumeranter:<\/p>\n<pre><code>&lt;?php\n\/**\n * @return array all of the the objects that aren't subscribers registered with WordPress\n *\/\npublic function getRegisteredObjects()\n{\n    $objects = [];\n    foreach ($this-&gt;registry as $object) {\n        if (!$object instanceof AbstractSubscriber) {\n            $objects[] = $object;\n        }\n    }\n\n    return array_filter($objects);\n}<\/code><\/pre>\n<p>Detta kommer att omarbetas senare eftersom vi kommer att f\u00f6rvandla k\u00e4rnklasser till prenumeranter senare.<\/p>\n<h3>3 Granska Bootstrap<\/h3>\n<p>Innan jag g\u00e5r vidare tycker jag att det \u00e4r viktigt att se \u00f6ver bootstrap. \u00c4ven om din rubrik och dokumentation kan variera, \u00e4r det viktigt att notera att vi g\u00f6r f\u00f6ljande:<\/p>\n<ul>\n<li>namnavst\u00e5nd fr\u00e5n bootstrap,<\/li>\n<li>f\u00f6rhindrar \u00e5tkomst till filen,<\/li>\n<li>ringer autoloadern,<\/li>\n<li>st\u00e4lla in registret,<\/li>\n<li>och starta plugin.<\/li>\n<\/ul>\n<p>Det l\u00e5ter som mycket men <a href=\"https:\/\/gist.github.com\/tommcfarlin\/9c39ba3635c823f85447d0378c8976d2#file-02-the-current-bootstrap-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">koden \u00e4r ganska kort<\/a> :<\/p>\n<pre><code>&lt;?php\n\/**\n * WordPress Widget Boilerplate\n *\n * The WordPress Widget Boilerplate is an organized, maintainable boilerplate for building\n * widgets using WordPress best practices.\n *\n * @package   WordPressWidgetBoilerplate\n * @author    Your Name &lt;email@example.com&gt;\n * @license   GPL-3.0+\n * @link      http:\/\/example.com\n * @copyright 2018 - 2019 Your Name or Company Name\n *\n * @wordpress-plugin\n * Plugin Name:       WordPress Widget Boilerplate\n * Plugin URI:        https:\/\/github.com\/tommcfarlin\/wordpress-widget-boilerplate\n * Description:       An object-oriented foundation for building WordPress Widgets.\n * Version:           1.0.0\n * Author:            Tom McFarlin\n * Author URI:        https:\/\/tommcfarlin.com\n * Text Domain:       widget-name\n * License:           GPL-3.0+\n * License URI:       http:\/\/www.gnu.org\/licenses\/gpl-3.0.txt\n * Domain Path:       \/lang\n *\/\n\nnamespace WordPressWidgetBoilerplate;\n\nuse WordPressWidgetBoilerplateUtilitiesRegistry;\nuse WordPressWidgetBoilerplatePlugin;\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\/\/ Start the machine.\n(new Plugin($registry))-&gt;start();\n<\/code><\/pre>\n<p>Vid det h\u00e4r laget \u00e4r det dock dags att titta p\u00e5 hur det \u00e4r att dela upp barnklassen fr\u00e5n standard <a href=\"https:\/\/codex.wordpress.org\/Widgets_API\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">-API:et Widgets<\/a> till n\u00e5got som passar med den kodmodell som vi arbetar med.<\/p>\n<h2>Dela upp en barnklass<\/h2>\n<p>Den h\u00e4r delen kommer sannolikt att str\u00e4cka sig \u00f6ver n\u00e5gra inl\u00e4gg eftersom det finns lite arbete att g\u00f6ra, men vi b\u00f6rjar med att skapa v\u00e5r egen widgetklass som kommer att \u00e4rva fr\u00e5n basklassen Widget.<\/p>\n<p>G\u00f6r f\u00f6rst en <strong>API-<\/strong> katalog i <strong>src<\/strong> -katalogen och l\u00e4gg till en fil som heter <strong>Widget.php<\/strong>. Det \u00e4r h\u00e4r grunderna i widgeten kommer att ligga. Vi kommer in p\u00e5 administrativa och offentliga stilmallar och JavaScript-filer i n\u00e4sta inl\u00e4gg.<\/p>\n<p>Vid denna tidpunkt b\u00f6r grunderna f\u00f6r filen <a href=\"https:\/\/gist.github.com\/tommcfarlin\/9c39ba3635c823f85447d0378c8976d2#file-04-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se 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 WordPressWidgetBoilerplateAPI;\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        \/\/ TODO: update description\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\n    \/**\n     * TODO: This is a temporary message to show that the Boilerplate has loaded.\n     *\/\n    public function load()\n    {\n        $html = '&lt;p style=\"text-align:center; background: #fff; padding: 1em; border: 1px dotted gray; margin: 2em 2em 2em 14em;\"&gt;';\n        $html .= 'The Widget Boilerplate is loaded.';\n        $html .= '&lt;\/p&gt;';\n        echo $html;\n    }\n}\n<\/code><\/pre>\n<p>Observera att det kr\u00e4vs ett enda argument. Jag har anv\u00e4nt widget-namn men du kan anv\u00e4nda vad det \u00e4r du vill s\u00e5 l\u00e4nge det representerar din widget.<\/p>\n<p>Detta f\u00f6r att visa att klassen instansieras och laddas korrekt n\u00e4r plugin-programmet aktiveras. Om du inte ser detta \u00e4r n\u00e5got som inte st\u00e4mmer (vilket vi kommer att granska ett \u00f6gonblick).<\/p>\n<p>D\u00e4refter \u00e4r det viktigt att se till att den h\u00e4r klassen l\u00e4ggs till i registret. S\u00e5 l\u00e4gg till f\u00f6ljande rader i koden <a href=\"https:\/\/gist.github.com\/tommcfarlin\/9c39ba3635c823f85447d0378c8976d2#file-05-add-registry-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">i bootstrap:<\/a><\/p>\n<pre><code>&lt;?php\n\n\/\/ Add the Widget base class to the Registry.\n$registry-&gt;add('widget', new Widget('widget-name'));<\/code><\/pre>\n<p>Och nu, n\u00e4r du aktiverar plugin, b\u00f6r du se f\u00f6ljande:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160983-61e7189c9c671.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-160983-61e7189c9c671.png\" alt=\"WordPress-widgets: Refactoring, del 7\"><\/a><\/p>\n<p>Om inte, se till att granska koden i <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">utvecklingsgrenen<\/a> f\u00f6r att se till att du har allt som beskrivs i det h\u00e4r inl\u00e4gget.<\/p>\n<h2>Implementering av prenumeranter<\/h2>\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<p>Slutligen kommer vi att rikta v\u00e5r uppm\u00e4rksamhet mot koden som \u00e4r ansvarig f\u00f6r att s\u00e4kra och serialisera data (l\u00e4s: uppdatera v\u00e5r widget), och sedan se hur den slutliga versionen av en uppdaterad boilerplate ser ut.<\/p>\n<p>I det h\u00e4r inl\u00e4gget \u00e4r dock den prim\u00e4ra strategin som vi anv\u00e4nder att dela upp en barnklass s\u00e5 att den fortfarande kan anv\u00e4ndas med andra klasser med gr\u00e4nssnitt och basklasser som redan \u00e4r definierade i kodbasen.<\/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>Problemet med WP_Widget \u00e4r att det \u00e4r mycket arbete f\u00f6r en enskild klass att g\u00f6ra. S\u00e5 vi b\u00f6rjar omstrukturera det nu.<\/p>\n","protected":false},"author":1,"featured_media":236064,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[724],"tags":[1173],"class_list":["post-230757","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230757","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=230757"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230757\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/236064"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=230757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=230757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=230757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}