Mostrar Repeater con Elementor

Mostrar el Campo ACF Repeater con Elementor

Califica este artículo
5/5
  1. ACF PRO
  2. Elementor
  3. Repeater

ACF Repeater con Elementor Page Builder

El plugin ACF (Advance Custom Fields) para WordPress nos permite en su versión gratuita, agregar a los Post o Páginas de WordPress adicionarle 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.

  1. Debes agregar el siguiente código 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");
    
  2. 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]
    
  3. Con el anterior código podemos ya mostrar el contenido de nuestro campo personalizado en nuestro diseño con el elemento Shortcode

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.

ACF Repeater 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.

Ramon Ocampo 2018-11-18 22:00:33
| |

Bienvenidos a mi sitio, espero sus comentarios sobre los artículos, me ayudarán a mejorar.