Cum se creează o temă pentru copii WordPress (2021)

Stii sa faci o temă pentru copii WordPress ?

Bineînțeles, tema dvs. va arăta potrivită pentru site-ul dvs., dar în unele momente, va trebui să le editați. Modificarea temei copil este o alegere preferabilă pentru a vă edita site-ul. De asemenea, a învăța despre tema copilului este unul dintre lucrurile de bază din WordPress pe care ar trebui să le știi. Puteți începe să învățați despre WordPress aici.

Să trecem prin procesul de a crea o temă copil WordPress.

De ce ar trebui să folosiți teme pentru copii pentru WordPress?

În WordPress, o temă copil dobândește toate caracteristicile, funcționalitățile și altele ale temei părinte. Pe de altă parte, este posibilă editarea temei copilului fără a o schimba pe cea părinte. Va scurta timpul și efortul de a edita site-ul pentru dvs. De asemenea, actualizările temei dvs. WordPress rămân mai sigure și mai stabile. Când îl personalizați pe cel pentru copil, toate modificările și personalizările pentru părinte vor rămâne aceleași. Utilizatorii pot folosi această temă copil și pe alte site-uri web WordPress.

Notificări înainte de a crea o temă pentru copii

Pentru a crea o temă pentru copii WordPress , este necesară abilitățile de codare, deoarece veți lucra cu HTML și CSS. Este foarte important să știi ce să schimbi. În plus, veți avea nevoie de cunoștințe de bază despre PHP, cel puțin copierea/lipirea fragmentelor de cod din alte surse.

Vă sfătuim sincer să practicați în mediul de dezvoltare. Acesta este un loc în care puteți face acest lucru fără să vă speriați să vă distrugeți site-ul principal. Este ca și cum ai ucide 2 păsări dintr-o singură lovitură: una o mută pe câmpul de testare și una este folosită ca dezvoltare a temei.

Încă un lucru, tema părinte ar trebui să se potrivească cu aspectul și funcționalitățile scopurilor dvs. Într-adevăr, cu cât faci mai puține modificări, cu atât site-ul tău va deveni mai bun.

În părțile de mai jos, vom folosi tema LearnPress ca exemplu pentru o ilustrare mai bună a temei WordPress create child .

Construirea temei primului copil

Aveți 2 opțiuni când creați teme pentru copii WordPress. Puteți utiliza modul manual pentru a vă familiariza cu toate fișierele. În caz contrar, aplicarea unui plugin va funcționa cu fișiere și foldere complicate.

Acum, vom începe personalizarea.

Utilizarea Codului

Pentru a începe, veți deschide /wp-content/themes/ în Instalarea WordPress și veți crea un folder nou pentru tema copilului. Numiți-o după cum doriți.

Apoi, trebuie să creați primele 2 fișiere pentru tema copilului dumneavoastră. Deschideți un editor de text și inserați codul de mai jos în documentul gol:

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

Puteți modifica informațiile așa cum planificați și puteți salva acest fișier în fișierul style.css din folderul temei secundare recente. Ei bine, tocmai ați creat foaia de stil principală a temei copilului.

Apoi, veți crea un al ^doilea fișier pentru a importa foile de stil din tema părinte. Creați un nou document în editorul dvs. de text și copiați acest cod:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

Când utilizați LearnPress ca temă părinte, acest cod va începe să funcționeze. Astfel, majoritatea temelor vor funcționa așa. Salvați acest fișier și va deveni folderul functions.php al temei copilului dumneavoastră.

După acești pași, veți avea o temă de bază pentru copil. În „Aspect”, alegeți „Teme” și „Activați”. Prin urmare, site-ul dvs. va începe să folosească tema copil. Dacă trebuie să personalizați, treceți la următoarea parte.

Folosind pluginuri

Vă sugerăm să utilizați pluginul Child Theme Configurator. Deoarece nu necesită codare, puteți face cu ușurință modificări și personalizări.

Mai întâi, instalați pluginul pe site-ul dvs. Pentru mai multe ghiduri despre instalarea pluginului, faceți clic aici.

Când activați, mergeți la „Instrumente” -> „Teme pentru copii” și alegeți LearnPress în fereastra pop-up care solicită tema părinte. Alegeți „Analizați” pentru a verifica compatibilitatea pentru a fi o temă părinte. În continuare, va trebui să denumiți folderul temei copil pentru salvarea fișierelor și unde să le salvați. În setarea implicită, alegeți „Click to Edit Child Theme Attributes”. Apoi vei completa informațiile temei copilului.

Când creați manual o temă copil, tema copil nu va moșteni meniurile și instrumentele din tema părinte. Pentru a o rezolva, utilizați configuratorul de teme pentru copii. În cele din urmă, alegeți „Creare New Theme Child” pentru a finaliza. În acest pas, tema copilului dumneavoastră va avea funcțiile.php și style.css pentru dezvoltări ulterioare. Aparent, nu uitați să previzualizați pluginul pentru copil. După aceea, selectați „Activați și publicați” pentru a publica tema copilului.

Acum, vom începe să personalizăm tema copilului dumneavoastră.

Personalizarea temei WordPress pentru copii

Vom crea tema copil WordPress puțin spre deosebire de tema părinte, adăugând cod în fișierul „style.css”.

Copiați codul din Firefox/Chrome Inspector

Puteți utiliza widget-urile Inspector ale Chrome și Firefox pentru a descoperi codul CSS necesar. În plus, puteți folosi aceste instrumente pentru a accesa elementele CSS și HTML ale tuturor site-urilor.

Pentru a vedea un fișier CSS al unei postări sau al unui site, faceți clic dreapta și alegeți „Inspectați”. Ecranul dvs. se va împărți în două jumătăți și puteți vedea CSS și HTML-ul paginii. Când mutați mouse-ul peste liniile HTML, instrumentul de inspecție vă va afișa în fereastra de sus. De asemenea, respectă regulile CSS.

Va exista o schimbare temporară de culoare în spate. Pentru a o face permanent, copiați această linie de regulă CSS și inserați în fișierul style.css al temei copil:

 1 body { 2 background-color: #fdf8ef; 3 )

Salvați modificările și previzualizați site-ul. În plus, puteți relansa acest lucru pentru orice element din foaia de stil a temei. Ei bine, vă oferim o foaie de stil completă pentru o temă pentru copii aici:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

Copiați codul din fișierul style.css al temei părinte

După cum puteți vedea, este posibil să copiați din fișierul părinte theme'style.css și să îl lipiți în tema copilului și să îl personalizați.

De exemplu, codul pentru culoarea de fundal a paginii este:

 1 background-color: var(--global--color-background);

„–global–color-background” este o variabilă utilizată în diferitele locuri ale temei. Va trebui să modificați valoarea variabilei dacă trebuie să schimbați culoarea în acele locuri în același timp. Mutați la /wp-content/themes/learnpress în folderul de instalare WordPress și deschideți fișierul style.css în editorul de text pentru a căuta locul –global–color-background. Această variabilă poate fi schimbată cu o altă variabilă. Puteți găsi o mulțime de variabile de culoare în fișierul style.css al temei părinte. După selectarea opțiunilor de culoare potrivite, copiați și lipiți acea linie de cod în fișierul style.css al temei copil și înlocuiți-le pe cele vechi cu cele noi alese pentru tendința dvs. de culoare. Apoi, culorile vor fi împărțite în funcție de schemele de culori planificate. Acest proces va face schemele dvs. de culori consistente și editate rapid.

Personalizarea fișierelor șablon

Într-o temă, zonele de gestionare a fișierelor dintr-un site web sunt numite șabloane. Modelele sunt de obicei denumite după secțiunea pe care o gestionează. Astfel, unele secțiuni importante sunt gestionate de diferite fișiere sau șabloane de conținut.

Pentru a personaliza un șablon, găsiți acel fișier în tema părinte și copiați-l în tema secundară. Apoi, deschideți-l în editorul de text și începeți să îl modificați.

Vă vom arăta un tutorial pentru acest proces cu fișierul footer.php. Copiați-l în folderul temei copil și deschideți-l într-un editor de text simplu. De exemplu, să ștergem linkul „Proudly powered by WordPress” din subsol și să adăugăm o notificare privind drepturile de autor. Pentru a începe, ștergeți toate dintre etichetele <div class="powered-by">.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

Apoi veți lipi în codul pe care îl găsiți mai jos acele etichete în exemplul de mai jos.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

Alegeți „Salvați modificările” și când veți reveni pe site, veți vedea noua notificare privind drepturile de autor.

Adăugarea de funcționalități la tema copilului dvs. WordPress

Pentru a modifica sau adăuga o funcție pe site-ul dvs., va trebui să căutați fișierul functions.php. Acest fișier folosește cod PHP pentru a face acest proces să ruleze.

De obicei, sunteți ghidat să copiați și să lipiți fragmente de cod în fișierul function.php, dar acestea vor fi șterse când actualizați PHP sau tema. Prin urmare, vă sugerăm să utilizați o temă copil pentru a adăuga fragmentele de cod. Ei bine, să trecem la procesul de adăugare a widget-urilor. Adăugați fragmentul de cod în fișierul functions.php al temei copil.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

Salvați și navigați la „Aspect” -> „Widget-uri” pentru a vedea noul instrument. În plus, puteți căuta mai multe informații despre adăugarea unei zone funcționale. Puteți adăuga o mulțime de caracteristici adăugând fragmente de cod în fișierul functions.php al site-ului dvs.

Acesta este tot despre cum să creezi o temă copil în WordPress . Să trecem la partea erorii de remediere.

Remedierea erorilor

Puteți întâmpina orice problemă la crearea unei teme pentru copil în orice moment. Prin urmare, nu ar trebui să renunți ușor.

Problemele de sintaxă pot fi cauzate de unele lipsă în procesul de codificare. De asemenea, este cea mai populară eroare pe care o pot întâlni toți utilizatorii. În plus, dacă lucrurile nu merg bine, poți oricând să-l ștergi și să o iei de la capăt.

Cum se creează o temă pentru copii WordPress: Concluzie

Sperăm că puteți dobândi cunoștințe despre crearea unei teme pentru copii prin articolul nostru. Mulțumesc pentru lecturi!

Citiți mai multe: Cum să remediați eroarea HTTP 500 WordPress (2021)