Miten WordPressin lapsiteema tehdään?
Lapsiteema (child theme) mahdollistaa WordPress-teeman muokkaamisen ilman, että muutat sen alkuperäistä lähdekoodia.
Lapsiteema sisältää pääteeman toiminnot, mutta koodiin tehtävät muokkaukset tallennetaan omaan kansioonsa. Näin pääteemaa voi päivittää ilman, että lapsiteemaan tehdyt muutokset häviävät.
Tässä artikkelissa käydään läpi miten lapsiteema tehdään.
Aloitus
Ennen lapsiteeman tekoa varmista, että sinulta löytyy seuraavat asiat:
- WordPress-asennus, joko paikallisella koneella tai nettihotellissa.
- Pääsy sivustosi tiedostoihin FTP-sovelluksen tai nettihotellin hallintapaneelin avulla.
- Perustiedot CSS:stä ja PHP:sta (ei välttämätöntä, mutta hyödyllistä olla hallussa).
Luo lapsiteeman kansio
Ensimmäinen vaihe lapsiteeman teossa on luoda uusi kansio sille WordPressin teemakansioon.
- Avaa WordPress-asennuksen tiedostot (FTP:n tai nettihotellin hallintapaneelin kautta).
- Siirry hakemistoon
/wp-content/themes/
. - Tässä hakemistossa luo uusi kansio lapsiteemaa varten. Kansion nimi tulisi olla lapsiteeman nimi (pienillä kirjaimilla ilman välilyöntejä). Esimerkiksi, jos luot lapsiteeman Kadence-teemalle, voit nimetä kansion
kadence-child
.
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.
- Kirjaudu WordPressin hallintapaneeliin.
- Mene kohtaan ”Ulkoasu ➞ Teemat”.
- Löydät lapsiteeman luettelosta nimellä, jonka määritit
style.css
-tiedostossa. - Klikkaa lapsiteeman kohdalla ”Aktivoi”.
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.