Tutorial: Crear banners personalizados con custom post type y shortcodes

Hoy vamos a ver un tutorial, completo pero simple, de cómo crear banners (o cualquier otro elemento similar) personalizados con nuestro diseño y estilo, pero que no sea una imagen fija, sino que podamos cambiar su contenido (texto, imagen, enlace, etc…) desde el administrador de WordPress mediante un Custom Post Type.

Si realizas páginas web para terceros, te habrás encontrado en más de una ocasión con que tu cliente quiere ir actualizando las promociones de su home o algunos elementos estilo banners, pero no sabe de diseño ni tiene a nadie que utilice photoshop y sepa actualizarle esos banners con un poco de gracia.

Con este tutorial, podrás crear el código y los estilos predefinidos para ese banner, y que el cliente pueda actualizar con posterioridad el texto, foto o enlace hacia donde apunta ese banner.

¿Qué pasos seguiremos?

1. Tener el diseño del banner que queremos implementar
2. Crear el Custom Post Type para los banners
3. Crear los campos personalizados o Custom Fields necesarios
4. Crear el shortcode para mostrar ese banner en cualquier lugar de la web.
5.  Configurar los estilos CSS.

1- Diseño de los Banners

Ya sea que los haces vosotros mismos o los encargáis a un diseñador, lo primero que necesitaremos es tener el diseño de los banners o destacados que queremos programar. Han de ser diseños que nos permitan cambiar sus elementos sin perder la base de diseño.

Para este tutorial utilizaremos estos dos:

2. Crear el Custom Post Type para los banners

Una vez tenemos preparado el diseño de los destacados, vamos a crear el Custom Post Type para añadir al administrador y que el cliente pueda crear y editar los banners de forma fácil.

Para ello tenemos varias opciones, se pueden crear directamente en el archivo functions.php, mediante un plugin como Custom Post Type UI o mediante nuestro propio plugin.

No voy a entretenerme en esta parte, ya que existen muchos tutoriales para crear tipos de entradas personalizadas. Yo prefiero hacerlo mediante mi propio plugin, de esta forma no dependo de un plugin de terceros (cuantos menos tengamos instalados, mejor), pero lo tengo separado del functions.php de esa web en concreto, y así puedo reaprovecharlo fácilmente en otros proyectos.

En este caso, crearemos un tipo de entrada sencillo, sin categorías ni etiquetas:

a) Creamos un archivo, banners-home.php por ejemplo y añadimos el código necesario para crear el custom post type:

/*
Plugin Name: Banners Home 
Plugin URI: www.esthersola.com
Description: Custom post type para los banners de la Homepage.
Author: esther solà
Version: 1.1
Author URI: https://www.esthersola.com
 
*/
 function es_crear_cpt_banners(){
$labels = array( 'name' => _x( 'Banners', 'post type general name' ),
        'singular_name' => _x( 'Banner', 'post type singular name' ),
'add_new' => _x( 'Añadir nuevo', 'Banner' ),
'add_new_item' => __( 'Añadir nueva banner' ),
'edit_item' => __( 'Editar banner' ),
'new_item' => __( 'Nueva banner' ),
'view_item' => __( 'Ver banner' ),
'search_items' => __( 'Buscar banner' ),
'not_found' => __( 'No se han encontrado banners' ),
'not_found_in_trash' => __( 'No se han encontrado banners en la papelera' ),
'parent_item_colon' => ''
);
$args = array( 'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'menu_icon' => 'dashicons-images-alt',
'has_archive' => true,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt')
);
register_post_type( 'banners', $args );
}
add_action( 'init', 'es_crear_cpt_banners' );

b) Accedemos por FTP al sitio y creamos una carpeta en la wp-content/plugins/banners-home/ donde subimos nuestro archivo banners-home.php

c) Vamos a la sección de plugins de WordPress y veremos que nos ha aparecido uno nuevo:

Lo activamos y ya tendremos disponible el nuevo tipo de entrada en nuestro admin:

Sin embargo si entras a añadir uno nuevo, verás que se trata de un post normal como cualquier entrada estándar de WordPress.

Vamos a crear ahora los campos necesarios para poder personalizar nuestras entradas.

3. Crear los campos personalizados o Custom Fields necesarios

Como en el caso de los custom post, existen diferentes formas de crear campos personalizados, pero en este caso, por comodidad y rapidez, acostumbro a utilizar el plugin ACF Advanced Custom Fields. Aunque existe una versión de pago, la gratuita del repositorio de WordPress nos será más que suficiente.

Instalaremos el plugin y accedermos a Custom Fields para crear los campos que necesitamos.

Existen muchos tutoriales para ACF, así que para no alargar en exceso este tutorial, no entraré en detalles en cómo hacerlo porque es bastante intuitivo.

Lo esencial es saber determinar que campos vamos a necesitar y de que tipo:

• Tipo: un selector para escoger cuál de los dos tipos de banners queremos crear.
• Título: para el destacado «PROMOCIÓN PRIMAVERA» Y «ENCUENTRA TU TIENDA». En este caso no hará falta crear un campo nuevo y podemos utilizar el título que viene por defecto con el post.
• Imagen: usaremos también la featured image que viene por defecto, así que no crearemos ningún campo.
• Subtitulo o texto: en este caso yo no utilizaría el campo de descripción de WordPress sino que crearía uno tipo Text Area y en la opción formato seleccionaría «Convert new lines into <br /> tags», de esta forma podremos entrar dos lineas diferentes. También podremos limitar el número de caracteres para que no desmonte el diseño añadiendo demasiado texto.
• Enlace: A que url enlazará nuestro banner.
• Texto botón: en este caso será un campo condicional, ya que sólo lo necesitaremos en el 2º tipo de banner. Para ello, en las características del campo añadiremos que es condicional y que requiere que el campo Tipo sea el «Tipo 2».

Así que crearemos los campos Tipo, Texto, Enlace y Texto Botón y en las opciones del grupo de campos especificaremos que se muestre para los tipos de post «banners»:

Para simplificar la entrada de datos, es aconsejable que ocultemos todas aquellas opciones del post que no vamos a necesitar: extracto, content editor, author, slug, revisions, comments, etc…  Como el objetivo principal es que el cliente o administrador de la web pueda modificar sus banners fácilmente, cuanto más simple sea la pantalla para hacerlo, mejor.

Ahora que ya tenemos los campos configurados, si vamos a crear un nuevo banner, ya nos aparecerá la estructura personalizada:

4. Crear el shortcode para mostrar ese banner en cualquier lugar de la web.

Ya tenemos el tipo de entrada y los campos personalizados creados para que el cliente puede modificar o crear banners, y podríamos añadirlos mediante código en cualquier plantilla de nuestro tema o en una nueva.

Pero lo interesante en este caso, es que sea el propio cliente que pueda añdir el banner allí donde quiera, ya sea en un widget o en el contenido de una página o post.

Para ello, crearemos un shortcode en nuestro archivo functions.php que filtrará los datos y creará el html necesario para mostrarlo. (Este código se basa en uno que encontré en este post de programacion.net).

if ( ! function_exists( 'bnn_home_shortcode' ) ) {
    function bnn_home_shortcode( $atts ) {
        extract( shortcode_atts(
                array(
                  
                    'category' => '',
                    'excerpt' => 'false',
                ), $atts )
        );
        $output = '';
        // indicamos los argumentos de la query
        $query_args = array(
            // Mostramos todos los post que devuelve la query
            'posts_per_page'    =>   -1,
            //mostramos los custom post type 'banners'
            'post_type'         =>   'banners',
       
            //Le indicamos a WordPress que no necesita contar el total de filas para reducir la carga, a no ser que necesitemos paginar
            'no_found_rows'     =>   true,
        );

        $output .= '<div class="banners">';             
		$querybanners = new WP_query( $query_args );             {                            
		
		while ( $querybanners ->have_posts() ) : $querybanners ->the_post();                                
		
		//Recogemos los campos que querremos mostrar                                  
		$tipo = get_field( 'tipo' );                     
		$texto = html_entity_decode(get_field( 'texto' ));                     
		$enlace =  get_field( 'enlace' );                     
		$texto_boton = get_field( 'texto_boton' );                     
		$banner_title = get_the_title( $post->ID );                                
		$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );                  
	
		//Generamos el html necesario según el tipo de banner_title                              
	
		if($tipo=="Tipo_1") {                 
			$output .= '<div class="bnn_home '.$tipo . '">';                 
			$output .= '<h3>' . $banner_title . '</h3>';                 
			$output .= '' . $texto . '';                 
			$output .='<a href="' . $enlace .'">'.$texto_boton.' <i class="mkd_icon_font_awesome fa fa-arrow-right button_icon" style="color: #fed931; width: inherit;"></i></a>';                 
			$output .= '<img src="'. $feat_image .'" />';                 
			$output .= '</div>';            
		 }                          
		 if($tipo=="Tipo_2") {                 
			 $output .= '<div class="bnn_home '.$tipo .'" style="background-image: url(' .$feat_image. ');">';                 
			 $output .= '<div class="recuadro">';                 
			 $output .='<a href="' . $enlace .'">';                 
			 $output .= '</a><h3>' . $banner_title . '</h3>';                 
			 $output .= '' . $texto . '';                 
			 $output .= '</div>';                 
			 $output .= '';                             
			 $output .= '</div>';             
		 }               
		endwhile;             
		wp_reset_postdata();             
		$output .= '</div>';         
		return $output;     
		
		}     
		
		add_shortcode( 'bnnhome', 'bnn_home_shortcode' ); 
		
}

Una vez creado el shortcode, lo podremos insertar en cualquier sitio fácilmente con [bnnhome].

En este ejemplo, hemos creado un shortcode que muestra todos los banners que tengamos cambiando el html en función del tipo de banner, pero tenemos muchas otras opciones según lo que necesitemos. Podemos crear diferentes shortcodes, uno para cada tipo y que filtre por ejemplo sólo el último banner añadido, y de esta forma insertar en la página sólo el que nos interesa. O incluso crear otro campo tipo checkbox que sea «mostrar», y que el shortcode filtre sólo los que están marcados con esta opción…. en fin, las posibilidades son muchas, dependerá de vuestras necesidades e imaginación.

 5. Configurar los estilos CSS.

Ya tenemos los banners creados y el código para poder mostrarlos mediante un shortcode allá donde queramos. Sólo queda darles el aspecto que queramos, y eso lo podemos hacer mediante CSS, preferentemente en el archivo styles.css de nuestro child theme, o en un custom_styles.css del tema.

Os pongo aquí el css utilizado en el ejemplo:

/*--------------------------- BANNERS HOME ------------------------------------------- */
.bnn_home { width:325px; height:237px; float:right; display:block; background-color:#ECECEC; overflow:hidden; background-size:cover;}
.bnn_home h3 { font-family:'Montserrat'; font-weight:700; color:#093f7d; font-size:20px; text-align:center; margin:15px auto 5px auto;}
.bnn_home p { font-family:'Open Sans'; color:#555555; font-size:13px; font-weight:400; line-height:18px; max-width:95%; text-align:center;}
.bnn_home a { font-family:'Montserrat'; color:#555; font-weight:700; font-size:12px; display:block; margin:0 auto; text-align:center; margin:8px auto;}
.bnn_home img { width:100%;  }
.bnn_home .recuadro { margin-top:20px; margin-left:10px; display:block; padding:10px; background-color:#fff;  width:150px; }
.bnn_home .recuadro h3 { display:block; width:150px; margin-top:-18px; margin-left:-10px; background-color:#fed931; line-height:24px; padding:10px;}
.bnn_home .recuadro p { margin:10px auto; }

Algunos estilos serán comunes para todos los tipos de banners y otros específicos para cada uno.

Y ya lo tenemos, hemos creado un sistema fácil para que el cliente, en base a unos estilos ya predefinidos de banners o destacados, pueda cambiar o crear nuevos, adaptando los textos e imágenes en cada ocasión.

Es ideal para ofertas o promociones temporales, destacar diferentes servicios o contenidos de la web, etc…

Espero que os haya servido, y cualquier duda podéis enviarmela a través de los comentarios o del formulario de contacto.