Bucla WordPress explicată: ce este și cum funcționează

Bucla este o parte centrală a WordPress. Fără el, nu ați vedea conținut pe niciun site WordPress. Este responsabil să se asigure că articolele apar pe pagina blogului și în arhive, precum și conținut static pe pagini individuale.

Dacă ești un designer de teme, nu vei învăța cum să o folosești. Cu toate acestea, în calitate de utilizator ocazional de WordPress, s-ar putea să nu fiți conștient de faptul că acesta există.

Pentru a atenua acest lucru, în această postare, vom explica în detaliu bucla WordPress. Vom analiza ce este și cum funcționează și unde îl găsim în WordPress. Veți învăța, de asemenea, cum să vă creați propriul dvs. și să vedeți câteva exemple de buclă WordPress pentru a vă consolida înțelegerea acesteia.

Ce este bucla WordPress (și unde o găsești)?

Dacă ar fi să explicați pe scurt ce este bucla WordPress, este pur și simplu marcajul care preia și scoate conținut pe paginile unui site web WordPress. Indiferent dacă este o pagină statică, o postare, o pagină de blog sau o arhivă – oriunde în care WordPress extrage conținut din baza de date și îl afișează pe o pagină, bucla este implicată.

Totuși, de ce se numește buclă în primul rând?

Pentru că va rula în mod repetat. În plus, după cum veți vedea mai jos, constă literalmente dintr-o buclă PHP.

Cât de des rulează bucla WordPress?

Până nu mai rămâne nimic de afișat. Chiar și pe paginile statice, circulă prin conținutul disponibil. Cu toate acestea, în acest caz, se oprește după o trecere.

Cum arată bucla WordPress?

Pentru a fi mai clar despre ce vorbim, să ne uităm la un exemplu și să trecem peste el pas cu pas. Iată un exemplu despre cum arată o buclă simplă WordPress:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Dacă știți deja PHP sau sunteți un dezvoltator WordPress, nu ar trebui să aveți nicio problemă să îl înțelegeți. Cu toate acestea, pentru toți ceilalți, să trecem peste piesele una câte una.

• if ( have_posts() ) : — Aceasta este o declarație if care utilizează funcția have_posts(). Dacă instrucțiunile sunt comune în programare, ele spun pur și simplu „dacă se aplică următoarea condiție, continuați”. În acest caz, condiția este have_posts() , care este pur și simplu o verificare dacă există postări care ar putea fi afișate.
• while ( have_posts() ) : — Această linie este o buclă while și marchează începutul buclei WordPress. Va executa codul pe care îl conține atâta timp cât condiția sa este adevărată. Din nou, condiția este dacă WordPress are postări în magazin. Cât de des va reveni true este determinat de numărul de postări setat în setările WordPress din interfața de administrare.
• the_post(); — Acesta este codul pe care bucla îl execută. Este o funcție WordPress care apelează toate datele disponibile pentru următoarea postare și le salvează pentru a le pregăti pentru afișare. Pentru asta, avem o mulțime de etichete șablon despre care vom vorbi mai jos.
• // Display content here — Aici plasăm marcajul care determină ce parte a conținutului să fie afișată și în ce mod. De obicei, este o combinație de PHP și HTML. Nu îl arătăm aici pentru că este mai complex și îl vom analiza mai târziu.
• endwhile; — Piesa de cod care închide bucla while după ce a făcut ceea ce trebuie să facă.
• endif; — La fel ca mai sus, dar pentru declarația if .

Deci, practic structura este următoarea: verificați dacă există postări, apoi extrageți datele necesare din baza de date și afișați-le într-un mod prestabilit, repetați acest lucru atâta timp cât există postări valide de afișat.

Sintaxă alternativă

Un lucru rapid, veți vedea, de asemenea, uneori bucla scrisă astfel:

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

Acesta este exact același cu exemplul de mai sus, doar într-o sintaxă PHP alternativă. Pe care îl folosiți depinde cu adevărat de dvs. De dragul coerenței, vom continua cu prima variantă.

Unde să găsiți bucla WordPress?

Faptul că bucla este întotdeauna la lucru ori de câte ori apare conținut pe o pagină răspunde deja unde se găsește bucla WordPress. Răspunsurile se află în fiecare fișier șablon al temei dvs. care afișează conținut.

Alternativ, în funcție de arhitectura temei, ar putea fi și într-o parte de șablon. Acestea sunt fișiere șablon care conțin bucăți de cod utilizate frecvent (cum ar fi bucla). Acestea pot fi extrase în alte fișiere în loc să reutilizați același fragment de cod de fiecare dată.

De exemplu, dacă deschideți fișierul page.php al temei Twenty Twenty-One, puteți vedea că, aici, bucla este împărțită în părți. În timp ce începe în interiorul fișierului în sine, secțiunea care determină cum să iasă datele se află într-o parte a șablonului numită content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

Ierarhia șablonului WordPress determină ce fișier folosește sistemul pentru a afișa ce fel de pagină și fiecare fișier trebuie să conțină fie o buclă, fie o referință la locul în care îl puteți găsi.

De asemenea, înseamnă că bucla poate arăta diferit în fișierele individuale, adică pe pagini diferite. De exemplu, într-o arhivă s-ar putea să doriți să afișați numai fragmente de postări, în timp ce pe pagina principală a blogului, s-ar putea să doriți să afișați postări întregi (până la linkul „citește mai multe”). Pentru asta, aveți nevoie de diferite tipuri de marcare, motiv pentru care bucla nu ar arăta la fel în interiorul home.php și archive.php .

Cum se creează o buclă

Pentru a crea o buclă, puteți începe practic cu codul simplu pe care l-am disecat mai sus. Aceasta este într-adevăr bucla standard. Iată-l din nou:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Partea dificilă este ceea ce am omis: partea care determină afișarea conținutului. Pentru asta, așa cum am menționat, utilizați de obicei o combinație de HTML și PHP. De exemplu, iată cum ați spune WordPress să scuipe postarea înfășurată într-o etichetă <article> cu o clasă și un id personalizat, titlul ca titlu h1 , plus imaginea și conținutul prezentate.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Un lucru care iese în evidență mai sus este că există o mulțime de etichete scrise cu caractere de subliniere. Acestea sunt etichete de șablon WordPress, care oferă comenzi rapide pentru apelarea părților comune ale conținutului. Aici, folosim the_title() pentru afișarea titlului postării, the_post_thumbnail() pentru imaginea prezentată și the_content() pentru conținutul principal. Există mult mai multe, cum ar fi the_excerpt() sau the_category() . Puteți găsi o listă de opțiuni aici.

Un alt lucru important pentru bucla WordPress sunt etichetele condiționate. Vedeți că sunt folosite foarte mult în marcajul legat de bucle pentru a afișa ceva numai în anumite condiții. De exemplu, este foarte obișnuit să the_post_thumbnail() într-o declarație condiționată pentru a împiedica WordPress să încerce să-l afișeze pe pagină atunci când nu există nicio imagine prezentată.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

Avem mai multe exemple mai jos. Pentru a afla mai multe despre etichetele condiționate, consultați Codexul WordPress.

Exemple de buclă WordPress

Ca parte finală a acestui tutorial, vom trece peste câteva exemple despre cum să folosiți bucla WordPress.

Tema Douăzeci și douăzeci și unu

Când ne uităm la tema Twenty Twenty-One, primul lucru care iese în evidență este utilizarea intensivă a părților șablonului. Toate fișierele șablon standard precum page.php , single.php și chiar index.php pornesc bucla în interiorul fișierului, dar apoi folosesc get_template_part pentru a descărca conținutul afișat în alte fișiere. În acest caz, acesta este content-page.php , content-single.php și, respectiv, content.php . Iată o versiune prescurtată a single.php ca exemplu:

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Acest lucru este vizibil și în alte fișiere. De exemplu, antetul și subsolul au și propriile părți de șablon. Puteți vedea referințe la cei din interiorul buclei în alte locuri. De exemplu, dacă te uiți la content-single.php , poți vedea un apel către partea de șablon author-bio.php la sfârșit.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

În afară de asta, este relativ standard echitabil:

1. Deschideți un element HTML <article> cu un id și o clasă personalizate
2. Creați elementul antet articol care scoate titlul înfășurat într-un titlu h1 și afișează imaginea prezentată cu o funcție personalizată pentru Twenty Twenty-One
3. Continuați cu un element entry-content care conține eticheta șablonului the_content() pentru a scoate conținut dintr-o singură postare
4. Includeți marcaj pentru paginare și subsolul de intrare cu o altă funcție Twenty Twenty-One pentru afișarea meta informațiilor postării
5. În cele din urmă, există apelul menționat mai sus către biografia autorului în propria parte a șablonului

Tema implicită WordPress Twenty Ten

Dacă reveniți la prima temă implicită WordPress, Twenty Ten, și utilizați depozitul subversiune pentru a căuta fișiere din versiunea 1.0, puteți vedea cum a evoluat de-a lungul timpului gestionarea buclei și a fișierelor șablon. Pe atunci, multe dintre fișierele șablon conțineau propriile bucle complete WordPress, în loc să le externalizeze către părți de șablon reutilizabile. Puteți vedea acest lucru clar în page.php a temei.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

Același lucru este vizibil și în onecolumn-page.php , care este un fișier care controlează un șablon de pagină personalizat pe care îl oferă tema. Ceea ce este, de asemenea, de remarcat este că folosește apelul mai vechi la buclă, care a fost scris pe o singură linie atunci.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

În temele moderne, cel mai frecvent îl vedeți întins pe mai multe linii, așa cum sa văzut mai devreme, pentru a crește lizibilitatea codului.

Tema Twenty Ten are, de asemenea, un fișier loop.php independent care este mult prea lung pentru a fi inclus aici fără a depăși limita mea de cuvinte. Este împărțit în trei părți care controlează afișarea mai multor tipuri de postări (galerie de imagini, postări din categoria Aside , toate celelalte postări). Fiecare dintre acestea este defalcat în continuare în declarații if și else pentru a ține cont de cazuri diferite, cum ar fi arhiva și paginile de căutare.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

Întregul lucru conține o logică destul de complicată, motiv pentru care iese destul de lung și complicat. Mă bucur că avem alte modalități de a le gestiona astăzi și vă recomand să aruncați o privire la el pentru a vedea un exemplu de buclă WordPress pe care nu doriți să-l emulați.

Apropo, dacă credeți că sunt prea dur cu dezvoltatorii de atunci, fiți siguri că sunt de acord cu evaluarea mea. Uită-te doar la comentariul dezvoltatorului unde loop.php închide bucla.

 <?php endwhile; // End the loop. Whew. ?>

Blocul de buclă de interogări WordPress

S-ar putea să nu știți, deoarece este o caracteristică Gutenberg relativ nouă, dar editorul de blocuri (și prin extensie, editarea întregului site) are acum și un bloc care conține o buclă WordPress. Se numește Query Loop Block și îl poți adăuga pe site-ul tău ca orice alt bloc. Cel mai simplu mod este să adăugați o bară oblică și să-i introduceți numele ca /queryloop . Apăsați enter și va apărea pe pagină.

Blocul permite crearea unei bucle PHP fără a fi nevoie să scrieți cod. Acesta va afișa automat cele mai recente postări de pe site-ul dvs. În plus, are mai multe opțiuni de personalizare. În primul rând, blocul vine cu o serie de aspecte prestabilite. Puteți fie să le parcurgeți prin intermediul săgeților, fie să faceți clic pe opțiunea Grilă pentru a le vedea pe toate simultan.

Alegeți ceea ce doriți sau faceți clic pe Alegeți dacă ați ajuns la opțiunea preferată pentru a finaliza alegerea. Este important de remarcat faptul că machetele constau din modele de blocuri, deci grupuri prestabilite de blocuri individuale. Acest lucru înseamnă, de asemenea, că le puteți aranja diferit după cum este necesar, sunt încă blocuri normale. Utilizați săgețile sau faceți clic și mențineți apăsată opțiunea Trageți pentru a le muta unde doriți.

În plus, fiecare bloc (și adesea fiecare grup de blocuri) vine și cu opțiunile lor obișnuite în ecranul editorului principal și în bara laterală. Aici, le puteți modifica culorile, dimensiunile fonturilor, formatele și multe altele.

Odată mulțumit, dacă publicați sau previzualizați pagina, veți vedea bucla de interogare personalizată WordPress care apare pe ea. Deci, chiar dacă nu sunteți un dezvoltator WordPress și nu înțelegeți PHP, puteți profita de ceea ce are de oferit bucla.

Bucla WordPress explicată pe scurt

Bucla este ceva cu care orice profesionist WordPress trebuie să fie familiarizat. Cu toate acestea, chiar dacă sunteți un utilizator mai ocazional, nu este o idee rea să înțelegeți cum funcționează. Ar putea fi mai ușor să depanați problemele sau să creați șabloane de pagină personalizate, dacă doriți.

În această postare, am analizat ce este bucla, unde se află și am defalcat-o în detaliu. Am văzut, de asemenea, cum vă puteți crea propria buclă și exemple din temele implicite și din noul bloc de interogări. Până acum, știți tot ce aveți nevoie pentru a crea și personaliza bucla WordPress.

Care este utilizarea ta preferată a buclei WordPress? Vă rugăm să vă împărtășiți gândurile în comentariile de mai jos!

Imagini: Jonny Gios/Unsplash, Tine Ivanic/Unsplash