Tutorial: Crear banners personalizados con custom post type y shortcodes

[…]


por

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:

ejemplo-banner2ejemplo-banner

 

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:

plugin-banners

 

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

custom-post-banners

 

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»:

ACF-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:

ACB-nuevobanner

 

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.

¿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

4 respuestas a «Tutorial: Crear banners personalizados con custom post type y shortcodes»

  1. Avatar de jesus

    |

    Hola,

    Buscando información sobre el tema que voy a preguntarte, he dado con tu web y he pensado que quizás podrías ayudarme con la duda que tengo.

    Tengo creado un plugin propio para la creación de Custom Post Types en WordPress (este es el código de uno de ellos):

    function jm_crear_cpt_noticia() {
    $etiquetas = array(
    ‘name’ => _x( ‘Noticias’, ‘post type general name’, ‘mis-categorias’ ),
    ‘singular_name’ => _x( ‘Noticia’, ‘post type singular name’, ‘mis-categorias’ ),
    ‘menu_name’ => _x( ‘Noticias’, ‘admin menu’, ‘mis-categorias’ ),
    ‘name_admin_bar’ => _x( ‘Noticia’, ‘add new on admin bar’, ‘mis-categorias’ ),
    ‘add_new’ => _x( ‘Añadir nueva’, ‘noticia’, ‘mis-categorias’ ),
    ‘add_new_item’ => __( ‘Añadir nueva noticia’, ‘mis-categorias’ ),
    ‘new_item’ => __( ‘Nueva noticia’, ‘mis-categorias’ ),
    ‘edit_item’ => __( ‘Editar noticia’, ‘mis-categorias’ ),
    ‘view_item’ => __( ‘Ver noticia’, ‘mis-categorias’ ),
    ‘all_items’ => __( ‘Todas las noticias’, ‘mis-categorias’ ),
    ‘search_items’ => __( ‘Buscar noticia’, ‘mis-categorias’ ),
    ‘parent_item_colon’ => __( ‘Noticias padre:’, ‘mis-categorias’ ),
    ‘not_found’ => __( ‘No se han encontrado noticias.’, ‘mis-categorias’ ),
    ‘not_found_in_trash’ => __( ‘No hay noticias en la papelera.’, ‘mis-categorias’ ),
    );
    $opciones = array(
    ‘public’ => true,
    ‘label’ => ‘Noticias’,
    ‘labels’ => $etiquetas,
    ‘menu_position’ => 5,
    ‘menu_icon’ => ‘dashicons-media-document’,
    ‘has_archive’ => ‘false’,
    ‘supports’ => array( ‘genesis_inpost_seo_box’, ‘tags’, ‘page-attributes’, ‘revisions’, ‘trackbacks’, ‘genesis-scripts’, ‘genesis-layouts’, ‘title’, ‘editor’, ‘thumbnail’ , ‘custom-fields’, ‘excerpt’, ‘comments’, ‘genesis-cpt-archives-settings’)
    );
    register_post_type(‘noticia’, $opciones);
    }
    add_action(‘init’, ‘jm_crear_cpt_noticia’);

    Lo que quiero es que en la entry-meta de cada artículo aparezca el título del Custom Post Type al que pertenece, por ejemplo:

    Última hora sobre el vehículo eléctrico
    Noticias – 6 de mayo del 2016 – Escrito por Jesús.

    La parte del fecha y autor, la tengo solucionada, pero la del CPT no. He estado echando un vistazo al codex, en particular a este link (https://codex.wordpress.org/Function_Reference/get_post_type_object), pero no entiendo cómo puedo hacerlo.

    He intentado hacerlo así:

    global $wp_post_types;
    $obj = $wp_post_types[‘post’];
    echo $obj->etiquetas->singular_name;

    add_filter( ‘genesis_post_info’, ‘filtro_info_meta’);
    function filtro_info_meta($post_info) {
    $post_info = ‘[singular_name] – [post_date]’;
    return $post_info;
    }

    …. pero sin éxito.

    Bueno, espero que puedas darme alguna pista al respecto.

    Un saludo y gracias,

    1. Avatar de esther

      |

      Hola Jesús!

      Si lo que quieres es mostrar el Custom Post Type al que pertenece la entrada, creo que deberías hacerlo mediante:
      get_post_type( get_the_ID() )

      Mira la información de esta página: https://developer.wordpress.org/reference/functions/get_post_type/

      Saludos!

  2. Avatar de Robert Villano Muñoz

    |

    Hola el tutorial es muy bueno solo que no me a funcionado del todo bien, estoy trabajando con la version 5.7.7 de Advanced Custom Fields en wordpress, se me dificulta entender como creaste cada campo y mas donde dices que hay que crear dos opciones una para escoger el banner numero 1 y otra para el banner numero 2 ya que lo estoy intentando y no lo he logrado podrias ayudarme gracias

    1. Avatar de esther

      |

      Hola Robert! Mira, te paso un video de como queda cada uno de los campos: https://www.useloom.com/share/87df93b1a1534f419e4a06df59a25af9
      El primer campo define los 3 tipos que hay y en algunos campos se añade una lógica condicional para que sólo se muestren en los tipos que corresponde.
      Saludos,