So fügen Sie andere Inhalte in Oxygen Repeater und einfache Posts ein - Mega-Tutorial

Die Repeater- und Easy Posts-Elemente von Oxygen Builder sind schnelle und einfache Möglichkeiten, eine Liste von Posts anzuzeigen.

Diese Anleitung zeigt Ihnen verschiedene Möglichkeiten zum Einfügen von "anderen Elementen" in eine Liste, aus welchen Gründen auch immer Sie es benötigen.

Um Verwirrung zu vermeiden, verwende ich "Andere Artikel" für Artikel, die nicht von der ursprünglichen Repeater/Easy Post-Abfrage abgefragt werden

Wieso den?

Repeater/Easy Posts-Elemente zeigen eine Liste von Posts. Diese Liste wird durch die Parameter eingeschränkt, die in der Abfrage festgelegt sind, die zum Abrufen der Posts verwendet wird.

Sie können das Erscheinungsbild jedes Elements und das Layout der Liste formatieren, und das ist alles. Manchmal ist das alles, was Sie brauchen, aber manchmal möchten Sie die Liste ändern, um andere Elemente einzuschließen, die ursprünglich nicht abgerufen wurden. Andere Artikel wie:

• ein Call-to-Action-Element (z. B. ein „Weiterlesen“-Link zum gesamten Archiv) in der Mitte der Liste statt am Ende der Liste
• ein informativer Text, der die Elemente in der Liste beschreibt und den Informationsfluss aufbricht, um ihn interessant zu halten
• ein dekoratives Element
• eine ganz andere Liste innerhalb der Liste
• ein Werbebanner oder ein anderer Werbeartikel

Sauerstoff-Builder-Kurs - Demnächst!

Der Oxygen Builder Mastery-Kurs bringt Sie vom Anfänger zum Profi – ACF-, MetaBox- und WooCommerce-Module inklusive.

Erhalten Sie Startbenachrichtigung und Rabatt

Wie?

Ich werde einige der obigen Beispiele verwenden, um Ihnen die verschiedenen Möglichkeiten zu zeigen, andere Elemente zu einer Liste hinzuzufügen.

Die Methoden von supereinfach bis kompliziert sind:

• JQuery
• mit dem the_posts Hook
• Bearbeiten von PHP-Vorlagen (Easy Posts)
• Erneutes Verwenden des the_posts -Hooks, aber Hinzufügen von Nicht-Post-Elementen wie Begriffen (Kategorien/Taxonomien)

In meinen Beispielen werde ich einen benutzerdefinierten Beitragstyp „Ziele“ verwenden, der nur eine Liste von Städten ist.

Vorbehalte

• Das andere Element ist ein untergeordnetes Element des Repeater/Easy Post-Elements, da es darin eingefügt wird und allen Layoutregeln des übergeordneten Elements unterliegt, sofern es nicht überschrieben wird, was ich in meinen Beispielen nicht tun werde.
• Die Listenänderungen werden im Oxygen-Editor nicht angezeigt.
• Die Easy Post PHP Template-Methode greift auf eine nicht dokumentierte Variable zu, die sich in einem zukünftigen Oxygen-Update ändern könnte, aber wahrscheinlich nicht.

Hinzufügen eines anderen Elements innerhalb eines Repeaters mit JQuery

Wir verwenden JQuery, um ein Element an einem Index innerhalb des Repeater/Easy Post einzufügen.

Die Schritte

1. Erstellen Sie einen Repeater oder einfachen Post mit einer benutzerdefinierten Abfrage mit Posttypzielen. Setzen Sie seine ID auf example-repeater-1 .
2. Die Elemente sind der Beitragstitel und das vorgestellte Bild als Hintergrund.
3. In diesem Beispiel habe ich ein Rasterlayout verwendet und das vierte Element so eingestellt, dass es sich über 2 Spalten in der Zeile erstreckt. Hier wird mein Artikel eingefügt.
4. Das andere Element ist ein div mit einer Höhe von 100 % und einer Breite von 100 %, und ich habe es zu einem einfachen Banner mit einem Call-to-Action-Button gemacht. Setzen Sie seine ID auf guide-ad-banner .
5. Ich platziere das andere Element unter dem Repeater, aber es kann überall hingehen, da das Skript es verschieben wird.

Die JQuery

Fügen Sie einen Code-Block in Ihre Seite ein und fügen Sie Folgendes zum Abschnitt „JavaScript“ oder innerhalb von <script> -Tags im Abschnitt „PHP/HTML“ hinzu.

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

Hier ist eine kurze Erklärung des Skripts.

1. Nachdem die Seite geladen / bereit ist, erhalten wir die Liste aller div s, die Kinder von #example-repeater-1 sind. Dies sind die einzelnen Elemente im Repeater.
2. Berechnen Sie den Index zum Einfügen dieses Elements. Idealerweise möchte ich es nach dem 3. Element einfügen (Index 2, Indizes beginnen hier bei 0), aber wenn die Anzahl der Elemente kleiner als 2 ist, fügen Sie es am Ende ein. Natürlich kenne ich die Größe Ihres Ergebnisses bereits im Voraus, daher ist diese Berechnung nur eine Vorsichtsmaßnahme, falls ich sie in eine Abfrage ändere, bei der weniger als 3 Elemente zurückgegeben werden.
3. Schließlich fügt es das Element mit der ID #guide-ad-banner nach dem 3. Element ein, wodurch mein anderes Element zum 4. Element wird.

Ergebnis

Am vorderen Ende nimmt es den Artikel mit der ID guide-ad-banner und fügt ihn an der vierten Stelle des Repeaters mit der ID #example-repeater-1 ein.

Hinzufügen eines anderen Elements innerhalb von Repeater mit the_posts Hook

Der Filter-Hook the_posts in WordPress gibt Ihnen Zugriff auf die Beiträge, die durch eine Abfrage abgerufen wurden. Hinweis
Wir können diesen Hook verwenden, um andere Beiträge einzufügen, die nicht in der ursprünglichen Abfrage enthalten waren.

Für dieses Beispiel füge ich einen regulären Post am Ende meines Repeaters ein, der eine Abfrage für meine Ziele verwendet.

Die Schritte

1. Erstellen Sie einen Repeater für den Posttyp des Ziels und gestalten Sie die Elemente mit dem Titel und dem vorgestellten Bild als div-Hintergrund.
2. Fügen Sie Code-Blöcke über und unter dem Repeater hinzu.

Die Codeblöcke

Erster Codeblock

Fügen Sie diesen PHP-Code dem Code-Block hinzu, der sich über dem Repeater befindet.

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

Lassen Sie uns diesen Code durchgehen.

1. Ich verwende get_post , um den Beitrag mit der ID 347 zu erhalten. Dies ist der Beitrag, den ich am Ende des Repeaters einfügen möchte.
2. Ich füge den vorherigen Post an das Ende des $posts Arrays an.
3. Gibt das geänderte Array zurück.
4. Ich füge die zuvor erstellte Funktion dem Filter-Hook the_posts .

Zweiter Codeblock

Fügen Sie das folgende PHP zum Codeblock unter dem Repeater hinzu

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

Dadurch wird die zuvor hinzugefügte Funktion entfernt, da eine zu verwendende the_posts -Filter-Hook aufgerufen wird. Wenn es nicht entfernt wird, wirkt es sich auf andere später ausgeführte Abfragen aus.

Ergebnis

Die Post, die wir mit der ID 347 erhalten haben, wurde an das Ende des Repeaters angehängt. Auf dem Bild sehen Sie, dass es eine Liste mit Reisezielen gibt und am Ende unsere reguläre Post. Es hätte also ein Artikel sein können, in dem es ums Reisen geht oder wie man bucht oder was auch immer.

Wenn Sie den wiederholten Elementen dynamische Daten wie benutzerdefinierte Felder hinzufügen und dieser Metaschlüssel für das andere Element nicht vorhanden ist, ist er in diesem div leer. Sie sollten also eine Bedingung verwenden, um zu prüfen, ob der Metaschlüssel vorhanden ist, um seltsame Layoutprobleme zu vermeiden.

Hinzufügen einer weiteren Liste innerhalb des Easy Posts-Elements

Dazu gehört die Bearbeitung der PHP-Vorlage für das Easy Posts-Element.

Für dieses Beispiel erstelle ich einen wiederverwendbaren Teil, der einen Repeater mit einer Liste von Posts enthält, und füge ihn dann in ein Easy Post-Element ein, das nach einem anderen Satz von Posts abgefragt hat. Ich werde dafür nicht den Destinations CPT verwenden.

Liste als wiederverwendbares Teil erstellen

1. Erstellen Sie einen neuen wiederverwendbaren Teil, der 3 Hauptelemente enthält, eine Überschrift, ein div für den Repeater und Text.
2. Der Repeater führt eine Abfrage für den Standard-Beitragstyp und eine Nachrichtenkategorie aus, und ich setze no_found_rows = true, um die Paginierung zu deaktivieren.
3. Das obere Textelement sagt nur BREAKING NEWS und der untere Text ist ein Link zum News-Post-Archiv.
4. Fügen Sie Codeblöcke über und unter dem Repeater hinzu, wir müssen die Repeaterabfrage mit diesen Codeblöcken ändern.

Das ist die Struktur des wiederverwendbaren Teils.

Code-Blöcke

Erster Codeblock

Während dieser Repeater innerhalb des Easy Post-Elements vorhanden ist, sollte seine Abfrage unabhängig von Easy Post sein. Eine Möglichkeit, wie das Easy Post-Element die innere Liste beeinflussen kann, ist die Paginierung. Wenn jemand auf Seite 2 für das Easy Post-Element klickt, ruft die innere Liste standardmäßig auch Seite 2 ab. Das müssen wir verhindern.

Der erste Codeblock über dem Repeater fügt eine pre_get_posts Aktion hinzu, die das ausgelagerte Abfrageargument auf 1 setzt, wodurch immer die erste Seite zurückgegeben wird.
Wenn sich dieser Repeater auf einer statischen Homepage befindet, verwenden Sie stattdessen die Seite = 1. (Referenz: WP_Query-Dokumentation)

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

Zweiter Codeblock

Der zweite Codeblock entfernt die zuvor hinzugefügte Aktion, um zu verhindern, dass sie zukünftige Abfragen beeinflusst.

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

Jetzt zeigt der Repeater also immer die erste Ergebnisseite an.

Notieren Sie sich die Vorlagen-ID dieses wiederverwendbaren Teils, die Sie aus der Adressleiste im WP-Dashboard erhalten.

Sauerstoff-Builder-Kurs - Demnächst!

Der Oxygen Builder Mastery-Kurs bringt Sie vom Anfänger zum Profi – ACF-, MetaBox- und WooCommerce-Module inklusive.

Erhalten Sie Startbenachrichtigung und Rabatt

Die einfache Post

1. Auf der eigentlichen Seite, auf der ich den einfachen Beitrag hinzufügen möchte, füge ich ihn dieser Seite hinzu und wähle die Mauerwerk-Voreinstellung aus.
2. Ich ändere die Abfrage auf Beiträge einer anderen Kategorie als Nachrichten.
3. Ich habe die Anzahl der Posts pro Seite auf eine ungerade Zahl gesetzt, weil ich manuell 1 zusätzlichen Post hinzufügen werde, um es gleichmäßig zu machen, damit das Raster ordentlich ist.

Template-PHP

Im Style-Panel von Easy Posts gehe ich zu Template PHP. Hier können Sie die Vorlage bearbeiten, die für jeden Artikel im Easy Post-Container verwendet wird (die Vorlage wird wiederholt).

Fügen Sie unter der Standardvorlage die folgende 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>" ; } ?>
 Codesprache: HTML, XML ( xml )

Lassen Sie uns diesen Code durchgehen.

1. Zuerst erhalten wir den Index des aktuell angezeigten Elements und setzen ihn auf $current_index . Hinter den Kulissen durchläuft Oxygen Builder jedes Element, das aus dem Abfragesatz im Easy Posts-Element zurückgegeben wird, und führt den Code in der Vorlage für jeden Beitrag in der Liste aus. Wir haben eine Möglichkeit, mit $this->query auf die Abfragevariable zuzugreifen, und der Index des aktuell verarbeiteten Elements ist current_post innerhalb der Abfrage.
2. Ich bestimme den Index, an dem mein anderes Element eingefügt werden soll. Ich tue dies, indem ich die Gesamtzahl der Artikel überprüfe, die verarbeitet werden. Wenn es weniger als 3 Artikel gibt, füge ich den anderen Artikel als letzten Artikel der Easy Post hinzu. Andernfalls füge ich es nach dem 3. Element hinzu (der Index beginnt bei 0), wodurch mein anderes Element das 4. Element im Easy Post-Raster wird.
3. Wenn wir am Index sind, um unser Element hinzuzufügen, verwende ich die integrierte Funktion do_oxygen_elements von Oxygen, um das wiederverwendbare Element (Vorlagen-ID 321) zu rendern und es in ein div mit der Klasse oxy-post einzuschließen.

Ergebnis

Das wiederverwendbare Teil wird als 4. Element im Easy Posts-Raster platziert.

Die Liste der wiederverwendbaren Teile kann innerhalb der Liste gescrollt werden.

Der Hook pre_get_posts im wiederverwendbaren Teil sorgt dafür, dass immer die erste Seite der Posts geladen wird, sodass ich zu den anderen Seiten von Easy Post gehen kann und die Ergebnisse gleich bleiben.

Mit dieser Methode können Sie den do_oxygen_elements Teil des obigen Codes ersetzen und Ihren eigenen HTML-Code schreiben, um alles, was Sie wollen, in das Easy Posts-Element einzufügen.

Denken Sie daran, dass Ihr hinzugefügtes Element den Größenregeln entsprechen sollte, die in der oxy-post-Klasse festgelegt wurden, da es sonst den Rest der Liste verwerfen kann.

Term-Elemente in Repeater einfügen

Diese Methode baut auf der Verwendung des the_posts auf, um Links zu Begriffen in eine Liste von Beiträgen einzufügen, die nach ihren Begriffen sortiert sind.

Stellen Sie sich also eine wiederholte Liste vor wie:
Blau A, Blau B, Blau C, Alle Blautöne anzeigen, Rot X, Rot Y, Rot Z, Alle Rottöne anzeigen usw.

Super hilfreich auf einer E-Commerce-Website, wenn Sie einige der vorgestellten Artikel auflisten und dann das Begriffsarchiv verlinken möchten.

Diese Methode umfasst viele Schritte, ist aber ziemlich einfach.

Die Schritte

1. Richten Sie benutzerdefinierte Felder ein
2. Erstellen Sie eine Reihe von Hilfsfunktionen
3. Fügen Sie einen Repeater hinzu, der die gewünschten Arten von Beiträgen abfragt.
4. Ändern Sie die Liste der Beiträge, die mit der obigen Abfrage abgerufen wurden, mit dem the_posts Hook

Richten Sie benutzerdefinierte Felder ein

Dies ist ein optionaler Schritt, wenn Sie ein ausgewähltes Bild mit Ihrem Begriffsobjekt verwenden möchten.

In meinem Beispiel verwende ich ein hervorgehobenes Bild als Hintergrund für das Element. Begriffe haben standardmäßig kein hervorgehobenes Bild, daher habe ich meiner benutzerdefinierten Taxonomie mit erweiterten benutzerdefinierten Feldern eines hinzugefügt.

Das benutzerdefinierte Feld ist ein Bildfeld, das die ID zurückgibt.

Hilfsfunktionen

Ich füge die folgenden Hilfsfunktionen in Code-Snippets hinzu, tun Sie dasselbe mit der von Ihnen bevorzugten Methode.

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; }
 Codesprache: PHP ( php )

Lassen Sie uns jede Funktion in diesem Snippet überprüfen.

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

Dies nimmt ein WP Term-Objekt ( $term ) und erstellt einen gefälschten Beitrag des in $post_type festgelegten Typs.
Es setzt die ID zuerst auf das Negative seiner tatsächlichen ID als eine Art "Flag", um anzuzeigen, dass es sich um einen Begriff und nicht um einen tatsächlichen Beitrag handelt.
Es setzt einige andere Variablen, die für das WP_Post-Objekt notwendig sind, aber die einzige, die für unseren Zweck von Bedeutung ist, ist post_title.
Dann fügt es diesen Beitrag dem wp-Cache hinzu, falls etwas diesen Beitrag anfordert und da er eine negative ID hat, schlägt er fehl, wenn er versucht, zur Datenbank zu gehen.

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

Wenn Sie kein benutzerdefiniertes Feld mit Bild für den Begriff hinzugefügt haben, überspringen Sie diese Funktion.
Diese Funktion benötigt 2 Argumente, $get_url , was ein boolescher Wert wäre, dies bestimmt, ob sie die ID des Bildes oder die URL zurückgibt.
Das 2. Argument legt die Größe fest.

Zuerst wird überprüft, ob die ID des aktuellen Beitrags negativ ist. Wenn sie negativ ist, handelt es sich um einen gefälschten Beitrag, der ein Begriff ist, andernfalls handelt es sich um einen echten Beitrag.
Wenn es sich um einen gefälschten Beitrag handelt, rufen wir die Bild-ID mit get_field für die ID dieses Begriffs ab.
Wenn es sich um einen echten Beitrag handelt, verwenden wir die eingebaute get_post_thumbnail_id -Funktion.

Zweitens, wenn $get_url falsch ist, wird nur die ID zurückgegeben. Andernfalls verwenden wir wp_get_attachment_image_url , um die Bild-URL abzurufen und diese zurückzugeben.

b58_get_the_link()

Dies gibt den Link (Permalink oder Begriffslink) für diesen Beitrag zurück.
Wenn die Beitrags-ID negativ ist, handelt es sich um einen gefälschten Beitrag. Wir verwenden get_term_link , um den Link abzurufen, anstelle von get_permalink , wenn es sich um einen echten Beitrag handelt.

Das war's für die Hilfsfunktionen.

Der Repeater

Ich füge der Seite einen Repeater hinzu, mit einer Abfrage nach Zielen. Ich verwende das gleiche Layout wie in den vorherigen Beispielen, zentrierten Beitragstitel mit hervorgehobenem Bildhintergrund und die div-Links entweder zum Post-Permalink oder zum Begriffslink.

Für den Hintergrund des vorgestellten Bildes verwende ich nicht die übliche Featured Image-Methode in Dynamic Data. Ich verwende die Rückgabewertmethode der PHP-Funktion, weil ich meine Hilfsfunktion verwenden möchte, um ein Bild abzurufen, und nicht umgekehrt, da das Element möglicherweise ein "gefälschter Beitrag" (Begriff) ist. Daher verwende ich für die div-Hintergrund-URL das PHP Funktionsrückgabewert mit dem Funktionsnamen b58_get_the_featured_image und dem Parameter true . Ich könnte hier auch eine Größe angeben, tue ich aber nicht.

Gleiche Idee für den Link. Ich kann die dynamischen Permalink-Daten nicht so verwenden, wie ich es normalerweise tun würde, da sie für den gefälschten Beitrag falsch wären, also verwende ich stattdessen b58_get_the_link .

the_posts Haken

Genau wie vor dem Hinzufügen von Codeblöcken vor und nach dem Repeater können wir auf diese Weise eine Funktion festlegen, die mit dem Hook aufgerufen werden soll, und diese Funktion anschließend entfernen, damit sie andere Abfragen nicht beeinflusst.

Hier ist der Code für den Codeblock über dem Repeater

Erster Codeblock

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

Lassen Sie uns diesen Code durchgehen.

1. Nichts tun, wenn im Admin-Dashboard.
2. Andernfalls führe ich eine get_terms Abfrage für die Taxonomie mit den Slug- regions aus, sortiert nach Namen in aufsteigender Reihenfolge. Die Taxonomie „Regionen“ ist an den benutzerdefinierten Beitragstyp „Zielorte“ angehängt, es ist einer der 7 Kontinente, auf denen sich das Ziel befindet, also liegen Nairobi und Kairo in Afrika, Hongkong in Asien und so weiter.
3. Fügen Sie einige Überprüfungen und Fehlerbehandlung hinzu, falls es einen Tippfehler mit dem Begriffsnamen gibt oder wenn es keine Begriffe für eine Taxonomie gibt, dann geben wir einfach das ursprüngliche Ergebnis zurück.
4. Wenn die Begriffsabfrage alle Prüfungen besteht, deklarieren Sie ein neues leeres Array namens $new_posts . Ich werde die Beiträge in dieses Array einfügen und es anstelle des tatsächlichen Beitrags-Arrays zurückgeben.
5. Durchlaufen Sie das Array $terms , und für jeden Begriff durchlaufe ich das Array $posts und finde diejenigen, die diesen Begriff enthalten, und hänge ihn an $new_posts an.
6. Nachdem ich das Array $posts durchsucht habe, erstelle ich einen gefälschten Post mit dem aktuellen $term und gebe ihm einen Post-Typ von Zielen (es könnte wirklich alles sein). Dann füge ich diesen gefälschten Post zu $new_posts .

Wenn die Funktion zurückkehrt, sollten die $new_posts Array-Elemente wie folgt aussehen:
Kairo, Nairobi, Afrika, Hongkong, Asien, London, Europa … und so weiter. Afrika, Asien und Europa sind die gefälschten Beiträge.

Schließlich fügen wir die obige Funktion zum Hook the_posts .

Zweiter Codeblock

Der Codeblock unter dem Repeater lautet:

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

Dadurch wird die Funktion aus dem Hook entfernt.

Formatieren Sie die Liste

An diesem Punkt ist der Repeater fertig. Elemente mit derselben Taxonomie werden gruppiert, und am Ende jeder Gruppe befindet sich ein Link zum Begriffsarchiv. Allerdings ist die Liste etwas durcheinander, es läuft alles in einem großen Raster zusammen. Ich möchte, dass jede Gruppe von Elementen und ihr Archivlink für sich allein in einer Reihe stehen, und so geht es.

Stellen Sie die Elemente auf

1. Wählen Sie das wiederholte Element div unter dem Repeater aus und fügen Sie ein Attribut mit dem Namen data-post-id hinzu und verwenden Sie die dynamische Daten-Post-ID für seinen Wert.
2. Wählen Sie den Repeater aus und geben Sie ihm eine ID oder kopieren Sie einfach die aktuelle ID, meine ist _dynamic_list-5-343 .

Die JQuery

Im obersten Code-Block (entweder einer funktioniert oder sogar ein neuer) füge ich den folgenden Code zum Abschnitt Javascript hinzu.

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

Dies fügt ein div nach dem Terms div hinzu (Post-ID beginnt mit „-“, negativ) und das div hat flex-basis: 100% und height: 0px , was dem Hinzufügen eines Zeilenumbruchs in der Repeater-Zeile entspricht.

Und das ist es.

Ergebnis

Jeder wiederholte Artikel hat seinen jeweiligen Beitragstitel und das vorgestellte Bild als Hintergrund. Für die Begriffe habe ich das Wort „Explore“ hinzugefügt und so eingestellt, dass es bedingt angezeigt wird, wenn die Beitrags-ID negativ ist (< 0).

Fazit

Hoffentlich können Sie mit diesen Techniken Ihre Oxygen Builder Repeater oder Easy Posts aufpeppen.

Wenn Sie Fragen haben, können Sie mir auf Twitter @robchankh eine DM senden oder einen Kommentar auf FB hinterlassen, wo ich dies posten werde.