Hace un tiempo veíamos cómo crear una sección de banners en tu web con custom post types y custom fields. Hoy vamos a ver algo parecido pero que se suele utilizar más a menudo, y es la típica sección donde se muestran testimonios de clientes, ya sea en la Homepage o en Sobre nosotros o cualquier landing o sección:
Los pasos a seguir son parecidos a los que hicimos en el caso de los banners:
- Crear el Custom Post Type
- Crear los Custom fields necesarios
- Crear el código para mostrar los datos en forma de shortcode
- Añadir el CSS necesario para darle el aspecto que queramos.
1- Crear el Custom Post Type
Lo puedes crear en un plugin propio o en un plugin de snippets de código, como prefieras, simplemente es añadir el código necesario para crear el custom post indicando los nombres que queremos:
// Register Custom Post Type
function testimonial_post_type() {
$labels = array(
'name' => _x( 'Testimonials', 'Post Type General Name', 'text_domain' ),
'singular_name' => _x( 'Testimonial', 'Post Type Singular Name', 'text_domain' ),
'menu_name' => __( 'Testimonials', 'text_domain' ),
'name_admin_bar' => __( 'Testimonial', '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' => __( 'Testimonial', 'text_domain' ),
'description' => __( 'Testimonial information page.', 'text_domain' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'thumbnail', 'revisions' ),
'taxonomies' => array( 'category' ),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-admin-page',
'show_in_admin_bar' => true,
'show_in_nav_menus' => true,
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type' => 'page',
);
register_post_type( 'testimonials', $args );
}
add_action( 'init', 'testimonial_post_type', 0 );Puedes utilizar generatewp.com para crear el código del custom post type, es muy fácil y cómodo.
2- Crear los campos personalizados necesarios
Una vez tenemos el custom post type creado, nos aparecerá en el menú el nuevo elemento y ya podremos crear nuevos posts de este tipo con los mismos campos que uno estándar.
El problema es que como normalmente esto lo hacemos para que los clientes puedan añadir ellos mismos nuevos elementos y queremos maquetar y forzar el diseño para que siempre queden igual, vamos a necesitar campos propios para que puedan introducir la información:
- Nombre del testimonio: Podemos utilizar el título del post
- Testimonio en sí, su opinión: utilizaremos el contenido del post
- Foto: aprovecharemos la imagen destacada
- Cargo: en este caso si crearemos un campo específico.
Como ves, aunque podríamos crear los 4 campos, yo siempre intento aprovechar los que ya vienen con WordPress para los campos que por formato nos sirven.
Para ello, utilizaremos ACF Advanced Custom Fields. el plugin más conocido y utilizado para este tema, cuya versión gratuita ya nos sirve perfectamente para lo que necesitamos. (Muy pronto veremos este mismo tutorial pero utilizando la nueva versión de ACF que permitirá hacer bloques para Gutenberg)
Instalaremos el plugin y añadiremos un grupo de campos y el campo «Cargo» como texto y que se muestre sólo en los tipos de post «Testimonial»:
No me extiendo en esta parte ya que existen muchos tutoriales de ACF y no quiero entretenerte con ésto.
3- Crear el shortcode para mostrar los datos
Ahora que ya tenemos los nuevos tipos de post con sus campos creado, daremos de alta unos cuantos ejemplos para poder probar y crearemos el código necesario para recuperar los datos y poder mostrarlos en la web.
El código puedes añadirlo en un plugin propio o en code snippets
// Add Shortcode
function testimonials_shortcode( $atts , $content = null ) {
// Attributes
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 'testimonials'
'post_type' => 'testimonials',
//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,
);
// Query
$the_query = new WP_query( $query_args );
// Posts
$output = '<ul class="testimonios" id="lightSlider">';
while ( $the_query->have_posts() ) :
$the_query->the_post();
$cargo = get_field( 'cargo' );
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
$output .= '<li><blockquote>' . get_the_content() . '</blockquote> <img src="'. $feat_image .'"><h5>' . get_the_title() . ' </h5><span>' . $cargo .'</span></li>';
endwhile;
$output .= '</ul>';
// Reset post data
wp_reset_postdata();
// Return code
return $output;
}
add_shortcode( 'view-testimonials', 'testimonials_shortcode' );
En este código recogemos los datos de los testimonios y los mostramos en una lista (<ul>).
El código html de cómo mostramos los datos tenemos que ajustarlo según nuestras necesidades y lo que nos vaya mejor para luego darle el formato que queramos.
En este caso, el texto del testimonio lo he añadido en un <blockquote>, el nombre de la persona en un <h5> y el cargo en una <span>, pero puedes utilizar las etiquetas y clases que más te convengan.
En la última línea lo que hacemos es crear un shortcode view-testimonials que llama a la función que los muestra.
4- Añadir el CSS necesario para darle el aspecto que queramos.
Si ahora añadimos el shortcode en la web, dentro de una página o en un widget de texto:
Si vas a ver la página podrás ver que los datos ya aparecen, pero sin ningún formato ni diseño.
Para que salgan como nosotros queremos, sólo faltará hacer un poco de magia con CSS.
Os pongo aquí el ejemplo para que quede como en el diseño que indicábamos al principio, pero podéis ajustarlo para que case lo máximo posible con el diseño del resto de la web.
ul.testimonios {
}
ul.testimonios li {
display: inline-block;
max-width: 33%;
}
ul.testimonios li::before {
content: "“";
display: block;
font-size: 8rem;
font-family: Georgia, "Apple Garamond", Baskerville, "Times New Roman", serif;
line-height: 1;
color: rgba(42, 49, 57, 0.2);
margin: 0px 0px -0.5em;
}
.testimonios blockquote {
font-size: 1.6rem;
font-style: italic;
line-height: 2.4rem;
}
ul.testimonios li img {
border-radius: 50%;
}
ul.testimonios img {
width: 60px;
width: 6rem;
margin: 20px auto;
margin: 2rem auto;
}Y con esto ya conseguiremos que aparezcan nuestros testimonios allá donde queramos con el diseño que establezcamos.
Por supuesto, esto es la base, a partir de ahí podemos añadir código para que sea un carousel de más elementos o indicar que se vayan mostrando de forma aleatoria cada vez unos diferentes. Muy pronto lo veremos también!
