Pixels Starter Theme + Plugin on kirjaimellisesti se aloituspiste, josta kaikkien WordPress-projektiemme tekninen toteutus alkaa.
Teema sisältää yleisesti käytettyjä ominaisuuksia sekä asettaa raamit WP-kehitykselle, eli lyhyesti miten sivustoja koodataan. Sääntöjä on luotu mm. sille miten sisältötyypit rekisteröidään, miten sivupohjat pystytetään ja millä tyylillä koodia kirjoitetaan. Teema ei määritä sivuston ulkoasua tai sanele mitä toiminnallisuuksia tai integraatioita sivustolla voidaan hyödyntää.
Ruokalista:
- Frontti: ES6, SCSS, React
- Backi: PHP7+ oliopohjaisena
- Dependencyt: Composer, Yarn
- Devaus: Webpack, Browsersync, Local
- Templating: Twig, Timber
- Kentät: Advanced Custom Fields
Devaaja! Kiinnostaako haastaa miten toimialalla rakennetaan verkkosivuja? Alkaako perus WordPress-saittien rakentaminen maistua puulta?
Hyppää Pixelsin remmiin tekemään verkkopalveluita moderneilla työkaluilla ja siirtämään verkkosivukehitystä lähemmäksi sovelluskehitystä. Kurkkaa avoimet työpaikkamme.
Mitä hyötyä omasta teemasta on?
Laatu piilee usein prosesseissa, ja tiimi on yhtä vahva kuin sen heikoin lenkki. Siitä kai tässä on kyse.
Teemamme antaa selkeät suuntaviivat kehittäjälle ja pitää huolen siitä että kaikki kehittäjät talon sisällä tekevät asiat samalla tavalla. Tämä on elintärkeää kaltaisellemme toimistolle, jossa tieto siitä miten sivusto on kehitetty ei voi olla yksittäisen kehittäjän pään sisällä tai rustattuna johonkin lapulle.
Lisäksi jokaisen meillä työskentelevän kehittäjän pitää pystyä hyppäämään mukaan projekteihin luontevasti; joko ratkomaan ongelmia, tuuraamaan sairastunutta tai ottamaan vastuulleen isompi kehitystehtävä. Vastaavasti rakentamiemme sivustojen päivitys ja ylläpito on suoraviivaisempaa ja luotettavampaa kun ne rakentuvat yhden, vakaan pohjan päälle, jota voi päivittää kertaheitolla samalla kaikille.
Lentäjänkin on helpompi hoitaa matka turvallisesti ja varmuudella, kun voi hypätä tutun Airbus A320:n puikkoihin sen sijaan että joka kolmas lento pitäisi hoitaa tuntemattomalla Boeingin kalustolla tai lentokoneella, jossa polkimet toimivat käänteisesti.
Mitä starter sisältää?
Aloitussetti koostuu kahdesta osasta; teemasta ja lisäosasta. Teema luo raamit ja rakenteet sivuston ulkokuoren rakentamiseen, plugarista taas löytyy ns. business-logiikka, eli toiminnot ja miten dataa käsitellään. Periaatteessa teeman voisi vaihtaa ja plugarissa pysyy logiikka, vaikka käytännössä näin ei yleensä tapahdu.
Starter on luotu 100% devaajat edellä ja puhtaasti meidän tarpeisiimme. Teema ei siis sisällä raameja ulkoasulle kuten perus valmisteemat vaan on runko koodaamiseen. Olemme koittaneet pitää sen modernina ja mahdollistaa uudemmatkin kikkailut (React, uudet JS-syntaksit yms.), mutta teeman käyttö ei vaadi mitään utopistista.
Lue myös: Älä rakenna WordPress-verkkosivuja valmisteemalla
Teema ei pakota devaajaa tekemään fronttia tietyllä tapaa, vaan kukin saa hoitaa sen miten tykkää. Starter on tehty sellaisella asenteella, että ei mennä sieltä mistä aita on matalin, vaikka WP:llä voisikin asiat tehdä nopeammin tai “helpommin” (yleensä jonkin muun asian kustannuksella). Vaikka yksityiskohdat jäävät devaajan käsiin, antavat sekä teema että lisäosa vahvat ehdotukset mihin muotoon koodipohjaa kannattaa lähteä rakentamaan.
Laadunvarmistusta on pohdittu hieman myös; starterit on kytketty Travisiin, joka tekee laadunvarmistusta ja testaa koodin. Jos uudesta koodista löytyy vikaa, sitä ei pysty yhdistämään tuotantoversioon. Travisin pitää olla tyytyväinen ennen kuin muutokset menevät muiden käyttöön.
Teemasta löytyy myös semi-automaattinen design system -pohja, johon voi halutessa syöttää component json dataa ja se rendaa ne kivasti valmiiksi tyylikirjastoksi.
Pohjana Twig & Timber
Aiemmin käytimme varsin suosittua Sage (Roots) -pohjateemaa, joka on oiva sekin alusta modernien työkalujen ja metodien käyttöön WP-kehityksessä. Se kuitenkin sai hiljalleen väistyä kun löysimme Timberin.
Kaiken pohjana teemassa on nyt siis Timber, joka käyttää Twigiä ns. ‘template moottorina’. Twig luo ikään kuin kerroksen PHP:n ja template filen väliin, jota sitten Timberin avulla laajennetaan. Koodissa erotellaan logiikka sen tyylittelystä, mikä on mielestämme muissakin yhteyksissä hyväksi todettu prosessi ja tuttu muista ohjelmistokehyksistä. WordPressin ulkopuolella mm. Symfony käyttää Twigiä templausmoottorinaan.
Useimmat WP-teemat eivät syystä tai toisesta käytä Twigiä, joka on mielestämme kuitenkin PHP-maailmassa se paras templauskieli. Twig poistaa turhaa kirjoittamista ja antaa enemmän valmiita asioita käytettäväksi, joka nopeuttaa ja helpottaa saittien tekoa. Se parantaa myös osaltaan tietoturvaa, mm. koska Twigillä tuotettu sisältö on käynyt läpi ainakin jonkinlaiset filtterit. Timber taasen on varsin laadukas kirjasto ja luo frontissa fiksua uudelleen käytettävyyttä sekä antaa vapauden käyttää sitä joko osittain tai kokonaan.
Voimme ylpeästi todeta, että olemme tiettävästi Suomen ainoa Timber Pro. Timber listaa sivuilleen toimistoja, jotka käyttävät Timberiä projekteissaan tavalla, joka läpäisee heidän kriteerinsä. Blueprint Geneticsille rakentamme WP-sivusto löytyy myös kuratoidusta Built with Timber -listauksesta.
Miksi halusimme jakaa aloitusteemamme avoimena?
Koemme olevamme osa kansainvälistä WordPress-yhteisöä; osallistumme tapaamisiin, kierrämme WordCamp tapahtumia vapaaehtoisina, puhujina ja sponsoreina sekä hyödynnämme jatkuvasti avoimeksi jaettua tietoa omassa työssämme — miksi emme siis antaisi jotain yhteisölle takaisin?
Avoimeksi jakama tieto kehityskäytännöistämme on hyvä keino avata tekemistämme siitä kiinnostuneille, pääasiassa muille kehittäjille, olivat ne sitten kilpailijoita, asiakkaita tai potentiaalisia työntekijöitä. Olemme kokeneet, että läpinäkyvästi asioista kertominen myös luo uskottavuutta toimintaamme sekä on oiva keino näyttää maailmalle miten meillä näitä ATK-hommia oikein tehdään – samalla se luo painetta pitää asiat ajan tasalla ja perustella päätökset, joiden pohjalta teema rakentuu.
Kehitys kehittyy…
Tällä hetkellä pohdimme mm. onko Bootstrap jatkossa käytössä vai ei, sillä se on korvattavissa ihan rehdisti vaan itse tekemällä CSS:ää. Niin kuin usein tehdäänkin. Flexbox on jo vahvasti käytössä ollut jo tovin. Sama kohtalo oikeastaan myös jQueryn kanssa, joka on korvattavissa esim. Ihan vain CSS:llä ja JavaScriptillä.
Teemasta löytyy myös kevyttä ‘headless valmiutta’, sillä plugari tarjoaa valmiit tavat siihen miten WP:n dataa syötetään ulospäin. Hirveästi sitä tässä tarkoituksessa ei ole vielä käytetty, mutta juuri on työn alla yksi headless WP -projekti, joten katsotaan miten se tästä muotoutuu.
Muokkaus 20.8.2021: Nyt sitä headless CMS:ää on myös tarjolla! Lue intro aiheeseen: Headless CMS -ratkaisulla päihität kilpailijat verkossa
Tutustukaapa rohkeasti pakettiin ja kokeilkaa, josko siitä irtoaisi jotain hyödyllistä omaan workflow:hun. Otamme mielellämme vastaan Githubissa pull requesteja, issueita, tähtiä tai sitten voi ihan vaan laittaa viestiä ja kysyä jelppiä, jos niikseen tulee.
Voit kommentoida myös Twitterissä kokemuksistasi: @pixelshelsinki
Devaaja! Kiinnostaako haastaa miten toimialalla rakennetaan verkkosivuja? Alkaako perus WordPress-saittien rakentaminen maistua puulta?
Hyppää Pixelsin remmiin tekemään verkkopalveluita moderneilla työkaluilla ja siirtämään verkkosivukehitystä lähemmäksi sovelluskehitystä. Kurkkaa avoimet työpaikkamme.