Mostrar fila de logotipos en orden aleatorio mediante shortcode

Cuando preparamos páginas web corporativas, en muchas ocasiones se suele colocar una fila de logotipos de clientes o marcas que aporta credibilidad y da confianza a un posible lead o contacto.

En el caso de ser bastantes logotipos, la tendencia es ponerlos en formato carousel, es decir, que vayan pasando automáticamente uno detrás de otro y aunque eso puede prepararse de forma optimizada y con el mínimo código posible, muchas veces se tiende a utilizar un plugin de sliders y carousels que añade peso y complejidad innecesaria a la web.

Hace un tiempo veíamos un caso parecido con los testimonios, y en la Zona DPW tienes un ejemplo de cómo crear un carousel de testimonios sin necesidad de plugin, utilizando un Custom Post Type y una librería de jQuery, que podría aplicarse perfectamente al caso de los logotipos, y hoy vamos a ver una alternativa: en lugar de cargar todos los logotipos y que vayan deslizándose, cargaremos sólo unos cuantos de forma aleatoria o random, es decir, cada vez que se cargue la página se verán unos diferentes.

La base es la misma que habíamos visto para los testimonios también en este post: Tutorial: Crear una sección de Testimonios personalizada en tu web con CPT, es decir, tendremos que crear un Custom Post Type para los logotipos de clientes.

En este caso será más sencillo ya que en principio no necesitamos custom fields, simplemente utilizaremos el campo de título e imagen destacada que ya vienen con WordPress.

// Register Custom Post Type
function esl_crear_cpt_marcas() {
	$labels = array(
		'name'                  => _x( 'Marcas', 'Post Type General Name', 'text_domain' ),
		'singular_name'         => _x( 'Marca', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'             => __( 'Marcas', 'text_domain' ),
		'name_admin_bar'        => __( 'Marcas', 'text_domain' ),
		'archives'              => __( 'Item Archives', 'text_domain' ),
		'attributes'            => __( 'Item Attributes', 'text_domain' ),
		'parent_item_colon'     => __( 'Parent Item:', 'text_domain' ),
		'all_items'             => __( 'All Items', 'text_domain' ),
		'add_new_item'          => __( 'Add New Item', 'text_domain' ),
		'add_new'               => __( 'Add New', 'text_domain' ),
		'new_item'              => __( 'New Item', 'text_domain' ),
		'edit_item'             => __( 'Edit Item', 'text_domain' ),
		'update_item'           => __( 'Update Item', 'text_domain' ),
		'view_item'             => __( 'View Item', 'text_domain' ),
		'view_items'            => __( 'View Items', 'text_domain' ),
		'search_items'          => __( 'Search Item', 'text_domain' ),
		'not_found'             => __( 'Not found', 'text_domain' ),
		'not_found_in_trash'    => __( 'Not found in Trash', 'text_domain' ),
		'featured_image'        => __( 'Featured Image', 'text_domain' ),
		'set_featured_image'    => __( 'Set featured image', 'text_domain' ),
		'remove_featured_image' => __( 'Remove featured image', 'text_domain' ),
		'use_featured_image'    => __( 'Use as featured image', 'text_domain' ),
		'insert_into_item'      => __( 'Insert into item', 'text_domain' ),
		'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ),
		'items_list'            => __( 'Items list', 'text_domain' ),
		'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),
		'filter_items_list'     => __( 'Filter items list', 'text_domain' ),
	);
	$args = array(
		'label'                 => __( 'Marca', 'text_domain' ),
		'description'           => __( 'Logotipos de clientes', 'text_domain' ),
		'labels'                => $labels,
		'supports'              => array( 'title', 'editor', 'thumbnail' ),
		'hierarchical'          => false,
		'public'                => true,
		'show_ui'               => true,
		'show_in_menu'          => true,
		'menu_position'         => 5,
		'show_in_admin_bar'     => true,
		'show_in_nav_menus'     => true,
		'can_export'            => true,
		'has_archive'           => false,
		'exclude_from_search'   => true,
		'publicly_queryable'    => true,
		'capability_type'       => 'page',
		'show_in_rest'          => true,
	);
	register_post_type( 'marca', $args );
}
add_action( 'init', 'esl_crear_cpt_marcas', 0 );

(Recuerda que en generatewp.com tienes un asistente para crear este tipo de snippets fácilmente)

Una vez creado el custom post type, crearemos desde el admin unas cuantas marcas o clientes para tener material con el que probar. Lo importante será la imagen destacada, que es lo que mostraremos con el shortcode

El siguiente paso será crear la función que genere el html necesario para mostrar el número de logotipos que nosotros le digamos de forma aleatoria:

function crear_listado_logos() {
$texto = '<ul class="logos_marcas">';
$loop = new WP_Query( array( 'post_type' => 'marca', 'posts_per_page' => 10, 'orderby'=>'rand' ) );
while ( $loop->have_posts() ) : $loop->the_post();
$texto .='<li><a href="'.get_the_permalink().'">';
$texto .= get_the_post_thumbnail();
$texto .='</a></li>';
endwhile;
$texto .='</ul>';
wp_reset_query();
return $texto;
}
add_shortcode('listado_logos', 'crear_listado_logos');

Lo que hacemos en esta función es recoger el número de posts que queramos mediante el valor de ‘post_per_page’ del CPT que le digamos (‘marca’) y mostrarlo en orden «rand» y simplemente lo mostramos en este caso en formato de lista ordenada, pero que podría ser con cualquier otra distribución o formato.

En este caso, get_the_post_thumbnail() es la parte importante, ya que representa el logotipo en si, y «logos_marcas» es la clase de CSS asignada al listado de logotipos, y la que deberemos dar los estilos necesarios para que se va bien en cualquier tipo de dispositivo.

Este es un ejemplo de CSS que podríamos aplicar.

.logos_marcas {
display:flex;
flex-flow:wrap;
flex-direction:row;
align-items:center;
justify-items:center;
justify-content:center;
height:130px;
overflow:hidden;
}
.logos_marcas img {
flex-basis:20%;
width:100px;
padding:5px
}

En estos casos, el uso de Flex puede ser ideal para distribuir los logos y que se adapten automáticamente a la pantalla de la forma que queramos.

Una vez creado el CPT, el shortcode y ajustado los estilos, podremos utilizar [listado_logos] para mostrar esos logotipos en cualquier parte de nuestra web.

Y en este ejemplo hablamos de logotipos de clientes o marcas porque es muy común, pero podría ser cualquier otro tipo de elemento que necesites mostrar en una web con orden aleatorio.