Kako stvoriti i prilagoditi dječju temu na WordPressu

Šta je dečja tema i zašto je to tako važno?

U ovom postu ćemo vam dati odgovore na ta pitanja i pokazati vam korak po korak kako stvoriti i prilagoditi svoju vlastitu dječju temu pomoću dodataka ili koda.

Ako želite izvršite izmjene teme vašeg WordPress web mjesta,vjerovatno ste vidjeli kako vam ljudi govore da koristite dječju temu.

Ali šta je to dečja tema i zašto su dečije teme toliko važne?

U ovom postu ćemo vam dati odgovore na ta pitanja, uz uvod u dječje teme i kako su one savršene za vas.

Zatim ćemo vam korak po korak pokazati kako kreirati i prilagoditi svoju vlastitu dječju temu pomoću dodataka ili koda.

Ali, ako nikada niste instalirali WordPress, otkrijte Kako instalirati WordPress blog u koracima 7 et Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu

A onda se vratimo onome zbog čega smo ovdje.

Šta je dječja WordPress tema?

Dječja tema nije samostalna tema. To je "dijete" postojeće roditeljske teme, otuda i ime.

Instalirat ćete ga uz vašu matičnu temu, ali vam daje šansu da sigurno napravite promjene na svojoj roditeljskoj temi bez potrebe za uređivanjem same roditeljske teme.

Dječja tema dobit će većinu / sva svoja dizajnerska podešavanja od roditeljske teme. Međutim, u situacijama kada promijenite podređenu temu, ova promjena nadjačit će postavke roditeljske teme.

Prednosti dečije teme

U ovom trenutku se možda pitate: zašto jednostavno ne možete izvršiti svoje promjene direktno na nadređenoj temi?

Glavni razlog nije dobra ideja Ažuriranja tema za WordPress.

Ako želite da vaša web stranica WordPress ostane sigurna i funkcionalna, morate brzo primijeniti ažuriranja kako izađu, uključujući ažuriranja za vašu WordPress temu.

Ako prilagodite svoju web stranicu direktnom izmjenom svoje teme (bez podređene teme), to znači da ćete prebrisati sve promjene svaki put kada ažurirate WordPress temu.

To znači da:

Ažurirajte svoju WordPress temu i izgubite posao. Nije baš zabavno iskustvo, zar ne?
Ne ažurirajte svoju WordPress temu kako ne biste izgubili svoj rad ... što nije dobro za sigurnost i rad vaše web stranice WordPress.

Pomoću dječje teme možete izvršiti sve svoje promjene u dječijoj temi. Tada ćete biti u mogućnosti ažurirati roditeljsku temu bez gubitka vašeg rada.

Osim što vam pomaže da se sigurno ažurirate, korištenje dječje teme općenito je prikladno i za prilagođavanje. Budući da na jednom mjestu razdvaja sve vaše promjene, lako je pratiti sve svoje promjene i po potrebi ih mijenjati.

Lako je i naopako. Na primjer, ako želite prestati koristiti promjene i vratiti se na roditeljsku temu, samo deaktivirajte podređenu temu.

neki WordPress teme čak i koristiti ovaj podrazumevani pristup roditelj/dijete. Na primjer, ako želite koristiti Genesis okvir, trebat će vam i roditeljska tema (osnovni okvir) i podređena tema za kontrolu dizajna.

Kada koristiti dječju temu

Osim nekoliko izuzetaka koje ćemo navesti u nastavku, morate uvijek koristite podređenu temu ako planirate napraviti vlastite izmjene postojeće WordPress teme.

Kada vam nije potrebno koristiti dječju temu

Općenito, upotreba dječje teme je dobra praksa kad god prilagodite svoju WordPress temu.

Međutim, postoji nekoliko izuzetaka od pravila u kojem može postojati bolja opcija od korištenja dječje teme.

Prvo, ako želite samo napraviti manje CSS podešavanja, možda će biti suvišno stvoriti dječju temu za samo nekoliko podešavanja.

Umjesto toga, pomoću ove značajke možete dodati svoj prilagođeni CSS Dodatni CSS integriran u WordPress Customizer. Ili, možete koristiti besplatni WordPress dodatak kao što je Simple CSS.

Drugo, ako radite neke promjene za koje želite da budu neovisne teme, dječja tema možda i nije najbolja opcija.

Na primjer, ako registrirate prilagođenu taksonomiju ili a prilagođena vrsta posta, vjerovatno ne želite koristiti datoteku functions.php teme vašeg djeteta (jer ih želite zadržati čak i ako promijenite temu). Umjesto toga, jednostavno biste trebali dodati kod izvan svoje teme pomoću dodatka kao što je Code Snippets ili svoj vlastiti prilagođeni dodatak.

Kako stvoriti dečiju temu na WordPress

Sada kada znate zašto su važne teme za djecu, uđite u to kako zapravo možete kreirati dječju temu za svoju WordPress web stranicu.

Prvo, ako koristite Pozdrav Elementor temu, već smo kreirali dječju temu za vas - ne morate to učiniti sami. Možeš zgrabite dječju temu Hello Elementor sa stranice WordPress.org. Možete ga instalirati kao i bilo koju drugu WordPress temu (također ćemo vam pokazati kako instalirati podređenu temu kasnije u ovom postu).

Ako koristite drugu WordPress temu, uvijek je vrijedno pogledati Google da provjerite nudi li vaš razvojni programer WordPress podređenu temu. Na primjer, Astra, GeneratePress i OceanWP imaju alate / datoteke koje vam pomažu u preuzimanju dječje teme.

Ako vaša WordPress tema već nema podređenu temu, možete kreirati podređenu temu za bilo koju WordPress temu:

Koristite a WordPress dodatak besplatni generator dječjih tema.
Ručno stvorite svoju vlastitu dječju temu.

Pokazaćemo vam kako da izvedete obe metode.

Kako se koristi dječja tema WordPress dodatak

Dječji dodatak generatora tema omogućuje vam kreiranje dječje teme bez napuštanja svoje WordPress nadzorne ploče.

Najpopularnija opcija ovdje je besplatni dodatak za konfigurator tema za djecu, koji je aktivan na preko 300.000 XNUMX web lokacija.

Dječji tematski konfigurator ne samo da vam pomaže u stvaranju podređenih datoteka tema, već će i analizirati temu koju koristite te listove stila teme i teksta prema potrebi.

Uključuje i druge korisne funkcije ako pokušavate stvoriti dječju temu na web mjestu na kojem ste već dodali sadržaj. Na primjer, on može kopirati postojeće widgete i opcije prilagoditelja na podređenu temu.

Međutim, ako planirate koristiti plugin na web lokacijiopérationnel, preporučujemo da napravite potpunu sigurnosnu kopiju prije nego što nastavite. Ili, idealno, podesite sve na demo web mjestu.

Nakon što pripremite sigurnosnu kopiju, počnite s instaliranjem i aktiviranjem besplatnog dodatka Child Theme Configurator s WordPress.org. Zatim idite na meni Alati → Dečije teme da stvorite temu svog deteta.

Na spisku Odaberite jednu padajuću stavku roditeljska tema, odaberite temu za koju želite kreirati temu vašeg djeteta. Zatim kliknite na analizirati:

Dodatak će zatim analizirati nadređenu temu za sve zavisnosti.

Kada završite, videćete još nekoliko opcija za konfiguraciju načina kreiranja teme za dete. Ako niste sigurni što određena postavka znači, možete je jednostavno ostaviti kao zadanu:

Jednom kada završite sa odlukom, kliknite gumb na dnu do stvoriti nova dječja tema.

I to je sve! Dodatak će tada kreirati podređenu temu za vas. Međutim, neće se aktivirati korak ova dječja tema.

Da biste ga aktivirali:

Aller à Izgled → Teme.
Pregledajte kako vaša web stranica izgleda s ovom podređenom temom (da biste bili sigurni da djeluje - ako vaša web lokacija izgleda čudno, to je vjerojatno zbog CSS problema).
Aktivirajte svoju dječju temu kao i bilo koju drugu WordPress temu. Međutim, ostavite temu roditelja instaliranu.

Nakon što ste aktivirali dječju temu, dodatak Child Theme Configurator nudi i druge korisne alate za pomoć u upravljanju dječjom temom. Na primjer, ako otvorite karticu Files iz postavki dodatka možete pregledati sve povezane datoteke u nadređenoj temi i podređenoj temi.

Tada možete kopirati datoteke s nadređene teme u podređenu temu.

Na primjer, ako želite izvršiti neke promjene single.php, možete kopirati ovu datoteku u podređenu temu tako da je možete sigurno uređivati:

Takođe ćete pronaći obilje drugih alata koji će vam pomoći u radu sa CSS-om.

Kasnije ćemo objasniti zašto su ovi alati korisni.

Kako ručno stvoriti podređenu temu

Za ovaj odjeljak pretpostavit ćemo da znate nešto više o PHP-u i CSS-u. Ako se osjećate prezadovoljnim ovdje navedenim uputama, preporučujemo vam upotrebu besplatnog dodatka iz prethodnog odjeljka.

Da biste ručno stvorili podređenu temu, morate da stvorite dve datoteke (ovo su strogi minimumi za dečju temu):

style.css - u početku sve što trebate dodati je šifra ploče.

functions.php - ovo vam omogućuje da učitate tablicu stila nadređene teme. Bez njega, tema vašeg djeteta ne bi bila u mogućnosti primijeniti CSS sa teme vašeg roditelja, što web lokaciju čini super ružnom!

style.css

Prvo napravite datoteku po imenu style.css i dodajte sljedeći kod:

/*

Naziv teme: Pozdrav Elementor Child

URI tema: https://github.com/elementor/hello-theme/

Opis: Hello Elementor Child je dječja tema Hello Elementor, koju je kreirao tim Elementor

Autor: Elementor Team

Autor URI: https://elementor.com/

Šablon: hello-elementor

Verzija: 1.0.1

Tekst domene: hello-elementor-child

Licenca: GNU General Public License v3 ili noviji.

URI licence: https://www.gnu.org/licenses/gpl-3.0.html

*/

Obavezno zamijenite sve što dođe nakon debelog crijeva stvarnim podacima:

Ime teme - ime teme vašeg djeteta.

URI tema - web mjesto vaše teme i njena dokumentacija.

Opis - kratak opis teme.

autora - ime autora teme.

URI autora: - web stranica autora teme.

šablon - ime matične mape tema (kao što je navedeno unutar mape wp-content / themes). Ovo je najvažnija linija; tema vašeg djeteta neće raditi bez njega.

verzija - broj verzije teme vašeg djeteta.

Tekstualno polje - ovo se koristi za internacionalizaciju. Možete samo dodati "dijete" na kraj naziva predloška.

licenca - ostavi ovo kao zadano.

URI licenca - ostavi ovo kao zadano.

Izuzev retka Predložak, zapravo nije važno šta unosite, tako da ne potencirajte previše. Samo obavezno ispravno unesite naziv mape svoje roditeljske teme za šablon.

Ako želite ubuduće dodati vlastite prilagođene stilove, možete je dodati u ovu tablicu stilova pod šifrom boilplate.

functions.php

Tada morate stvoriti datoteku functions.php za temu vašeg djeteta. Ponovno, ovo vam omogućuje učitavanje cjelovite CSS tabele matične teme.

U dosijeu function.php, dodajte sljedeći kod:



/ * Funkcija za enqueue tablice s matične teme * /

funkcija child_enqueue__parent_scripts () {
wp_enqueue_style ('roditelj', get_template_directory_uri (). '/ style.css');
}
dodavanje ('wp_enqueue_scripts', 'child_enqueue__parent_scripts');

Prenesite datoteke na veb lokaciju WordPress

Jednom kada imate svoje datoteke style.css et functions.php, trebate ih prenijeti na svoju WordPress web stranicu kao novu temu.

Da biste to učinili, povežite se sa svojom WordPress web stranicom pomoću FTP-a.

Zatim idite na direktorij tema vašeg web mjesta (wp-sadržaj / teme)i stvorite novu mapu za svoju podređenu temu.

Na primjer, ako je mapa teme vašeg roditelja zdravo element, možete imenovati podređenu temu mape zdravo dijete da vam pomogne da ga zapamtite.

Zatim prenesite datoteku style.css et functions.php unutar ove mape:

Nakon što preuzmete obje datoteke, možete ići Izgled → Teme i aktivirajte svoju dječju temu kao i bilo koju drugu WordPress temu.

Kako instalirati podređenu WordPress temu

Neke od ovih aspekata opisali smo gore u Određenim metodama, ali proći ćemo još jednom kako instalirati podređenu WordPress temu.

Također će vam dobro doći ako ste preuzeli podređenu temu sa web lokacije svog programera, umjesto da je sami kreirate.

Možete instalirati podređenu WordPress temu baš kao i bilo koju drugu WordPress temu:

Pristup Izgled → Teme na svojoj tabli za WordPress.
kliknite na Dodaj novi.
Prenesite ZIP datoteku podređene teme.

Tijekom postupka instalacije WordPress otkriva da preuzimate podređenu temu i provjerava da roditeljska tema postoji:

Nakon što preuzmete datoteku, svakako to učinite aktiviraj.

Zapamtite, da bi tema vašeg djeteta djelovala, morate to instalirati na onog vremenaroditeljska tema i dječja tema.

Tema vašeg djeteta trebala bi biti vaša aktivna tema, ali trebali biste i dalje imati instaliranu temu roditelja.

Evo kako bi to trebalo izgledati:

Dječja tema je aktivna tema
Roditeljska tema je i dalje instalirana, ali nije aktivna

Kako prilagoditi dječju temu

Baš kao i kod prilagođavanja uobičajene WordPress teme, imate nekoliko opcija za „prilagođavanje“ dječije teme.

Da budem precizniji, ti si zapravo ne prilagođavate podređenu temu - koristite podređenu temu da biste prilagodili postojeću (nadređenu) temu.

Prvo ćemo vam pokazati nekoliko načina na koji možete kôd koristiti za prilagođavanje teme djeteta. Zatim ćemo podijeliti lakši način personalizacije stvari s njima Elementor Builder tema.

Prilagodite dječju temu s kodom

Ako želite da prilagodite temu vašeg djeteta kodom, morat ćete dobro poznavati CSS, HTML i PHP.

Evo nekih stvari koje možete učiniti:

Dodajte prilagođeni CSS

Da biste prilagodili svoju podređenu temu sa CSS-om, možete je dodati direktno u datoteku style.css teme vašeg djeteta.

Dodajte CSS ispod postojećeg koda na vrhu datoteke.

Bilo koji CSS koji dodate vašoj podređenoj temi zamijeniće temu vašeg roditelja sve dok koristite iste odabire.

Zamijenite postojeće predloške

Ako želite zamijeniti predloške teme vašeg roditelja, možete:

Kopirajte datoteku predloška iz roditeljske teme u podređenu temu.
Uredite datoteku predloška u vašoj podređenoj temi.

Na primjer, ako želite promijeniti single.php, prvo kopirajte datoteku single.php od roditeljske do podređene teme (pazeći da zadržite istu strukturu).

Zatim možete urediti kôd u verziji teme vašeg djeteta single.php.

Napomena: WordPress će koristiti predložak teme vašeg djeteta sve dok ima isto ime. Zbog toga prilično skrivate postojeći predložak u roditeljskoj temi.

Ako koristite dodatak Child Theme Configurator koji smo gore spomenuli, on vam može pomoći da kopirate datoteke na podređenu temu bez napuštanja svoje WordPress nadzorne ploče.

Dodajte nove predloške

Pored kopiranja i izmjene postojećih predložaka s roditeljske teme, u podređenoj temi možete stvoriti i nove prilagođene predloške.

Na primjer, ako želite stvoriti predložak za prilagođeni tip posta koji ste dodali, možete dodati te predloške u svoju podređenu temu.

Prilagodite podređenu temu pomoću generatora tema Elementor

Ako niste upoznati, Elementor Builder temaomogućava vam prilagođavanje dijela ili cijele vaše WordPress teme pomoću vizualnog sučelja.

Pomoću Elementor Pro i Builder tema možete stvoriti prilagođene predloške za predloške svoje web lokacije:

zaglavlje
Footer
Pojedinačno (npr. Jedan blog ili stranica na blogu)
Arhiva (npr. Stranica na kojoj su navedeni svi vaši postovi na blogu)

Ti će predlošci raditi i sa podređenom i sa roditeljskom temom.

S Elementor Theme Builder-om neće vam trebati direktno raditi s kodom. Nema dodavanja prilagođenog CSS-a niti kopiranja datoteka PHP predloška - sve to radite povlačenjem i ispuštanjem.

Na primjer, pretpostavimo da želite prilagoditi zaglavlje svojoj podređenoj temi. Umjesto da trebate kopirati svoju datoteku header.php na vašu podređenu temu, a zatim promijenite PHP, jednostavno možete dizajnirati novo zaglavlje pomoću Elementorinog vizualnog i drag and drop sučelja. Tada možete primijeniti ovo zaglavlje bilo gdje na vašoj web stranici ili samo na određene dijelove vaše web stranice.

Ako ste novi u CSS-u, HTML-u i PHP-u, ovaj pristup bez koda omogućuje vam prilagođavanje podređene teme. Pa čak i ako to učinite, ovaj vizuelni pristup može vam uštedjeti puno vremena nego kod PHP-a u datotekama predložaka.

Kada stvorite novi predložak s Elementor Builderom tema, moći ćete odabrati vrstu predloška. Na primjer, zaglavlje.

Tada možete krenuti s prazne ploče ili odabrati neki od Elementor Pro modela:

Odatle možete koristiti opcije povlačenja i ispuštanja bočne trake da biste kontrolirali izgled zaglavlja:

Nakon što učinite, možete odabrati točno gdje želite koristiti ovaj predložak zaglavlja:

Kako izbrisati podređenu temu na WordPress

Ako želite prestati koristiti dječju temu, možete je isključiti kao što bi to činio sa uobičajenom WordPress temom.

Ovo je :

Aller à Izgled → Teme.
Aktivirajte drugu temu. Ili nadređena tema ili potpuno nova WordPress tema.

Imajte na umu da ako isključite podređenu temu i vratite se na svoju roditeljsku temu, promjene koje ste dodali kroz svoju podređenu temu više neće biti.

Umjesto toga, vratit ćete se dizajniranju teme roditelja.

Započnite s upotrebom dječje teme WordPress

Dječja tema pomaže vam da sigurno napravite promjene na svojoj WordPress temi.

Tvoja dječja tema naslijedit će sve njene stilove od teme vašeg roditelja, ali bilo kakve promjene koje napravite na nadređenoj temi nadjačit će nadređenu temu. To znači da možete sigurno ažurirati roditeljsku temu bez gubitka promjena koje ste izvršili u podređenoj temi.

Da biste započeli sa temom za djecu WordPress, možete:

Provjerite nudi li vaš programer teme dječju temu. Ako koristite Hello Elementor, možete preuzmite dječju temu za to s GitHub-a.
Upotrijebite besplatni dodatak za konfigurator tema za djecu.
Ručno stvorite temu svog djeteta.

Odatle možete prilagoditi temu vašeg djeteta koristeći CSS, HTML i PHP. Također možete preskočiti kôd i pomoću Elementor Theme Builder-a prilagoditi temu pomoću vizualnog sučelja za povlačenje i ispuštanje.

Otkrijte i neke teme i premium WordPress dodatke

Možete koristiti druge WordPress plugins da date moderan izgled i da optimizujete rukovanje vašim blogom ili web sajtom.

Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.

1. Tabelarne tablice AP

Tabela cijena AP je a WordPress dodatak premium koji olakšava kreiranje cenovnika bogatih funkcijama sa intuitivnim interfejsima. Nudi 35 predefiniranih šablona i neograničen broj opcija.

Sa ovim WordPress dodatak jednostavan za korištenje, dizajniranje zapanjujuće tablice cijena sa samo nekoliko klikova bit će vrlo jednostavno. Omogućava vam da kreirate neograničene mreže cijena pružajući mogućnost dodavanja redova i stupaca, postavljanja granica kolone, prostora kolona, širine kolone i još mnogo toga.

Ovaj dodatak vam takođe omogućava dodajte audio sadržaj, video i Google Map.

download| Demo | web hosting

2.wp Page Builder

WordPress Page Builder je vrhunski graditelj za vašu WordPress web stranicu koji dolazi s izvrsnim alatima za generiranje bilo kojeg prilagođenog posta, prilagođene taksonomije ili prilagođenog metaboksa.

Kao karakteristike koje između ostalog ima: prilagođeni tip postaCPT, personalizirana taksonomija, napredna prilagođena polja, funkcija povlačenja i ispuštanja, podržana lokacija Google Map, podržana ponovljiva polja, kao i još mnogo toga.

download | Demo | web hosting

3. Rankie

Rankie je vrlo zgodan WordPress modul osmišljen s ciljem redovite provjere WordPress rangiranja na Googleu uz istodobno praćenje položaja svake ključne riječi.

Kao dodatak za praćenje ranga, Rankie će svakodnevno ažurirati pozicioniranje ključnih riječi i generirati precizne izvještaje.

Pročitajte i našu 6 redovna pitanja vezana za SEO i preusmeravanja

Takođe sadrži moćan alat za istraživanje koji generira vrijedne liste ključnih riječi. Google ga već koristi za istraživanje.

download | Demo | web hosting

Preporučeni resursi

Saznajte više o drugim preporučenim resursima koji će vam pomoći da izgradite i upravljate svojom web stranicom.

zaključak

Evo! To je sve za ovaj vodič. Imate li još uvijek pitanja o korisnosti dječje teme na WordPressu? Javite nam u odjeljak za komentare a mi ćemo pokušati da pomognemo!

Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada WordPress bloga

Ne ustručavajte se dijelite sa svojim prijateljima na svojim omiljenim društvenim mrežama.

...