Come inserire altri contenuti nei ripetitori di ossigeno e nei post facili - Mega Tutorial

Gli elementi Ripetitore e Post facili di Oxygen Builder sono modi semplici e veloci per visualizzare un elenco di post.

Questa guida ti mostrerà diversi modi per inserire "altri elementi" all'interno di un elenco per qualsiasi motivo tu abbia bisogno.

Per evitare confusione, userò "Altri elementi" per gli elementi che non sono interrogati dalla query originale Ripetitore/Post facile

Come mai?

Gli elementi Ripetitore/Post facili mostrano un elenco di post. Tale elenco è limitato dai parametri impostati nella query utilizzata per recuperare i post.

Puoi formattare l'aspetto di ogni elemento e il layout dell'elenco, e questo è tutto. A volte è tutto ciò di cui hai bisogno, ma altre volte potresti voler modificare l'elenco per includere altri elementi che non sono stati originariamente recuperati. Altri articoli come:

• un invito all'azione (ad esempio un collegamento "Leggi di più" all'intero archivio) al centro dell'elenco anziché alla fine dell'elenco
• qualche testo informativo che descriva le voci all'interno dell'elenco, scomponendo il flusso di informazioni per mantenerlo interessante
• qualche elemento decorativo
• un intero altro elenco all'interno dell'elenco
• un banner pubblicitario o un altro articolo promozionale

Corso Oxygen Builder - Prossimamente!

Il corso Oxygen Builder Mastery ti porterà dal principiante al professionista - inclusi i moduli ACF, MetaBox e WooCommerce.

Ricevi la notifica di lancio e lo sconto

Come?

Userò alcuni degli esempi precedenti per mostrarti i vari modi per aggiungere altri elementi a un elenco.

I metodi da super semplice a complicato sono:

• JQuery
• usando l'hook the_posts
• modifica di modelli PHP (Easy Posts)
• utilizzando di nuovo l'hook the_posts ma aggiungendo elementi non Post come Termini (Categorie/Tassonomie)

Nei miei esempi userò un tipo di post personalizzato Destinazioni che è solo un elenco di città.

Avvertenze

• L'altro elemento sarà figlio dell'elemento Repeater/Easy Post perché è inserito al suo interno e sarà soggetto a eventuali regole di layout impostate dal genitore a meno che non venga sovrascritto, cosa che non farò nei miei esempi.
• Le modifiche all'elenco non verranno visualizzate nell'editor di ossigeno.
• Il metodo Easy Post PHP Template accede a una variabile non documentata che potrebbe cambiare in un futuro aggiornamento di Oxygen ma non è probabile.

Aggiunta di qualche altro elemento all'interno di un ripetitore con JQuery

Useremo JQuery per inserire un elemento in qualche indice all'interno del Repeater/Easy Post.

I passi

1. Crea un ripetitore o un post facile con una query personalizzata con destinazioni di tipo post. Imposta il suo ID su example-repeater-1 .
2. Gli elementi sono il titolo del post e l'immagine in primo piano come sfondo.
3. In questo esempio, ho usato un layout griglia e ho impostato il 4° elemento su 2 colonne nella riga. Qui è dove verrà inserito il mio articolo.
4. L'altro elemento è un div con altezza 100% e larghezza 100% e l'ho trasformato in un semplice banner con un pulsante di invito all'azione. Imposta il suo ID su guide-ad-banner .
5. Metto l'altro elemento sotto il ripetitore ma può andare ovunque poiché lo script lo sposterà.

Il JQuery

Inserisci un blocco di codice nella tua pagina e aggiungi quanto segue nella sezione Javascript o all'interno dei tag <script> nella sezione 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 ]); });
 Linguaggio del codice: JavaScript ( javascript )

Ecco una rapida spiegazione dello script.

1. Dopo che la pagina è stata caricata / pronta, otteniamo l'elenco di tutti i div che sono figli di #example-repeater-1 . Questi sono i singoli elementi nel ripetitore.
2. Calcola l'indice per inserire questo elemento, idealmente voglio inserirlo dopo il 3° elemento (indice 2, qui gli indici iniziano da 0), ma se il numero di elementi è inferiore a 2 inserirlo alla fine. Ovviamente, conosco già la dimensione del tuo risultato in anticipo, quindi questo calcolo è solo una precauzione nel caso in cui lo modifico in una query in cui vengono restituiti meno di 3 articoli.
3. Infine, inserisce l'elemento che ha l'id #guide-ad-banner dopo il 3° articolo, rendendo il mio altro articolo il 4° articolo.

Risultato

Sul front-end, prende l'elemento con id guide-ad-banner e lo inserisce nel 4° spot del ripetitore con id #example-repeater-1 .

Aggiunta di altri elementi all'interno del ripetitore utilizzando the_posts

L'hook del filtro the_posts in WordPress ti dà accesso ai post che sono stati recuperati da una query. riferimento
Possiamo usare questo hook per inserire altri post che non sono stati inclusi nella query originale.

Per questo esempio, inserirò un Post normale alla fine del mio ripetitore che utilizzava una query per le mie destinazioni.

I passi

1. Crea un ripetitore per il tipo di post di destinazione e modella gli elementi con il titolo e l'immagine in primo piano come sfondo del div.
2. Aggiungi blocchi di codice sopra e sotto il ripetitore.

I blocchi di codice

Primo blocco di codice

Aggiungi questo codice PHP al Code Block che si trova sopra il ripetitore.

 <?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 ); ?>
 Linguaggio codice: HTML, XML ( xml )

Esaminiamo questo codice.

1. Uso get_post per ottenere il post con ID 347. Questo è il post che voglio inserire alla fine del ripetitore.
2. Aggiungo il post precedente alla fine dell'array $posts .
3. Restituisce l'array modificato.
4. Aggiungo la funzione precedentemente creata the_posts del filtro the_posts.

Secondo blocco di codice

Aggiungi il seguente PHP al blocco di codice sotto il ripetitore

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

Questo rimuove la funzione aggiunta in precedenza poiché viene chiamata l'hook del filtro the_posts . Se non viene rimosso, influirà su altre query eseguite in seguito.

Risultato

Il post che abbiamo ottenuto con l'ID 347 è stato aggiunto alla fine del ripetitore. Dall'immagine si vede che c'è un elenco di destinazioni e alla fine c'è il nostro post abituale. Quindi avrebbe potuto essere un articolo che parlava di viaggi o di come prenotare, o altro.

Se aggiungi dati dinamici come campi personalizzati agli elementi ripetuti e quella chiave meta non esiste sull'altro elemento, sarà vuota in quel div. Quindi dovresti usare una condizione per verificare se la meta chiave esiste per evitare strani problemi di layout.

Aggiunta di un altro elenco all'interno dell'elemento Easy Posts

Ciò comporterà la modifica del modello PHP per l'elemento Easy Posts.

Per questo esempio, creerò una parte riutilizzabile che contiene un ripetitore con un elenco di post, quindi la inserirò in un elemento Easy Post che ha richiesto un diverso set di post. Non userò le destinazioni CPT per questo.

Crea elenco come parte riutilizzabile

1. Crea una nuova parte riutilizzabile che contenga 3 elementi principali, un'intestazione, un div per il ripetitore e il testo.
2. Il ripetitore esegue una query per il tipo di post predefinito e una categoria di notizie e ho impostato no_found_rows = true per disabilitare l'impaginazione.
3. L'elemento di testo in alto dice semplicemente BREAKING NEWS e il testo in basso è un collegamento all'archivio dei post di notizie.
4. Aggiungi blocchi di codice sopra e sotto il ripetitore, dobbiamo modificare la query del ripetitore usando questi blocchi di codice.

Questa è la struttura della parte riutilizzabile.

Blocchi di codice

Primo blocco di codice

Sebbene questo ripetitore esista all'interno dell'elemento Easy Post, la sua query dovrebbe essere indipendente dall'Easy Post. Un modo in cui l'elemento Easy Post può influenzare l'elenco interno è tramite l'impaginazione. Se qualcuno fa clic sulla pagina 2 per l'elemento Easy Post, per impostazione predefinita l'elenco interno recupererà anche la pagina 2. Dobbiamo impedirlo.

Il primo blocco di codice sopra il ripetitore aggiungerà un'azione pre_get_posts che imposta l'argomento della query paginata su 1, il che fa restituire sempre la prima pagina.
Se questo ripetitore si trova su una home page statica, utilizzare invece page = 1. (riferimento: documentazione 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' ); ?>
 Linguaggio codice: HTML, XML ( xml )

Secondo blocco di codice

Il secondo blocco di codice rimuove l'azione aggiunta in precedenza per impedire che esegua query future.

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

Quindi ora il ripetitore mostrerà sempre la prima pagina dei risultati.

Prendi nota dell'ID del modello di questa parte riutilizzabile, che puoi ottenere dalla barra degli indirizzi nel dashboard di WP.

Corso Oxygen Builder - Prossimamente!

Il corso Oxygen Builder Mastery ti porterà dal principiante al professionista - inclusi i moduli ACF, MetaBox e WooCommerce.

Ricevi la notifica di lancio e lo sconto

Il Posto Facile

1. Nella pagina effettiva in cui voglio aggiungere il post facile, lo aggiungo a quella pagina e ho scelto il preset Massoneria.
2. Cambio la query in post di qualche altra categoria diversa dalle notizie.
3. Ho impostato il numero di post per pagina su un numero dispari perché aggiungerò manualmente 1 post in più per renderlo uniforme in modo che la griglia sia pulita.

Modello PHP

Nel pannello di stile Easy Posts, vado su Template PHP. Qui è dove puoi modificare il modello utilizzato per ogni articolo nel contenitore Easy Post (il modello viene ripetuto).

Sotto il modello predefinito, incolla il seguente 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>" ; } ?>
 Linguaggio codice: HTML, XML ( xml )

Esaminiamo questo codice.

1. Innanzitutto, otteniamo l'indice dell'elemento attualmente visualizzato e lo impostiamo su $current_index . Dietro le quinte, Oxygen Builder esegue il loop su ogni elemento restituito dalla query impostata nell'elemento Easy Posts ed esegue il codice all'interno del modello per ogni post all'interno dell'elenco. Abbiamo un modo per accedere alla variabile della query con $this->query e l'indice dell'elemento attualmente in elaborazione è current_post all'interno della query.
2. Determina l'indice in cui inserire il mio altro articolo. Lo faccio controllando il numero totale di articoli che verranno elaborati, se ci sono meno di 3 articoli aggiungerò l'altro articolo come ultimo articolo di Easy Post. Altrimenti, lo aggiungerò dopo il 3° elemento (l'indice inizia da 0), rendendo il mio altro oggetto il 4° nella griglia Easy Post.
3. Se siamo all'indice per aggiungere il nostro elemento, utilizzo la funzione incorporata di Oxygen do_oxygen_elements per eseguire il rendering dell'elemento riutilizzabile (ID modello 321) e avvolgerlo in un div con la classe oxy-post .

Risultato

La parte riutilizzabile viene posizionata come 4° elemento nella griglia Easy Posts.

L'elenco delle parti riutilizzabili è scorrevole all'interno dell'elenco.

Il gancio pre_get_posts nella parte riutilizzabile fa caricare sempre la prima pagina dei post così posso andare alle altre pagine dell'Easy Post e i risultati rimangono gli stessi.

Usando questo metodo, puoi sostituire la parte do_oxygen_elements del codice sopra e scrivere il tuo HTML per aggiungere quello che vuoi all'interno dell'elemento Easy Posts.

Ricorda che il tuo elemento aggiunto dovrebbe essere conforme a qualsiasi regola di dimensionamento che è stata impostata nella classe oxy-post, altrimenti potrebbe eliminare il resto dell'elenco.

Inserisci gli elementi Termini all'interno di Ripetitore

Questo metodo si basa sull'utilizzo the_posts per inserire collegamenti a termini all'interno di un elenco di post ordinati in base ai loro termini.

Quindi immagina un elenco ripetuto come:
Blu A, Blu B, Blu C, Vedi tutti i blu, X rosso, Y rosso, Z rosso, Vedi tutti i rossi, ecc.

Super utile su un sito di e-commerce quando vuoi elencare alcuni degli articoli in primo piano, quindi collegare il termine archivio.

Questo metodo prevede molti passaggi ma è piuttosto semplice.

I passi

1. Imposta campi personalizzati
2. Crea un insieme di funzioni di supporto
3. Aggiungi un ripetitore che interroga i tipi di post che desideriamo.
4. Modifica l'elenco dei post recuperati con la query precedente con l'hook the_posts

Imposta campi personalizzati

Questo è un passaggio facoltativo se desideri utilizzare un'immagine in evidenza con il tuo oggetto Termine.

Nel mio esempio, utilizzo un'immagine in primo piano come sfondo per l'elemento. I termini per impostazione predefinita non hanno un'immagine in evidenza, quindi ne ho aggiunta una alla mia tassonomia personalizzata con campi personalizzati avanzati.

Il campo personalizzato è un campo Immagine che restituisce l'ID.

Funzioni di supporto

Aggiungo le seguenti funzioni di supporto in frammenti di codice, fai lo stesso con il metodo che preferisci.

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; }
 Linguaggio del codice: PHP ( php )

Esaminiamo ogni funzione in questo frammento.

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

Questo prende un oggetto WP Term ( $term ) e crea un post falso di tipo impostato in $post_type.
Imposta l'ID sul negativo del suo ID effettivo prima come una sorta di "flag" per indicare che si tratta di un termine e non di un post effettivo.
Imposta alcune altre variabili necessarie per l'oggetto WP_Post, ma l'unica degna di nota per il nostro scopo è il post_title.
Quindi aggiunge questo post alla cache wp, nel caso qualcosa richieda questo post e poiché ha un ID negativo, fallirà se tenta di accedere al database.

b58_get_the_featured_image( $get_url, $size = 'thumbnail' )
 Linguaggio del codice: PHP ( php )

Se non hai aggiunto un campo personalizzato con un'immagine per il termine, salta questa funzione.
Questa funzione accetta 2 argomenti, $get_url che sarebbe un booleano, questo determina se restituisce l'ID dell'immagine o l'URL.
Il 2° argomento imposta la dimensione.

Per prima cosa controlla se l'ID del post corrente è negativo, se è negativo allora questo è un post falso che è un termine, altrimenti è un post reale.
Se si tratta di un post falso, recuperiamo l'ID immagine con get_field per l'ID di quel termine.
Se si tratta di un post reale, utilizziamo la funzione incorporata get_post_thumbnail_id .

In secondo luogo, se $get_url è false, viene restituito solo l'ID. Altrimenti usiamo wp_get_attachment_image_url per ottenere l'URL dell'immagine e restituirlo.

b58_get_the_link()

Questo restituisce il link (permalink o link a termine) per questo post.
Se l'ID del post è negativo, allora è un post falso che usiamo get_term_link per ottenere il link, invece di get_permalink se è un post reale.

Questo è tutto per le funzioni di supporto.

Il Ripetitore

Aggiungo un ripetitore alla pagina, con una query per le destinazioni. Uso lo stesso layout degli esempi precedenti, il titolo del post centrato con lo sfondo dell'immagine in primo piano e i collegamenti div al permalink del post o al collegamento del termine.

Per lo sfondo dell'immagine in primo piano, non utilizzo il solito metodo dell'immagine in evidenza in Dynamic Data. Uso il metodo PHP Function Return Value perché voglio usare la mia funzione di supporto per recuperare un'immagine piuttosto che il contrario perché l'elemento potrebbe essere un "post falso" (termine). Quindi, per l'URL di sfondo div, uso il PHP Valore restituito dalla funzione con il nome della funzione b58_get_the_featured_image e il parametro true . Potrei anche specificare una taglia qui, ma non lo faccio.

Stessa idea per il collegamento. Non posso usare i dati dinamici Permalink come farei normalmente perché sarebbe sbagliato per il post falso, quindi uso invece b58_get_the_link .

the_posts agganciano

Proprio come prima di aggiungere blocchi di codice prima e dopo il ripetitore, in questo modo possiamo impostare una funzione da chiamare con l'hook e rimuovere quella funzione in seguito in modo che non influisca su altre query.

Ecco il codice per il blocco di codice sopra il ripetitore

Primo blocco di codice

 <?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 ); ?>
 Linguaggio codice: HTML, XML ( xml )

Esaminiamo questo codice.

1. Non fare nulla se nella dashboard di amministrazione.
2. In caso contrario, eseguo una query get_terms per la tassonomia con le regions slug , ordinate per nome in ordine crescente. La tassonomia delle regioni è allegata al tipo di post personalizzato Destinazioni, è uno dei 7 continenti in cui si trova la destinazione, quindi Nairobi e Il Cairo sono in Africa, Hong Kong è in Asia e così via.
3. Aggiungi alcuni controlli e gestione degli errori nel caso in cui si verifichi un errore di battitura con il nome dei termini o se non ci sono termini per una tassonomia, restituiamo semplicemente il risultato originale.
4. Se la query sui termini supera tutti i controlli, dichiara un nuovo array vuoto chiamato $new_posts , aggiungerò i post a questo array e lo restituirò invece dell'attuale array di post.
5. Scorre l'array $terms e per ogni termine scorro l'array $posts e trovo quelli che hanno quel termine e lo aggiungo a $new_posts .
6. Dopo aver finito di cercare l'array $posts , creo un post falso con l'attuale $term e gli do un tipo di post di destinazioni (potrebbe essere qualsiasi cosa, davvero). Quindi aggiungo questo post falso a $new_posts .

Quando la funzione ritorna, gli elementi dell'array $new_posts dovrebbero apparire come:
Il Cairo, Nairobi, Africa, Hong Kong, Asia, Londra, Europa... e così via. Africa, Asia ed Europa sono i post falsi.

Infine, aggiungiamo la funzione sopra the_posts .

Secondo blocco di codice

Il Blocco codice sotto il ripetitore è:

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

Questo rimuove la funzione dal gancio.

Formatta l'elenco

A questo punto il ripetitore è terminato. Gli elementi con la stessa tassonomia sono raggruppati e alla fine di ogni gruppo è presente un collegamento all'archivio dei termini. Tuttavia, l'elenco è un po' confuso, tutto scorre insieme in una grande griglia. Voglio che ogni gruppo di elementi e il relativo collegamento all'archivio siano in fila da soli, ed ecco come farlo.

Prepara gli elementi

1. Seleziona l'elemento ripetuto div sotto il ripetitore e aggiungi un attributo denominato data-post-id e usa l'ID post di dati dinamici per il suo valore.
2. Seleziona il ripetitore e forniscigli un ID o copia semplicemente l'ID corrente, il mio è _dynamic_list-5-343 .

Il JQuery

Nel blocco di codice in alto (uno funziona o anche uno nuovo), aggiungo il seguente codice alla sezione Javascript.

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

Questo aggiunge un div dopo il div dei termini (l'ID del post inizia con "-", negativo) e il div ha flex-basis: 100% e height: 0px che è come aggiungere un'interruzione di riga nella riga del ripetitore.

E questo è tutto.

Risultato

Ogni elemento ripetuto ha i rispettivi titoli dei post e l'immagine in primo piano come sfondo. Per gli elementi dei Termini ho aggiunto la parola "Esplora" e l'ho impostato in modo che venga mostrato in modo condizionale quando l'ID del post è negativo (< 0).

Conclusione

Si spera che con queste tecniche tu possa ravvivare i tuoi ripetitori Oxygen Builder o Easy Posts.

Se hai domande, puoi scrivermi in DM su twitter @robchankh o lasciare un commento su FB dove lo posterò.