{"id":231192,"date":"2022-12-14T16:59:00","date_gmt":"2022-12-14T13:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231192"},"modified":"2022-12-14T17:02:45","modified_gmt":"2022-12-14T14:02:45","slug":"wordpress-widgetit-standardeista-alkaen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-widgetit-standardeista-alkaen\/","title":{"rendered":"WordPress-widgetit: Standardeista alkaen"},"content":{"rendered":"\n

T\u00e4m\u00e4n sarjan tarkoituksena on aloittaa syvempi sukellus ty\u00f6skentelyyn olio-ohjelmoinnin kanssa WordPressin kontekstissa.<\/p>\n

Ja koska WordPress Widgets API on yksi oliokeskeisi\u00e4 k\u00e4yt\u00e4nt\u00f6j\u00e4 k\u00e4ytt\u00e4vist\u00e4 sovellusliittymist\u00e4, se on looginen paikka aloittaa. Lis\u00e4ksi se antaa meille joitain perustavanlaatuisia tekniikoita, joita voimme k\u00e4ytt\u00e4\u00e4 tulevaan ty\u00f6h\u00f6n, kun n\u00e4emme, kuinka tulevissa sarjoissa rakennetaan enemm\u00e4n olioprojekteja WordPressiin.<\/p>\n

T\u00e4h\u00e4n menness\u00e4 olemme k\u00e4sitelleet seuraavat asiat:<\/p>\n

    \n
  1. WordPress-widgetit: Olio-l\u00e4hestymistapa<\/a>. Widgets API tarjoaa vankan lakmustestin ja esimerkin siit\u00e4, kuinka p\u00e4\u00e4set alkuun olio-ohjelmoinnin kanssa WordPressiss\u00e4.<\/li>\n
  2. WordPress-widgetit: Olio-ohjelmoinnin tunnistaminen<\/a>. Tavoitteena on varustaa sinut kaikella, mit\u00e4 tarvitset oliol\u00e4ht\u00f6isten k\u00e4yt\u00e4nt\u00f6jen havaitsemiseen.<\/li>\n<\/ol>\n

    Jos et ole perill\u00e4, nyt on hyv\u00e4 aika tehd\u00e4 se. Ja jos sinulla on, muistat edellisest\u00e4 viestist\u00e4, jonka p\u00e4\u00e4timme seuraavaan huomautukseen:<\/p>\n

    \n

    Toisin sanoen, palaamme WordPress Widget Boilerplateen<\/a><\/strong> ja aion muuttaa sen nykyiseen tilaan ottamaan k\u00e4ytt\u00f6\u00f6n nykyaikaisemmat PHP-standardit.<\/p>\n<\/blockquote>\n

    Jotta voimme aloittaa WordPress Widget Boilerplaten p\u00e4ivitt\u00e4misen noudattamaan mainittuja standardeja, meid\u00e4n on teht\u00e4v\u00e4 muutama asia:<\/p>\n

      \n
    1. luoda haara olemassa olevasta kattilalevyst\u00e4,<\/li>\n
    2. asentaa koodin laatuty\u00f6kalut,<\/li>\n
    3. varmistaa, ett\u00e4 IDE-tietoj\u00e4rjestelm\u00e4mme on m\u00e4\u00e4ritetty oikein,<\/li>\n
    4. ja aloita koodin muokkaaminen mainittujen standardien mukaiseksi.<\/li>\n<\/ol>\n

      Ja sit\u00e4 aiomme tehd\u00e4 t\u00e4ll\u00e4 postauksella.<\/p>\n

      Standardeista alkaen<\/h2>\n

      Jos olet ollut t\u00e4m\u00e4n sivuston j\u00e4sen jonkin aikaa, tied\u00e4t, ett\u00e4 k\u00e4yt\u00e4n mieluummin Visual Studio Codea. Jos ei, minulla on koko joukko artikkeleita, jotka on<\/a><\/strong> omistettu siihen, miten k\u00e4yt\u00e4n sit\u00e4 (ja siten kuinka k\u00e4yt\u00e4mme sit\u00e4 koko t\u00e4m\u00e4n viestisarjan ajan).<\/p>\n

      Ja jos olet kiinnostunut koodausstandardeista, virheenkorjauksesta, IDE:ist\u00e4, kehitysymp\u00e4rist\u00f6ist\u00e4 ja niin edelleen liittyvist\u00e4 kattavuudesta, tutustu The Independent WordPress Developeriin<\/a><\/strong>.<\/p>\n

      Oletan kuitenkin, ett\u00e4 jos luet t\u00e4t\u00e4, olet lukenut yll\u00e4 olevan materiaalin l\u00e4pi tai voit k\u00e4yd\u00e4 l\u00e4pi kaiken yll\u00e4 olevan materiaalin.<\/p>\n

      T\u00e4m\u00e4n sanottuaan aloitetaan.<\/p>\n

      Varaston lataaminen<\/h3>\n

      Ensimm\u00e4inen asia, jonka haluat tehd\u00e4, on kloonata kopio arkistosta. Teen t\u00e4m\u00e4n mieluummin komentorivin kautta.<\/p>\n

      Lis\u00e4ksi mielest\u00e4ni kannattaa tehd\u00e4 niin WordPressin uusinta versiota<\/a><\/strong> vastaan. Jos sinulla ei ole kopiota Subversionin WordPressin runkokopiosta, voit lukea sen m\u00e4\u00e4ritt\u00e4misest\u00e4 t\u00e4\u00e4lt\u00e4. t\u00e4m\u00e4 on kuitenkin t\u00e4ysin vapaaehtoista. Voit seurata t\u00e4m\u00e4n opetusohjelman muuta osaa mill\u00e4 tahansa haluamallasi WordPress-versiolla.<\/p>\n

      Tehd\u00e4 niin,<\/p>\n

        \n
      1. Varmista, ett\u00e4 olet WordPress-asennuksesi plugins -hakemistossa<\/strong><\/li>\n
      2. Ja sitten kirjoita seuraavat komennot p\u00e4\u00e4telaitteen kopioon<\/li>\n<\/ol>\n
        $ <\/code><\/pre>\n
        T\u00e4m\u00e4 luo WordPress-Widget-Boilerplate-<\/strong> hakemiston laajennushakemistoosi<\/strong>. Voit navigoida siihen yksinkertaisesti kirjoittamalla:<\/p>\n
        $ cd WordPress-Widget-Boilerplate<\/code><\/pre>\n
        Arkiston kloonauksen tulosten pit\u00e4isi n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n
        Seuraavaksi sinun on varmistettava, ett\u00e4 vaihdat luomaani<\/strong> kehityshaaraan. T\u00e4m\u00e4n tekeminen on todella helppoa. Mutta ennen kuin teemme sen, miksi et m\u00e4\u00e4rit\u00e4 projektia Visual Studiossa?<\/p>\n
        Visual Studio Coden m\u00e4\u00e4ritt\u00e4minen<\/h3>\n
        Vaiheet projektin m\u00e4\u00e4ritt\u00e4miseksi Visual Studio Codessa ovat yksinkertaisia:<\/p>\n
          \n
        1. Ved\u00e4 Boilerplaten hakemisto IDE:hen,<\/li>\n
        2. Avaa integroitu p\u00e4\u00e4te,<\/li>\n
        3. Vaihda oksat<\/li>\n<\/ol>\n
          Aivan kuten olen tehnyt yll\u00e4, annan n\u00e4ytt\u00f6l\u00e4hetyksen siit\u00e4, kuinka t\u00e4m\u00e4 kaikki tehd\u00e4\u00e4n. Hakemiston vet\u00e4minen Visual Studio Code -koodiin pit\u00e4isi olla riitt\u00e4v\u00e4n helppoa, mutta haarojen vaihtaminen komentorivill\u00e4 voi olla hieman erilaista.<\/p>\n
          Ensin projektin m\u00e4\u00e4ritt\u00e4minen Visual Studio Codessa:<\/p>\n<\/p>\n
          Huomaa t\u00e4ss\u00e4, ett\u00e4 avaan my\u00f6s integroidun p\u00e4\u00e4tteen painamalla CMD+P-pikakuvaketta (olen macOS:ss\u00e4, joten pikakuvake voi olla erilainen). Sitten annan komennon tarkistaaksesi kehityshaan<\/strong>.<\/p>\n
          Kun olet tehnyt t\u00e4m\u00e4n, paikallisen arkiston pit\u00e4isi vaihtaa kehityshaaraan. Voit vahvistaa, ett\u00e4 kyseess\u00e4 on haara, jota ty\u00f6skentelet kirjoittamalla:<\/p>\n
          $ git branch<\/code><\/pre>\n
          Tarkista sitten p\u00e4\u00e4tteen sis\u00e4lt\u00f6. Tarkkaan ottaen kehitt\u00e4mist\u00e4<\/strong> tulisi korostaa.<\/p>\n
          \"WordPress-widgetit:<\/a><\/p>\n
          T\u00e4ss\u00e4 vaiheessa aiomme tuoda projektiin muutamia uusia tiedostoja. T\u00e4m\u00e4n opetusohjelman lopussa voit muodostaa vedon<\/strong> saadaksesi kaiken, mit\u00e4 aion dokumentoida t\u00e4nne. Mutta koska toimintamme tarkoitus on kaksijakoinen, on t\u00e4rke\u00e4\u00e4 varmistaa, ett\u00e4 teemme t\u00e4m\u00e4n oikeassa j\u00e4rjestyksess\u00e4, koska ensimm\u00e4inen askel on jotain, jota k\u00e4yt\u00e4n jokaisessa WordPress-projektissa t\u00e4ll\u00e4 hetkell\u00e4.<\/p>\n
          Joten t\u00e4m\u00e4n sanottua, katsotaanpa.<\/p>\n
          S\u00e4velt\u00e4j\u00e4 ja koodin laatu<\/h3>\n
          Ensimm\u00e4inen asia, jonka haluan tehd\u00e4, on luoda sarja ty\u00f6kaluja koodin laadun valvomiseksi. T\u00e4m\u00e4 saavutetaan useilla Composer-paketteilla. N\u00e4m\u00e4 sis\u00e4lt\u00e4v\u00e4t:<\/p>\n