T\u00e4m\u00e4 opetusohjelma ei ole kaikille.<\/p>\n
Sinun ei tarvitse olla kokenut kehitt\u00e4j\u00e4 seurataksesi mukana, mutta tarvitset aitoa kiinnostusta oppia lis\u00e4\u00e4 WordPressist\u00e4 ja teemojen toiminnasta.<\/p>\n
Jos et pelk\u00e4\u00e4 ty\u00f6skennell\u00e4 hieman koodin kanssa ja likaa k\u00e4si\u00e4si joidenkin teematiedostojen kanssa, tervetuloa mukaan!<\/p>\n
T\u00e4ss\u00e4 oppaassa opit muokkaamaan WordPress-sivustoasi mielesi mukaiseksi k\u00e4ytt\u00e4m\u00e4ll\u00e4 lapsiteemaa, mutta ensin\u2026<\/p>\n
Katsotaanpa tarkalleen, miksi sinun pit\u00e4isi edes k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 outoa asiaa, jota kutsutaan "lapsiteemaksi".<\/p>\n
Toista per\u00e4ss\u00e4ni:<\/p>\n
Vannon juhlallisesti, etten koskaan muokkaa teematiedostoa.<\/p>\n
Uudet WordPress-k\u00e4ytt\u00e4j\u00e4t, jotka ovat kiinnostuneita muokkaamaan koodia, muokkaavat usein suoraan teemansa tiedostoja. T\u00e4m\u00e4 on suuri ei-ei.<\/p>\n
Miksi?<\/p>\n
Yksi syy: kun p\u00e4ivit\u00e4t teemasi, WordPress ohittaa nykyisen teemasi teeman uudella versiolla.<\/p>\n
Joten miksi sill\u00e4 on v\u00e4li\u00e4?<\/p>\n
Kuvittele, ett\u00e4 k\u00e4yt\u00e4t Challenger-<\/a> teeman versiota 1.04. Siirsit valikkoa header.php-tiedostossa ja lis\u00e4sit uuden CSS:n style.css-tiedostoon. Sitten versio 1.05 ilmestyy ja n\u00e4et ilmoituksen kojelaudassasi.<\/p>\n Kun p\u00e4ivit\u00e4t versioon 1.05, sek\u00e4 header.php- ett\u00e4 style.css-tiedostot korvataan Challengerin version 1.05 tiedostoilla. Ne eiv\u00e4t sis\u00e4ll\u00e4 samoja muokkauksia, joita teit, joten ty\u00f6si menetet\u00e4\u00e4n, eik\u00e4 sit\u00e4 voi palauttaa. T\u00e4m\u00e4 voi olla melko masentavaa, jos upotat tuntikausia mukautuksiin.<\/p>\n Jos kuitenkin laitat mukautukset Challenger-alateemaan, voit turvallisesti p\u00e4ivitt\u00e4\u00e4 versioon 1.05 menett\u00e4m\u00e4tt\u00e4 mit\u00e4\u00e4n mukautuksiasi, koska ne on tallennettu turvallisesti lapsiteemaan.<\/p>\n T\u00e4m\u00e4 tulee hieman selvemm\u00e4ksi, kun siirrymme todelliseen esimerkkiin, joten menn\u00e4\u00e4n eteenp\u00e4in ja tehd\u00e4\u00e4n lapsiteema nyt.<\/p>\n Vaikka en aio selitt\u00e4\u00e4 yksityiskohtaisesti, kuinka kaikki koodi toimii t\u00e4ss\u00e4, n\u00e4m\u00e4 ovat perusideoita ja katkelmia, joita tarvitset aloittamiseen.<\/p>\n Aloita luomalla tyhj\u00e4 kansio ty\u00f6p\u00f6yd\u00e4llesi. Voit nimet\u00e4 sen haluamallasi tavalla, mutta tavallinen nime\u00e4misk\u00e4yt\u00e4nt\u00f6 on k\u00e4ytt\u00e4\u00e4 teeman nime\u00e4 pienill\u00e4 kirjaimilla ja sen j\u00e4lkeen "lapsi" ja korvata v\u00e4lily\u00f6nnit yhdysmerkill\u00e4.<\/p>\n Esimerkiksi Challenger-teeman lapsiteemalla olisi kansion nimi "haastaja-lapsi". T\u00e4m\u00e4 kansio sis\u00e4lt\u00e4\u00e4 kaikki alatason teeman tiedostot.<\/p>\n Tarvitset vain yhden tiedoston teknisesti kelvollisen alateeman style.css luomiseen.<\/p>\n Luo uusi tiedosto alatason teemakansioon valitsemallasi koodieditorilla ja anna sille nimi style.css.<\/p>\n Style.css-tiedosto on luonnollisesti paikka, johon voit lis\u00e4t\u00e4 kaiken CSS:n muokataksesi sivustoasi. Jotta WordPress tunnistaisi lapsiteeman kelvollisena teemana, sinun on lis\u00e4tt\u00e4v\u00e4 tyylitaulukon otsikko style.css-tiedoston yl\u00e4osaan:<\/p>\n Voit kopioida t\u00e4m\u00e4n tarkan otsikon ja k\u00e4ytt\u00e4\u00e4 sit\u00e4 omissa lapsiteemojasi. Vaihda vain teeman nimi muuttamallasi teemalla.<\/p>\n T\u00e4rkein osa on "Malli"-arvo, joka on asetettava p\u00e4\u00e4teeman nimeen. Erityisesti p\u00e4\u00e4teeman sis\u00e4lt\u00e4v\u00e4n kansion nimi.<\/p>\n Kun t\u00e4m\u00e4 on paikallaan, voit jo aktivoida lapsiteeman Ulkoasu-valikon kautta ja k\u00e4ytt\u00e4\u00e4 sit\u00e4. Sivustosi on kuitenkin t\u00e4ysin tyylit\u00f6n!<\/p>\n Kun alatason teema on aktivoitu, WordPress ei en\u00e4\u00e4 lataa yl\u00e4teeman style.css-tiedostoa ja sen sijaan riippuu lapsiteemastasi.<\/p>\n N\u00e4in voit ladata molemmat tyylisivut\u2026<\/p>\n Luo koodieditorissa toinen tiedosto lapsiteemaan ja anna sille nimi functions.php.<\/p>\n Lis\u00e4\u00e4 seuraavaksi tiedostoon seuraava koodi:<\/p>\n T\u00e4m\u00e4 toiminto k\u00e4skee WordPressi\u00e4 lataamaan yl\u00e4teeman style.css-tiedoston ja lataamaan sen j\u00e4lkeen alatason teeman style.css-tiedoston. Aliteeman tyylitaulukon lataaminen j\u00e4lkeen helpottaa yl\u00e4teeman CSS-valitsimien ohittamista.<\/p>\n Kuten aiemmin mainitsin, en aio k\u00e4sitell\u00e4 t\u00e4t\u00e4 koodia rivi rivilt\u00e4, \u200b\u200bmutta l\u00f6yd\u00e4t tarkemman selityksen t\u00e4st\u00e4 katkelmasta WordPress Codexista<\/a>.<\/p>\n Siin\u00e4 kaikki, mit\u00e4 sinun tarvitsee tehd\u00e4 toimivan lapsiteeman luomiseksi!<\/p>\n Lapsiteema-asetuksissa on kolme tapaa mukauttaa sivustoasi sen avulla.<\/p>\n Voit lis\u00e4t\u00e4 alatason teeman style.css-tiedostoon niin paljon uutta CSS:\u00e4\u00e4 kuin haluat.<\/p>\n Kun etsit valitsimia k\u00e4ytett\u00e4v\u00e4ksi CSS:ss\u00e4, \u00e4l\u00e4 tarkista yl\u00e4teeman style.css-tiedostoa. Kaikki teemamme k\u00e4ytt\u00e4v\u00e4t "CSS-esiprosessoria", joten emme edes katso sit\u00e4 tiedostoa! Noudata sen sijaan t\u00e4t\u00e4 \u00e4lykk\u00e4\u00e4mp\u00e4\u00e4 prosessia l\u00f6yt\u00e4\u00e4ksesi CSS-valitsimia<\/a>, niin uskon, ett\u00e4 onnistut paljon paremmin muokkaamalla sivustoasi.<\/p>\n Hyvin koodatun yl\u00e4teeman avulla voit ohittaa mink\u00e4 tahansa sen functions.php-tiedoston funktioista.<\/p>\n Esimerkiksi jokainen Mission Newsin<\/a> toiminto on k\u00e4\u00e4ritty Yleinen alatason teemaa vaativa r\u00e4\u00e4t\u00e4l\u00f6inti on elementtien uudelleenj\u00e4rjest\u00e4minen. Saatat esimerkiksi haluta siirt\u00e4\u00e4 viestin otsikon Suositellun kuvan j\u00e4lkeen sen sijaan.<\/p>\n Voit ottaa mink\u00e4 tahansa yl\u00e4teemassa l\u00f6ytyvist\u00e4 mallitiedostoista ja laittaa kopion lapsiteemaan. Sen sijaan ladataan lapsiteeman versio. T\u00e4m\u00e4n avulla voit lis\u00e4t\u00e4, j\u00e4rjest\u00e4\u00e4 uudelleen ja poistaa haluamasi elementit miss\u00e4 tahansa sivuston osassa.<\/p>\n Kun olet tyytyv\u00e4inen muokkauksiin, voit asentaa alatason teeman sivustollesi.<\/p>\n Lapsiteemoja voidaan ladata aivan kuten tavallisia WordPress-teemoja, joten niiden aktivoiminen sivustollasi kest\u00e4\u00e4 vain minuutin tai kaksi. Asenna lapsesi teema noudattamalla t\u00e4t\u00e4 opetusohjelmaa:<\/p>\n Kuinka asentaa WordPress-lapsiteema<\/a><\/p>\n Jos olet t\u00e4ysin uusi t\u00e4ss\u00e4 kaikessa, t\u00e4ss\u00e4 on pari ilmaista ty\u00f6kalua, jotka auttavat sinua.<\/p>\n Ensinn\u00e4kin, jos sinulla ei ole koodieditoria, katso Visual Studio Code<\/a>. Se on yksinkertainen mutta joustava. Se on my\u00f6s t\u00e4ysin ilmainen ja sill\u00e4 tehd\u00e4\u00e4n paljon ammattimaisia \u200b\u200bohjelmistoja. Sit\u00e4 k\u00e4yt\u00e4n tehd\u00e4kseni teemoja t\u00e4\u00e4ll\u00e4 Compete Themesissa.<\/p>\n Toiseksi paikallisen WordPress-sivuston luominen (offline) on loistava tapa kokeilla koodia vaikuttamatta todelliseen verkkosivustoosi. Vaikka olen k\u00e4ytt\u00e4nyt ja suositellut MAMPia<\/a> aiemmin, Local by Flywheel<\/a> on niin helvetin helppo ja helppok\u00e4ytt\u00f6inen, ett\u00e4 rakastan sit\u00e4. Sit\u00e4 k\u00e4yt\u00e4n teeman kehitt\u00e4miseen, ja se on my\u00f6s ilmainen.<\/p>\n Palatakseni aikaisempaan esimerkkiin…<\/p>\n P\u00e4ivitett\u00e4ess\u00e4 Challenger-teemaa (tai mit\u00e4 tahansa teemaa), koko "haastaja"-hakemisto korvataan, mik\u00e4 ei vaikuta alateemaan, koska sill\u00e4 on nyt oma hakemistonsa "Challenger-child"-kansiossa.<\/p>\n Kun lapsiteemasi on k\u00e4yt\u00f6ss\u00e4, voit turvallisesti tehd\u00e4 haluamasi mukautukset ja pit\u00e4\u00e4 vanhemman teemasi ajan tasalla.<\/p>\n Jos olet uusi CSS:n ja PHP:n k\u00e4yt\u00f6ss\u00e4, voi kest\u00e4\u00e4 jonkin aikaa, ennen kuin saat mukautukset haluamallasi tavalla, mutta lapsiteeman kanssa sinulla on hyv\u00e4 perusta ty\u00f6skennell\u00e4. Muista noudattaa n\u00e4it\u00e4 ohjeita<\/a> l\u00f6yt\u00e4\u00e4ksesi k\u00e4ytett\u00e4v\u00e4t CSS-valitsimet, ja kaikki tekem\u00e4si tyylimuokkaukset ovat melko yksinkertaisia.<\/p>\nKuinka luoda lapsiteemaa<\/h2>\n
Perusasetukset<\/h3>\n
Luo style.css-tiedosto<\/h3>\n
\/*\n Theme Name: Challenger Child\n Template: challenger\n Author: Compete Themes\n Version: 1.0\n Author URI: https:\/\/www.competethemes.com\n Description: This is a child theme used to customize the Challenger WordPress theme.\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\nLuo functions.php-tiedosto<\/h3>\n
<?php \nfunction my_theme_enqueue_styles() { \n $parent_style = 'parent-style'; \n wp_enqueue_style( $parent_style, get_template_directory_uri(). '\/style.css' ); \n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '\/style.css', array( $parent_style ), wp_get_theme()->get('Version')\n );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/code><\/pre>\nMukauttaminen uuden lapsiteeman mukaan<\/h2>\n
Lis\u00e4\u00e4 ja ohita tyylej\u00e4<\/h3>\n
Ohita toiminnot<\/h3>\n
[function_exists()](https:\/\/php.net\/manual\/en\/function.function-exists.php)<\/code>sekill\u00e4. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voit kopioida funktion lapsiteeman functions.php-tiedostoon. Sitten voit tehd\u00e4 haluamasi muokkaukset toimintoon siell\u00e4.<\/p>\nOhita mallit<\/h3>\n
Lapsiteeman asentaminen<\/h3>\n
P\u00e4ivityksesi ovat turvassa<\/h2>\n