Cum să inserați alt conținut în repetitoarele de oxigen și în postări ușoare - Mega Tutorial

Elementele Oxygen Builder Repeater și Easy Posts sunt modalități rapide și ușoare de a afișa o listă de postări.

Acest ghid vă va arăta diferite moduri de inserare a „alte articole” într-o listă, indiferent de motivul de care aveți nevoie.

Pentru a evita confuzia, voi folosi „Alt articol(e)” pentru articolele care nu sunt interogate de interogarea originală Repeater/Easy Post

De ce?

Elementele Repeater/Easy Posts arată o listă de postări. Lista respectivă este restricționată de parametrii setați în interogarea folosită pentru a prelua postările.

Puteți formata aspectul fiecărui element și aspectul listei și asta este tot. Uneori, asta este tot ce aveți nevoie, dar alteori poate doriți să modificați lista pentru a include alte elemente care nu au fost preluate inițial. Alte articole precum:

• un element de îndemn (cum ar fi un link „Citiți mai multe” către întreaga arhivă) în mijlocul listei în loc de sfârșitul listei
• un text informativ care descrie elementele din listă, rupând fluxul de informații pentru a-l păstra interesant
• vreun element decorativ
• o cu totul altă listă din listă
• un banner publicitar sau alt articol promoțional

Curs Oxygen Builder - În curând!

Cursul Oxygen Builder Mastery vă va aduce de la începător la profesionist - modulele ACF, MetaBox și WooCommerce incluse.

Obțineți notificare de lansare și reducere

Cum?

Voi folosi câteva dintre exemplele de mai sus pentru a vă arăta diferitele modalități de a adăuga alte elemente la o listă.

Metodele de la super simple la complicate sunt:

• JQuery
• folosind cârligul the_posts
• editarea șabloanelor PHP (Easy Posts)
• folosind din nou cârligul the_posts , dar adăugând elemente non-Post, cum ar fi Termeni (Categorii/Taxonomii)

În exemplele mele, voi folosi o postare personalizată de tip Destinații, care este doar o listă de orașe.

Avertismente

• Celălalt element va fi un copil al elementului Repeater/Easy Post, deoarece este inserat în interiorul acestuia și va fi supus oricăror reguli de aspect stabilite de la părinte, dacă nu este suprascris, ceea ce nu voi face în exemplele mele.
• Modificările listei nu vor fi văzute în editorul Oxygen.
• Metoda Easy Post PHP Template accesează o variabilă nedocumentată care s-ar putea modifica într-o viitoare actualizare Oxygen, dar nu este probabil.

Adăugarea unui alt element în interiorul unui Repeater cu JQuery

Vom folosi JQuery pentru a insera un element la un index în interiorul Repeater/Easy Post.

Pașii

1. Creați un repetor sau o postare simplă cu o interogare personalizată cu destinații pentru tipul de postare. Setați ID-ul său la example-repeater-1 .
2. Elementele sunt titlul postării și imaginea prezentată ca fundal.
3. În acest exemplu, am folosit un aspect grilă și am setat al 4-lea element să acopere 2 coloane pe rând. Aici va fi inserat articolul meu.
4. Celălalt articol este un div cu înălțimea 100% și lățime 100% și l-am făcut un banner simplu cu un buton de îndemn la acțiune. Setați-i ID-ul la guide-ad-banner .
5. Am plasat celălalt element sub repetor, dar poate merge oriunde, deoarece scriptul îl va muta.

JQuery

Introduceți un bloc de cod în pagina dvs. și adăugați următoarele în secțiunea Javascript sau în interiorul etichetelor <script> din secțiunea PHP / HTML.

 jQuery( ( $ ) => { const allRepeaterDivs = $( "#example-repeater-1 > div" ); const insertionIndex = allRepeaterDivs.length > 2 ? 2 : allRepeaterDivs.length - 1 ; allRepeaterDivs.eq(insertionIndex).after($( "#guide-ad-banner" )[ 0 ]); });
 Limbajul codului: JavaScript ( javascript )

Iată o explicație rapidă a scenariului.

1. După ce pagina este încărcată / gata, obținem lista tuturor div -urilor care sunt copii ale #example-repeater-1 . Acestea sunt elementele individuale din repetor.
2. Calculați indexul pentru a insera acest articol, în mod ideal vreau să îl inserez după al 3-lea articol (index 2, indicii încep de la 0 aici), dar dacă numărul de articole este mai mic de 2 atunci introduceți-l la sfârșit. Desigur, știu deja dimensiunea rezultatului dvs. dinainte, așa că acest calcul este doar o precauție în cazul în care îl schimb într-o interogare în care sunt returnate mai puțin de 3 articole.
3. În cele din urmă, inserează elementul care are id-ul #guide-ad-banner după al treilea articol, făcând celălalt articol al meu al patrulea articol.

Rezultat

În partea din față, ia articolul cu id guide-ad-banner și îl inserează în al 4-lea loc al repetitorului cu id #example-repeater-1 .

Adăugarea unui alt articol în interiorul the_posts folosind cârligul_posts

Cârligul de filtru the_posts din WordPress vă oferă acces la postările care au fost preluate de o interogare. referinţă
Putem folosi acest cârlig pentru a insera alte postări care nu au fost incluse în interogarea inițială.

Pentru acest exemplu, voi insera o postare obișnuită la sfârșitul repetorului meu care a folosit o interogare pentru destinațiile mele.

Pașii

1. Creați un repetor pentru tipul de postare de destinație și stilați articolele cu titlul și imaginea prezentată ca fundal div.
2. Adăugați blocuri de cod deasupra și sub repetor.

Blocurile de cod

Primul bloc de cod

Adăugați acest cod PHP la blocul de cod care se află deasupra repetitorului.

 <?php function b58_add_cta_last ( $posts, $query ) { $cta_post = get_post( 347 ); $posts[] = $cta_post; return $posts; } add_filter( 'the_posts' , 'b58_add_cta_last' , 10 , 2 ); ?>
 Limbajul codului: HTML, XML ( xml )

Să trecem peste acest cod.

1. Folosesc get_post pentru a obține postarea cu ID-ul 347. Aceasta este postarea pe care vreau să o inserez la sfârșitul repetitorului.
2. Adaug postarea anterioară la sfârșitul matricei $posts .
3. Returnează matricea modificată.
4. Adaug funcția creată anterior la cârligul de filtru the_posts .

Al doilea bloc de cod

Adăugați următorul PHP la Blocul de cod de sub repetor

 <?php remove_filter( 'the_posts' , 'b58_add_cta_last' , 10 , 2 ); ?>
 Limbajul codului: HTML, XML ( xml )

Aceasta elimină funcția adăugată anterior ca fiind una care trebuie utilizată, se numește cârligul de filtru the_posts . Dacă nu este eliminat, va afecta alte interogări executate mai târziu.

Rezultat

Postarea pe care am primit-o cu ID 347 a fost atașată la sfârșitul repetorului. Din imagine vedeți că există o listă de destinații și la final este postarea noastră obișnuită. Așa că ar fi putut fi un articol care vorbește despre călătorii sau despre cum să rezervi sau orice altceva.

Dacă adăugați date dinamice, cum ar fi câmpuri personalizate, la elementele repetate și acea cheie meta nu există pe celălalt articol, atunci va fi goală în acel div. Deci, ar trebui să utilizați o condiție pentru a verifica dacă meta-cheia există, pentru a evita orice probleme ciudate de aspect.

Adăugarea unei alte liste în elementul Easy Posts

Aceasta va implica editarea șablonului PHP pentru elementul Easy Posts.

Pentru acest exemplu, voi crea o parte reutilizabilă care conține un repetor cu o listă de postări, apoi o inserez într-un element Easy Post care a solicitat un set diferit de postări. Nu voi folosi Destinations CPT pentru asta.

Creați o listă ca parte reutilizabilă

1. Creați o nouă parte reutilizabilă care conține 3 elemente principale, un titlu, un div pentru repetor și text.
2. Repeatorul rulează o interogare pentru tipul de postare implicit și o categorie de știri și am setat no_found_rows = true pentru a dezactiva paginarea.
3. Elementul de text din partea de sus spune doar ȘTIRI DE ULTIMITATE, iar textul de jos este un link către arhiva postărilor de știri.
4. Adăugați blocuri de cod deasupra și sub repetor, trebuie să modificăm interogarea repetorului folosind aceste blocuri de cod.

Aceasta este structura părții reutilizabile.

Blocuri de cod

Primul bloc de cod

În timp ce acest repetor există în interiorul elementului Easy Post, interogarea sa ar trebui să fie independentă de Easy Post. O modalitate prin care elementul Easy Post poate afecta lista interioară este prin paginare. Dacă cineva face clic pe pagina 2 pentru elementul Easy Post, în mod implicit lista interioară va prelua și pagina 2. Trebuie să prevenim asta.

Primul bloc de cod deasupra repetorului va adăuga o acțiune pre_get_posts care setează argumentul de interogare paginată la 1, ceea ce îl face să returneze întotdeauna prima pagină.
Dacă acest repetor se află pe o pagină de pornire statică, atunci utilizați pagina = 1. (referință: documentația WP_Query)

 <?php function b58_set_paged ( $query ) { // use paged if the repeater is on an archive page // or page other than a static home page. $query->set( "paged" , 1 ); // use page if this repeater is on a static home page. // $query->set( "page", 1 ); return $query; } add_action( 'pre_get_posts' , 'b58_set_paged' ); ?>
 Limbajul codului: HTML, XML ( xml )

Al doilea bloc de cod

Al doilea bloc de cod elimină acțiunea adăugată anterior pentru a împiedica efectuarea interogărilor viitoare.

 <?php remove_action( 'pre_get_posts' , 'b58_set_paged' ); ?>
 Limbajul codului: HTML, XML ( xml )

Deci acum repetorul va afișa întotdeauna prima pagină de rezultate.

Luați notă de ID-ul șablonului acestei piese reutilizabile, pe care îl puteți obține din bara de adrese din tabloul de bord WP.

Curs Oxygen Builder - În curând!

Cursul Oxygen Builder Mastery vă va aduce de la începător la profesionist - modulele ACF, MetaBox și WooCommerce incluse.

Obțineți notificare de lansare și reducere

Postul Ușor

1. Pe pagina actuală în care vreau să adaug postarea simplă, o adaug pe pagina respectivă și am ales presetarea Masonry.
2. Schimb interogarea la postări din altă categorie decât știri.
3. Am setat numărul de postări pe pagină la un număr impar, deoarece voi adăuga manual o postare suplimentară pentru ca grila să fie îngrijită.

Șablon PHP

În panoul de stil Easy Posts, merg la Template PHP. Aici puteți edita șablonul utilizat pentru fiecare articol din containerul Easy Post (șablonul se repetă.)

Sub șablonul implicit, lipiți următorul php

 <?php $current_index = $this ->query->current_post; // Place this element after the 3rd post item, or // the last post if the # of posts is less than 3 // this ensure this element is added even if there // are less than 3 posts on the page. $other_post_index = $this ->query->post_count < 3 ? $this ->query->post_count - 1 : 2 ; if ( $current_index == $other_post_index ) { echo "<div class='oxy-post'>" ; echo do_oxygen_elements( json_decode( get_post_meta( 321 , 'ct_builder_json' , true ), true ) ); echo "</div>" ; } ?>
 Limbajul codului: HTML, XML ( xml )

Să trecem peste acest cod.

1. În primul rând, obținem indexul articolului care este afișat în prezent și îl setăm la $current_index . În culise, Oxygen Builder trece în buclă peste fiecare articol returnat din setul de interogări din elementul Easy Posts și execută codul din șablon pentru fiecare postare din listă. Avem o modalitate de a accesa variabila de interogare cu $this->query , iar indexul articolului care se procesează în prezent este current_post în interiorul interogării.
2. Determin indexul la care ar trebui să fie inserat celălalt articol al meu. Fac acest lucru verificând numărul total de articole care vor fi procesate, dacă sunt mai puțin de 3 articole atunci voi adăuga celălalt articol ca ultimul articol din Easy Post. În caz contrar, îl voi adăuga după al 3-lea element (indicele începe de la 0), făcând din celălalt articol al meu al 4-lea element din grila Easy Post.
3. Dacă ne aflăm la index pentru a adăuga articolul nostru, atunci folosesc funcția încorporată a lui Oxygen do_oxygen_elements pentru a reda elementul reutilizabil (ID șablon 321) și pentru a-l împacheta într-un div cu clasa oxy-post .

Rezultat

Partea reutilizabilă este plasată ca al 4-lea articol în grila Easy Posts.

Lista pieselor reutilizabile poate fi derulată în interiorul listei.

Cârligul pre_get_posts din partea reutilizabilă îl face să încarce întotdeauna prima pagină de postări, astfel încât să pot merge la celelalte pagini ale Easy Post și rezultatele să rămână aceleași.

Folosind această metodă, puteți înlocui partea do_oxygen_elements din codul de mai sus și puteți scrie propriul HTML pentru a adăuga orice doriți în elementul Easy Posts.

Amintiți-vă că elementul adăugat ar trebui să respecte orice reguli de dimensionare care au fost stabilite în clasa oxy-post, altfel ar putea arunca restul listei.

Introduceți elemente Termeni în interiorul Repeater

Această metodă se bazează pe utilizarea cârligului the_posts pentru a insera legături către termeni într-o listă de postări sortate după termenii lor.

Așa că imaginați-vă o listă repetată precum:
Albastru A, Albastru B, Albastru C, Vezi toți albaștri, Roșu X, Roșu Y, Roșu Z, Vezi toate roșii etc.

Super util pe un site de comerț electronic atunci când doriți să enumerați câteva dintre articolele prezentate, apoi conectați termenul arhivă.

Această metodă implică o mulțime de pași, dar este destul de simplă.

Pașii

1. Configurați câmpuri personalizate
2. Creați un set de funcții Helper
3. Adăugați un repetor care interogează tipurile de postări pe care le dorim.
4. Modificați lista de postări preluate cu interogarea de mai sus cu cârligul the_posts

Configurați câmpuri personalizate

Acesta este un pas opțional dacă doriți să utilizați o imagine recomandată cu obiectul Termen.

În exemplul meu, folosesc o imagine Featured ca fundal pentru element. Termenii în mod implicit nu au o imagine recomandată, așa că am adăugat una la Taxonomia mea personalizată cu câmpuri personalizate avansate.

Câmpul personalizat este un câmp Imagine care returnează ID-ul.

Funcții de ajutor

Adaug următoarele funcții de ajutor în Fragmente de cod, procedați la fel cu orice metodă preferați.

function b58_create_post_from_term ( $term, $post_type= "post" ) { $post_id = -1 * $term->term_id; // negative ID, to avoid clash with a valid post $post = new stdClass(); $post->ID = $post_id; $post->post_author = 1 ; $post->post_date = current_time( "mysql" ); $post->post_date_gmt = current_time( "mysql" , 1 ); $post->post_title = $term->name; $post->post_content = $term->description; $post->post_status = "publish" ; $post->comment_status = "closed" ; $post->ping_status = "closed" ; $post->post_name = "regions/" . $term->slug; $post->post_type = $post_type; $post->filter = "raw" ; // important! $wp_post = new WP_Post( $post ); wp_cache_add( $post_id, $wp_post, "posts" ); return $wp_post; } function b58_get_the_featured_image ( $get_url, $size = 'thumbnail' ) { global $post; $post_id = $post->ID; $thumbnail_id = 0 ; if ( $post_id > 0 ) { // this is a regular post. $thumbnail_id = get_post_thumbnail_id( $post_id ); } else { // this is our fake post and it doesn't // have a thumbnail ID so we have to use the // custom field we set for this term. $pos_term_id = -1 * $post_id; $thumbnail_id = get_field( "term_background" , "term_" . $pos_term_id ); } if ( $get_url ) { return wp_get_attachment_image_url( $thumbnail_id, $size ); } return $thumbnail_id; } function b58_get_the_link () { global $post; $post_id = $post->ID; if ( $post_id > 0 ) { return get_permalink( $post_id ); } // post id is negative, we use a negative post id in our dummy post object $pos_term_id = -1 * $post_id; $term_link = get_term_link( $pos_term_id ); return $term_link; }
 Limbajul codului: PHP ( php )

Să analizăm fiecare funcție din acest fragment.

b58_create_post_from_term( $term, $post_type="post" )

Aceasta ia un obiect WP Term ( $term ) și creează o postare falsă de tip setată în $post_type.
Setează ID-ul la negativul ID-ului său real mai întâi ca un fel de „steagul” pentru a indica că acesta este un termen și nu o postare reală.
Setează alte variabile necesare pentru obiectul WP_Post, dar singura de notă pentru scopul nostru este post_title.
Apoi adaugă această postare în cache-ul wp, în cazul în care ceva solicită această postare și, deoarece are un ID negativ, va eșua dacă încearcă să meargă la baza de date.

b58_get_the_featured_image( $get_url, $size = 'thumbnail' )
 Limbajul codului: PHP ( php )

Dacă nu ați adăugat un câmp personalizat cu imagine pentru termen, omiteți această funcție.
Această funcție are 2 argumente, $get_url , care ar fi un boolean, aceasta determină dacă returnează ID-ul imaginii sau URL-ul.
Al doilea argument stabilește dimensiunea.

Mai întâi verifică dacă ID-ul postării curente este negativ, dacă este negativ atunci aceasta este o postare falsă care este un termen, altfel este o postare reală.
Dacă este o postare falsă, atunci recuperăm ID-ul imaginii cu get_field pentru ID-ul termenului respectiv.
Dacă este o postare reală, atunci folosim funcția încorporată get_post_thumbnail_id .

În al doilea rând, dacă $get_url este fals, atunci numai ID-ul este returnat. În caz contrar, folosim wp_get_attachment_image_url pentru a obține adresa URL a imaginii și pentru a o returna.

b58_get_the_link()

Aceasta returnează link-ul (permalink sau termen) pentru această postare.
Dacă ID-ul postării este negativ, atunci este o postare falsă, folosim get_term_link pentru a obține linkul, în loc de get_permalink dacă este o postare reală.

Asta este pentru funcțiile de ajutor.

Repetatorul

Adaug un repetor la pagina, cu o interogare pentru destinatii. Folosesc același aspect ca și exemplele anterioare, titlul postării centrat cu fundal pentru imaginea prezentată și linkurile div către linkul permanent al postării sau linkul termen.

Pentru fundalul imaginii prezentate, nu folosesc metoda obișnuită Imaginea prezentată în Date dinamice. Folosesc metoda PHP Function Return Value deoarece vreau să folosesc funcția mea de ajutor pentru a prelua o imagine, mai degrabă decât în ​​alt mod, deoarece articolul ar putea fi o „postare falsă” (termen.) Deci, pentru URL-ul de fundal div, folosesc PHP Valoarea de returnare a funcției cu numele funcției b58_get_the_featured_image și parametrul true . Aș putea specifica o dimensiune și aici, dar nu o fac.

Aceeași idee pentru link. Nu pot folosi datele dinamice Permalink așa cum aș face în mod normal, deoarece ar fi greșit pentru postarea falsă, așa că folosesc b58_get_the_link în schimb.

the_posts cârlig

La fel ca înainte să adaug blocuri de cod înainte și după repetor, în acest fel putem seta o funcție să fie apelată cu cârligul și să eliminam acea funcție după aceea, astfel încât să nu afecteze alte interogări.

Iată codul pentru blocul de cod deasupra repetorului

Primul bloc de cod

 <?php function b58_add_tax_links ( $posts, $query ) { // ignore if in admin if ( is_admin() ) { return $posts; } try { $terms = get_terms([ "taxonomy" => "regions" , "hide_empty" => true , "orderby" => "name" , "order" => "ASC" ]); } catch ( Exception $e) { echo 'Caught exception: ' , $e->getMessage(), "\n" ; return $posts; } if ( empty ( $terms ) ) { return $posts; } $new_posts = array (); foreach ( $terms as $term ) { for ( $i = 0 ; $i < count($posts); $i++ ) { if ( has_term( $term->slug, "regions" , $posts[$i] ) ) { $posts[$i]->post_title = $posts[$i]->post_title; $new_posts[] = $posts[$i]; } } // create a post object from this term. $term_post = b58_create_post_from_term( $term, "destinations" ); $new_posts[] = $term_post; } return $new_posts; } add_filter( 'the_posts' , 'b58_add_tax_links' , 10 , 2 ); ?>
 Limbajul codului: HTML, XML ( xml )

Să trecem peste acest cod.

1. Nu faceți nimic dacă vă aflați în tabloul de bord administrativ.
2. În caz contrar, rulez o interogare get_terms pentru taxonomia cu regions slug , sortate după nume în ordine crescătoare. Taxonomia Regiunilor este atașată tipului de postare personalizată Destinations, este unul dintre cele 7 continente unde se află destinația, deci Nairobi și Cairo sunt în Africa, Hong Kong este în Asia și așa mai departe.
3. Adăugați câteva verificări și gestionarea erorilor în cazul în care există o greșeală de scriere cu numele termenilor sau dacă nu există termeni pentru o taxonomie, atunci returnăm doar rezultatul original.
4. Dacă interogarea termenilor trece toate verificările, declară o nouă matrice goală numită $new_posts , voi adăuga postările în această matrice și o voi returna în locul matricei actuale de posturi.
5. Iterează prin matricea $terms , iar pentru fiecare termen iterez prin matricea $posts și îi găsesc pe cei care au acel termen și îl adaug la $new_posts .
6. După ce am terminat de căutat în matricea $posts , creez o postare falsă cu $term curent și îi dau un tip de postare de destinații (ar putea fi orice, într-adevăr.) Apoi adaug această postare falsă la $new_posts .

Când funcția revine, elementele matricei $new_posts ar trebui să arate astfel:
Cairo, Nairobi, Africa, Hong Kong, Asia, Londra, Europa... așa mai departe. Africa, Asia și Europa sunt postările false.

În cele din urmă, adăugăm funcția de mai sus la cârligul the_posts .

Al doilea bloc de cod

Blocul de cod de sub repetor este:

 <?php remove_filter( 'the_posts' , 'b58_add_tax_links' ); ?>
 Limbajul codului: HTML, XML ( xml )

Aceasta elimină funcția din cârlig.

Formatați lista

În acest moment, repetorul este terminat. Articolele cu aceeași taxonomie sunt grupate, iar la sfârșitul fiecărui grup există un link către arhiva Termen. Cu toate acestea, lista este puțin amestecată, totul se desfășoară într-o grilă mare. Vreau ca fiecare grup de articole și linkul lor de arhivă să fie într-un rând de unul singur și așa se face.

Configurați elementele

1. Selectați elementul repetat div sub repetor și adăugați un atribut numit data-post-id și utilizați ID-ul postării datelor dinamice pentru valoarea sa.
2. Selectați repetitorul și dați-i un ID sau doar copiați ID-ul curent, al meu este _dynamic_list-5-343 .

JQuery

În blocul de cod de sus (fie funcționează, fie chiar unul nou), adaug următorul cod la secțiunea Javascript.

 jQuery( ( $ ) => { $( "#_dynamic_list-5-343 [data-post-id^=\"-\"]" ).after( $( "<div />" ) .css({ height : "0px" , "flex-basis" : "100%" }) ) });
 Limbajul codului: JavaScript ( javascript )

Acest lucru adaugă un div după Termenii div (ID-ul postării începe cu „-”, negativ) și div flex-basis: 100% și height: 0px , ceea ce este ca și cum adăugați o întrerupere de linie în rândul repetitorului.

Si asta e.

Rezultat

Fiecare articol repetat are titlurile postărilor și imaginea prezentată ca fundal. Pentru articolele Termeni am adăugat cuvântul „Explorare” și l-am setat să fie afișat condiționat atunci când ID-ul postării este negativ (< 0).

Concluzie

Sperăm că cu aceste tehnici vă puteți condimenta repetitoarele Oxygen Builder sau Easy Posts.

Dacă aveți întrebări, puteți să-mi trimiteți un DM pe twitter @robchankh sau să lăsați un comentariu pe FB unde voi posta asta.