Cómo insertar otro contenido en repetidores de oxígeno y publicaciones fáciles - Mega Tutorial

Los elementos Repetidor y Publicaciones fáciles de Oxygen Builder son formas rápidas y sencillas de mostrar una lista de publicaciones.

Esta guía le mostrará diferentes formas de insertar "otros elementos" dentro de una lista por cualquier motivo que necesite.

Para evitar confusiones, utilizaré "Otro(s) elemento(s)" para los elementos que no son consultados por la consulta original de Repeater/Easy Post

¿Por qué?

Los elementos Repetidor/Publicaciones fáciles muestran una lista de publicaciones. Esa lista está restringida por los parámetros establecidos en la consulta utilizada para obtener las publicaciones.

Puede formatear la apariencia de cada elemento y el diseño de la lista, y eso es todo. A veces, eso es todo lo que necesita, pero otras veces es posible que desee modificar la lista para incluir otros elementos que no se obtuvieron originalmente. Otros artículos como:

• un elemento de llamada a la acción (como un enlace "Leer más" a todo el archivo) en el medio de la lista en lugar del final de la lista
• algún texto informativo que describa los elementos dentro de la lista, rompiendo el flujo de información para mantenerlo interesante
• algún elemento decorativo
• otra lista dentro de la lista
• un banner publicitario u otro artículo promocional

Curso de construcción de oxígeno - ¡Próximamente!

El curso Oxygen Builder Mastery lo llevará de principiante a profesional: módulos ACF, MetaBox y WooCommerce incluidos.

Obtenga notificación de lanzamiento y descuento

¿Cómo?

Usaré algunos de los ejemplos anteriores para mostrarle las diversas formas de agregar otros elementos a una lista.

Los métodos de súper simple a complicado son:

• JQuery
• usando el the_posts
• edición de plantillas PHP (Publicaciones fáciles)
• usando el gancho the_posts nuevamente pero agregando elementos que no son Publicaciones como Términos (Categorías / Taxonomías)

En mis ejemplos, usaré un tipo de publicación personalizada Destinos, que es solo una lista de ciudades.

Advertencias

• El otro elemento será un elemento secundario del elemento Repetidor/Publicación fácil porque se inserta dentro de él y estará sujeto a las reglas de diseño establecidas desde el elemento principal a menos que se anule, lo que no haré en mis ejemplos.
• Los cambios en la lista no se verán en el editor Oxygen.
• El método Easy Post PHP Template accede a una variable no documentada que podría cambiar en una futura actualización de Oxygen, pero no es probable.

Agregar algún otro elemento dentro de un repetidor con JQuery

Usaremos JQuery para insertar un elemento en algún índice dentro de Repeater/Easy Post.

Los pasos

1. Cree un repetidor o publicación fácil con una consulta personalizada con destinos de tipo de publicación. Establezca su ID en example-repeater-1 .
2. Los elementos son el título de la publicación y la imagen destacada como fondo.
3. En este ejemplo, utilicé un diseño de cuadrícula y configuré el cuarto elemento para abarcar 2 columnas en la fila. Aquí es donde se insertará mi elemento.
4. El otro elemento es un div con una altura del 100 % y un ancho del 100 % y lo convertí en un banner simple con un botón de llamada a la acción. Establezca su ID en guide-ad-banner .
5. Coloco el otro elemento debajo del repetidor, pero puede ir a cualquier lugar ya que el script lo moverá.

El JQuery

Inserte un bloque de código en su página y agregue lo siguiente a la sección de Javascript, o dentro de las etiquetas <script> en la sección de 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 ]); });
 Lenguaje de código: JavaScript ( javascript )

Aquí hay una explicación rápida del script.

1. Una vez que la página está cargada/lista, obtenemos la lista de todos los div que son hijos de #example-repeater-1 . Estos son los elementos individuales en el repetidor.
2. Calcule el índice para insertar este elemento, idealmente quiero insertarlo después del tercer elemento (índice 2, los índices comienzan desde 0 aquí), pero si el número de elementos es inferior a 2, insértelo al final. Por supuesto, ya sé el tamaño de su resultado de antemano, por lo que este cálculo es solo una precaución en caso de que lo cambie a una consulta donde se devuelvan menos de 3 elementos.
3. Por último, inserta el elemento que tiene el id #guide-ad-banner después del tercer elemento, lo que hace que mi otro elemento sea el cuarto elemento.

Resultado

En la parte frontal, toma el elemento con id guide-ad-banner y lo inserta en el cuarto lugar del repetidor con id #example-repeater-1 .

Agregar otro elemento dentro del repetidor usando the_posts

El enlace de filtro the_posts en WordPress le da acceso a las publicaciones que se han obtenido mediante una consulta. referencia
Podemos usar este enlace para insertar otras publicaciones que no se incluyeron en la consulta original.

Para este ejemplo, insertaré una publicación regular al final de mi repetidor que usó una consulta para mis destinos.

Los pasos

1. Cree un repetidor para el tipo de publicación de destinos y diseñe los elementos con el título y la imagen destacada como fondo div.
2. Agregue bloques de código encima y debajo del repetidor.

Los bloques de código

Primer bloque de código

Agrega este código PHP al bloque de código que está arriba del repetidor.

 <?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 ); ?>
 Lenguaje de código: HTML, XML ( xml )

Repasemos este código.

1. Uso get_post para obtener la publicación con ID 347. Esta es la publicación que quiero insertar al final del repetidor.
2. Adjunto la publicación anterior al final de la matriz $posts .
3. Devuelve la matriz modificada.
4. Agrego la función creada previamente al gancho de filtro the_posts .

Segundo bloque de código

Agregue el siguiente PHP al bloque de código debajo del repetidor

 <?php remove_filter( 'the_posts' , 'b58_add_cta_last' , 10 , 2 ); ?>
 Lenguaje de código: HTML, XML ( xml )

Esto elimina la función agregada anteriormente como una que se usará para llamar al gancho de filtro the_posts . Si no se elimina, afectará a otras consultas que se ejecuten más adelante.

Resultado

La publicación que obtuvimos con ID 347 se agregó al final del repetidor. En la imagen se ve que hay una lista de destinos y al final está nuestra publicación habitual. Entonces podría haber sido un artículo que habla sobre viajes o cómo reservar, o lo que sea.

Si agrega datos dinámicos como campos personalizados a los elementos repetidos y esa clave meta no existe en el otro elemento, estará en blanco en ese div. Por lo tanto, debe usar una condición para verificar si la clave meta existe para evitar problemas de diseño extraños.

Agregar otra lista dentro del elemento Easy Posts

Esto implicará editar la plantilla de PHP para el elemento Easy Posts.

Para este ejemplo, crearé una parte reutilizable que contiene un repetidor con una lista de publicaciones, luego la insertaré en un elemento Easy Post que solicitó un conjunto diferente de publicaciones. No usaré el CPT de Destinos para esto.

Crear lista como pieza reutilizable

1. Cree una nueva pieza reutilizable que contenga 3 elementos principales, un encabezado, un div para el repetidor y texto.
2. El repetidor ejecuta una consulta para el tipo de publicación predeterminado y una categoría de noticias, y configuro no_found_rows = true para deshabilitar la paginación.
3. El elemento de texto superior dice NOTICIAS DE ÚLTIMA HORA y el texto inferior es un enlace al archivo de publicaciones de noticias.
4. Agregue bloques de código arriba y debajo del repetidor, tenemos que modificar la consulta del repetidor usando estos bloques de código.

Esa es la estructura de la Parte Reutilizable.

Bloques de código

Primer bloque de código

Si bien este repetidor existe dentro del elemento Easy Post, su consulta debe ser independiente del Easy Post. Una forma en que el elemento Easy Post puede afectar la lista interna es a través de la paginación. Si alguien hace clic en la página 2 para el elemento Easy Post, de forma predeterminada, la lista interna también obtendrá la página 2. Tenemos que evitar eso.

El primer bloque de código sobre el repetidor agregará una acción pre_get_posts que establece el argumento de consulta paginada en 1, lo que hace que siempre devuelva la primera página.
Si este repetidor está en una página de inicio estática, utilice la página = 1 en su lugar. (referencia: documentación de 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' ); ?>
 Lenguaje de código: HTML, XML ( xml )

Segundo bloque de código

El segundo bloque de código elimina la acción agregada anteriormente para evitar que afecte consultas futuras.

 <?php remove_action( 'pre_get_posts' , 'b58_set_paged' ); ?>
 Lenguaje de código: HTML, XML ( xml )

Así que ahora el repetidor siempre mostrará la primera página de resultados.

Tome nota de la ID de plantilla de esta pieza reutilizable, que puede obtener en la barra de direcciones en el Panel de control de WP.

Curso de construcción de oxígeno - ¡Próximamente!

El curso Oxygen Builder Mastery lo llevará de principiante a profesional: módulos ACF, MetaBox y WooCommerce incluidos.

Obtenga notificación de lanzamiento y descuento

La publicación fácil

1. En la página real donde quiero agregar la publicación fácil, la agrego a esa página y elegí el ajuste preestablecido Masonry.
2. Cambio la consulta a publicaciones de alguna otra categoría que no sea noticias.
3. Configuré la cantidad de publicaciones por página en un número impar porque agregaré manualmente 1 publicación adicional para que sea uniforme y la cuadrícula esté ordenada.

Plantilla PHP

En el panel de estilo Easy Posts, voy a Plantilla PHP. Aquí es donde debe editar la plantilla utilizada para cada elemento en el contenedor Easy Post (la plantilla se repite).

Debajo de la plantilla predeterminada, pegue el siguiente 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>" ; } ?>
 Lenguaje de código: HTML, XML ( xml )

Repasemos este código.

1. Primero, obtenemos el índice del elemento que se muestra actualmente y lo configuramos en $current_index . Detrás de escena, Oxygen Builder está recorriendo cada elemento devuelto del conjunto de consultas en el elemento Easy Posts y está ejecutando el código dentro de la plantilla para cada publicación dentro de la lista. Tenemos una forma de acceder a la variable de consulta con $this->query y el índice del elemento que se está procesando actualmente es current_post dentro de la consulta.
2. Determino el índice en el que debe insertarse mi otro elemento. Hago esto verificando el número total de artículos que se procesarán, si hay menos de 3 artículos, agregaré el otro artículo como el último artículo de Easy Post. De lo contrario, lo agregaré después del tercer elemento (el índice comienza en 0), haciendo que mi otro elemento sea el cuarto elemento en la cuadrícula Easy Post.
3. Si estamos en el índice para agregar nuestro elemento, entonces uso la función do_oxygen_elements de Oxygen para representar el elemento reutilizable (ID de plantilla 321) y lo envuelvo en un div con la clase oxy-post .

Resultado

La pieza reutilizable se coloca como el cuarto elemento en la cuadrícula Easy Posts.

La lista de piezas reutilizables se puede desplazar dentro de la lista.

El gancho pre_get_posts en la parte reutilizable hace que siempre cargue la primera página de publicaciones para que pueda ir a las otras páginas de Easy Post y los resultados siguen siendo los mismos.

Con este método, puede reemplazar la parte do_oxygen_elements del código anterior y escribir su propio HTML para agregar lo que quiera dentro del elemento Easy Posts.

Recuerde que su elemento agregado debe cumplir con las reglas de tamaño que se hayan establecido en la clase oxy-post; de lo contrario, puede descartar el resto de la lista.

Insertar elementos de términos dentro del repetidor

Este método se basa en el uso del gancho the_posts para insertar enlaces a términos dentro de una lista de publicaciones ordenadas por sus términos.

Así que imagina una lista repetida como:
Azul A, Azul B, Azul C, Ver todos los azules, Rojo X, Rojo Y, Rojo Z, Ver todos los rojos, etc.

Súper útil en un sitio de comercio electrónico cuando desea enumerar algunos de los elementos destacados y luego vincular el término archivo.

Este método implica muchos pasos, pero es bastante sencillo.

Los pasos

1. Configurar campos personalizados
2. Crear un conjunto de funciones auxiliares
3. Añadir un repetidor que consulte los tipos de publicaciones que queremos.
4. Modifique la lista de publicaciones obtenidas con la consulta anterior con el gancho the_posts

Configurar campos personalizados

Este es un paso opcional si desea utilizar una Imagen destacada con su objeto Término.

En mi ejemplo, uso una imagen destacada como fondo para el elemento. Los términos por defecto no tienen una imagen destacada, así que agregué una a mi taxonomía personalizada con campos personalizados avanzados.

El campo personalizado es un campo Imagen que devuelve el ID.

Funciones auxiliares

Agrego las siguientes funciones auxiliares en Code Snippets, haz lo mismo con cualquier método que prefieras.

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; }
 Lenguaje de código: PHP ( php )

Revisemos cada función en este fragmento.

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

Esto toma un objeto WP Term ( $term ) y crea una publicación falsa del tipo establecido en $post_type.
Establece la ID en el negativo de su ID real primero como una especie de "bandera" para indicar que se trata de un término y no de una publicación real.
Establece algunas otras variables necesarias para el objeto WP_Post, pero la única importante para nuestro propósito es post_title.
Luego agrega esta publicación al caché de wp, en caso de que algo solicite esta publicación y dado que tiene una identificación negativa, fallará si intenta ir a la base de datos.

b58_get_the_featured_image( $get_url, $size = 'thumbnail' )
 Lenguaje de código: PHP ( php )

Si no agregó un campo personalizado con una imagen para el término, omita esta función.
Esta función toma 2 argumentos, $get_url que sería un booleano, esto determina si devuelve el ID de la imagen o la URL.
El segundo argumento establece el tamaño.

Primero verifica si la identificación de la publicación actual es negativa, si es negativa, entonces esta es una publicación falsa que es un término, de lo contrario, es una publicación real.
Si es una publicación falsa, recuperamos la identificación de la imagen con get_field para la identificación de ese término.
Si se trata de una publicación real, usamos la función incorporada get_post_thumbnail_id .

En segundo lugar, si $get_url es falso, solo se devuelve el ID. De lo contrario, usamos wp_get_attachment_image_url para obtener la URL de la imagen y devolverla.

b58_get_the_link()

Esto devuelve el enlace (enlace permanente o enlace de término) para esta publicación.
Si el ID de la publicación es negativo, entonces es una publicación falsa, usamos get_term_link para obtener el enlace, en lugar de get_permalink si es una publicación real.

Eso es todo para las funciones auxiliares.

el repetidor

Agrego un repetidor a la página, con una consulta de destinos. Utilizo el mismo diseño que en los ejemplos anteriores, el título de la publicación centrado con el fondo de la imagen destacada y los enlaces div al enlace permanente de la publicación o al enlace del término.

Para el fondo de la imagen destacada, no utilizo el método de Imagen destacada habitual en Datos dinámicos. Utilizo el método PHP Function Return Value porque quiero usar mi función de ayuda para obtener una imagen en lugar de la otra manera porque el elemento podría ser una "publicación falsa" (término). Entonces, para la URL de fondo div, uso PHP Valor de retorno de la función con el nombre de función b58_get_the_featured_image y el parámetro true . Podría especificar un tamaño aquí también, pero no lo hago.

La misma idea para el enlace. No puedo usar los datos dinámicos de Permalink como lo haría normalmente porque sería incorrecto para la publicación falsa, así que uso b58_get_the_link en su lugar.

el gancho the_posts

Al igual que antes, agrego bloques de código antes y después del repetidor, de esta manera podemos configurar una función para que se llame con el enlace y eliminar esa función después para que no afecte otras consultas.

Aquí está el código para el bloque de código sobre el repetidor

Primer bloque de código

 <?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 ); ?>
 Lenguaje de código: HTML, XML ( xml )

Repasemos este código.

1. No haga nada si está en el panel de administración.
2. De lo contrario, ejecuto una consulta get_terms para la taxonomía con las regions de slug, ordenadas por nombre en orden ascendente. La taxonomía Regiones se adjunta al tipo de publicación personalizada Destinos, es uno de los 7 continentes donde se encuentra el destino, por lo que Nairobi y El Cairo están en África, Hong Kong está en Asia, etc.
3. Agregue algunas verificaciones y manejo de errores en caso de que haya un error tipográfico con el nombre de los términos o si no hay términos para una taxonomía, luego solo devolvemos el resultado original.
4. Si la consulta de términos pasa todas las comprobaciones, declare una nueva matriz vacía llamada $new_posts , agregaré las publicaciones a esta matriz y la devolveré en lugar de la matriz de publicaciones real.
5. Iterar a través de la matriz $terms , y para cada término itero a través de la matriz $posts y encontrar los que tienen ese término y agregarlo a $new_posts .
6. Después de que termino de buscar en la matriz $posts , creo una publicación falsa con el $term actual y le doy un tipo de destino de publicación (en realidad podría ser cualquier cosa). Luego agrego esta publicación falsa a $new_posts .

Cuando la función regresa, los elementos de la matriz $new_posts deberían verse así:
El Cairo, Nairobi, África, Hong Kong, Asia, Londres, Europa… etc. África, Asia y Europa son las publicaciones falsas.

Finalmente, agregamos la función anterior al gancho the_posts .

Segundo bloque de código

El bloque de código debajo del repetidor es:

 <?php remove_filter( 'the_posts' , 'b58_add_tax_links' ); ?>
 Lenguaje de código: HTML, XML ( xml )

Esto elimina la función del gancho.

Dar formato a la lista

En este punto, el repetidor está terminado. Los elementos con la misma taxonomía se agrupan y al final de cada grupo hay un enlace al archivo de términos. Sin embargo, la lista está un poco confusa, todo se junta en una cuadrícula grande. Quiero que cada grupo de elementos y su enlace de archivo estén en una fila por sí mismos, y esta es la forma de hacerlo.

configurar los elementos

1. Seleccione el elemento repetido div debajo del repetidor y agregue un atributo llamado data-post-id y use ID de publicación de datos dinámicos para su valor.
2. Seleccione el repetidor y asígnele alguna ID o simplemente copie la ID actual, la mía es _dynamic_list-5-343 .

El JQuery

En el bloque de código superior (cualquiera de los dos funciona, o incluso uno nuevo), agrego el siguiente código a la sección de Javascript.

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

Esto agrega un div después del div de Términos (el ID de la publicación comienza con "-", negativo) y el div tiene flex-basis: 100% y height: 0px que es como agregar un salto de línea en la fila del repetidor.

Y eso es.

Resultado

Cada elemento repetido tiene sus respectivos títulos de publicación e imagen destacada como fondo. Para los elementos de Términos, agregué la palabra "Explorar" y la configuré para que se muestre condicionalmente cuando la ID de la publicación sea negativa (< 0).

Conclusión

Con suerte, con estas técnicas puede darle vida a sus repetidores Oxygen Builder o Easy Posts.

Si tiene alguna pregunta, puede enviarme un mensaje privado en Twitter @robchankh o dejar un comentario en FB donde publicaré esto.