Prilagajanje obstoječe teme WordPress je pogosta potreba, vendar lahko neposredno urejanje teme povzroči težave. 

Če se tema posodobi, bodo vaše spremembe prepisane! Boljši način je ustvariti podrejeno temo, podedovano od nadrejene teme. 

Podrejene teme vam omogočajo varno spreminjanje in razširitev teme. 

V tem podrobnem vodniku bomo razpravljali o ustvarjanju podrejene teme v WordPressu. Naučili se boste namena podrejenih tem, kako jih nastaviti in kako jih prilagoditi, da preglasijo zasnovo in funkcionalnost nadrejene teme. 

Z nekaj metodami lahko zgradite podrejeno temo in začnete uporabljati svoje spremembe, ne da bi se dotaknili datotek nadrejene teme. 

Torej, brez odlašanja, začnimo.

1 Kaj je otroška tema?

Podrejena tema je tema WordPressa, ki podeduje funkcionalnost od nadrejene teme. Omogoča vam spreminjanje ali dodajanje novih funkcij, ne da bi spremenili nadrejene datoteke tem. 

To je uporabno, ker če neposredno spremenite nadrejene datoteke teme, bodo vaše spremembe izgubljene, ko bo tema posodobljena. 

Z podrejeno temo lahko izvajate spremembe, ne da bi vplivali na nadrejeno temo, in prejemate posodobitve, ne da bi izgubili svoje spremembe.

V tem razdelku boste opazili, da smo omenjali nadrejeno temo, toda kaj točno je?

2 Kaj je nadrejena tema?

Nadrejena tema je vnaprej oblikovana tema, ki služi kot temelj za spletno mesto WordPress. Zagotavlja osnovna struktura, postavitev in funkcionalnost spletnega mesta. 

Nadrejeno temo je mogoče prilagoditi potrebam določenega spletnega mesta z dodajanjem ali spreminjanjem njegovih funkcij. 

Uporaba nadrejene teme lahko prihrani čas in trud pri izdelavi spletnega mesta ter zagotavlja izhodišče za oblikovanje in funkcionalnost.

Na tej točki lahko rečemo, da so vse teme WordPress tehnično nadrejene teme, razen če so posebej zasnovane kot podrejene teme.

Tu je ključna točka, ki si jo morate zapomniti: Nadrejena tema lahko obstaja in deluje neodvisno, medtem ko podrejena tema se vedno opira na nadrejeno temo zagotoviti osnovno funkcionalnost in funkcije.

3 Zakaj uporabljati podrejeno temo?

Obstaja nekaj ključnih razlogov za uporabo podrejene teme namesto neposrednega spreminjanja teme:

• Ustvarjanje podrejene teme zaščiti vaše spremembe pred prepisovanjem, ko je nadrejena tema je posodobljena.
• Datoteke nadrejene in podrejene teme so ločene. To pomaga preprečiti zmedo, saj so datoteke organizirane.
• Več podrejenih tem je mogoče uporabiti za različne namene, kot je spreminjanje slogov ali funkcionalnosti. Vendar upoštevajte, da ima lahko spletno mesto hkrati samo eno aktivno temo.
• To je tudi odličen način za začetek razvoja nove polne teme WordPress.

Opomba: Obsežne prilagoditve podrejene teme lahko povzročijo težave pri upravljanju. Pri večjih projektih je ustvarjanje polne/nadrejene teme na podlagi izvirne teme pogosto boljše od nadaljnjega spreminjanja podrejene teme.

4 Predpogoji za ustvarjanje podrejene teme

Preden ustvarite podrejeno temo, je pomembno, da imate določene zahteve. 

Najprej potrebujete delujočo namestitev WordPressa in nadrejeno temo, za katero želite ustvariti podrejeno temo. 

Prav tako je koristno razumeti HTML, CSS in PHP, saj boste spremenili kodo, da prilagodite podrejeno temo. 

Prav tako bi morali imeti možnost kopirati in prilepiti delčke kode iz drugih virov. 

Priporočljivo je, da vadite v lokalnem razvojnem okolju z uporabo navidezne vsebine ali premikanjem spletnega mesta WordPress v živo na lokalni strežnik za namene testiranja. To vam omogoča, da preizkusite podrejeno temo, preden jo implementirate na spletno mesto v živo.

Nazadnje je pomembno imeti a varnostno kopijo spletnega mesta če gre med postopkom kaj narobe.

Torej, ko imate nastavljene vse te zahteve, lahko ustvarite podrejeno temo. Vse kar morate storiti je, da sledite postopku nastavitve podrejene teme, ki je opisan v tem priročniku.

Toda za ta vodnik bomo uporabili privzeto temo WordPress Twenty Twenty-four.

5 Ustvarjanje podrejene teme v WordPressu

Zdaj, ko razumete koncept podrejenih tem, se poglobimo v ustvarjanje podrejene teme v WordPressu. 

Raziskali bomo dve pogosti metodi, med katerimi lahko izbirate, ki poskrbita za različne ravni udobja:

5.1 Ustvarjanje podrejene teme s kodo

Najprej dostopajte do svoje namestitve WordPress prek FTP-ja ali upravitelja datotek, ki ga nudi nadzorna plošča vašega gostovanja. Pomaknite se do wp-content/themes in ustvarite novo mapo z edinstvenim imenom za vašo podrejeno temo. 

Za to vadnico bomo uporabili ime »mtschild« za mapo podrejene teme.

Ta imenik deluje kot primarni prostor za shranjevanje komponent vaše podrejene teme.

Znotraj mape podrejene teme ustvarite novo datoteko z naslovom style.css. Ta datoteka bo vsebovala bistvene podrobnosti za prepoznavanje in aktiviranje vaše podrejene teme. Odprite datoteko style.css in vstavite naslednjo kodo:

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

Ta koda obvesti WordPress, da vaša podrejena tema razširja določeno nadrejeno temo. Zamenjajte »MTS Child Theme« z želenim imenom podrejene teme in polje predloge z imenom mape nadrejene teme.

Naslednji korak vključuje zagotavljanje, da vaša podrejena tema podeduje sloge od nadrejene teme. Če želite to doseči, morate dodati v čakalno vrsto slogovno tabelo nadrejene teme.

Če želite to narediti, odprite datoteko functions.php v imeniku podrejene teme (ustvarite jo, če je ni) in implementirajte eno od naslednjih kod.

Če vaša nadrejena tema ne naloži nobene tabele slogov, uporabite to kodo za nalaganje style.css prek functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

Ta koda lahko deluje tudi, če nadrejena tema naloži samo svojo datoteko slogov. 

Če pa nadrejena tema naloži samo slogovno tabelo aktivne teme, morate stilsko tabelo nadrejene teme dodatno postaviti v čakalno vrsto prek functions.php z uporabo spodnje kode:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Za temo Twenty Twenty-Four, uporabljeno v tem priročniku, bomo uporabili prvo kodo, saj tema sploh ne naloži nobene tabele slogov. 

Ne pozabite začeti z <?php pri dodajanju kode. Spremenite te kode glede na svoje zahteve, zlasti tam, kjer je ime teme mts_child_theme se uporablja.

Ko dokončate zgornje korake, se znova prijavite na svojo nadzorno ploščo WordPress in nadaljujte z Videz → Teme. Premaknite miškin kazalec nad podrejeno temo in kliknite Aktivirajte gumb.

Ker še niste spremenili podrejene teme, bo vaše spletno mesto ohranilo funkcionalnost in videz nadrejene teme. 

Vendar vas bomo vodili pri prilagajanju podrejene teme, da vas pripravimo na nadaljnje spremembe.

To je ročni postopek ustvarjanja podrejene teme s kodo v WordPressu. Če se ta metoda zdi zapletena, lahko raziščete pristop vtičnika, ki ga bomo obravnavali v naslednjem razdelku.

5.2 Ustvarjanje podrejene teme z uporabo vtičnika

Ustvarjanje podrejene teme z uporabo vtičnika je preprosto in enostavno. Najprej morate namestiti in aktivirati Konfigurator otroške teme vključiti. Za več podrobnosti si oglejte naš vodnik po korakih kako namestiti vtičnik WordPress.

Ko je vtičnik aktiviran, pojdite na nadzorno ploščo WordPress in se pomaknite do Orodja → Podrejene teme.

o Izberite zavihek Nadrejena tema, izberite nadrejeno temo v spustnem meniju za ustvarjanje podrejene teme. Običajno je aktivna tema na vašem spletnem mestu vnaprej izbrana.

Nato kliknite na Analizirajte gumb. Vtičnik bo natančno preučil izbrano nadrejeno temo, da bi ugotovil, ali lahko ustvari podrejeno temo in ali za videz potrebuje svojo datoteko style.css.

Nato podrejeni temi dodelite ime. Slogovno tabelo, funkcije in druge konfiguracije lahko prilagodite svojim željam. 

Vendar se vzdržite spreminjanja nastavitev, dokler ne pridete do razdelka 7.

V razdelku 7 kliknite na gumb z oznako Kliknite za urejanje atributov podrejene teme.

Od tam lahko vnesete podrobnosti svoje otroške teme.

Pri ročnem ustvarjanju podrejene teme lahko izgubite menije in pripomočke nadrejene teme. 

Vendar pa jih lahko vtičnik konfiguratorja podrejene teme prenese iz nadrejene teme v podrejeno temo. 

Če želite nadaljevati s tem, označite potrditveno polje v razdelku 8. Na koncu kliknite Ustvarite novo otroško temo gumb za ustvarjanje podrejene teme.

Po zaključku bo vtičnik ustvaril mapo za vašo podrejeno temo, ki vsebuje bistveni datoteki style.css in functions.php za prihodnje prilagajanje.

Preden aktivirate temo, si jo predoglejte tako, da kliknete povezavo »Predogled podrejene teme« na vrhu zaslona, ​​da preverite njen videz in se prepričate, da ne vpliva negativno na vaše spletno mesto.

Ko preverite, ali vse deluje pravilno, kliknite Aktiviraj in objavi gumb. Tako bo otroška tema zaživela na vašem spletnem mestu.

Ko aktivirate podrejeno temo na svojem spletnem mestu, je čas, da jo začnete prilagajati. To bomo obravnavali v naslednjem razdelku.

6 Kako prilagoditi svojo otroško temo

Preden se lotite prilagajanja, določite elemente svojega spletnega mesta, ki jih želite spremeniti, kot so slogi, predloge, funkcije, področja pripomočkov ali predloge strani po meri. 

Če boste imeli jasno vizijo svojih ciljev, boste poenostavili postopek prilagajanja. Obstaja več načinov za prilagoditev podrejene teme, vključno z:

6.1 Prilagajanje slogov s CSS

Datoteka style.css vaše podrejene teme služi kot platforma za prilagajanje videza vašega spletnega mesta. Tukaj lahko vstavite pravila CSS po meri, da spremenite ali izboljšate sloge nadrejene teme.

Pred nadaljevanjem je potrebno osnovno razumevanje HTML in CSS. 

Lahko učinkovito uporabite orodje Inspect vašega brskalnika ali neposredno kopirate sloge iz datoteke style.css nadrejene teme.

Za dostop do kod CSS spletne strani s svojim brskalnikom preprosto kliknite stran z desno tipko miške in izberite Preveri med možnostmi, ki se prikažejo. To orodje prikaže slogovne kode CSS, kar vam omogoča, da natančno določite elemente, ki jih želite spremeniti.

Ko z desno miškino tipko kliknete in izberete »Pregled«, se bo zaslon vašega brskalnika razdelil in prikazal HTML in CSS za stran. 

Odvisno od nastavitev brskalnika se lahko podrobnosti HTML in CSS prikažejo na desni strani ali na dnu zaslona.

Ko miškin kazalec premaknete nad različne vrstice HTML, jih bo Chrome inšpektor označil na zavihku Elementi in prikazal ustrezna pravila CSS, povezana z označenim elementom.

Lahko eksperimentirate tako, da neposredno uredite CSS in si ogledate, kako bo videti. Na primer, če želite spremeniti barvo ozadja privzete domače strani teme Twenty Twenty-Four iz #f9f9f9 v #6841ea.

Ko prilagodite barvo ozadja v inšpektorju brskalnika, je sprememba začasna. Če želite, da postane trajno, morate to pravilo CSS prenesti v datoteko style.css podrejene teme:

body {
background-color: #6841ea;
}

Ko vstavite kodo, ne pozabite shraniti svojih sprememb. Ta postopek lahko ponovite za kateri koli drug element spletne strani, ki ga želite prilagoditi.

Recimo, da želite spremeniti barve na svojem spletnem mestu. Lahko vam zagotovimo nekaj kod CSS, ki vam bodo to omogočile.

Če želite barvo besedila spremeniti v temno sivo, svoji datoteki CSS dodajte to kodo:

body { color: #3b3b3b; } 

Če želite spremeniti barvo naslova v modro, uporabite naslednjo kodo:

h1, h2, h3 { color: #007bff; }

Za barvo ozadja glave uporabite naslednjo kodo:

#header { background-color: #f5f5f5; } /* Light grey background for header */

In za področje vsebine uporabite to kodo, da nastavite barvo ozadja na belo:

.site-container { background-color: #fff; } 

Te sloge CSS lahko kopirate v datoteko style.css svoje podrejene teme prek imenika podrejenih tem vašega spletnega mesta ali z nadzorne plošče WordPress.

Ko dodate kodo CSS, bo podobna tej obliki:

Ko shranite spremembe, poskusite osvežiti stran spletnega mesta. Če se spremembe ne prikažejo, počistite predpomnilnik brskalnika, da zagotovite, da si ogledujete najnovejšo različico CSS.

6.2 Preglasitev datotek predlog

Medtem ko prilagajanje CSS nadzoruje videz vašega spletnega mesta, podrejene teme ponujajo robustnejšo funkcijo: preglasitev datotek predlog.

Ta napredna zmogljivost vam omogoča preoblikovanje postavitve in strukturo strani vašega spletnega mesta in elementi. Vendar bodite previdni, saj zahteva globlje razumevanje predlog za WordPress, HTML in PHP.

Če želite preglasiti predlogo, kopirajte izvirno datoteko .php iz mape nadrejene teme v podrejeno temo, pri čemer obdržite natančno ime datoteke. 

Če želite na primer preglasiti header.php, morate kopirati datoteko header.php iz imenika /parent-theme/ in jo prilepiti kot header.php v imenik /child-theme/.

Zdaj lahko urejate header.php v podrejeni temi.

Nekaj ​​pogostih predlog za preglasitev:

• header.php – Vsebuje blagovna znamka oznak in spletnih mest, navigacija itd.
• footer.php – Zaključek oznako in oznako.
• page.php - Privzeta predloga za strani.
• single.php – Predloga, ki se uporablja za posamezne objave.
• index.php – Predloga domače strani.

Na primer, lahko spremenite footer.php s prikazom avtorskih pravic po meri za vaše spletno mesto:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Razširitev funkcionalnosti

O functions.php v podrejeni temi vam omogoča uvedbo novih funkcij PHP, kavljev, filtrov in kode za razširitev privzetih funkcij nadrejene teme.

Ta prilagodljivost vam omogoča, da registrirate vrste objav po meri, vključite pripomočke po meri, ustvarite nove kratke kode, postavite dodatne skripte v čakalno vrsto in drugo.

Na primer, če želite na svojem spletnem mestu WordPress namenski razdelek za gradnike po meri, uporabite naslednji delček kode, da vzpostavite območje gradnikov z imenom »Območje gradnikov po meri«:

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

Ko shranite to kodo v datoteko functions.php podrejene teme, se pomaknite nazaj na svoje spletno mesto WordPress in dostopajte Videz → Pripomočki. Opazili boste pripomoček »Custom Widget Area«, ki je na voljo za uporabo.

7 Pogosto zastavljena vprašanja

8 zaključek

Ustvarjanje podrejene teme v WordPressu je dragocena veščina, ki vam lahko pomaga prilagoditi vaše spletno mesto, ne da bi tvegali izgubo sprememb med posodabljanjem teme. Čeprav se na začetku morda zdi zastrašujoče, ne obupajte prehitro, če naredite napako. 

Najpogostejše napake, na katere lahko naletite, so sintaksne napake, ki nastanejo zaradi manjkajočega elementa v kodi. Če gre kaj narobe, lahko vedno začnete znova. 

Če na primer pomotoma izbrišete nekaj, kar zahteva vaša nadrejena tema, lahko preprosto izbrišete datoteko iz podrejene teme in začnete znova. 

Ne pozabite, da vam lahko z malo vztrajnosti ustvarjanje podrejene teme omogoči prilagodljivost pri ustvarjanju edinstvenega videza in občutka za vaše spletno mesto, hkrati pa ohranja stabilnost in varnost vaše nadrejene teme.

Torej, poskusite in si oglejte razliko, ki jo lahko prinese na vaše spletno mesto WordPress.

Upamo, da vam je ta vodnik pomagal ustvariti podrejeno temo za vaše spletno mesto. Če je tako, nas obvestite do Tvitanje @rankmathseo.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• PlatoData.Network Vertical Generative Ai. Opolnomočite se. Dostopite tukaj.
• PlatoAiStream. Web3 Intelligence. Razširjeno znanje. Dostopite tukaj.
• PlatoESG. Ogljik, CleanTech, Energija, Okolje, sončna energija, Ravnanje z odpadki. Dostopite tukaj.
• PlatoHealth. Obveščanje o biotehnologiji in kliničnih preskušanjih. Dostopite tukaj.
• vir: https://rankmath.com/blog/wordpress-child-theme/