Kuinka tehdä mukautuksia lapsiteemalla

Tämä opetusohjelma ei ole kaikille.

Sinun ei tarvitse olla kokenut kehittäjä seurataksesi mukana, mutta tarvitset aitoa kiinnostusta oppia lisää WordPressistä ja teemojen toiminnasta.

Jos et pelkää työskennellä hieman koodin kanssa ja likaa käsiäsi joidenkin teematiedostojen kanssa, tervetuloa mukaan!

Tässä oppaassa opit muokkaamaan WordPress-sivustoasi mielesi mukaiseksi käyttämällä lapsiteemaa, mutta ensin…

Katsotaanpa tarkalleen, miksi sinun pitäisi edes käyttää tätä outoa asiaa, jota kutsutaan "lapsiteemaksi".

Miksi käyttää lapsiteemaa?

Toista perässäni:

Vannon juhlallisesti, etten koskaan muokkaa teematiedostoa.

Uudet WordPress-käyttäjät, jotka ovat kiinnostuneita muokkaamaan koodia, muokkaavat usein suoraan teemansa tiedostoja. Tämä on suuri ei-ei.

Miksi?

Yksi syy: kun päivität teemasi, WordPress ohittaa nykyisen teemasi teeman uudella versiolla.

Joten miksi sillä on väliä?

Kuvittele, että käytät Challenger- teeman versiota 1.04. Siirsit valikkoa header.php-tiedostossa ja lisäsit uuden CSS:n style.css-tiedostoon. Sitten versio 1.05 ilmestyy ja näet ilmoituksen kojelaudassasi.

Kun päivität versioon 1.05, sekä header.php- että style.css-tiedostot korvataan Challengerin version 1.05 tiedostoilla. Ne eivät sisällä samoja muokkauksia, joita teit, joten työsi menetetään, eikä sitä voi palauttaa. Tämä voi olla melko masentavaa, jos upotat tuntikausia mukautuksiin.

Jos kuitenkin laitat mukautukset Challenger-alateemaan, voit turvallisesti päivittää versioon 1.05 menettämättä mitään mukautuksiasi, koska ne on tallennettu turvallisesti lapsiteemaan.

Tämä tulee hieman selvemmäksi, kun siirrymme todelliseen esimerkkiin, joten mennään eteenpäin ja tehdään lapsiteema nyt.

Kuinka luoda lapsiteemaa

Vaikka en aio selittää yksityiskohtaisesti, kuinka kaikki koodi toimii tässä, nämä ovat perusideoita ja katkelmia, joita tarvitset aloittamiseen.

Perusasetukset

Aloita luomalla tyhjä kansio työpöydällesi. Voit nimetä sen haluamallasi tavalla, mutta tavallinen nimeämiskäytäntö on käyttää teeman nimeä pienillä kirjaimilla ja sen jälkeen "lapsi" ja korvata välilyönnit yhdysmerkillä.

Esimerkiksi Challenger-teeman lapsiteemalla olisi kansion nimi "haastaja-lapsi". Tämä kansio sisältää kaikki alatason teeman tiedostot.

Tarvitset vain yhden tiedoston teknisesti kelvollisen alateeman style.css luomiseen.

Luo style.css-tiedosto

Luo uusi tiedosto alatason teemakansioon valitsemallasi koodieditorilla ja anna sille nimi style.css.

Style.css-tiedosto on luonnollisesti paikka, johon voit lisätä kaiken CSS:n muokataksesi sivustoasi. Jotta WordPress tunnistaisi lapsiteeman kelvollisena teemana, sinun on lisättävä tyylitaulukon otsikko style.css-tiedoston yläosaan:

/*
 Theme Name:   Challenger Child
 Template:     challenger
 Author:       Compete Themes
 Version:      1.0
 Author URI:   https://www.competethemes.com
 Description:  This is a child theme used to customize the Challenger WordPress theme.
 License: GNU  General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Voit kopioida tämän tarkan otsikon ja käyttää sitä omissa lapsiteemojasi. Vaihda vain teeman nimi muuttamallasi teemalla.

Tärkein osa on "Malli"-arvo, joka on asetettava pääteeman nimeen. Erityisesti pääteeman sisältävän kansion nimi.

Kun tämä on paikallaan, voit jo aktivoida lapsiteeman Ulkoasu-valikon kautta ja käyttää sitä. Sivustosi on kuitenkin täysin tyylitön!

Kun alatason teema on aktivoitu, WordPress ei enää lataa yläteeman style.css-tiedostoa ja sen sijaan riippuu lapsiteemastasi.

Näin voit ladata molemmat tyylisivut…

Luo functions.php-tiedosto

Luo koodieditorissa toinen tiedosto lapsiteemaan ja anna sille nimi functions.php.

Lisää seuraavaksi tiedostoon seuraava koodi:

<?php 
function my_theme_enqueue_styles() { 
  $parent_style = 'parent-style'; 
  wp_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' ); 
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Tämä toiminto käskee WordPressiä lataamaan yläteeman style.css-tiedoston ja lataamaan sen jälkeen alatason teeman style.css-tiedoston. Aliteeman tyylitaulukon lataaminen jälkeen helpottaa yläteeman CSS-valitsimien ohittamista.

Kuten aiemmin mainitsin, en aio käsitellä tätä koodia rivi riviltä, ​​mutta löydät tarkemman selityksen tästä katkelmasta WordPress Codexista.

Mukauttaminen uuden lapsiteeman mukaan

Siinä kaikki, mitä sinun tarvitsee tehdä toimivan lapsiteeman luomiseksi!

Lapsiteema-asetuksissa on kolme tapaa mukauttaa sivustoasi sen avulla.

Lisää ja ohita tyylejä

Voit lisätä alatason teeman style.css-tiedostoon niin paljon uutta CSS:ää kuin haluat.

Kun etsit valitsimia käytettäväksi CSS:ssä, älä tarkista yläteeman style.css-tiedostoa. Kaikki teemamme käyttävät "CSS-esiprosessoria", joten emme edes katso sitä tiedostoa! Noudata sen sijaan tätä älykkäämpää prosessia löytääksesi CSS-valitsimia, niin uskon, että onnistut paljon paremmin muokkaamalla sivustoasi.

Ohita toiminnot

Hyvin koodatun yläteeman avulla voit ohittaa minkä tahansa sen functions.php-tiedoston funktioista.

Esimerkiksi jokainen Mission Newsin toiminto on kääritty [function_exists()](https://php.net/manual/en/function.function-exists.php)sekillä. Tämä tarkoittaa, että voit kopioida funktion lapsiteeman functions.php-tiedostoon. Sitten voit tehdä haluamasi muokkaukset toimintoon siellä.

Ohita mallit

Yleinen alatason teemaa vaativa räätälöinti on elementtien uudelleenjärjestäminen. Saatat esimerkiksi haluta siirtää viestin otsikon Suositellun kuvan jälkeen sen sijaan.

Voit ottaa minkä tahansa yläteemassa löytyvistä mallitiedostoista ja laittaa kopion lapsiteemaan. Sen sijaan ladataan lapsiteeman versio. Tämän avulla voit lisätä, järjestää uudelleen ja poistaa haluamasi elementit missä tahansa sivuston osassa.

Lapsiteeman asentaminen

Kun olet tyytyväinen muokkauksiin, voit asentaa alatason teeman sivustollesi.

Lapsiteemoja voidaan ladata aivan kuten tavallisia WordPress-teemoja, joten niiden aktivoiminen sivustollasi kestää vain minuutin tai kaksi. Asenna lapsesi teema noudattamalla tätä opetusohjelmaa:

Kuinka asentaa WordPress-lapsiteema

Jos olet täysin uusi tässä kaikessa, tässä on pari ilmaista työkalua, jotka auttavat sinua.

Ensinnäkin, jos sinulla ei ole koodieditoria, katso Visual Studio Code. Se on yksinkertainen mutta joustava. Se on myös täysin ilmainen ja sillä tehdään paljon ammattimaisia ​​ohjelmistoja. Sitä käytän tehdäkseni teemoja täällä Compete Themesissa.

Toiseksi paikallisen WordPress-sivuston luominen (offline) on loistava tapa kokeilla koodia vaikuttamatta todelliseen verkkosivustoosi. Vaikka olen käyttänyt ja suositellut MAMPia aiemmin, Local by Flywheel on niin helvetin helppo ja helppokäyttöinen, että rakastan sitä. Sitä käytän teeman kehittämiseen, ja se on myös ilmainen.

Päivityksesi ovat turvassa

Palatakseni aikaisempaan esimerkkiin…

Päivitettäessä Challenger-teemaa (tai mitä tahansa teemaa), koko "haastaja"-hakemisto korvataan, mikä ei vaikuta alateemaan, koska sillä on nyt oma hakemistonsa "Challenger-child"-kansiossa.

Kun lapsiteemasi on käytössä, voit turvallisesti tehdä haluamasi mukautukset ja pitää vanhemman teemasi ajan tasalla.

Jos olet uusi CSS:n ja PHP:n käytössä, voi kestää jonkin aikaa, ennen kuin saat mukautukset haluamallasi tavalla, mutta lapsiteeman kanssa sinulla on hyvä perusta työskennellä. Muista noudattaa näitä ohjeita löytääksesi käytettävät CSS-valitsimet, ja kaikki tekemäsi tyylimuokkaukset ovat melko yksinkertaisia.