WordPress-lapsiteemojen käytön aloittaminen?

1

Tässä opetusohjelmassa opit luomaan WordPress-lapsiteeman. Jos olet uusi WordPressin käyttäjä etkä tiedä, mikä on WordPress-lapsiteema, selitän kaiken.

WordPress-teemat ovat kokoelma PHP-, JavaScript- ja CSS-tiedostoja. Yksinkertaisesti sanottuna WordPress-teemojen avulla voit muuttaa blogisi ulkoasua. WordPress-teemat voivat olla erittäin tehokkaita.

Premium-WordPress-teemat tarjoavat paljon edistyneitä ominaisuuksia ja toimintoja. Saatavilla on tuhansia ilmaisia ​​ja ensiluokkaisia ​​WordPress-teemoja.

Voit luoda WordPress-teeman tyhjästä tai voit luoda WordPress-teeman toisen teeman perusteella. Jokaisessa WordPress-versiossa on esiasennetut WordPress-teemat, ja jos et pidä esiasennetusta WordPress-teemasta, voit asentaa toisen WordPress-teeman tai luoda lapsiteeman.

Miksi WordPressin lapsiteemat?

WordPressin lapsiteeman luominen tarkoittaa, että otat olemassa olevan teeman ja teet oman teeman, joka perustuu siihen. Lapsiteema perii suurimman osan ominaisuuksista alkuperäisestä teemasta, joka tunnetaan pääteemana.

Lapsiteema säästää paljon työtä ja aikaa. WordPress-teeman luominen tyhjästä vie paljon aikaa ja joskus edellyttää HTML-, CSS-, PHP-tuntemusta. Lapsiteemoilla voit tehdä paljon muutoksia.

Jos et ole tyytyväinen käyttämäsi WordPress-teeman mukauttamiseen, vaihtoehtoihin ja ominaisuuksiin, voit luoda lapsiteeman. Vaikka haluaisit tehdä yhden muutoksen WordPress-teemaan, sinun tulee luoda alatason teema tai käyttää CSS-editori-laajennusta.

Voit muokata olemassa olevia WordPress-teematiedostojasi suoraan, mutta päivityksen yhteydessä menetät kaikki mukautukset. Siksi tarvitset lapsiteeman.

Mitä voit tehdä WordPress-lapsiteemoilla

WordPress-lapsiteemojen avulla voit lisätä niin monta ominaisuutta kuin haluat. Se on sinusta kiinni. Jos haluat muuttaa otsikoiden tai linkkien fonttikokoa tai väriä, voit tehdä sen erittäin helposti CSS:n avulla.

Voit lisätä uusia navigointivalikoita, rekisteröidä uusia sivupalkkeja, luoda mukautettuja sivuja tuotteille tai lisätä tukea mukautetuille verkkokirjasimille.

Mitä tarvitset:

Nyt tiedät, mikä on WordPress-lapsiteema ja miksi sinun pitäisi luoda lapsiteemoja. On aika oppia luomaan WordPress-lapsiteema.

Sitä ei vaadita, mutta suosittelemme paikallisen WordPress-asennuksen määrittämistä kehitys- ja oppimistarkoituksiin. Paikallisen WordPress-asennuksen avulla voit nopeasti ja erittäin helposti testata uusia laajennuksiasi ja teemojasi.

On monia tapoja asentaa WordPress paikallisesti. Jos olet MAC-käyttäjä, voit käyttää MAMP:ia, Windows-käyttäjät voivat käyttää XAMPP-, WAMP- tai Bitnami WordPress -asennusohjelmaa.

Jos olet ehdoton aloittelija, voit ladata ja asentaa Bitnami WordPress -pinon luodaksesi täysin toimivan WordPress-sivuston MAC- tai PC-tietokoneellesi.

Itse pidän parempana WAMP-palvelinta paikallista kehitystä varten. WordPressin asentaminen WAMP:iin ei ole vaikeaa, voit lukea opetusohjelmia tai katsoa videoita oppiaksesi asentamaan WordPress WAMP:n, XAMPP:n tai MAMP:n avulla.

Tarvitset myös koodieditorin teematiedostojen muokkaamiseen. Sublimetext, Brackets, Atom ovat muutamia suosittuja koodieditoreja.

Kuinka luoda WordPress-lapsiteema?

Kun paikallinen WordPress-sivustosi on valmis, voimme aloittaa lapsiteeman luomisen. Jos käytät WAMP-palvelinta, siirry WAMP-asennushakemistoosi > WWW > WordPress > wp-content > themes-kansio.

Luo WordPressin teemakansioon uusi kansio ja anna sille nimi kaksikymmentäkuusitoista-lapsi tai mikä tahansa haluamasi esim. InstantShift. Aiomme käyttää kaksikymmentäkuusitoista teemaa pääteemana. Se tarkoittaa, että lapsiteemamme perustuu TwentySixteen-teemaan.

Jokaista lapsiteemaa varten tarvitsemme kaksi tiedostoa.

  • functions.php
  • style.css

Luo nämä kaksi tiedostoa kaksikymmentäkuusitoista lapsen teemakansiossasi. Avaa nyt tiedostosi tekstieditorissa, jotta pääset nopeasti käsiksi vetämällä 26-lapsikansiosi tekstieditorin sivupalkkiin. Avaa style.css-tiedosto ja lisää seuraava koodi.

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

Yllä oleva merkintä vaaditaan alatason teemalle. Ilman tyylitaulukkoa, jossa on tarvittavat merkinnät, WordPress ei pysty tunnistamaan lapsesi teemaa.

Luulen, että voit ymmärtää kaiken. Ei ole mitään selitettävää. Lapseni teemanimi on InstantShift, mutta voit nimetä lapsesi haluamallasi tavalla. Tärkeintä on Malli: kaksikymmentäkuusitoista. Tämä on vanhempiteeman nimi. Varmista, että kirjoitat sen oikein.

Jos käytät mitä tahansa muuta teemaa yläteemana, vaihda Malli: kaksikymmentäkuusitoista valitsemalla Malli: vanhempi-teeman-nimi.

Tyylisivun otsikkoon voimme myös lisätä lisätietoja, mutta se ei ole pakollista. Kirjaudu nyt WordPress-hallintapaneeliisi. Siirry kohtaan Ulkoasu > Teemat. Sinun pitäisi nähdä InstantShift-teema ilman kuvakaappausta, koska emme ole lisänneet kuvakaappausta lapsiteemaan.

Vie hiiri InstantShift-teeman päälle ja napsauta Teeman tiedot -painiketta. Tässä on minun lapsiteeman kuvakaappaus.

Jos näet tämän näytön, se tarkoittaa, että lapsesi teema on valmis. Nyt voimme alkaa mukauttaa teemaamme. Aktivoi tämä uusi teema ja käy blogisi etuosassa. Näet kaiken sisältösi ilman tyyliä.

Älä huoli. Se on normaalia. Emme näe tyylejä, koska emme ole sisällyttäneet yläteemojen tyylitaulukkotiedostoa. Varmistetaan, että lapsiteeman tyylitaulukko toimii. Lisää seuraava koodi lapsiteeman style.css-tiedostoon.

body{
     background-color: #E7F5FB;
}

tallenna style.css-tiedosto, lataa paikallisen WordPress-sivustosi etusivu uudelleen ja sinun pitäisi nähdä vaaleansininen taustaväri.

Vanhemman teeman tyylisivun rekisteröinti

Emme halua luoda kaikkia tyylejä tyhjästä. Lisäämme vain muutamia uusia tyylejä lapsiteeman style.css-tiedostolla. Lisätään nyt yläteeman stye.css-tiedosto lapsiteemaan.

Avaa functions.php-tiedosto ja lisää seuraava koodi alateeman functions.php-tiedostoon.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

Jos nyt lataat paikallisen WordPress-sivustosi uudelleen, näet normaalin teeman kaikilla TwentySixteen-tyyleillä.

Siinä kaikki. Ensimmäinen lapsi -teeman luominen onnistui. Olet myös lisännyt vartalolle uuden taustavärin.

Mutta emme luoneet lapsiteemaa vain muuttaaksemme taustaa keholle. Aloitetaan teemamme muokkaaminen.

Vanhemman teematyylien ohittaminen

Otsikon mukauttaminen:

Oletuksena Twenty Sixteen -teeman otsikossa on paljon täytettä. Muutetaan täyttö ja lisätään uusi taustaväri sivuston otsikkoon. Lisää seuraava koodi lapsiteeman style.css-tiedostoon, tallenna tiedosto ja päivitä sivustosi käyttöliittymä nähdäksesi muutokset.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Täältä näet kuvakaappauksen sivuston otsikosta ennen uusien tyylien lisäämistä ja sen jälkeen.

Päänavigoinnin mukauttaminen

Muutetaan nyt päänavigointivalikon kohteiden taustaväri. Haluan käyttää Chromen kehittäjätyökaluja CSS-tyylieni muokkaamiseen.

Kun olet muokannut verkkosivuja Chromen kehittäjätyökaluilla, voit kopioida uuden koodin Chromen kehittäjätyökaluista ja liittää sen lapsesi teeman style.css-tiedostoon.

Avaa lapsiteeman style.css-tiedosto ja lisää siihen seuraava koodi.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Täältä näet kuvakaappauksen uudesta otsikosta. Olemme helposti mukauttaneet teemaamme lapsiteemalla.

Viimeiset sanat

Nyt tiedät, kuinka voit luoda WordPress-lapsiteemoja. Se on hyvin yksinkertaista ja helppoa. HTML:n ja CSS:n perusymmärryksellä voit muuttaa sivustosi ulkoasua kokonaan.

Voit myös lisätä uusia navigointivalikoita, widget-alueita, tukea uusille we-fonteille jne. lapsiteemalla. Mutta emme voi käsitellä kaikkea yhdessä artikkelissa.

Jos haluat oppia WordPress-teeman kehittämistä, sinun tulee aloittaa WordPress-lasteemoista. Opi teeman mukauttamisen perusteet.

: instantshift.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More