A Guide To The Options For WordPress Theme Development

admin 0 Comments Articles

A Guide To The Options For WordPress Theme Development

  • 14 min. luettu
  • WordPress,Tekniikat (WP)
  • Tallennettu offline-lukemista varten
  • Jaa Twitterissä, LinkedIn
Edingburghissa hiljattain järjestetyssä WordCamp Edinburghissa osallistuin paneelikeskusteluun, joka käsitteli WordPress-teemojen kehittämistä ja kehittäjien käytettävissä olevia vaihtoehtoja teemojen rakentamisessa. Istunnon päällimmäinen johtopäätös oli, ettei ole olemassa yhtä kaikille sopivaa vastausta ja että paras menetelmä riippuu verkkosivuston tarpeista ja kehittäjän kyvyistä.

Viimeisimmässä Edinburghin WordCampissa osallistuin paneelikeskusteluun, joka käsitteli WordPress-teemojen kehittämistä ja kehittäjien käytettävissä olevia vaihtoehtoja teemojen rakentamisessa. Istunnon päällimmäinen johtopäätös oli, ettei ole olemassa yhtä kaikille sopivaa vastausta ja että paras menetelmä riippuu verkkosivuston tarpeista ja kehittäjän kyvyistä.

Mutta jos olet aloittamassa WordPress-teemojen rakentamista tai haluat kehittää järjestelmän, jolla voit rakentaa niitä tehokkaammin tai vankemmin, miten päätät, mikä lähestymistapa kannattaa valita? Tässä artikkelissa kuvaamme lyhyesti, miten WordPress-teemat toimivat, ja tarkastelemme sitten joitakin erilaisia lähestymistapoja niiden kehittämiseen sekä annamme vinkkejä siitä, mikä lähestymistapa saattaisi sopia parhaiten verkkosivustollesi ja olosuhteisiisi.

Lisälukemista SmashingMagista:

  • Web-sivuston siirtäminen WordPressiin on helpompaa kuin luuletkaan
  • WP_Queryn käyttäminen WordPressissä
  • Tapahtumien aikatauluttaminen WordPressin Cronin avulla
  • Miten WordPress-verkkosivustojen käyttöönottoa voidaan parantaa

Miten WordPress-teema toimii?

WordPressissä teemat ohjaavat verkkosivustoa ja määrittelevät, mitä se sisältää, miten se käyttäytyy ja miltä se näyttää. Teema on erillään sisällöstä, jota säilytetään tietokannassa. Tämä tarkoittaa, että voit käyttää samaa teemaa useammalla kuin yhdellä verkkosivustolla riippumatta verkkosivustojen sisällöstä – mitä saatat jo tehdä, jos olet ladannut teemoja WordPressin teemavarastosta.

Teema koostuu useista mallitiedostoista, jotka kaikki on tallennettu teemakansioon, joka löytyy WordPress-asennuksessasi osoitteesta wp-content/themes. Jokaisen WordPress-teeman on sisällettävä vähintään kaksi tiedostoa: index.php ja style.css. Indeksitiedosto määrittelee, mitä sisältöä teema näyttää, ja tyylitiedosto (arvasit sen) tyylittelee sen sekä sisältää teemaa koskevia metatietoja, joita WordPress käyttää saadakseen teeman toimimaan oikein.

Todellisuudessa useimmilla teemoilla on muutama ylimääräinen tiedosto:

  • header.php Sisältää <head>-osion jokaisesta sivusta sekä verkkosivuston ulkoasun otsikon.
  • sidebar.php Sisältää sivupalkin, mukaan lukien mahdolliset widget-alueet.
  • footer.php Sisältää alatunnisteen, jossa voi olla tai ei voi olla widget-alueita.
  • functions.php Sisältää kaikki teemakohtaiset toiminnot. Voit tutustua funktiotiedostoon WordPress Codexissa.
  • Tiedostot, jotka sisältävät silmukan, joka kutsuu sisältöä tietokannasta. Riippuen siitä, missä sivuston osassa työskentelet, tämä voi olla jokin useista tiedostoista:
    • page.php Staattisille sivuille
    • single.php Yksittäisille viesteille (esimerkiksi blogipostaukset)
    • index.php, archive.php, category.php jne. Sivuille, joilla luetellaan useita viestejä

Yoast on kirjoittanut hienon visuaalisen esityksen siitä, miten teematiedostot toimivat, ja WordPress Codex sisältää yksityiskohtaisen kuvauksen teemoista, mukaan lukien yksityiskohdat eri tiedostoista ja siitä, milloin niitä kutsutaan.

Väittäisin kuitenkin, että tyylitiedosto (style sheet) on tärkein tiedosto, ja se, josta todennäköisesti aloitat sen käytön, koska ”lapsiteemassa” (siitä pian lisää) tarvitaan tyylitiedostoa, vaikkei siinä olisi mitään muuta. Tyylitiedosto sisältää tärkeää metatietoa itse teemasta, joka kommentoidaan pois ennen kaikkia tyylejä. Alla on WordPressin nykyisen oletusteeman, Twenty Elevenin, avauskommentit:

Tämä tieto on kommentoitu pois, jotta selaimet eivät lue sitä, mutta WordPress lukee sen, ja se antaa tietoa kaikille, jotka käyttävät teemaa. Palaamme tähän pian, kun tarkastelemme, miten luodaan lapsiteema.

Nyt kun tiedät, miten teemat toimivat, seuraava askel on selvittää, miten voit rakentaa oman teemasi. Ennen kuin aloitat, kannattaisi miettiä joitakin seikkoja, jotka auttavat sinua tekemään tämän päätöksen.

Mitä ottaa huomioon WordPress-teemaa kehitettäessä?

Ennen kuin päätät, millä lähestymistavalla kehität teemasi, tunnista rajoitteesi. Näitä ovat todennäköisesti seuraavat:

  • Aika. Kuinka paljon sinulla on aikaa teeman kehittämiseen tai sen opetteluun?
  • Budjetti. Tämä liittyy aikaan, mutta liittyy myös siihen, onko sinulla varaa maksaa premium-teemasta tai teemakehyksestä.
  • Kyky. Kuinka hyvin tunnet teemojen kehittämisen, CSS:n ja PHP:n sekä teemojen toiminnan? Jos et ole perehtynyt, kuinka paljon haluat oppia?
  • Tulevaisuuden turvaaminen. Pitääkö teemasi päivittää tulevaisuudessa? Työskentelevätkö muut kehittäjät sen parissa sinun lisäksesi? Jos näin on, lähestymistapasi on oltava mahdollisimman vankka.
  • Toistuvuus. Näetkö kehittäväsi tulevaisuudessa useita samanlaisia teemoja? Jos näin on, lähestymistapasi on mahdollistettava koodin uudelleenkäyttö.

Palataan näihin näkökohtiin artikkelin lopussa ja selvitetään, mitkä kehitysvaihtoehdot sopivat parhaiten eri tilanteisiin.

Teemojen kehittäminen: Vaihtoehtosi

Teeman tai teemojen kehittämiseen on tarjolla muutamia vaihtoehtoja, ja niiden tutkiminen ennen kuin käärit hihat ja alat koodaamaan kannattaa. Oikean lähestymistavan valitseminen johtaa parempaan teemaan, jossa on vankempaa koodia, ja se minimoi myöhemmin tehtävien tarkistusten määrän. Se auttaa sinua myös rakentamaan teeman tehokkaammin.

Vaihtoehdot, joita tässä tarkastelemme, ovat:

  • Rakenna teema tyhjästä,
  • Muokkaa (tai ”hakkeroi”, jotkut saattaisivat sanoa) olemassa olevaa teemaa,
  • Käytä teeman muokkaajaa olemassa olevan teeman muokkaamiseen,
  • Luo lapsiteema tehdäksesi muutoksia olemassa olevaan teemaan,
  • Luo oma vanhemman teeman (käyttäen yhtä edellä mainituista lähestymistavoista) ja lapsiteemoja,
  • Käytä teemakehystä.

1. Rakenna teema tyhjästä

Tämä lähestymistapa on vaikein, jos olet kokematon. Mutta jos olet kokenut WordPress-kehittäjä, se antaa sinulle eniten hallintaa. Se saattaa olla sopivin menetelmä, jos tuot HTML:ää olemassa olevasta staattisesta verkkosivustosta, joka päivitetään WordPressiin ilman muita muutoksia.

Mutta kun siirrät verkkosivuston WordPressiin, on hyvä ajatus suorittaa sen tarkastelu osana prosessia sen sijaan, että vain kopioit koodin yli. Jos kopioit staattisen verkkosivuston, sinun on pidettävä koodia tarkasti silmällä varmistaaksesi, että se on puhdasta, tehokasta ja validia.

2. Olemassa olevan teeman muokkaaminen (tai hakkerointi)

Näin useimmat ihmiset aloittavat WordPress-teemojen kehittämisen: työskennellessään ladatun teeman parissa he huomaavat, että jotkin tyylisuunnat eivät ole ihan oikeanlaisia, joten he kaivautuvat tyylitiedostoon ja tekevät muokkauksia. Näin aloittaminen on houkuttelevaa, koska se tuntuu nopealta ja helpolta tavalta saavuttaa haluamasi vaikutus. Siinä on kuitenkin joitakin vaaroja:

  • Jos joskus vaihdat teemaa, päivitys kumoaa kaikki tekemäsi muutokset.
  • On helppo lisätä toistuvaa koodia lisäämällä uusia tyylejä alempana tyylilomakkeessa, jotka kumoavat ylempänä olevat tyylit, sen sijaan että poistaisit sen, mitä et tarvitse.
  • Sivustolla voi lopulta olla paljon enemmän koodia kuin se tarvitsee.
  • Jos teema on alun perin huonosti koodattu tai kommentoitu, voit ajautua isompaan sotkuun ja huomata, että joudut tekemään paljon korjauksia.

Teeman hakkeroiminen voi kuitenkin onnistua, jos lähdet siihen avoimin silmin. Se voi olla vaihtoehto, jos seuraavat asiat pitävät paikkansa:

  • Käyttämäsi teema on hyvin kirjoitettu, validoitu ja kommentoitu (esim, WP:n oletusteema Twenty Eleven);
  • Tekemäsi muutokset ovat niin jyrkkiä, ettei sinun tarvitsisi päivittää alkuperäistä teemaa;
  • Ymmärrät teeman sisältämän PHP:n ja CSS:n ja pystyt mukavasti muokkaamaan, lisäämään ja poistamaan niitä rikkomatta teemaa.

Jos päätät lähteä tälle tielle, varmuuskopion pitäminen alkuperäisestä teemasta ja koodin perusteellinen kommentoiminen ovat tärkeitä. Suosittelen myös kommentoimaan pois kaiken koodin, jota et halua, ja sitten testaamaan, mitä tapahtuu, ennen kuin poistat mitään.

3. Käytä teeman muokkaajaa olemassa olevan teeman muokkaamiseen

Teeman muokkaaja julkaistiin WordPress 3.4:n myötä. Se antaa sinulle mahdollisuuden muokata teemaa kirjoittamatta mitään koodia, yksinkertaisesti käyttämällä WYSIWYG-käyttöliittymää. Riippuen siitä, kuinka hyvin muokkaaja on kirjoitettu itse teemaan, voit käyttää sitä kuvien, otsikoiden, värien ja jopa ulkoasun muuttamiseen. Odotettavissa on lisää teemoja, joihin muokkaaja on integroitu.

WordPress-teeman muokkaajan käyttäminen Twenty Ten -teeman kanssa.

Teeman muokkaaja tallentaa muutoksesi erilliseen tiedostoon, ei teeman tyylitiedostoon, joten koodia tulee toistumaan.

Lisätietoa saat Otto on WordPressin video-oppaasta tai oppaasta teeman muokkaajan integroimisesta omiin teemoihisi.

4. Luo lapsiteema tehdäksesi muutoksia olemassa olevaan teemaan

Tämä lähestymistapa on samanlainen kuin olemassa olevan teeman muokkaaminen, mutta turvallisempi. Se koostuu kokonaan uuden teeman luomisesta, joka määritellään olemassa olevan teeman lapsiteemaksi. Jos lapsiteemalla ei ole tiettyä tiedostoa, mutta vanhemmalla teemalla on, se käyttää sitä. Jos lapsiteemassa on tiedosto, se ohittaa vanhemman teeman vastaavan tiedoston. Katsotaanpa esimerkkiä:

Parent-teeman tiedostot Child-teeman tiedostot
  • style.css
  • page.php
  • single.php
  • archive.php
  • header.php
  • sidebar.php
  • footer.php
  • style.css
  • page.php
  • header.php
  • header.php

Ylläolevassa esimerkissä, WordPress käyttäisi seuraavia tiedostoja sisällön toimittamiseen:

  • style.css lapsiteemasta,
  • page.php lapsiteemasta,
  • single.php vanhemmasta teemasta,
  • archive.php vanhemmasta teemasta,
  • header.php lapsiteemasta,
  • sidebar.php vanhemmasta teemasta,
  • footer.php vanhemmasta teemasta.

Voit nähdä, miten tämä olisi hyödyllistä, jos haluaisit käyttää suurinta osaa vanhemman teeman merkinnöistä, mutta muuttaa otsikon sisältöä (lisäämällä esimerkiksi logosi ja osoitetietosi) ja minkä tahansa staattisen sivun sisältöä (ehkä muuttamalla tapaa, jolla metatiedot näytetään).

Yksi tiedosto, joka jokaisella lapsiteemalla on oltava toimiakseen, on tyylitiedosto (style sheet), koska siinä on tiedot, joita WordPress tarvitsee saadakseen lapsiteemansa toimimaan oikein. Voit tehdä tämän lisäämällä ylimääräistä koodia style sheetin kommentteihin:

Havaitsetko ylimääräiset rivit? Ensimmäinen on:

Template: twentyeleven

Tämä rivi kertoo WordPressille, että teema on lapsiteema ja että Twenty Eleven on sen vanhempi. Lisäisit vanhemman teeman hakemiston nimen, et sen koko nimeä.

Ja toinen:

@import url("../twentyeleven/style.css");

Tämä rivi kertoo selaimelle, että se lataa vanhemman teeman tyylitiedoston ennen kuin se renderöi mitään nykyisen tyylitiedoston tyylejä. Tämä vapauttaa sinut siitä, että sinun ei tarvitse kopioida mitään vanhemman teeman tyylejä, joita haluat käyttää.

Niin, näin lapsiteemat toimivat. Mutta milloin tämä on paras lähestymistapa? Ehdottaisin sen käyttämistä seuraavissa tapauksissa:

  • Sinulla on jo olemassa teema (jota käytetään vanhempana), joka sisältää suurimman osan siitä, mitä tarvitset teemallesi;
  • Haluat pystyä päivittämään vanhempana olevaa teemaa (esimerkiksi kun teemapäivityksiä julkaistaan WordPress-päivityksen jälkeen);
  • Et halua joutua solmuun olemassa olevan teeman hakkeroinnista;
  • Haluat mahdollisuuden palata vanhempateemaan tai kehittää tulevaisuudessa toisen samanlaisen teeman (joka olisi uusi lapsiteema);
  • Olet kehittämässä useita samankaltaisia verkkosivustoja, joilla on pieniä tyylillisiä tai sisällöllisiä eroja (tein näin rakentaessani samankaltaisia verkkosivustoja asiakkaalle, joka omisti useita yrityksiä);
  • Ero lapsiteemasi ja vanhempateemasi välillä ei ole niin suuri, että sinun pitäisi aloittaa alusta, tai niin suuri, että lapsiteemasi koodi ohittaisi kaiken, mihin vanhempateeman päivitykset vaikuttavat.

5. Oman vanhemman teeman luominen (käyttämällä jotakin edellä mainituista lähestymistavoista) ja lapsiteemojen luominen

Tilanteessa, johon juuri viittasin, eli useiden verkkosivujen rakentamisessa asiakkaalle, jolla on useita yrityksiä, saatat luoda vanhemman teeman ja perustaa sitten lapsiteemoja yksittäisille verkkosivuille. Saatat haluta tehdä näin myös seuraavissa tapauksissa:

  • Suunnitelmissasi on kehittää tulevaisuudessa paljon verkkosivustoja, joilla on samankaltainen sisältö ja merkintätapa (ei vain yhdelle asiakkaalle);
  • Hallitset monia verkkosivustoja ja joudut sukeltamaan kuhunkin niistä säännöllisesti ja haluat, että koodi on hyvin samankaltaista;
  • Haluat mielelläsi luoda oman vanhemman teeman ja muokata koodia luodaksesi vankan vanhemman teeman, joka sopii hyvin lapsiteemojen kanssa.

Jos päätät omaksua tämän lähestymistavan, voit joko rakentaa vanhemman teeman tyhjästä tai hakata olemassa olevan teeman. Useimmissa rakentamissani verkkosivustoissa käytän vanhempien teemaa, jonka kehitin hakkeroimalla Twenty Ten -teemaa, WordPressin entistä oletusteemaa. Tein niin paljon muutoksia, että minun ei enää tarvinnut aktivoida päivityksiä alkuperäiseen teemaan. Olin myös tyytyväinen teeman sisältämään koodiin ja halusin tehdä siihen merkittäviä muutoksia, vähentää koodia, jäsentää sitä uudelleen työskentelytapaani sopivaksi ja poistaa koodia, jota tiesin, etten tarvitsisi.

Voit myös luoda olemassa olevaan teemaan perustuvan lapsiteeman ja sitten luoda sille lapsiteemoja – käytännössä alkuperäisen teeman lapsenlapsia. Tämän etuna on, että et korvaa alkuperäisen teeman koodia, mutta voit samalla joustavasti tehdä lapsiteemaan muutoksia, jotka siirtyvät lapsenlapsi-teemoihin. Tässä on kuitenkin varoituksen sana: kun käytössä on kolme teemaa, on helppo mennä sekaisin siitä, mitä tapahtuu, ja saatat päätyä käyttämään paljon tarpeetonta koodia.

6. Käytä teemakehystä

Viimeinen vaihtoehto on yksi, jota tuhannet WordPress-käyttäjät ja -kehittäjät käyttävät. On olemassa useita teemakehyksiä, joita voit käyttää eräänlaisena kanta-teemana, mutta joissa on paljon enemmän toiminnallisuutta ja joissain tapauksissa mahdollisuus tehdä varsin hienoja ulkoasu- ja tyylimuutoksia kirjoittamatta riviäkään koodia. Jotkin kehykset ovat ilmaisia, kun taas toiset ovat maksullisia. Niitä on tarkasteltu yksityiskohtaisesti jo Smashing Magazinen sivuilla, mutta tärkeimmät on lueteltu alla.

Vapaat WordPress-kehykset:

  • Theme Hybrid sisältää lukemattomia koukkuja ja widget-alueita, joiden avulla voit mukauttaa teemojasi. Sillä on myös joitakin lapsiteemoja saatavilla. Kehys ja lapsiteemat ovat kaikki ilmaisia, mutta jos haluat tukea, sinun on maksettava siitä rekisteröitymällä Theme Hybridin verkkosivustolla. Työskentely sen kanssa voi olla melko monimutkaista, ellet ymmärrä PHP:tä tai käytä jotakin lapsiteemaa.
  • Wonderflux perustuu joustavaan grid-järjestelmään. Siinä on vaihtoehtoja ulkoasun ja tyylien säätämiseen ilman koodin kirjoittamista, ja se sisältää paljon koukkuja ja widget-alueita. Sen käyttö on ilmaista ja sitä tuetaan WordPressin foorumeilla.
  • Carrington on vakiintunein ilmaisista kehyksistä, ja sillä on useita lapsiteemoja.
  • Thematic on Automatticin kehittämä, joka kehittää itse WordPressiä. Se sisältää useita koukkuja, suodattimia ja widget-alueita.
Premium WordPress-kehykset:
  • Sen kehittäjät kuvaavat Genesistä ”alan standardiksi”. Sen mukana tulee laaja valikoima lapsiteemoja, vaihtoehtoja muokata ilman koodin kirjoittamista ja SEO-ominaisuuksia.
  • Thesis on toinen suuri premium-kehys, ja se antaa myös mahdollisuuden muokata lapsiteemoja ilman koodin kirjoittamista.

Yhteenveto: Lähestymistavan valinta

Mahdollisuuksien mukaan tämän luettuasi sinulla on käsitys siitä, minkä lähestymistavan valitset. Mutta siltä varalta, että raavit vielä päätäsi, tässä on yhteenveto siitä, milloin kukin menetelmä on sopiva:

lähestymistapa aika kustannukset kyky tulevaisuus-proofing Repetition
Build from scratch High Low High Low Low
Hack existing theme Low Low Low Medium Low Low
Käytä teeman muokkaajaa Low Low Low Low Low Low
Luo lapsiteema olemassa olevan vanhemman pohjalta Medium Low Medium High High
Luo vanhemman teema High Matal Korkea Korkea Korkea
Teemakehys (ilmainen) Keskitaso Low Medium High High
Theme framework (premium) Keskikokoinen Korkea Matalasta keskikokoiseen Korkea Korkea

Kaiken kaikkiaan, jokaisella lähestymistavalla on paikkansa; se vain riippuu sivustosta ja sinusta. Tärkeintä on, että valitset lähestymistavan punnittuasi hyvät ja huonot puolet – etkä vain sukella ja kokeile, vain huomataksesi, että olet rikkonut teeman tai että olet aiheuttanut itsellesi paljon lisätyötä.

Ja kuten aina, päätitpä mitä tahansa, älä unohda pitää varmuuskopioita!

(al)

Vastaa

Sähköpostiosoitettasi ei julkaista.