{"id":231209,"date":"2022-12-15T15:21:00","date_gmt":"2022-12-15T12:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231209"},"modified":"2022-12-15T15:21:19","modified_gmt":"2022-12-15T12:21:19","slug":"wordpress-widgetit-refaktorointi-osa-1","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-widgetit-refaktorointi-osa-1\/","title":{"rendered":"WordPress-widgetit: Refaktorointi, osa 1"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-widgetit-standardeista-alkaen\/\" title=\"Viimeinen viesti\">Viimeinen viesti<\/a><\/strong> sis\u00e4lsi paljon tietoa koodinlaatuty\u00f6kalujen m\u00e4\u00e4ritt\u00e4misest\u00e4 <strong><a href=\"https:\/\/tommcfarlin.com\/tag\/wordpress-development-environment\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress-kehitysymp\u00e4rist\u00f6ss\u00e4si<\/a><\/strong>, mutta ne ovat v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4, jos aiomme tehd\u00e4 paljon uudelleenk\u00e4sittely\u00e4.<\/p>\n<blockquote>\n<p>Mutta kuten mainitsin t\u00e4m\u00e4n viestin alussa, koodin laatuty\u00f6kalujen asettaminen antaa meille ensin perustan, jota voimme k\u00e4ytt\u00e4\u00e4 kattilalevyn uudelleenmuodostamiseen (mik\u00e4 meid\u00e4n on selv\u00e4stikin teht\u00e4v\u00e4 GrumPHP:n osoittaman punaisen m\u00e4\u00e4r\u00e4n vuoksi).<\/p>\n<\/blockquote>\n<p>Rehellisesti sanottuna pid\u00e4n n\u00e4it\u00e4 tarpeellisina, jos aiot tehd\u00e4 kaikenlaista kehityst\u00e4, joten sinun on n\u00e4ytett\u00e4v\u00e4, kuinka ne m\u00e4\u00e4ritet\u00e4\u00e4n.<\/p>\n<p>Siit\u00e4 huolimatta edellinen viesti osoittaa, kuinka paljon ty\u00f6t\u00e4 olemme tehneet meille, eik\u00f6 niin?<\/p>\n<p>Aloitamme nyt <strong><a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Widget Boilerplaten<\/a><\/strong> uudelleenmuodostamisesta .<\/p>\n<p>T\u00e4m\u00e4 ei ainoastaan \u200b\u200bparanna koodin laatua, vaan my\u00f6s opastaa meid\u00e4t oliol\u00e4ht\u00f6isten periaatteiden l\u00e4pi, joita voimme soveltaa widgettej\u00e4mme rakentaessamme ja joita voimme soveltaa tulevissa WordPress-kehityksess\u00e4.<\/p>\n<h2>WordPress Widget Boilerplate: Refactoring, osa 1<\/h2>\n<p>Ehk\u00e4 j\u00e4nnitt\u00e4vint\u00e4 minulle on saattaa t\u00e4m\u00e4 arkisto nykyaikaisten standardien tasolle. Jos katsot <strong><a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GitHubin p\u00e4\u00e4haaraa<\/a><\/strong> t\u00e4m\u00e4n viestin julkaisuhetkell\u00e4 (tai arkiston historiaa my\u00f6hemmin), huomaat, ett\u00e4 se on kuusi vuotta vanha.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-161542-61e724d06f9bc.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-161542-61e724d06f9bc.png\" alt=\"WordPress-widgetit: Refaktorointi, osa 1\"><\/a><\/p>\n<p>T\u00e4m\u00e4 asia on kuusi vuotta vanha (t\u00e4m\u00e4n viestin ajankohtana).<\/p>\n<p>Se on pitk\u00e4 aika Internet-vuosina, eik\u00f6?<\/p>\n<p>Joka tapauksessa, aiomme tehd\u00e4 joitain asioita uudelleenj\u00e4rjestelytoimissamme:<\/p>\n<ul>\n<li>luodaan haara, josta se toimii, ennen kuin se yhdistet\u00e4\u00e4n takaisin p\u00e4\u00e4haaraan,<\/li>\n<li>toteuttaa yhten\u00e4isempi tapa j\u00e4rjest\u00e4\u00e4 tiedostot,<\/li>\n<li>koodausstandardien p\u00e4ivitt\u00e4minen noudattamaan sit\u00e4, mik\u00e4 on enemm\u00e4n linjassa PSR:n kanssa,<\/li>\n<li>ja enemm\u00e4n.<\/li>\n<\/ul>\n<p>Esit\u00e4n t\u00e4m\u00e4n nyt, koska emme todenn\u00e4k\u00f6isesti tule k\u00e4sittelem\u00e4\u00e4n kaikkea t\u00e4ss\u00e4 viestiss\u00e4, mutta k\u00e4sittelemme paljon. Joten t\u00e4m\u00e4n sanottua, aloitetaan.<\/p>\n<h3>1 Kehityshaaran luominen<\/h3>\n<p>Olettaen, ett\u00e4 sinulla on kopio arkistosta paikallisella koneellasi, jonka sinulla pit\u00e4isi olla viimeisen viestin j\u00e4lkeen, ensimm\u00e4inen asia, joka meid\u00e4n on teht\u00e4v\u00e4, on luoda haara, josta voimme tehd\u00e4 ty\u00f6mme.<\/p>\n<p>Paras k\u00e4yt\u00e4nt\u00f6 on olla ty\u00f6skentelem\u00e4tt\u00e4 p\u00e4\u00e4haaralla. Sen sijaan is\u00e4nt\u00e4konetta tulisi aina k\u00e4ytt\u00e4\u00e4 koodin uusimman vakaan version k\u00e4ytt\u00f6\u00f6notossa.<\/p>\n<p>Kirjoita t\u00e4t\u00e4 varten seuraava komento terminaaliin:<\/p>\n<pre><code>$ git checkout -b develop<\/code><\/pre>\n<p>T\u00e4m\u00e4 luo uuden paikallisen haaratoimiston. Sit\u00e4 ei ole viel\u00e4 lis\u00e4tty GitHubiin tai et\u00e4varastoasi (miss\u00e4 tahansa s\u00e4ilyt\u00e4t sit\u00e4).<\/p>\n<p>Kirjoita seuraavaksi seuraava komento:<\/p>\n<pre><code>$ git push --set-upstream origin develop<\/code><\/pre>\n<p>T\u00e4m\u00e4 ty\u00f6nt\u00e4\u00e4 kehityshaaran et\u00e4varastoon asti. Kun se on tehty, sinun pit\u00e4isi pysty\u00e4 n\u00e4kem\u00e4\u00e4n kaikki muutokset, jotka toteutimme viimeisess\u00e4 viestiss\u00e4si et\u00e4varastossasi.<\/p>\n<p>Jos k\u00e4yt\u00e4t GitHubia, sen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 suunnilleen t\u00e4lt\u00e4:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-161542-61e724d38c4f4.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-161542-61e724d38c4f4.png\" alt=\"WordPress-widgetit: Refaktorointi, osa 1\"><\/a><\/p>\n<p>Jos k\u00e4yt\u00e4t toista palvelua, sen pit\u00e4isi silti n\u00e4ytt\u00e4\u00e4 samalta. Toisin sanoen hakemistorakenteen tulee olla sama, mutta se, milt\u00e4 se n\u00e4ytt\u00e4\u00e4 selaimessa, vaihtelee.<\/p>\n<h4>Huomautus sivuliikkeest\u00e4<\/h4>\n<p>Muista, ett\u00e4 t\u00e4m\u00e4n haaran tarkoitus on, ett\u00e4 teemme kaiken ty\u00f6mme. T\u00e4ll\u00e4 tavalla emme puutu p\u00e4\u00e4haaraan, josta monet ihmiset vet\u00e4ytyv\u00e4t.<\/p>\n<p>Selvyyden vuoksi, ehk\u00e4 kukaan ei vet\u00e4ydy t\u00e4st\u00e4. Ehk\u00e4 he tekev\u00e4t. T\u00e4st\u00e4 huolimatta t\u00e4ss\u00e4 esitellyt k\u00e4yt\u00e4nn\u00f6t on tarkoitettu osoittamaan, kuinka projektia ajetaan k\u00e4ytt\u00e4m\u00e4ll\u00e4 l\u00e4hteenhallinta- ja koodilaatuty\u00f6kaluja, jotta voit rakentaa parempia projekteja itsellesi, yrityksellesi ja muille.<\/p>\n<h3>2 J\u00e4rjest\u00e4 tiedostot uudelleen<\/h3>\n<p>Ensimm\u00e4inen asia, joka meid\u00e4n pit\u00e4isi tehd\u00e4, on j\u00e4rjest\u00e4\u00e4 tiedostot uudelleen, jotta ne j\u00e4ljittelev\u00e4t nykyaikaisempaa rakennetta. Teen parhaani perustellakseni p\u00e4\u00e4t\u00f6kset, joita teen projektille, kun teemme t\u00e4t\u00e4; voit kuitenkin vapaasti valita, miten haluat tehd\u00e4 sen.<\/p>\n<p>Tekem\u00e4ni p\u00e4\u00e4t\u00f6kset vaikuttavat viime k\u00e4dess\u00e4 ensisijaiseen kattilalevyyn. Se, mit\u00e4 valitset, vaikuttaa siihen, kuinka k\u00e4yt\u00e4t sit\u00e4 p\u00e4ivitt\u00e4isess\u00e4 ty\u00f6ss\u00e4si tai kuinka p\u00e4\u00e4t\u00e4t edet\u00e4 projektissa kokonaisuutena.<\/p>\n<h3>P\u00e4ivitet\u00e4\u00e4n hakemistoja<\/h3>\n<p>Yksi asioista, joita yrit\u00e4n tehd\u00e4, on hajottaa hakemistoni, jotta ne ovat mahdollisimman selkeit\u00e4. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 yrit\u00e4n tehd\u00e4 seuraavaa:<\/p>\n<ul>\n<li>luo <strong>omaisuushakemisto<\/strong> JavaScriptille ja tyylitaulukoille,<\/li>\n<li>luo <strong>src<\/strong> -hakemisto kaikille PHP-tiedostoille,<\/li>\n<li>luo <strong>kielihakemisto<\/strong> kansainv\u00e4listymistiedostoille,<\/li>\n<li>s\u00e4ilyt\u00e4 kaikki muut tiedostot arkiston juuressa, jotta muiden on helppo seurata mukana toimitetun README:n mukana.<\/li>\n<\/ul>\n<p>T\u00e4t\u00e4 varten aion ensin poistaa ja siirt\u00e4\u00e4 muutamia asioita. Olen yritt\u00e4nyt j\u00e4rjest\u00e4\u00e4 t\u00e4m\u00e4n tiettyyn j\u00e4rjestykseen:<\/p>\n<ol>\n<li>Aion poistaa <strong>README.txt<\/strong> &#8211; tiedoston. T\u00e4t\u00e4 tiedostoa k\u00e4ytet\u00e4\u00e4n vakiona README-mallina, jos aiot l\u00e4hett\u00e4\u00e4 koodin WordPress Plugin Repositoryyn, mutta se ei ole v\u00e4ltt\u00e4m\u00e4t\u00f6n sille, mit\u00e4 haluan Boilerplatelle.<\/li>\n<li><strong>Nime\u00e4n plugin.php<\/strong> :n uudelleen muotoon <strong>Plugin<em><\/em><\/strong> .php<em><\/em> noudattaakseni PSR-k\u00e4yt\u00e4nt\u00f6j\u00e4.<\/li>\n<li>Nime\u00e4n my\u00f6s <strong>langin<\/strong> uudelleen <strong>kieliksi.<\/strong><\/li>\n<li>Aion luoda <strong>omaisuushakemiston<\/strong> ja siirt\u00e4\u00e4 ja sitten siirt\u00e4\u00e4 <strong>css-<\/strong> ja <strong>js<\/strong> &#8211; hakemistot kyseiseen hakemistoon. Luon jokaiseen n\u00e4ist\u00e4 hakemistoista <strong>dev<\/strong> -alihakemiston, jossa voimme ty\u00f6skennell\u00e4 Sass- ja v\u00e4hent\u00e4m\u00e4tt\u00f6mien JavaScript-tiedostojen parissa (molemmat tulevat my\u00f6hemmin sarjassa).<\/li>\n<li>Sen j\u00e4lkeen luon <strong>src<\/strong> -hakemiston ja siirr\u00e4n <strong>n\u00e4kemysten<\/strong> tyylisivun siihen hakemistoon.<\/li>\n<li>Nime\u00e4n my\u00f6s <strong>n\u00e4kym\u00e4t<\/strong> uudelleen <strong>Viewsiksi<\/strong> ja kirjoitan my\u00f6s sen sis\u00e4lt\u00e4m\u00e4t tiedostot isoilla kirjaimilla.<\/li>\n<li>Lopuksi siirr\u00e4n kaiken hakemiston juureen. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 <strong>widget-boilerplate<\/strong> katoaa ja kaikki tiedostot sijaitsevat arkiston juurihakemistossa.<\/li>\n<\/ol>\n<p>N\u00e4m\u00e4 ovat monta askelta, mutta ne ovat pieni\u00e4. Haluan esitell\u00e4 ne ensin, jotta on selv\u00e4\u00e4, mit\u00e4 t\u00e4m\u00e4n osan loppuosan aikana tapahtuu.<\/p>\n<h4>Poista README<\/h4>\n<p><strong>Voit tehd\u00e4 t\u00e4m\u00e4n kirjoittamalla seuraavan komennon p\u00e4\u00e4tteeseen widget-boilerplate-<\/strong> hakemiston juuresta :<\/p>\n<pre><code>$ rm readme.txt<\/code><\/pre>\n<p>T\u00e4m\u00e4 poistaa tiedoston. Jos kirjoitat seuraavan komennon terminaaliin:<\/p>\n<pre><code>$ git status<\/code><\/pre>\n<p>Sinun pit\u00e4isi n\u00e4hd\u00e4 jotain t\u00e4m\u00e4n kaltaista:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-161542-61e724d77468a.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-161542-61e724d77468a.png\" alt=\"WordPress-widgetit: Refaktorointi, osa 1\"><\/a><\/p>\n<p>Pid\u00e4n siit\u00e4, ett\u00e4 erilaiset yl\u00f6s ty\u00f6nnett\u00e4v\u00e4t muutokset ovat selkeit\u00e4 ja ytimekk\u00e4it\u00e4, jotta niit\u00e4 on helpompi peruuttaa yksi kerrallaan. Joten menn\u00e4\u00e4n eteenp\u00e4in ja sitoudutaan ja ty\u00f6nnet\u00e4\u00e4n t\u00e4t\u00e4 muutosta.<\/p>\n<p>Kirjoita seuraava:<\/p>\n<pre><code>$ git rm README.txt\n$ git add. $ git commit -n -m \"Removing the original README.txt template.\"\n$ git push<\/code><\/pre>\n<p>T\u00e4m\u00e4 k\u00e4skee Giti\u00e4 poistamaan tiedoston, lis\u00e4\u00e4m\u00e4\u00e4n yksitt\u00e4isen muutoksen muutosjoukkoon, sitomaan sen suorittamatta mit\u00e4\u00e4n koodinlaatuty\u00f6kaluja (koska meid\u00e4n ei tarvitse tehd\u00e4 sit\u00e4 juuri nyt, muuten se ep\u00e4onnistuu) ja ty\u00f6nt\u00e4\u00e4 sen et\u00e4tietovaraston <strong>kehityshaaraan<\/strong>.<\/p>\n<p>Nyt kun se on tehty, menn\u00e4\u00e4n eteenp\u00e4in ja nimet\u00e4\u00e4n uudelleen joitain tiedostoja.<\/p>\n<h4>Tiedostojen uudelleennime\u00e4minen<\/h4>\n<p>Samalla kun olemme t\u00e4ss\u00e4, emme aio vain nimet\u00e4 uudelleen <strong>plugin<em><\/em><\/strong> .php<em><\/em> -tiedosto, vaan my\u00f6s muut PHP-tiedostot. N\u00e4m\u00e4 ovat tiedostoja, jotka voidaan loogisesti ryhmitell\u00e4 samaan muutosjoukkoon, joten on j\u00e4rkev\u00e4\u00e4 menn\u00e4 eteenp\u00e4in ja tehd\u00e4 niin.<\/p>\n<p>Joten kirjoita seuraavat komennot terminaalistasi:<\/p>\n<pre><code>$ mv plugin.php Plugin.php\n$ mv views\/admin.php views\/Admin.php\n$ mv views\/widget.php views\/Widget.php<\/code><\/pre>\n<p>T\u00e4t\u00e4 tehdess\u00e4mme emme ole viel\u00e4 tehneet mit\u00e4\u00e4n muutoksia tiedostoihin, joten mit\u00e4\u00e4n sitovaa ei ole. Jatketaan hakemistojen uudelleennime\u00e4mist\u00e4.<\/p>\n<h4>Luo hakemistoja; Nime\u00e4 hakemistot uudelleen<\/h4>\n<p>Aivan kuten teimme tiedostojen kanssa, menn\u00e4\u00e4n eteenp\u00e4in ja luodaan uusi <strong>omaisuushakemisto<\/strong>. Kirjoita terminaaliin seuraava komento:<\/p>\n<pre><code>$ mkdir assets<\/code><\/pre>\n<p>Seuraavaksi haluamme siirt\u00e4\u00e4 <strong>css-<\/strong> ja <strong>js<\/strong> &#8211; hakemistot kyseiseen hakemistoon, joten kirjoita terminaaliin my\u00f6s seuraava:<\/p>\n<pre><code>$ mv css assets\n$ mv js assets<\/code><\/pre>\n<p>Ja nimet\u00e4\u00e4n <strong>lang<\/strong> &#8211; hakemisto uudelleen <strong>Kielet<\/strong> kirjoittamalla seuraava komento:<\/p>\n<pre><code>$ mv lang Languages<\/code><\/pre>\n<p>Nimet\u00e4\u00e4n lopuksi <strong>n\u00e4kym\u00e4<\/strong> uudelleen <strong>Viewsiksi:<\/strong><\/p>\n<pre><code>$ mv views Views<\/code><\/pre>\n<p>T\u00e4ss\u00e4 vaiheessa olemme tehneet kaikkemme p\u00e4\u00e4hakemistossa olevien tiedostojen kanssa. Meid\u00e4n on kuitenkin viel\u00e4 valmisteltava alihakemistot esik\u00e4sitellyille resursseillemme.<\/p>\n<p>Ennen kuin teet sen, on kuitenkin hyv\u00e4 tapa suorittaa nopea <strong>git-tilan<\/strong> tarkistus n\u00e4hd\u00e4ksesi, mit\u00e4 muutoksia voidaan lis\u00e4t\u00e4. Jos arkistosi on samanlainen kuin minun, n\u00e4et todenn\u00e4k\u00f6isesti jotain seuraavanlaista:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-161542-61e724da758f2.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-161542-61e724da758f2.png\" alt=\"WordPress-widgetit: Refaktorointi, osa 1\"><\/a><\/p>\n<p>T\u00e4ss\u00e4 tapauksessa mielest\u00e4ni on okei lis\u00e4t\u00e4 kaikki yhteen muutosjoukkoon kommentilla, joka osoittaa, ett\u00e4 olemme nimenneet uudelleen ja siirt\u00e4neet tiedostoja.<\/p>\n<p>Saatat olla erimielt\u00e4, ja jos on, se on t\u00e4ysin ok. Sinun k\u00e4skysi eroavat hieman minun, mutta t\u00e4ss\u00e4 on mit\u00e4 minulla on sitoumusta varten:<\/p>\n<pre><code>$ git add. $ git commit -n -m \"Creating new directories; Renaming files.\"\n$ git push<\/code><\/pre>\n<p>Siirry nyt esik\u00e4siteltyjen tiedostojemme alihakemistoihin.<\/p>\n<h4>Luo alihakemistoja<\/h4>\n<p>Luo CSS-hakemistoon alihakemisto nimelt\u00e4 <strong>dev<\/strong> ja tyhj\u00e4 tiedosto nimelt\u00e4 <strong>admin.scss<\/strong> ja <strong>widget.scss<\/strong>, sill\u00e4 k\u00e4sittelemme n\u00e4it\u00e4 tiedostoja my\u00f6hemmin sarjassa.<\/p>\n<p>Lis\u00e4\u00e4 seuraavaksi <strong>dev<\/strong> -hakemisto JavaScript-hakemistoon ja lis\u00e4\u00e4 n\u00e4ihin tiedostoihin tyhj\u00e4t <strong>admin.js-<\/strong> ja <strong>widget.js<\/strong> -tiedostot. Jos olet niin halukas, voit siirt\u00e4\u00e4 olemassa olevat tiedostot <strong>dev<\/strong> &#8211; hakemistoihin, koska k\u00e4yt\u00e4mme n\u00e4it\u00e4 tiedostoja kehitystiedostojemme perustana.<\/p>\n<p>Se on valinnainen vaihe; Olen kuitenkin mennyt eteenp\u00e4in ja tehnyt niin, koska niin haluan ty\u00f6skennell\u00e4. T\u00e4ss\u00e4 on joukko komentoja, jotka olen suorittanut.<\/p>\n<p><strong>css<\/strong> &#8211; hakemistosta\u2026<\/p>\n<pre><code>$ mkdir dev\n$ mv admin.css admin.scss &amp;&amp; mv widget.css widget.scss\n$ mv *.scss dev<\/code><\/pre>\n<p>Yll\u00e4 olen luonut tyylitaulukoilleni <strong>dev<\/strong> &#8211; hakemiston, nimennyt ne uudelleen Sass-tiedostoiksi ja siirt\u00e4nyt ne <strong>dev<\/strong> &#8211; hakemistoon.<\/p>\n<p>Ennen kuin siirryt eteenp\u00e4in, nyt on hyv\u00e4 aika tarkistaa <strong>git-tila<\/strong> ja tehd\u00e4 muutoksia tyylitaulukoihin:<\/p>\n<pre><code>$ git add. $ git commit -n -m \"Renaming and moving stylesheets into a dev directory.\"\n$ git push<\/code><\/pre>\n<p>Nyt <strong>js<\/strong> &#8211; hakemistosta\u2026<\/p>\n<pre><code>$ mkdir dev\n$ mv *.js dev<\/code><\/pre>\n<p>Koska meid\u00e4n ei tarvitse muuttaa liittyvien tiedostojen tiedostotyyppi\u00e4, voimme yksinkertaisesti siirt\u00e4\u00e4 ne uuteen hakemistoon.<\/p>\n<p>Tehd\u00e4\u00e4n lopuksi sama asia ja katsotaan, onko olemassa muutoksia, joita voimme nostaa nopean <strong>git-tilan<\/strong> tarkistuksen kautta (jonka pit\u00e4isi olla). T\u00e4ss\u00e4 on luettelo komennoista, joita suoritin tehd\u00e4kseni muutokset ja ty\u00f6nt\u00e4v\u00e4ni muutokset:<\/p>\n<pre><code>$ git add. $ git commit -n -m \"Adding a JavaScript dev directory and moving the development files.\"\n$ git push<\/code><\/pre>\n<p>Olemme melkein valmiita. Sinun tarvitsee vain siirt\u00e4\u00e4 tietyt hakemistot arkiston juureen ja nimet\u00e4 ydinhakemisto uudelleen <strong>nimell\u00e4 src<\/strong>. Joten tehd\u00e4\u00e4n se nyt.<\/p>\n<h3>Siirr\u00e4 hakemistot juureen<\/h3>\n<p>Pohjimmiltaan meid\u00e4n on siirrett\u00e4v\u00e4 kaikki paitsi plugin-tiedosto ja <strong>Views<\/strong> &#8211; hakemisto pois <strong>widget-boilerplate-<\/strong> hakemistosta, ja meid\u00e4n on nimett\u00e4v\u00e4 <strong>widget-boilerplate<\/strong> uudelleen muotoon <strong>src<\/strong>.<\/p>\n<p>Kuulostaa yksinkertaiselta, eik\u00f6? Se on melko suoraviivaista. <strong>Widget-boilerplate-<\/strong> hakemistosta :<\/p>\n<pre><code>$ mv assets .. &amp;&amp; mv languages ..\n$ cd ..\n$ mv widget-boilerplate src<\/code><\/pre>\n<p>Sitten teen muutoksen GitHubiin seuraavasti:<\/p>\n<pre><code>$ git add. $ git commit -n -m \"Reorganizing the directory structure.\"\n$ git push<\/code><\/pre>\n<p>Nyt meill\u00e4 on paljon nykyaikaisempi hakemistorakenne. Voit n\u00e4hd\u00e4 sen t\u00e4\u00e4ll\u00e4 <strong><a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kehityshaarassani<\/a><\/strong>.<\/p>\n<h3>Sana OOP:sta<\/h3>\n<p>Ja nyt, kun meill\u00e4 on kaikki t\u00e4m\u00e4, voimme aloittaa koodin kirjoittamisen. Mutta \u00e4l\u00e4 erehdy: Osa olio-ohjelmoinnista on my\u00f6s olio-analyysi\u00e4 ja olio-suunnittelua.<\/p>\n<p>T\u00e4ss\u00e4 viestiss\u00e4 olemme pohjimmiltaan soveltaneet oliosuuntautunutta arkkitehtonista suunnittelua, joka perustuu laajennuksen yhteensopivuuden analysointiin.<\/p>\n<p>Seuraava osa on kuitenkin koodin p\u00e4ivitt\u00e4minen p\u00e4\u00e4st\u00e4ksemme eroon kaikesta punaisuudesta, jonka olemme n\u00e4hneet haistaessamme koodiamme.<\/p>\n<h2>Seuraavassa postauksessa<\/h2>\n<p>Seuraavan postauksen ensisijainen tavoite on jatkaa koodausstandardien p\u00e4ivitt\u00e4mist\u00e4, jotta olemme ratkaisseet kaikki IDE:n tai komentorivill\u00e4 k\u00e4ytt\u00e4miemme koodinlaatuty\u00f6kalujen aiheuttamat ongelmat.<\/p>\n<p>Meill\u00e4 pit\u00e4isi my\u00f6s olla paljon puhtaampi, organisoidumpi arkisto ja olla sellaisessa asemassa, ett\u00e4 olemme valmiita yhdist\u00e4m\u00e4\u00e4n ty\u00f6mme takaisin p\u00e4\u00e4haaraan.<\/p>\n<p>Varmista kuitenkin toistaiseksi, ett\u00e4 sinulla on hyv\u00e4 k\u00e4sitys kaikesta yll\u00e4 olevasta, ennen kuin jatkat, sill\u00e4 se on v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4 ymm\u00e4rt\u00e4\u00e4 j\u00e4ljell\u00e4 olevaa ty\u00f6t\u00e4 varten.<\/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\u00e4m\u00e4 ei ainoastaan \u200b\u200bparanna koodin laatua, vaan my\u00f6s opastaa meit\u00e4 l\u00e4pi oliopohjaisia \u200b\u200bperiaatteita, joita voimme soveltaa WordPress-widgettej\u00e4mme rakentaessamme.<\/p>\n","protected":false},"author":1,"featured_media":235111,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,895,864],"tags":[1166],"class_list":["post-231209","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/231209","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=231209"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/231209\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/235111"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=231209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=231209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=231209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}