Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on print
Mostrar Repeater con Elementor

Mostrar Repeater ACF con Elementor

  1. ACF PRO
  2. Elementor
  3. Repeater

Repeater ACF Elementor Page Builder

Para mostrar el Repeater ACF con Elementor, debes tener el plugin ACF (Advance Custom Fields) para WordPress el cual nos permite en su versión gratuita, agregar a los Post o Páginas de WordPress campos personalizados con contenido enriquecido, y con la versión PRO este nos adiciona otros campos que nos permiten adicionar contenido más dinámico a nuestros post o páginas del core de WordPress como el campo Repeater, que nos permite repetir información en modo de lista , pero también lo podemos hacer a los Post personalizados.

El desafío para el desarrollador web en este tipo de trabajos, es poder mostrar la información ingresada con estos campos en su diseño web, de tal manera que se se ajuste a la estética del sitio y con el Page Builder Elementor este paso se nos facilita, ahora vamos a ver cómo mostramos el campo repeater en el front de nuestra página.

Sigue estos pasos con ACF y Elementor.

Para evitar perder información cuando actualices tu plantilla de WordPress, debes instalar la plantilla hija, si ya la tienes instalada, utiliza la plantilla hija para realizar los siguientes pasos:

Debes agregar el siguiente código PHP al archivo function.php de la plantilla que estés utilizando.

<?php 
function my_acf_repeater($atts, $content='') { 
extract(shortcode_atts(array( "field" => null,
	"sub_fields" => null,
	"post_id" => null
	), $atts));
	if (empty($field) || empty($sub_fields)) {
		// silently fail? is that the best option? idk
		return "";
}
$sub_fields = explode(",", $sub_fields);

$_finalContent = '';
if( have_rows($field, $post_id) ):
	while ( have_rows($field, $post_id) ) : the_row();
		 $_tmp = $content;
		foreach ($sub_fields as $sub) {
			$subValue = get_sub_field(trim($sub));
			$_tmp = str_replace("%$sub%", $subValue, $_tmp);
		}
		 $_finalContent .= do_shortcode( $_tmp );
	endwhile;
else :  
	$_finalContent = "$field does not have any rows";
endif;
return $_finalContent;
}
add_shortcode("acf_repeater", "my_acf_repeater");

El anterior código me permitirá utilizar un shortcode para mostrar los resultados del campo repeater en el sitio web.

 [acf_repeater field="field_name" sub_fields="name,phone"]
   User: %ename% Phone: %phone%
 [/acf_repeater] 

Con el anterior código podemos ya mostrar el contenido de nuestro campo personalizado en nuestro diseño con el elemento Shortcode

Repeater Elementor Shortcode

Tenga en cuenta que este código funcionará si el Layout del campo Repeater está configurado como Row o Fila, como lo muestra la siguiente imagen.

Repeater ACF Layout
Repeater ACF Layout

Este artículo se ha basado en un código que comparte un desarrollador en su cuenta de Github, compartimos con ustedes el Git para que puedan ampliar el conocimiento acerca de esta solución. Código original.

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
0 Comments

No Comment.