Cum să creezi o temă pentru copii în WordPress (pas cu pas)

Ți-ai actualizat vreodată tema WordPress doar pentru a descoperi că toate modificările personalizate pe care le-ai făcut temei în sine s-au pierdut? O temă WordPress Child este soluția pentru a evita această problemă și în acest articol vă vom arăta exact cum să creați una.

Haide să mergem!

Ce este o temă pentru copii WordPress

O temă copil WordPress nu este considerată o temă completă precum cele care pot fi găsite în directorul de teme WordPress. În schimb, depinde complet de o altă temă (numită Tema Părinte) pentru a putea fi activată și a funcționa corect.

Când este activat, moștenește toate funcționalitățile, caracteristicile și codul temei sale părinte fără a aduce modificări fișierelor temei părinte.

WordPress va servi codul temei părinte, cu excepția părților care sunt înlocuite de tema copil, care vor fi difuzate din folderul temei copil. Rezultatul acestui lucru înseamnă că atunci când tema părinte este actualizată, orice modificări/adăugiri și așa mai departe făcute în tema copil nu se pierd.

Crearea unei teme pentru copii (pas cu pas)

Înainte de a continua, asigurați-vă că:

• Aveți acces la fișierele site-ului dvs. prin intermediul unui client FTP (cum ar fi WinSCP sau Filezilla)
• Aveți un editor de text disponibil (cum ar fi notepad++).

Pentru început, vom activa o temă implicită, denumită și Tema părinte. În acest exemplu, aceasta va fi tema Twenty Twenty. Dacă ne îndreptăm spre partea din față a site-ului nostru, vom vedea ceva de genul acesta:

Acum să creăm și să activăm o temă copil „Douăzeci și douăzeci”.

Adăugați Directorul

În primul rând, trebuie să creăm un nou director „douăzeci și douăzeci de copii” în interiorul /wp-content/themes. Rețineți că folderul copil poate fi numit cum doriți, atâta timp cât nu utilizați spații sau semne de punctuație.

Adăugați fișierul style.css

Apoi, trebuie să creăm un fișier style.css și să adăugăm antetele temei adecvate. Înainte de a continua, să aruncăm o privire la stilul.css al temei părinte .

Să vedem unde se reflectă aceste informații în zona de administrare.

Mai întâi, deschideți detaliile temei pe Aspect > Teme și aruncați o privire mai atentă la coloana din dreapta.

Dacă comparăm acest lucru cu foaia de stil, vom vedea de unde sunt extrase diverse elemente ale acestor informații.

Trebuie să începem să adăugăm unele dintre aceste informații în foaia noastră de stil pentru tema copilului. Informațiile minime necesare care ar trebui introduse ca antete sunt „Numele temei” și „Șablonul”.

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• Numele temei: numele dorit al temei dvs. pentru copil, care va fi afișat în partea din spate a WordPress.
• Șablon: acesta ar trebui să fie identic cu numele de director al temei părinte. Este cel mai important antet pentru tema copil, deoarece îi spune de fapt WordPress ce temă este părintele și astfel definește dependența. Fără ea, tema copilului tău nu va funcționa.

Odată ce tema copil este activată, ceea ce veți vedea în backend este următorul:

În plus, puteți introduce următoarele informații opționale:

• Versiune (versiunea temei)
• Necesită cel puțin (versiunea WP minimă necesară pentru ca tema să funcționeze corect)
• Necesită PHP (versiune minimă WP PHP pentru ca tema să funcționeze corect)
• Descriere (detalii legate de tema)
• Etichete (etichete ale temei)
• Autor (numele dezvoltatorului temei)
• etc.

În acest moment, dacă deschideți partea frontală a site-ului dvs., este posibil să descoperiți că este stricat și arată cam așa:

Acest lucru este complet normal, deoarece foaia de stil (style.css) la care face referire WordPress acum este din tema copil și această foaie de stil este goală, bară informațiile pe care le-ai introdus mai sus. Puteți fie să vă începeți propriul stil de la zero, fie să încărcați stilul temei părinte și să începeți de acolo. Dacă doriți să importați foaia de stil a temei părinte, puteți face acest lucru în unul din două moduri.

Opțiunea 1: importați foaia de stil părinte în modul clasic

Tot ce trebuie să faci este să adaugi pur și simplu această linie în fișierul style.css al temei copilului tău:

 @import url('../twentytwenty/style.css');

Această comandă îi spune WordPress unde să caute pentru a prelua fișierul CSS original din. Acum, dacă vă reîmprospătați pagina de pornire, pare că a revenit la normal. Orice adăugați acum în style.css va suprascrie stilul părinte importat. Încercați, de exemplu, să adăugați o dimensiune diferită a fontului pentru titlul h2 „Hello world!”.

Reîmprospătați pagina și priviți inspectorul de elemente din filele dezvoltatorului.

Veți observa că valoarea adăugată este contorizată și implicit (stilul părinte) „font-size: 6.4rem;” a fost depășită.

Ceea ce trebuie să țineți cont este că utilizarea acestei metode are o influență negativă asupra vitezei site-ului dvs., deoarece fișierele sunt forțate să se încarce unul după altul și nu în paralel. Mai precis, browserul trebuie să descarce, să analizeze și să execute primul fișier înainte de a fi „informat” că trebuie să descarce al doilea fișier.

Din acest motiv, importarea fișierului părinte style.css în acest mod nu mai este recomandată.

Opțiunea a doua: importați foaia de stil părinte în modul corect

Pentru a importa fișierul părinte style.css „în mod corect”, trebuie mai întâi să adăugăm un fișier functions.php gol în folderul temei copilului.

După ce ați făcut acest lucru, deschideți-l cu editorul și adăugați o etichetă PHP de deschidere (<?php), după care puteți adăuga următorul cod PHP:

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

Dacă verificați acum instrumentele de dezvoltare ale browserului dvs., veți observa că rezultatele sunt aceleași ca și în modul „tradițional” prezentat în Opțiunea Unu de mai sus, cu excepția faptului că acum este mult mai rapid.

Câteva note suplimentare despre codul PHP:

• 'parent-theme-style' este numele mânerului și trebuie să fie unic
• get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' spune WordPress locația sursă a locației părinte style.css
• get_template_directory_uri() preia URI-ul directorului șablon pentru tema noastră părinte. În cazul nostru, rezultă „http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty”

Adăugați funcționalitate temei copilului dvs

Acum ați creat o temă pentru copii, puteți începe să adăugați câteva funcționalități suplimentare. Să vedem mai întâi cum ați proceda la editarea fișierului functions.php din tema copilului și cum funcționează acest lucru în practică.

Funcții ale temei copil.php

Spre deosebire de fișierul style.css , când puneți functions.php în tema copil, codul functions.php al temei părinte va rula în continuare. Orice adăugați în functions.php ale copilului va fi executat în plus față de conținutul functions.php al părintelui.

De exemplu, să vedem cum putem schimba textul „Citește mai mult” pentru vizualizarea postărilor:

Pasul unu: creați o categorie de postare de testare:

Pasul doi: creați două postări noi în această categorie. Să adăugăm câteva exemple de conținut. În acest moment, dacă vizitați pagina categoriei, veți vedea asta:

În acest exemplu, dorim să schimbăm textul „Continuați citirea” afișat în butonul care încarcă postarea completă.

Să facem un pas înapoi pentru a înțelege cum este afișat acest text. În WordPress, pentru a modifica o anumită funcție, folosim filtre.

În acest exemplu, pentru a obține ceea ce dorim, trebuie să personalizăm filtrul „the_content_more_link” care este introdus inițial în fișierul de bază wp-includes/post-template.php în linia 369 astfel:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Aceasta este în prezent suprascrisă de tema părinte Twentytwenty din fișierul său function.php (linia 571) de această bucată de cod:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Deci, dacă doriți să schimbați textul „Continuați citirea” din buton, acesta poate fi suprascris în functions.php ale temei copilului dumneavoastră dacă adăugați această bucată de cod:

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

Cârligul „the_content_more_link” este comun între acele fișiere, caz în care cârligul copilului prevalează întotdeauna.

Apoi reîmprospătează pagina și voilà:

Cum să personalizați șabloanele PHP

Captura de ecran de mai sus arată conținutul șablonului temei douăzeci și douăzeci pentru vizualizarea categoriei de postare. Deci, cum îi putem schimba designul sau să adăugăm/eliminăm informații folosind tema copil?

Iată cum puteți face acest lucru:

1. Găsiți fișierul php aferent
2. Copiați fișierul corespunzător în folderul cu temă copil și editați
3. Personalizează-l după cum crezi de cuviință

Prima și cea mai comună problemă aici este că trebuie să găsim ce fișier php conține rezultatul pe care vrem să îl edităm. Ceva care vă va ajuta cu siguranță să vă găsiți calea în acest sens este ierarhia șablonului WordPress.

Pe scurt, singurele fișiere pe care le are de fapt o temă WordPress sunt fișierele index.php și style.css. Fișierele și folderele suplimentare sunt de fapt fișiere numite din interiorul index.php . Sunt fragmente din ceea ce veți vedea în cele din urmă ca rezultat al fișierului index.php .

În ceea ce privește tema Twenty Twenty, dacă vedem fișierul ei index.php , putem vedea în rândul 79 că, atunci când conținutul este unul sau mai multe postări, atunci sunt folosite fișierele php din directorul template-parts/.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

În cazul nostru, va trebui să copiem fișierul content.ph p din interiorul subfolderului temei template-parts.

De asemenea, asigurați-vă că copiați numai fișierele PHP pe care intenționați să le personalizați. Nu copiați fiecare fișier PHP din tema părinte.

NOTĂ: Structura folderului ar trebui să fie aceeași în tema copil, pentru ca modificările să se reflecte pe front-end.

Deci, mai întâi creăm subfolderul „template-parts” și punem o copie a content.php în el.

Acum puteți deschide fișierul în editorul dvs. și îl puteți personaliza.

Încercați să schimbați ceva banal la început pentru a vă asigura că totul funcționează bine, de exemplu, schimbați o clasă div și reîmprospătați-vă frontend-ul pentru a verifica rezultatele.

Personalizați șablonul de categorie de postare

Avem deja două postări în categoria „categoria de testare”. Acum puteți crea un meniu cu articole „„Categorie de postare”” și îl puteți conecta la „categoria de testare”. Dacă faceți clic pe noul element de meniu, ar trebui să vedeți pagina de vizualizare a categoriei de postare.

Acum puteți modifica în continuare fișierul content.php și puteți schimba vizualizarea categoriei de postare la propriul stil. Ca un indiciu, găsiți referințele fișierelor suplimentare incluse, ca în rândul 23:

 get_template_part( 'template-parts/featured-image' );

Aceasta înseamnă că fișierul care scoate imaginea prezentată este template-parts/featured-image.php

Deci, puteți copia fișierul în directorul cu tema copilului și îl puteți edita. Fantastic!

Concluzie

O temă copil permite utilizatorilor să modifice aspectul, stilul și funcționalitatea temei părinte fără a pierde capacitatea de a actualiza tema părinte. Adesea, designerii web sunt reticenți în a actualiza tema site-ului lor, deoarece știu că, dacă o fac, vor pierde modificările făcute direct în tema părinte. Aceasta este o problemă serioasă, deoarece este la fel de important să vă mențineți tema actualizată, precum este pluginurile și nucleul WordPress. Lucrul cu o temă copil de la început elimină această problemă și vă permite să actualizați tema părinte după cum este necesar, fără teama de a suprascrie toate editările pe care le-ați făcut temei în ansamblu.