Kas alustada WordPressi lapseteemadega?

1

Sellest õpetusest saate teada, kuidas luua WordPressi lapseteema. Kui olete WordPressi uus kasutaja ja ei tea, mis on WordPressi lapseteema, selgitan kõike.

WordPressi teemad on PHP-, JavaScript- ja CSS-failide kogum. Lihtsamalt öeldes saate WordPressi teemade abil muuta oma ajaveebi välimust ja tunnet. WordPressi teemad võivad olla väga võimsad.

Premium WordPressi teemad pakuvad palju täiustatud funktsioone ja funktsioone. Saadaval on tuhanded tasuta ja esmaklassilised WordPressi teemad.

Saate luua WordPressi teema nullist või luua WordPressi teema mõne muu teema alusel. Igal WordPressi versioonil on eelinstallitud WordPressi teemad ja kui teile eelinstallitud WordPressi teema ei meeldi, saate installida mõne muu WordPressi teema või luua lapse teema.

Miks WordPressi lasteteemad?

WordPressi alamteema loomine tähendab, et võtate olemasoleva teema ja teete sellel põhineva oma teema. Alamteema pärib enamiku funktsioonidest algteemalt, mida nimetatakse emateemaks.

Lapseteema säästab palju tööd ja aega. WordPressi teema loomine nullist võtab palju aega ja mõnikord on see vajalik HTML-i, CSS-i, PHP-teadmiste täiendamiseks. Lasteteemadega saate teha palju muudatusi.

Kui te ei ole teie kasutatava WordPressi teema kohandamise, valikute ja funktsioonidega rahul, saate luua lapseteema. Isegi kui soovite oma WordPressi teemas ühe muudatuse teha, peaksite looma alamteema või kasutama CSS-i redigeerija pistikprogrammi.

Saate oma olemasolevaid WordPressi teemafaile otse redigeerida, kuid siis, kui teete värskenduse, kaotate kõik oma kohandused. Sellepärast vajate lapse teemat.

Mida saate WordPressi lasteteemadega teha

WordPressi lapseteemadega saate lisada nii palju funktsioone, kui soovite. See on sinu teha. Kui soovite pealkirjade või linkide fondi suurust või värvi muuta, saate seda CSS-i abil väga lihtsalt teha.

Saate lisada uusi navigeerimismenüüd, registreerida uusi külgribasid, luua toodete jaoks kohandatud lehti või lisada kohandatud veebifontide tuge.

Mida vajate:

Nüüd teate, mis on WordPressi lapseteema ja miks peaksite lapseteemasid looma. On aeg õppida, kuidas luua WordPressi lapseteema.

See ei ole nõutav, kuid soovitame arendamiseks ja õppimiseks seadistada kohaliku WordPressi installi. Kohaliku WordPressi installiga saate kiiresti ja väga lihtsalt testida oma uusi pistikprogramme ja teemasid.

WordPressi kohalikuks installimiseks on palju võimalusi. Kui olete MAC-i kasutaja, saate kasutada MAMP-i, Windowsi kasutajad saavad kasutada XAMPP-i, WAMP-i või Bitnami WordPressi installijat.

Kui olete absoluutne algaja, saate alla laadida ja installida Bitnami WordPressi virna, et luua oma MAC-is või arvutis täielikult toimiv WordPressi veebisait.

Mina isiklikult eelistan kohaliku arenduse jaoks WAMP-serverit. WordPressi installimine WAMP-i pole keeruline, saate lugeda õpetust või vaadata videoid, et õppida, kuidas WordPressi installida WAMP-i, XAMPP-i või MAMP-i abil.

Teemafailide redigeerimiseks vajate ka koodiredaktorit. Sublimetext, Brackets, Atom on vähesed populaarsed koodiredaktorid.

Kuidas luua WordPressi lapseteema?

Kui teie kohalik WordPressi sait on valmis, saame alustada lapseteema loomist. Kui kasutate WAMP-serverit, minge oma WAMP-i installikataloogi > WWW > WordPress > wp-sisu > kausta teemad.

Looge WordPressi teemade kaustas uus kaust ja pange sellele nimeks kakskümmend kuusteist last või midagi, mis teile meeldib, nt InstantShift. Kasutame vanemateemana kakskümmend kuusteist teemat. See tähendab, et meie lasteteema põhineb teemal TwentySixteen.

Iga lapseteema jaoks vajame kahte faili.

  • functions.php
  • style.css

Looge need kaks faili kahekümne kuueteistkümne lapse teemakaustas. Nüüd avage oma failid tekstiredaktoris, kiireks juurdepääsuks saate lohistada oma 266 lapse kausta tekstiredaktori külgribale. Avage fail style.css ja lisage järgmine kood.

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

Alamteema jaoks on ülaltoodud märgistus nõutav. Ilma vajaliku märgistusega laaditabelita ei suuda WordPress teie lapseteemat ära tunda.

Ma arvan, et saate kõigest aru. Pole midagi seletada. Minu lapse teema nimi on InstantShift, kuid saate oma lapsele nime anda, mis teile meeldib. Kõige tähtsam on mall: kakskümmend kuusteist. See on meie vanemateema nimi. Veenduge, et kirjutaksite selle õigesti.

Kui kasutate vanemteemana mõnda muud teemat, muutke lihtsalt Mall: kakskümmend kuusteist valikuga Mall: ema-teema-nimi.

Stiililehe päisesse saame lisada ka rohkem infot, kuid see pole kohustuslik. Nüüd logige sisse oma WordPressi juhtpaneelile. Avage Välimus > Teemad. Peaksite nägema InstantShifti teemat ilma ekraanipildita, kuna me pole oma lapseteema jaoks ühtegi ekraanipilti lisanud.

Hõljutage kursorit InstantShifti teemal ja klõpsake nuppu Teema üksikasjad. Siin on minu lapseteema ekraanipilt.

Kui näete seda ekraani, tähendab see, et teie lapseteema on valmis. Nüüd saame hakata oma teemat kohandama. Aktiveerige see uus teema ja külastage oma ajaveebi esiosa. Näete kogu oma sisu ilma igasuguse stiilita.

Ära muretse. See on normaalne. Me ei näe ühtegi stiili, kuna me pole kaasanud vanemteemade laaditabeli faili. Veenduge, et meie lapseteema stiilitabel töötab. Lisage oma lapseteema faili style.css järgmine kood.

body{
     background-color: #E7F5FB;
}

salvestage fail style.css, laadige uuesti oma kohaliku WordPressi saidi esileht ja teie peaks nägema helesinist taustavärvi.

Vanemateema laaditabeli registreerimine

Me ei taha luua kõiki stiile nullist. Lisame lihtsalt mõned uued stiilid lapseteema style.css failiga. Nüüd lisame oma alamteemasse vanemteema faili stye.css.

Avage fail functions.php ja lisage alljärgnev kood alamteema functions.php faili.

<?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' );

Nüüd, kui laadite oma kohaliku WordPressi saidi uuesti, näete tavalist teemat kõigi TwentySixteen stiilidega.

See on kõik. Olete edukalt loonud oma esimese lapse teema. Lisasite kehale ka uue taustavärvi.

Kuid me ei loonud oma lapse teemat lihtsalt keha tausta muutmiseks. Alustame oma teema kohandamist.

Vanemateema stiilide alistamine

Päise kohandamine:

Vaikimisi on Twenty Sixteen teema päises palju polsterdust. Muudame polsterdust ja lisame saidi päise uue taustavärvi. Lisage oma lapseteema style.css-faili järgmine kood, salvestage fail ja laadige muudatuste nägemiseks uuesti saidi esiosa.

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

Siin näete saidi päise ekraanipilti enne ja pärast meie uute stiilide lisamist.

Põhinavigatsiooni kohandamine

Nüüd muudame navigeerimismenüü põhielementide taustavärvi. Mulle meeldib oma CSS-stiilide muutmiseks kasutada Chrome’i arendaja tööriistu .

Pärast veebilehtede muutmist Chrome’i arendajatööriistadega saate uue koodi kopeerida Chrome’i arendaja tööriistadest ja kleepida oma lapseteema faili style.css.

Avage oma lapseteema fail style.css ja lisage sellele järgmine kood.

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

Siin näete meie uue päise ekraanipilti. Oleme oma teemat lapseteemaga väga lihtsalt kohandanud.

Lõpusõnad

Nüüd teate, kuidas saate luua WordPressi lapseteemasid. See on väga lihtne ja lihtne. HTML-i ja CSS-i põhiteadmistega saate oma saidi kujundust täielikult muuta.

Samuti saate lapseteemaga lisada uusi navigeerimismenüüd, vidinaalasid, uute we-fontide tuge jne. Kuid me ei saa kõike ühes artiklis käsitleda.

Kui soovite õppida WordPressi teemaarendust, peaksite alustama WordPressi alamateemadega. Õppige teema kohandamise põhitõdesid.

: 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