Luuptekin teemapohja esittelyssä

Tätä kaikkea herkkua on tarjolla kaikille asiakkaille.

22.03.2021 | Timo Leppänen

Luuptekin teemapohja on ikään kuin pohja kaikelle WordPressin sivustokehitykselle. Se ei tarkoita WordPressin ”valmisteemaa” (Divi / Elementor / vastaava). Voisi sanoa, että teemapohja tekee sivuston perustukset kuntoon. Kun sivustossasi ei ole ns. turhuuksia tarjolla, vaan pohja on räätälöity juuri sinun sivustosi tarpeisiin, on sivustosi tällöin:

  1. Helpompi käyttää (liittyen sisällön päivitykseen)
  2. Nopeampi
  3. Koodiltaan optimoitu

Yllä on esimerkki tapauksesta, jossa valmisteemainen sivusto koodattiin uusiksi pohjautuen tässä artikkelissa esiteltävään pohjateemaan. Tällöin saavutettiin seuraavaa:

Teemapohja käyttöön

Aina kun uusi teemakehitys lähtee käytiin, niin alkajaisiksi ”kloonataan” teemapohjan koodi Githubista ja lähdetään muokkaamaan teemasta projektia vastaava toteutus. WP-kehittäjälle pohja tarjoaa tyylikoodien kirjoittamiseen ”sassia” tavallisen css-kielen sijaan sekä javascript-toteutuksia varten kehittäjä tarvitsee tietämystä ES6-kehityksestä. Tyylien ja javascript tiedostojen automaattisen generoinnin hoitaa Webpack, joka osaa esimerkiksi yhdistellä automaattisesti sass-tiedostojen sisällöt ja generoida niistä webselaimen ymmärtämän css-tiedoston.

”Miksi tuollaisia sasseja ja eeäskutosia?” No siksi, että niiden avulla tyylien ja toiminnallisuuksien kehitys tapahtuu paljon nopeammin kuin ”vanhaan” tapaan.

Kirjoittaisitko mieluummin näin:

.laatikko {
 display: block;
 color: #FFF;
 background-color: #000;
 &.laatikko--punainen {
  background-color: red;
 }
 &.laatikko--sininen {
  background-color: blue;
 }
 &:hover, &:focus {
  border-radius: 20px;
 }
}

Vai näin:

.laatikko {
  display: block;
  color: #FFF;
  background-color: #000;
}
.laatikko.laatikko--punainen {
  background-color: red;
}
.laatikko.laatikko--sininen {
  background-color: blue;
}
.laatikko:hover, .laatikko:focus {
  border-radius: 20px;
}

Sassilla saa siis aikaan tyylejä helpommin ja siten nopeammin.

Mitä kaikkea teemapohja tarjoaa oletuksena?

Jos teeman käy nappaamassa omaan käyttöön GitHubista, näyttää sivusto oletuksena teeman aktivoinnin jälkeen tällaiselta.

Teemapohjan oletusnäkymä
Teemapohjan oletusnäkymää käyttönoton jälkeen. Värit ja fontit asetettuna oletustyylityksellä.

Käytännössä sivustolta löytyy käyttöönoton jälkeen:

Lisäksi teema luo ylläpitoon asetukset (paikkaan Asetukset => teema-asetukset), joilla voi helposti asettaa muun muassa analytiikkascriptit, some-osoitteet ja julkaisun oletuskuvan käyttöön. Teemapohja tekee taustalla myös paljon muutakin, kuten:

Blogille/Uutisille tuki valmiina (arkistonäkymä)

Blogi-arkistolle löytyy oletuksena oma näkymänsä eli blogikirjoitukset listataan omassa arkistonäkymässä ja tehdään sivukohtainen navigointi listan loppuun. Listan kirjoitusnostoja klikattaessa avautuu varsinainen kirjoitus.

Samaa sivupohjaa voidaan käyttää myös kategoria/tagi-arkistoille. Tällöin sivu näyttää automaattisesti artikkelit, joihin on valittu tietty kategoria. Esimerkiksi osoite.fi/kategoria/uutiset näyttäisi alla olevan sivun näköiseltä, mutta artikkelinostot olisivat automaattisesti suodattuneet kategorialla ”Uutiset”.

Blogiarkiston oletusnäkymä ennen muokkaamista asiakasbrändiin.
Blogiarkiston oletusnäkymä ennen muokkaamista asiakasbrändiin.

Teemapohja nojaa vahvasti lohko-editoriin (Gutenberg)

Kuten ylempänä mainittiin, teeman sisältö rakentuu pääsääntöisesti Gutenberg-editorilla. Käytännössä sivuston sisältö siis rakennetaan erilaisia lohkoja hyväksi käyttäen. Lisäksi lohkoeditorin väriasetukset määritellään vastaamaan asiakasbrändin väriteemaa (esim. graafisen ohjeiston perusteella). Koska väriasetukset lukitaan, niin asiakas ei pysty vahingossa sotkemaan sivujaan millä tahansa värien ilotulituksella.

Lohkon väriasetukset
Lohkon väriasetukset. Vain yrityksen brändivärit + musta ja valkoinen käytettävissä.

WordPressin mukana tulee nykyään (03/2021) iso määrä valmiita lohkoja, joiden käyttöä teemapohjassa ei rajoiteta. Teeman käyttäjä voi siis halutessaan ottaa käyttöön esim. ”Kansi”- tai ”Sarakkeet” -lohkon ja muokata niistä halutun näköisen.

Luuptekin innokas open source koodari on tehnyt lisäksi teemapohjaan kaksi räätälöityä lohkoa valmiiksi (tilanne 03/2021, ja lisää on tulossa), joita on helppo muokata omaan käyttötarkoitukseen.

Hankalammat sivupohjat omina pohjinaan

Aivan kaikkea Gutenbergilla ei pysty tai ei kannata tehdä. Sivupohjat, joissa ei ole selkeitä lohkomaisia elementtejä kannattaa tehdä omina sivupohjinaan. Tämä tarkoittaa sitä, että kehittäjä luo sivuston teemaan uuden sivupohjan. Kun sivupohja otetaan käyttöön, saadaan ylläpitoon tehtyä räätälöidyt asetukset päivittää juuri tuon sivupohjan tietoja. Alempana artikkelissa esitellään ylläpitonäkymiä tarkemmin.

Teemapohjan räätälöinti (eli mistä asiakas maksaa?)

Räätälöinti pitää sisällään kaiken sen, millä sivustosta saadaan asiakkaan näköinen ja että se täyttää asiakkaan vaatimukset – käytännössä vaihdetaan fontti, värimaailma ja logo alkajaisiksi. Mietitään, tarvitseeko asiakas mahdollisesti muitakin sivupohjia kuin oletussivupohjan (Gutenberg-lohkoista muodostuva sisältö). Yleensä hieman isommissa sivustoissa tarve on muutamalle uudelle sivupohjalle, sillä aivan kaikkeen Gutenberg-pohjakaan ei pysty (kuten aiemmin kerrottiin).

Jotta asiakas saa hieman yksilöidyn ulkoasun, tehdään käyttöön budjetista riippuen x kpl räätälöityjä lohkoja tai sivupohjia, joita voidaan käyttää koko sivuston laajuisesti. Täysin räätälöidyissä sivustoissa kaikki käytettävät lohkot koodataan itse ja jätetään WP:n vakiolohkot pois (toki asiakas voi niitä halutessaan sisältösivuillaan käyttää). Räätälöidyiltä sivuilta löytyy yleensä muutama erilainen sivupohja.

Käytännön esimerkkejä

Kaikki nämä kolme sivustoa ovat tekniikaltaan hyvin samanlaisia, mutta ulkoasullisesti eroa on huomattavan paljon. Budjetiltaan sivustot ovat hyvin lähellä toisiaan.
trewe.fi (2 kpl räätälöityä lohkoja)
lakiapumurtonen.fi (1 räätälöity lohko)
velicons.fi (ei yhtään räätälöityä lohkoa!!)

Trewen sivusto kaipasi näyttävää elementtiä etusivulle, jolloin luotiin oheinen lohko.

Trewe.fi räätälöity lohko

Ylläpidossa räätälöidyn lohkon asetukset muokkaustilassa näyttävät tältä:

Trewe.fi räätälöidyn lohkon ylläpito

Ylläpitoon on siis tehty lohko, johon on mahdollista määrittää kuvan päällä olevat tekstit (sekä ylä- että ala-alue). Toki kuvakin on päivitettävissä. Koodin kautta on määritelty tyylit miltä tekstit ja kuvat näyttävät.

Hieman kalliimpaa toteutusta edustaa suomenkielisanootervetuloa.fi, johon on tehty 4 kpl räätälöityjä Gutenberg-lohkoja sekä lohkopohjan lisäksi kaksi erillistä sivupohjaa (metodi-sivulle oma pohja sekä materiaalisivuille oma pohjansa). Ohessa esimerkki, miltä metodi-pohjan muokkausnäkymä näyttää – ylä- ja alaosan videoille on tehty omat asetukset sekä sivupalkin sisältökentille löytyy myös omat asetuksensa. Päivitys on suoraan sanoen naurettavan helppoa!

Suomenkielisanootervetuloa.fi metodi-sivupohjan asetuksia

Eli mitä enemmän räätälöintiä joudutaan teemapohjaan tekemään, sitä enemmän siihen kuluu aikaa ja sitä enemmän se maksaa.

Teemapohjan summa summarum

Teemapohja ei siis ole WordPressin valmisteema, jonka voit napata omalle sivulle käyttöösi saman tien. Teemapohja on niin sanottu perusta kaikelle sivustoon tehtävälle kehitystyölle pohjan antaen siihen modernit työkalut. Osaava henkilö tekee pohjan avulla brändätyn yksinkertaisen sivuston 1-2 päivässä.

Pistetäänkö sivustosi uuteen nousuun Luuptekin teemapohjan avulla?

Ota yhteyttä!




    Luuptek ei tallenna tietojasi mihinkään, tarkista vaikka!

    Tämä lomakelähetys suojataan Googlen reCAPTCHA:lla. Lue tietosuoja ja käyttöehdot.

    Lue lisää

    Mikä tämä tällainen Luuptek on?

    Mikä ihmeen Luuptek? Klikkaa ja lue lisää.

    Luuptek 1v.

    Ensimmäinen vuosi tuli täyteen!

    Mitä meillä maksaa WordPress-sivut?

    Mistä ja miten paljon maksat meillä WP-kehityksestä?

    6+2 virhettä, miksi saittisi kannattaa koodata uusiksi

    Yrityksien WordPress-sivujen laatu vaihtelee valitettavan paljon.

    WordPress-kehitys Luuptekissä – käytetyt tekniikat ja työkalut

    Miten meillä kehitetään WordPressiä? Mitä työkaluja käytämme? Ota selvää!

    Gutenberg-editori tuloillaan

    Onko sivustosi valmiina muutoksiin?