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.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
7 respuestas a «Mostrar fila de logotipos en orden aleatorio mediante shortcode»
|
Muchas gracias, he llegado desde enlace permanente, y me ha encantado el artículo.Me será muy útil.
|
Gracias Jose Antonio! Me alegra que te haya sido útil :))
|
Hola Esther, ante todo muchas gracias por compartir tu conocimiento, es de gran ayuda para novatos como yo. Respecto a mi consulta, te comento. He ingresado el código tal cual esta en tu articulo en functions.php. Se ha creado el CP y he creado una página donde agrego el shortcode. Esto funciona sin problemas, muestra todas las imágenes. Pero (en mi caso) necesito que esas mismas img se muestren en front-page.php, específicamente en una sección del tipo «Clientes». Esta sección (al igual que casi todo mi front-page.php) la obtengo con get_template_part( ‘template-parts/home-marcas’, ‘none’ ); y aquí pego el shortcodes, esperando me muestre las imágenes. Seguro que esta no es la forma correcta de mostrar contenido de un CP en front-page.php porque no me funciona. Podrias darme un poco de luz, consejo, palabras de aliento lo que gustes como para poder lograr mi cometido. Muchas gracias por tus palabras y espero haberme explicado de la mejor manera posible. Saludos desde Perú de un Argento. Adrián.
|
Hola Adrián!
¿Qué error te da o que te aparece en lugar del shortcode? Recuerda que has de utilizar do_shortcode (‘[codigoquesea]’) para que se ejecute cuando lo haces desde fuera el editor.
Si en una página te funciona correctamente, también debería hacerlo desde el template o template-part que te interese.
Saludos!
|
Hola Esther. Muchas gracias por tu respuesta, a sido un faro en el camino. Efectivamente mi falta de experiencia a sido culpable. Estaba usando el shortcode [codigoquesea] de esta forma sin más, probé pero igual continuaba sin funcionar. Los errores eran varios, la mayoría por el mal uso del shortcode. Desconocía que debía utilizar la función do_shortcode ( ‘ ‘ ) para mostrar el contenido. Nuevamente agradezco tus palabras y compartir tu experiencia con novatos como uno.
Saludos.
Adrián.
|
Excelente aporte Esther. Muchas gracias por compartir este interesante recurso: Práctico, sencillo y versátil para cualquier web. Un abrazo 🙂
|
Hola Wajari! Muchas gracias a tí por pasarte y comentar!
Un abrazo,