Lapsiteeman luonti WordPress.orgiin

WordPress child theme article picture

Lapsiteeman luonti WordPress.orgiin tulee kyseeseen siinä vaiheessa, kun olemassa olevaa pääteemaa halutaan muokata omaan käyttöön sopivammaksi tai kun teemaan halutaan lisätä uusia yksityiskohtia. Esimerkiksi uuden CSS-tyylin lisääminen pääteeman tiedostoihin ei ole suotavaa, koska pahimmassa tapauksessa koko sivusto voi rikkoutua tai tehdyt muutokset katoavat pääteeman päivittämisen yhteydessä.

WordPress child theme article pictureHelppo ratkaisu tähän ongelmaan on luoda lapsiteema (engl. child theme), johon on turvallista tehdä haluamia muutoksia. Lähteenä olen käyttänyt wpbeginnerin artikkelia: How to Create a WordPress Child Theme, jonka avulla tein käyttämälleni Twenty Thirteen -teemalle lapsiteeman. Lisää lapsiteemasta, sen käytöstä, hyödyistä ja haitoista kannattaa lukea sivulta: What is a WordPress Child Theme? Pros, Cons, and More.

Lapsiteeman luonti

Lapsiteeman luodaan seuraavalla tavalla:

  1. Mene omalle palvelimelle, jossa sivustosi on (esim. SSH- tai  FTP-yhteydellä)
    • mikäli käytät FTP-yhteyttä, voit tehdä alla luotavan lapsiteeman style.css -tiedoston (kohta 5) omalla koneellasi ja siirtää sen suoraan palvelimelle, muista luoda kohdan 3 kansio hakemistoon  /wp-content/themes/. Alla olevat ohjeet (kohdat 2-6) mukailevat komentoja, joita tarvitaan SSH-yhteyttä käyttäessä
  2. Avaa WordPressin asennushakemisto /wp-content/themes/
  3. Luo sinne kansio <tyylisinimi>-child (mkdir <tyylisinimi>-child) minä loin kansion nimeltä twentythirteen-childContent of wp themes folder
  4.  Avaa /wp-content/themes/<tyylisinimi>-child kansio ja  luo style.css -tiedosto komennolla nano style.css
  5. Kopioi tiedostoon olla oleva koodin pätkä (vihreä), korvaa lihavoidut kohdat omilla tiedoilla:
    • /*
       Theme Name:   Twenty Thirteen childtheme
       Theme URI:        http://www.koodielamastani.fi
       Description:        A Twenty Thirteen child theme
       Author:                Marika Könönen
       Author URI:        http://www.koodielamastani.fi
       Template:           twentythirteen
       Version:              1.0.0
      */
    • @import url(“../twentythirteen/style.css”);
    • Tärkeintä näistä on muuttaa Template ja import url!
    • Template kertoo WordPressille, että tämä on lapsiteema ja pääteeman hakemiston nimi on twentythirteen
    • import url kertoo polun pääteeman style.css tiedostoon
  6. Tallenna tiedosto ja tarkasta sisältö less style.css komennolla, sisältö tulostuu ruudulle ja näyttää tältä:Child theme styles.css sisältö
  7. Avaa WordPress ja mene ohjausnäkymästä Ulkoasu -> Teemat
  8. Aktivoi juuri luotu teema painamalla painiketta Ota käyttöönAktivoi lapsiteema
  9. Lapsiteema on aktiivinen!Uusi teema otettu käyttöön

Näillä stepeillä saa luotua lapsiteeman ja voi turvallisesti lisätä teemaan omia persoonallisia koodin pätkiä tarpeiden mukaan tai muokata ulkoasua haluamaksi, eikä pääse sotkemaan pääteeman koodia tai menetä muutoksia pääteeman päivityksen yhteydessä. Lapsiteeman aktivoinnin jälkeen WordPress käyttää luotua lapsiteemaa ja kuten yllä olevasta kuvasta voi huomata, pääteemaan on ilmestynyt taas Ota käyttöön -painike. Twenty Thirteen Childtheme -teeman ulkoasu on nyt täydellinen kopio Twenty Thirteen -teemasta, koska lapsiteeman tiedostoihin ei ole lisätty mitään muuta kuin pääteeman style.css -tiedoston importoiminen.

Lapsiteeman testaaminen

Vielä yksi hyödyllinen asia on tekemättä, nimittäin lapsiteeman toimivuuden testaaminen. Lisätään pieni CSS-määritelmä lapsiteeman style.css -tiedostoon ja varmistetaan, että lapsiteema toimii. Sinällään jo se, että sivusto toimii niin kuin ennen, varmistaa lapsiteeman luomisen onnistumisen. Näytän kuitenkin, miten kuvasta saa muokattua pyöreän css-tyyliä käyttäen ja sillä tavalla saadaan jotain sisältöä style.css -tiedostoon.

  1. Valitse ohjausnäkymästä Ulkoasu->muokkain
  2. Varmista, että Muokattava teema valikossa on valittuna äsken luomasi lapsiteema
  3. Lapsiteemalle on tehty vain style.css -tiedosto, joten se on automaattisesti näkyvissä päänäkymässä
  4. Lisää seuraava CSS-määritys (vihreä tausta) tiedoston loppuun:
    • .round-image {
      background-color: #F5F5F5;      
      border: 1px solid #DDDDDD;     
      border-radius: 50% 50% 50% 50%;      
      padding: 4px;
      }
  5. Tallenna muutokset Päivitä tiedosto -painikkeella
  6. Lisää uusi artikkeli ja lisää artikkeliin kuva Lisää media hakemistosta
  7. Valitset Teksti -näkymä
  8. Lisää juuri valitun kuvan tietoihin koodiin round-image img class -kohtaan lainausmerkkien sisälle
    • Tässä esimerkki: <img class=”size-medium wp-image-4753 round-imagecss-lisaa-kuvaan
  9. Tallenna luonnos ja valitse esikatsele, kuvasi pitäsi olla muokattu CSS:llä pyöreäksi/soikioksi, kuten alla oleva kuva.

Huvimaja

Loppu löpinät

Lapsiteeman käyttö on uusi asia minulle, mutta mielenkiinnolla alan testaamaan,  mitä kaikkea sen avulla pystyy tekemään. Muokkaamismahdollisuuksia on monia ja taito kasvaa tehdessä, ehkäpä jonain päivänä koodaan ihan oman pääteeman. Eikä kannata pelästyä, jos esimerkiksi otsakekuva on lapsiteeman käytön johdosta kadonnut: itselläni otsakekuva vaihtui oletuskuvaksi ja jouduin asettamaan otsaketekstin värin sekä kuvan takaisin uudelleen. Tämäkin olisi ollut mahdollista tehdä koodipohjalta, mutta se on taas ihan toinen juttu ja en viitsi pidentää tämän artikkelin tekstiä enempää.  How to Create a WordPress Child Theme -artikkelissa kaivetaan aihetta vielä syvemmälle, kuin omassa versiossani, joten sieltä vaan vinkkejä kurkkimaan, mikäli tarkempi selostus kiinnostaa.

One thought on “Lapsiteeman luonti WordPress.orgiin

Leave a Reply

Your email address will not be published. Required fields are marked *