myynti@metsosivut.fi

041 498 9805

Soita

"*" näyttää pakolliset kentät

Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.
041 498 9805
Aloitetaan keskustelu
child theme

Miten WordPressin lapsiteema tehdään?

  1. Home
  2. /
  3. Nörttiblogi
  4. /
  5. Miten WordPressin lapsiteema tehdään?

Lapsiteema (child theme) mahdollistaa WordPress-teeman muokkaamisen ilman sen lähdekoodin suoraa muuttamista. Lapsiteema perii pääteeman toiminnallisuudet, mutta siihen tehdyt muokkaukset tallennetaan erilliseen sijaintiin. Tämä tarkoittaa, että voit päivittää pääteeman menettämättä lapsiteemaan tehtyjä muutoksia. Tässä artikkelissa käydään läpi miten lapsiteema tehdään.

Aloitus

Ennen lapsiteeman tekoa varmista, että sinulta löytyy seuraavat asiat:

Luo lapsiteeman kansio

Ensimmäinen vaihe lapsiteeman teossa on luoda uusi kansio sille WordPressin teemakansioon.

Luo tyylitiedosto

Lapsiteeman tärkein tiedosto on tyylitiedosto (style.css). Tämä tiedosto sisältää tietoa lapsiteemasta ja linkittää sen pääteemaan.

Voit myös ylikirjoittaa pääteeman CSS-tyylejä tähän tiedostoon, mutta jos lapsiteemasi sisältää paljon CSS:ää, parempi lähestymistapa on luoda erillinen kansio CSS-tiedostoille lapsiteeman kansioon ja kirjoittaa tyylit sinne.

Luo lapsiteeman kansioon tiedosto nimeltä style.css. Tähän tiedostoon sinun tulee lisätä seuraava koodinpätkä:

/*
Theme Name:   Kadence Child
Description:  Kadence Child Theme
Author:       Oma tai lapsiteeman tehneen firman nimi
Author URI:   https://oma-osoite.fi
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v3.0 (or later)
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  kadence-child
*/

Korvaa tarvittavat kentät omilla tiedoillasi. Template -rivin tulisi vastata pääteeman kansion nimeä. Theme Name -rivi näkyy teeman tunnisteena WordPressin hallintapaneelissa.

Luo functions-tiedosto

Seuraavaksi sinun tulee luoda functions-tiedosto, jossa liitetään tyylitiedostot.

Luo uusi tiedosto nimeltä functions.php lapsiteeman kansioon. Lisää tähän tiedostoon seuraava PHP-koodi:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style( 'child-theme', get_theme_file_uri() . '/style.css', [], wp_get_theme()->get('version') );
});

wp_enqueue_scripts -toimintoa käytetään tyylitiedostojen ja JavaScript-tiedostojen sisällyttämiseen kotisivuille. Tässä tapauksessa se liittää style.css -tyylitiedoston.

child-theme on css-tiedoston id-tunniste. Jokaiselle css- ja js-tiedostolle tulee antaa yksilöllinen tunniste.

wp_get_theme()->get('version') hakee teeman versionumeron style.css-tiedostosta. Tämä varmistaa, että selain lataa viimeisimmän version, kun teet myöhemmin muutoksia lapsiteemaan. Toimiakseen tämä vaatii versionumeron päivittämisen style.css -tiedostoon lapsiteeman muokkauksen jälkeen.

Valinnaiset vaiheet

Tyylitiedostojen lisäys lapsiteemaan

Kun olet luonut lapsiteeman, voit lisätä siihen CSS-tyylitiedostoja näin:

Luo lapsiteeman kansioon uusi kansio nimeltä css. Luo tämän kansion sisälle tarvittavat CSS-tiedostot.

Muokkaa functions.php -tiedostoa seuraavasti:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style( 'child-theme', get_theme_file_uri() . '/style.css', [], wp_get_theme()->get('version') );
    wp_enqueue_style( 'minun-css', get_theme_file_uri() . '/css/minun-css-tiedosto.css', ['child-theme'], wp_get_theme()->get('version') );
    wp_enqueue_style( 'minun-toinen-css', get_theme_file_uri() . '/css/minun-toinen-css-tiedosto.css', ['child-theme'], wp_get_theme()->get('version') );
});

Tässä esimerkissä asetetaan polut minun-css-tiedosto.css ja minun-toinen-css-tiedosto.css -tiedostoihin, jotka sijaitsevat lapsiteemakansion sisällä css-kansiossa.

CSS-tiedostojen lisäys ehdollisesti

WordPress tarjoaa laajan valikoiman vaihtoehtoja CSS-tyylien ja JavaScriptien lisäämiseksi ehdollisesti.

add_action('wp_enqueue_scripts', function(){
    if ( ... ) {
        ...
    }
});

Tässä muutamia yleisiä tapoja:

// Etusivun css ja js -tiedostot
if( is_front_page() ) {
    wp_enqueue_style( 'etusivu', get_theme_file_uri() . '/css/etusivu.css', [], wp_get_theme()->get('version') );
    wp_enqueue_script('etusivu_js', get_theme_file_uri() . '/js/etusivu.js', [], wp_get_theme()->get('version'), true );
}
// Kustom template-tiedoston css-tyylitiedosto
if ( is_page_template( 'minun-template-tiedosto.php' ) ) {
    wp_enqueue_style( 'mun-template', get_theme_file_uri() . '/css/mun-template.css' );
}
// Blogiartikkelisivun tyylit
if( is_single() ) {
    wp_enqueue_style( 'blogipostaus', get_theme_file_uri() . '/css/postaus.css' );
}
// Post ID 25 blogiartikkelin tyylit 
if( is_single('25') ) {
    wp_enqueue_style( 'postaus_id_25', get_theme_file_uri() . '/css/postaus-id-25.css' );
}
// Post ID 30 sivun tyylit
if( is_page('30') ) {
    wp_enqueue_style( 'sivu_id_30', get_theme_file_uri() . '/css/sivu-id-30.css' );
}
// Blogin arkistosivun ja hakutulossivun tyylit
if( is_archive() || is_home() || is_search() ) {
    wp_enqueue_style( 'arkistot', get_theme_file_uri() . '/css/arkistosivu.css' );
}
// 404 error-sivun tyylit
if( is_404() ) {
    wp_enqueue_style( '404-sivu', get_theme_file_uri() . '/css/neljanollanelja.css' );
}
// Custom post typen css-tyylit
if ( get_post_type( get_the_ID() ) == 'mun-custom-post-type' ) {
    wp_enqueue_style( 'custom_post_tyylit', get_theme_file_uri() . '/css/custom-post.css' );
}

SCSS:n käyttäminen lapsiteemassa

SCSS eli Sassy CSS on kieli, joka käännetään CSS-muotoon. Se sisältää muuttujia, sisäkkäistämistä, mixinien käyttöä ja muita ominaisuuksia, jotka tekevät tyylitiedostoista luettavampia ja helpompia ylläpitää. WordPressissä SCSS:ää ei voi käyttää suoraan, vaan se täytyy ensin kääntää CSS-muotoon.

SCSS:n kääntämiseen CSS-muotoon on erilaisia työkaluja. Yksi helpoimmista tavoista on käyttää Visual Studio Code -tekstieditoria lapsiteematiedostojen muokkaamiseen. Visual Studio Codelle on lisäosa nimeltä Live Sass Compiler, joka luo CSS-tiedostot joka kerta, kun tallennat muokkaamasi SCSS-tiedoston. Lisätietoja löydät Visual Studio Coden markkinapaikalta:
Markkinapaikka
Live Sass Compiler

Jos kirjoitat SCSS:ää, haluat luultavasti organisoida tyylitiedostoja useisiin .scss-tiedostoihin. Lisätietoja SCSS:n käytöstä ja tiedostojen organisoinnista löydät Sassin verkkosivuilta.

Tässä on esimerkki miten voit lisätä CSS-muotoon muunnetut SCSS-tiedostot lapsiteemaasi:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style( 'child-theme', get_theme_file_uri() . '/style.css', [], wp_get_theme()->get('version') );
    wp_enqueue_style( 'minun-tyylit', get_theme_file_uri() . '/css/minun-tyylit.css', ['child-theme'], wp_get_theme()->get('version') );
});

Esimerkissä SCSS on käännetty minun-tyylit.css -tiedostoksi, joka sijaitsee lapsiteeman css-kansiossa. SCSS-tiedostot sijaitsevat yleensä lapsiteeman scss-kansiossa ja sen alakansioissa.

SCSS:n käyttö on valinnaista ja vaatii lisäasetuksia ja hieman opiskelua jos ei ole entuudestaan tuttu.

JavaScript-tiedostojen lisääminen lapsiteemaan

JavaScript-tiedostojen lisääminen WordPressin lapsiteemaan tapahtuu käyttämällä samaa wp_enqueue_script() -toimintoa:

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style( 'child-theme', get_theme_file_uri() . '/style.css', [], wp_get_theme()->get('version') );
    wp_enqueue_script('minun-skriptit', get_theme_file_uri() . '/js/scripts.js', [], '1.0', true);
});

Tässä esimerkissä scripts.js -tiedosto ladataan lapsiteeman js-kansiosta.

wp_enqueue_script() -toiminnon viimeinen parametri määrittää, minne HTML-dokumentissa JavaScript-tiedoston lataus sijoitetaan. true sijoittaa sen sivun loppuun ja false sivun alkuun <head> -osioon. Latautumisnopeuden kannalta JavaScriptit kannattaa ladata sivun lopussa.

PHP-tiedostojen ylikirjoittaminen lapsiteemassa

Voit myös ylikirjoittaa ja lisätä uusia PHP-tiedostoja lapsiteemaan. Suositeltu tapa aloittaa tämä on kopioimalla muokattavat PHP-templatet pääteeman kansiosta lapsiteeman kansioon ja muokkaamalla niitä siellä.

Lisäosien tiedostojen ylikirjoittaminen

Lisäosien tiedostoja on mahdollista ylikirjoittaa samalla tavalla. Tämä on kätevää esimerkiksi Woo-verkkokaupan kanssa kun haluat kustomoida kauppaa enemmän kuin hallintapaneelin asetukset antavat myöten.

Linkki Woon ohjeeseen miten tiedostoja ylikirjoitetaan.

Lapsiteeman aktivointi

Lopuksi voit aktivoida lapsiteeman WordPressin hallintapaneelista.

Huom! Jos olet tehnyt Mukauta-osiossa pääteeman asetuksia, sinun tulee eksportata asetukset ennen lapsiteeman aktivointia ja tuoda ne takaisin, kun lapsiteema on aktivoitu.

Kun lapsiteema on aktivoitu voit alkaa kustomoida sivustoasi pelkäämättä muutosten häviämistä, kun pääteema päivittyy.

Metsosivut