{"id":231369,"date":"2022-12-19T17:06:00","date_gmt":"2022-12-19T14:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231369"},"modified":"2022-12-19T17:10:49","modified_gmt":"2022-12-19T14:10:49","slug":"wordpress-widgetit-refaktorointi-osa-8","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-widgetit-refaktorointi-osa-8\/","title":{"rendered":"WordPress-widgetit: Refaktorointi, osa 8"},"content":{"rendered":"\n<p>Kun on kyse WordPress Widget Boilerplaten uudelleenmuodostamisesta, olemme tehneet paljon ty\u00f6t\u00e4 saattaaksemme koodipohjan oliokeskeisemp\u00e4\u00e4n standardiin. Lis\u00e4ksi olemme ottaneet k\u00e4ytt\u00f6\u00f6n useita muita ty\u00f6kaluja, joiden avulla voimme saattaa koodimme nykyaikaisempien standardien mukaisiksi<\/p>\n<p>Nyt kun olemme k\u00e4ytt\u00e4neet aikaa t\u00e4m\u00e4n tekemiseen, on aika hyp\u00e4t\u00e4 takaisin koodiin ja aloittaa sen muokkaaminen uudelleen sellaisella tavalla, joka mahdollistaa <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/abstract-classes-osa-1-abstraktiokaeyttaeytyminen\/\" title=\"abstraktien luokkien\">abstraktien luokkien<\/a> ja tilaajien k\u00e4yt\u00f6n (jotka toimivat osana <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/wordpressin-toimintakoukkujen-perusteet\/\" title=\"tapahtumal\u00e4ht\u00f6ist\u00e4 suunnittelumallia\">tapahtumal\u00e4ht\u00f6ist\u00e4 suunnittelumallia<\/a> ).<\/p>\n<p>Edellisen postauksen lopussa kirjoitin:<\/p>\n<blockquote>\n<p>Tulevissa viesteiss\u00e4 aiomme tarkastella, kuinka voimme ottaa tilaajat k\u00e4ytt\u00f6\u00f6n sivuston julkiselle puolelle (eli miss\u00e4 widgetin sis\u00e4lt\u00f6 n\u00e4ytet\u00e4\u00e4n). Ja teemme samoin sivuston hallintoalueella.<\/p>\n<\/blockquote>\n<p>Joten t\u00e4ss\u00e4 viestiss\u00e4 aiomme tehd\u00e4 juuri niin. Tarkemmin sanottuna aiomme aloittaa ty\u00f6st\u00e4m\u00e4ll\u00e4 widgetin tilaajaa ja saamalla sitten peruswidgetin n\u00e4kyviin ensin sivuston hallinnollisella puolella.<\/p>\n<h2>WordPress Widget Boilerplate: Refactoring, osa 8<\/h2>\n<p>Syy, miksi olen kiinnostunut keskittym\u00e4\u00e4n ensisijaisesti sivuston hallinnolliseen puoleen, on se, ett\u00e4 sen avulla voimme:<\/p>\n<ul>\n<li>saat k\u00e4sityksen siit\u00e4, miten tilaajat toimivat,<\/li>\n<li>katso kuinka koodikanta on j\u00e4rjestett\u00e4v\u00e4,<\/li>\n<li>Koodaa joitakin tietoja ennen sarjoittamista.<\/li>\n<\/ul>\n<p>Kun t\u00e4m\u00e4 kaikki on paikoillaan, pystymme kohdistamaan huomiomme edistyneempiin asioihin. Voimme nimitt\u00e4in esitell\u00e4 tilaajia tietojen n\u00e4ytt\u00e4miseen hallinta-alueella ja tilaajia tietojen desinfiointiin, sarjoitukseen, hakemiseen, validointiin ja n\u00e4ytt\u00e4miseen.<\/p>\n<p>Mutta ensin tehd\u00e4\u00e4n tarvittavat ty\u00f6t uuden luokan perustamiseksi, automaattisen latausohjelman m\u00e4\u00e4ritt\u00e4miseksi ja sis\u00e4ll\u00f6n n\u00e4ytt\u00e4miseksi sivuston hallintoalueella.<\/p>\n<h3>1 Abstract Subscriber<\/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\">Tarkastellaan<\/a> ensin abstraktia tilaajaa, koska kaikki tilaajat toteuttavat t\u00e4m\u00e4n.<\/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>Huomaa, ett\u00e4 sill\u00e4 on kaksi julkista toimintoa \u2013 konstruktio, joka asettaa koukun ja toiminto koukun noutamiseen. Siin\u00e4 on my\u00f6s abstrakti latausfunktio, jossa mik\u00e4 tahansa luokka, joka laajentaa t\u00e4t\u00e4 luokkaa, toteuttaa tietyn toiminnallisuuden.<\/p>\n<p>Muista, ett\u00e4 koska WordPress k\u00e4sittelee toimintoja ja suodattimia, kaikki on kiinnitetty tiettyyn koukkuun (joko <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Hooks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressin m\u00e4\u00e4rittelemiin<\/a> tai mukautettuihin koukkuihin).<\/p>\n<h3>2 WordPressin nimitila<\/h3>\n<p>Aina kun ty\u00f6skentelen WordPressiin tiiviisti kytkettyjen toimintojen parissa, yrit\u00e4n varmistaa, ett\u00e4 sijoitan sen WordPressin nimiavaruuteen. T\u00e4m\u00e4 osoittaa minulle ja muille kehitt\u00e4jille, ett\u00e4 mit\u00e4 tahansa t\u00e4ss\u00e4 nimiavaruudessa sijaitsevaa ei voida erottaa ydinsovelluksesta.<\/p>\n<p>Joten luo <strong>src -hakemistoon<\/strong> <strong>WordPress<\/strong> &#8211; hakemisto. T\u00e4ss\u00e4 on Widget-ydinluokka ja kaikki muut luokat, jotka esitell\u00e4\u00e4n koko sarjassa.<\/p>\n<p>T\u00e4m\u00e4 tarkoittaa, ett\u00e4 emme en\u00e4\u00e4 tarvitse luokkaa API-hakemistossa. Muista siis siirt\u00e4\u00e4 luokka, p\u00e4ivitt\u00e4\u00e4 sen nimiavaruus ja poistaa hakemisto. Otan t\u00e4st\u00e4 kuvakaappauksen ja koodin v\u00e4h\u00e4n my\u00f6hemmin.<\/p>\n<p>Lis\u00e4ksi, muistaakseni sarjan aiemmin, sijoitimme <strong>Views -hakemiston<\/strong> <strong>src<\/strong> -hakemiston juureen, mutta nyt voimme siirt\u00e4\u00e4 sen <strong>WordPress<\/strong> &#8211; hakemistoon. Joten mene eteenp\u00e4in ja tee se nyt.<\/p>\n<p>Lopputuloksen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 suunnilleen t\u00e4lt\u00e4:<\/p>\n<p>Nyt voimme k\u00e4\u00e4nt\u00e4\u00e4 huomiomme koodiin.<\/p>\n<h3>3 Katsaus widget-luokkaan<\/h3>\n<p>T\u00e4ss\u00e4 viestiss\u00e4 yksinkertaistamme hieman widgettien ydinluokkaa. Se kumoaa osan tekem\u00e4st\u00e4mme ty\u00f6st\u00e4, mutta tarvitsimme aiemman ty\u00f6n p\u00e4\u00e4st\u00e4ksemme t\u00e4h\u00e4n pisteeseen.<\/p>\n<p>Toistaiseksi keskitymme rakentajaan ja widget-slugin noutamistoimintoon. T\u00e4m\u00e4 antaa meille mahdollisuuden n\u00e4hd\u00e4 jotain WordPressin hallintoalueella.<\/p>\n<p>Varmista siis ensin, ett\u00e4 Widget-luokkasi n\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-01-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\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>Seuraavaksi, koska olemme siirt\u00e4neet t\u00e4m\u00e4n tiedoston <strong>WordPressin<\/strong> nimiavaruuteen, meid\u00e4n on p\u00e4ivitett\u00e4v\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-02-composer-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Composer-m\u00e4\u00e4ritystiedostomme<\/a> automaattinen latausosio :<\/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>Seuraavaksi meid\u00e4n on esitett\u00e4v\u00e4 tilaaja.<\/p>\n<h3>4 Widget-tilaajan esittely<\/h3>\n<p>Aina kun minulla on jonkinlainen ydinluokka, yrit\u00e4n yleens\u00e4 luoda yksinkertaisen tilaajan, joka instantoi ydinluokan ja antaa sen tehd\u00e4 ty\u00f6ns\u00e4.<\/p>\n<p>Teen t\u00e4m\u00e4n, koska WordPress, kuten mainittiin, k\u00e4ytt\u00e4\u00e4 tapahtumal\u00e4ht\u00f6ist\u00e4 suunnittelumallia, mik\u00e4 tarkoittaa, ett\u00e4 kaikki on rekister\u00f6it\u00e4v\u00e4 jonkin tyyppiseen koukkuun. Enk\u00e4 pid\u00e4 verkkotunnuksen logiikan sekoittamisesta samaan luokkaan, joka kytkeytyy WordPressiin. Joten erotan ne.<\/p>\n<p>Ja niin tilaaja tekee. Se rekister\u00f6i itsens\u00e4 WordPressiin ja kutsuu sitten ty\u00f6n suorittamisesta vastaavan luokan.<\/p>\n<p>Kiinnit\u00e4 huomiosi <strong>Tilaajahakemistoon<\/strong> ja lis\u00e4\u00e4 luokka nimelt\u00e4 <strong>WidgetSubscriber<\/strong>. Lis\u00e4\u00e4 kyseiselle luokalle <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-03-widget-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">seuraava koodi<\/a> :<a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-03-widget-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/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>Rakentaja rekister\u00f6i luokan tietyll\u00e4 koukulla, jonka tarkistamme hetken kuluttua; sitten se k\u00e4ytt\u00e4\u00e4 WordPress-sovellusliittym\u00e4\u00e4 widgetin luomiseen (mik\u00e4 tapahtuu <strong>lataustoiminnossa<\/strong> ).<\/p>\n<h3>5 Bootstrap<\/h3>\n<p>Lopuksi meid\u00e4n on p\u00e4ivitett\u00e4v\u00e4 bootstrap niin, ett\u00e4 se:<\/p>\n<ul>\n<li>rekister\u00f6i <strong>WidgetSubscriberin<\/strong> oikeaan koukkuun,<\/li>\n<li>lis\u00e4\u00e4 tilaajan <strong>rekisteriin<\/strong> ,<\/li>\n<li>ja k\u00e4ynnist\u00e4\u00e4 laajennuksen (mit\u00e4 olemme tehneet).<\/li>\n<\/ul>\n<p>Bootstrapin pit\u00e4isi kaiken t\u00e4m\u00e4n j\u00e4lkeen n\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-04-bootstrap-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4lt\u00e4<\/a> :<\/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>Seuraavaksi sinun pit\u00e4isi pysty\u00e4 kirjautumaan WordPressiin ja aktivoimaan laajennus.<\/p>\n<h2>Katsaus hallintoalueelle<\/h2>\n<p>T\u00e4ss\u00e4 vaiheessa ei ole paljon katseltavaa, mutta perille ollaan tulossa. Ensinn\u00e4kin sinun tulee huomata, ett\u00e4 widget n\u00e4kyy nyt alueella, joka sis\u00e4lt\u00e4\u00e4 k\u00e4ytett\u00e4viss\u00e4 olevat widgetit:<\/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-widgetit: Refaktorointi, osa 8\"><\/a><\/p>\n<p>Ja sinun pit\u00e4isi my\u00f6s n\u00e4hd\u00e4, ett\u00e4 kun ved\u00e4t widgetin widgetoidulle alueelle (tai mihin tahansa sivupalkkiin), siin\u00e4 ei ole valittavissa olevia vaihtoehtoja.<\/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-widgetit: Refaktorointi, osa 8\"><\/a><\/p>\n<p>Meill\u00e4 on kuitenkin hyv\u00e4 paikka jatkaa sen pohjalta, mit\u00e4 meill\u00e4 on. Voit aina jatkaa tiivistelm\u00e4n kehityksen seuraamista <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GitHubissa<\/a>.<\/p>\n<h2>Jatkuu<\/h2>\n<p>Seuraavaksi jatkamme widgetin hallinnollisen alueen toiminnallisuuden rakentamista. T\u00e4m\u00e4n j\u00e4lkeen kiinnit\u00e4mme huomiomme widgetin julkiseen puoleen sek\u00e4 serialisointitoimintoihin.<\/p>\n<p>Sinun pit\u00e4isi pysty\u00e4 n\u00e4kem\u00e4\u00e4n, kuinka asiat alkavat muotoutua, kun alamme erottaa logiikan sen eri osiin. Jos ei, \u00e4l\u00e4 huoli \u2013 lis\u00e4\u00e4 on tulossa.<\/p>\n<p>Ja Boilerplaten lopullinen versio n\u00e4ytt\u00e4\u00e4 tietysti kaikki periaatteet, joihin rakennamme t\u00e4ss\u00e4 viestisarjassa.<\/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>Aloitamme erilaisten WordPress-widgetien muodostamiseen tarvittavien komponenttien jakamisen hallinnollisesta alueesta alkaen.<\/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":[719,843,864],"tags":[1166],"class_list":["post-231369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/231369","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=231369"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/231369\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/234945"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=231369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=231369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=231369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}