Tot ce trebuie să știți despre funcția get_template_part() din WordPress

Am citit odată că cel mai bun mod de a învăța programarea este citirea codului pe care l-au scris alții. La urma urmei, cea mai mare parte a timpului pe care îl petreci în calitate de dezvoltator va fi probabil să revizuiască, să șlefuiască și să repare codul pe care l-ai scris tu sau un alt dezvoltator în trecut. Tocmai de aceea îmi place atât de mult software-ul gratuit și open source: ne oferă acces la codul sursă al unor instrumente grozave și face posibil să învățăm din ele.

Dacă ești interesat de lumea WordPress (și îmi imaginez că ești, pentru că ești aici), codul sursă al WordPress Core sau al lui Gutenberg sunt două modalități foarte bune de a deveni un profesionist WordPress mai bun și de a învăța despre dezvoltarea backend și frontend.

De la prima lansare a lui Gutenberg, am împărtășit tot ce am învățat până acum despre dezvoltarea frontend. Astfel, de exemplu, am făcut o serie de postări în care v-am învățat elementele de bază ale React, am văzut cum să reutilizați componentele, am explicat cum să extindeți Gutenberg și am discutat despre știrile JavaScript pentru a scrie un cod sursă mai bun, ca să numim câteva articole. noi am scris.

Ei bine, astăzi ne vom schimba treptele și ne vom concentra din nou pe WordPress Core. De ce? Nu știu, poate pentru că anunțul următoarei teme Twenty Twenty-One care a apărut acum câteva zile este scuza perfectă pentru a face asta?. Deci haideți să vorbim despre unul dintre cele mai importante elemente atunci când creați teme în WordPress: funcția get_template_part .

Teme WordPress

În primul rând, să analizăm cum funcționează temele WordPress, nu? În esență, o temă este o colecție de fișiere care definește structura HTML și stilurile CSS pe care le va folosi site-ul nostru.

Dacă vă gândiți la scheletul oricărei pagini web, veți vedea că același model se repetă întotdeauna:

• Începem prin a deschide etichetele html și head . Acolo adăugăm scripturi, stiluri, metaetichete și așa mai departe.
• Apoi închidem eticheta head și deschidem eticheta body , care va conține conținutul vizibil al site-ului nostru.
  • De obicei, corpul unei pagini include un antet cu sigla web, un meniu etc.
  • Apoi urmează conținutul în sine, care poate fi o pagină, un articol de blog, o listă de postări, rezultatul unei căutări și așa mai departe.
  • În cele din urmă, de obicei se termină cu un subsol.
• În cele din urmă, odată ce întreaga pagină a fost redată, închidem toate etichetele și am terminat.

Deci, da, se pare că fiecare pagină web urmează o structură mai mult sau mai puțin similară: există o parte comună (adică antet, meniu, subsol...) și o zonă specifică conținutului (o postare pe blog, setul de rezultate pe care le-am obținut după o căutare). , un produs WooCommerce etc).

Deoarece programatorilor nu le place să repete codul și suntem (în general) oameni organizați, temele WordPress urmează o structură de fișiere foarte modelată. În această postare pe care am scris-o acum câteva luni, aveți o explicație bună a diferitelor fișiere dintr-o temă, dar rețineți că există:

• o foaie de stil: style.css ,
• un fișier header.php pentru a „deschide” pagina web (adică, scoateți eticheta head și, în mod normal, partea inițială a body care este comună tuturor paginilor),
• un alt fișier footer.php care „închide” pagina (adică adaugă subsolul și închide eticheta html ) și
• o mulțime de fișiere suplimentare pentru diferitele tipuri de conținut pe care dorim să le redăm.

Ce este funcția get_template_part și pentru ce este?

Primul lucru de făcut atunci când întâlniți o funcție nouă este opusul a ceea ce faceți când tatăl dvs. vă cere să-l ajutați să programeze noul său aparat de curățat Roomba: citiți documentația . Deci, să facem asta cu funcția noastră, uitându-ne la Codex:

get_template_part oferă un mecanism simplu pentru temele copil pentru a supraîncărca secțiuni reutilizabile de cod din temă.

Include partea de șablon numită pentru o temă sau, dacă este specificat un nume, va fi inclusă o parte specializată. Dacă tema nu conține fișierul {slug}.php, atunci nu va fi inclus niciun șablon.

Șablonul este inclus folosind require, nu require_once, așa că puteți include aceeași parte a șablonului de mai multe ori.

Pentru parametrul $name, dacă fișierul se numește „{slug}-special.php”, atunci specificați „special”.

Notă: get_template_part() eșuează în mod silențios

get_template_part docs la WordPress.org

Vedea? În mai puțin de un minut am obținut toate informațiile de care aveam nevoie. Acum știm că această funcție este folosită pentru a crea „părți reutilizabile” într-o temă (evitând astfel duplicarea codului) și face acest lucru în așa fel încât o temă copil să le poată adapta. Avem, de asemenea, informații despre parametrii săi, funcționarea sa internă (folosește funcția PHP require ) și ce ne putem aștepta de la ea („eșuează în tăcere”).

Din păcate, există câteva lucruri care sunt încă neclare, cum ar fi aceste fișiere {slug}.php și {slug}-special.php pe care le menționează. Ce sunt ei? Ce contin ele? Ce fac ei? La multe întrebări dificile la care se răspunde doar privind documentația, așa că este timpul să trecem la exemple.

Cum să creați șabloane parțiale în tema noastră

Să aruncăm o privire la tema Twenty Twenty-One pentru a afla dacă folosește aceste „șabloane parțiale” și, dacă o face, cum arată și ce ar trebui să faci pentru a le implementa în propria temă.

Dacă citiți postarea mea despre ierarhia fișierelor unei teme WordPress, veți ști că „ index.php este șablonul implicit pentru tema noastră. Este folosit pentru a reda orice conținut pe site-ul nostru, atâta timp cât conținutul respectiv nu are un șablon specific conceput pentru acesta.” Deoarece acesta este un șablon implicit, cred că este o idee bună să începeți de acolo. Acesta este conținutul index.php în tema Twenty Twenty-One :

 get_header(); if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content/content' ); } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. get_template_part( 'template-parts/content/content-none' ); } get_footer();

După cum puteți vedea, avem toate părțile pe care le-am comentat anterior:

• Include antetul folosind get_header .
• Redă conținutul în sine.
• Închide pagina cu get_footer .

Lucrul interesant aici, evident, este zona „conținut” din index.php . Mai exact, vedem că avem un mic control pentru a ști dacă vedem sau nu conținut valid (funcția have_posts a buclei WordPress) și, în funcție de faptul că avem sau nu, încărcăm un șablon parțial ( …/content ) sau altul ( …/content-none ).

Dacă ne uităm acum la șablonul parțial content.php , vom vedea aproximativ următoarele:

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> … the_title( … ); … </header> <div class="entry-content"> <?php the_content( … ); wp_link_pages( … ); ?> </div> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer> … </article>

Destul de simplu, nu-i așa? Tot ce avem este un șablon mic conceput pentru a reda conținut WordPress generic, cum ar fi, de exemplu, o postare pe blog. Rețineți că scheletul HTML rezultat nu este altceva decât o etichetă de article cu ​​un titlu, conținutul său și un subsol, toate folosind etichete de șablon WordPress pentru a extrage conținutul real.

De ce API-ul WordPress este minunat

Chiar dacă nu știai că există toate aceste funcții ( get_header , get_footer , sau steaua de astăzi: get_template_part ), sunt destul de sigur că ți-ai fi organizat codul urmând o abordare similară. La urma urmei, pare destul de logic să creezi un șablon pentru antet, altul pentru subsol, altul pentru conținut... și apoi să ai un fișier special sau ceva care să le lipească pe toate, nu?

Dacă ați urmat o astfel de abordare, pun pariu că fișierul dvs. index.php ar fi arătat cam așa:

 require_once 'header.php'; if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); require 'template-parts/content.php'; } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. require 'template-parts/content-none.php'; } require_once 'footer.php';

care este foarte asemănător cu cel pe care îl avem în tema Twenty Twenty-One. Deci, în acest moment, s-ar putea să vă întrebați: ce câștig folosind funcții specifice WordPress? Nu este același lucru să folosești direct un PHP require , mai ales având în vedere că, conform documentației WordPress, tocmai asta folosesc aceste funcții helper?

Ei bine, motivul principal este de fapt menționat în documentația în sine: facilitează crearea unei teme pentru copii. Astfel, dacă creezi o temă copil și folosești get_template_part , WordPress va căuta șablonul în copil și, dacă nu este, îl va folosi pe cel al părintelui.

Dar asta nu este tot! Funcțiile WordPress sunt de obicei pline de filtre și acțiuni care vă permit să adaptați rezultatul final. De exemplu, dacă ne uităm la funcția internă get_template_part din fișierul wp-includes/general-template.php :

 function get_template_part( … ) { do_action( "get_template_part_{$slug}", … ); … do_action( 'get_template_part', … ); if ( ! locate_template( … ) ) { return false; } }

vom vedea că avem câteva acțiuni pe care pluginurile și tema în sine le pot folosi. Și dacă continuăm să tragem firul, vom putea chiar să vedem cum WordPress localizează ( locate_template ) și încarcă șablonul pe care îl va folosi:

 function locate_template( $template_names, … ) { $located = ''; foreach ( $template_names as $name ) { if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in child theme break; } else if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in parent theme break; } else { … } } if ( $located ) { load_template( $located, $require_once, $args ); } return $located; }

Sper că postarea de astăzi v-a ajutat să înțelegeți puțin mai bine cum funcționează temele WordPress. De asemenea, sper că ți-a arătat cum să înveți despre WordPress citind documentația acestuia și răsfoind codul sursă. Și dacă ți-a plăcut, distribuie-l prietenilor tăi și lasă-ne un comentariu.

Imagine prezentată de Joshua Sortino pe Unsplash.