Cómo crear un plugin de testimonios para WordPress
Una de las cosas más relevantes en todo sitio web comercial hoy en día es la validación social, es decir, dejar que los potenciales clientes se enteren que hubo gente que compró el producto o contrató el servicio antes que ellos y obtuvieron buenos resultados. De este modo, el producto o la marca, están validados o aprobados socialmente.
La forma más directa y sencilla de conseguir la validación social es mostrando testimonios de clientes satisfechos.
Insertar testimonios en WordPress puede ser algo relativamente complicado, que probablemente requiera editar algo en la vista de HTML, pero en este tutorial quiero mostrarte cómo puedes crear tu propio plugin para mostrar testimonios de una forma sencilla y muy rápida.
En síntesis lo que haremos será:
- Crear el plugin
- Crear el tipo de contenido testimonios
- Crear un shortcode para mostrar cada testimonio
- Crear una columna adicional en el listado de testimonios del área de administración de WordPress para mostrar el shortcode asociado a cada uno
Listo. Manos a la obra.
1. Creamos el plugin
Crear un plugin pareciera ser una tarea ardua y difícil, pero en realidad no lo es, todo lo que necesitamos es crear una nueva carpeta dentro del directorio de plugins de nuestra instalación de WordPress (que sería algo más o menos así: mi-sitio/wp-content/plugins/carpeta-de-mi-plugin) y dentro de esa carpeta crear un archivo PHP que incluya una cabecera que defina las características del plugin.
En mi caso la carpeta se llama franciscoamk-testimonios y dentro de ella puse el archivofranciscoamk-testimonios.php que todo lo que incluye hasta ahora es lo siguiente:
<?php /* Plugin Name: Testimonios post type e inserción por Shortcode Plugin URI: http://franciscoamk.com/plugin-testimonios Description: Este plugin crea el post type testimonios y permite insertarlos en el contenido mediante un shortcode Version: 1.0 Author: Francisco Aguilera G. Author URI: http://franciscoamk.com/ License: GPLv2 */
Con eso ya debiéramos poder ver en la pantalla de plugins de WordPress que el nuestro ya aparece y podemos activarlo:
2. Creamos el post type ‘testimonios’
Para crear el post type testimonio no nos vamos a complicar escribiendo todo por nuestra cuenta. Lo que haremos será usar GenerateWP para que obtener el código que necesitamos.
Así que vamos a ir a la herramienta de generación de Post Types y vamos a llenar el formulario con las configuraciones que necesitemos, luego haremos click en el botón «Update Code» y listo, ya tenemos el código que insertaremos a continuación en nuestro plugin:
//---------------------------------------------------------------------
// REGISTER TESTIMONIOS POST TYPE
//---------------------------------------------------------------------
if ( ! function_exists('apk_testimonios_post_type') ) {
// Register Custom Post Type
function apk_testimonios_post_type() {
$labels = array(
'name' => _x( 'Testimonios', 'Post Type General Name', 'apk' ),
'singular_name' => _x( 'Testimonio', 'Post Type Singular Name', 'apk' ),
'menu_name' => __( 'Testimonios', 'apk' ),
'name_admin_bar' => __( 'Testimonios', 'apk' ),
'parent_item_colon' => __( 'Superior:', 'apk' ),
'all_items' => __( 'Todos los testimonios', 'apk' ),
'add_new_item' => __( 'Agregar testimonio', 'apk' ),
'add_new' => __( 'Agregar nuevo', 'apk' ),
'new_item' => __( 'Nuevo testimonio', 'apk' ),
'edit_item' => __( 'Editar testimonio', 'apk' ),
'update_item' => __( 'Actualizar testimonio', 'apk' ),
'view_item' => __( 'Ver testimonio', 'apk' ),
'search_items' => __( 'Buscar testimonios', 'apk' ),
'not_found' => __( 'No se ha encontrado :(', 'apk' ),
'not_found_in_trash' => __( 'Nada en la papelera', 'apk' ),
);
$args = array(
'label' => __( 'testimonios', 'apk' ),
'description' => __( 'Testimonios de clientes', 'apk' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'thumbnail', ),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 20,
'menu_icon' => 'dashicons-editor-quote',
'show_in_admin_bar' => false,
'show_in_nav_menus' => false,
'can_export' => true,
'has_archive' => false,
'exclude_from_search' => true,
'publicly_queryable' => true,
'capability_type' => 'page',
);
register_post_type( 'testimonios', $args );
}
// Hook into the 'init' action
add_action( 'init', 'apk_testimonios_post_type', 0 );
}
Con esto ya debiéramos poder ver dentro de nuestro menú de administración de WordPress un nuevo ítem llamado testimonios, desde donde podremos crear nuevos testimonios y editar los ya publicados.
Cada vez que creemos un nuevo ítem usaremos los campos de una forma muy específica:
- El título será el nombre del autor del testimonio
- El contenido será el texto del testimonio
- La imagen destacada será la foto del autor del testimonio
Si quieres modificar el código o las configuraciones del post type, puedes hacerlo directamente desde GenerateWP. Solo tienes que visitar este enlace y hacer click en el botón «Clone», eso creará tu propia versión del código y podrás usar el formulario para modificar lo que quieras.
3. Creamos el shortcode
Hasta ahora ya tenemos listo el post type y podemos crear tantos testimonios como sea necesario, pero aún no tenemos forma de incluir cada uno de ellos dentro de una página o artículo según sea nuestro antojo. Para ello necesitamos un shortcode.
Para crear el shortcode vamos a usar la herramienta de GenerateWP específicamente creada para ello. Desde allí, luego de llenar las opciones del formulario, obtenemos el siguiente código:
//---------------------------------------------------------------------
// TESTIMONIOS SHORTCODE
//---------------------------------------------------------------------
// Add Shortcode
function apk_testimonio_shortcode( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'id' => '',
), $atts )
);
// Code
if ( isset( $id ) ) {
return get_the_title( $id );
}
}
add_shortcode( 'testimonio', 'apk_testimonio_shortcode' );
Si quieres modificar este código desde GenerateWP, tienes que visitar este link y clonarlo, para crear tu propia versión.
Básicamente lo que hacemos con este código es crear el shortcode [ testimonio ] que incluye la posibilidad de recibir el parámetro id, y cada vez que se use, lo único que hará será mostrar el título del testimonio en base al id que se haya entregado como parámetro.
Es decir, si usamos un shortcode como este, lo único que obtendríamos sería el nombre del autor:
Escribir este tutorial ha sido los más entretenido que he hecho hoy. Ojalá te guste y aprendas mucho.
Francisco Aguilera G.
Obviamente eso no es lo que queremos, así que una vez que hayamos pegado este código dentro de nuestro plugin, vamos a hacer algunas modificaciones.
Vamos a borrar esta línea, que es la que muestra el título del testimonio:
return get_the_title( $id );
y en su lugar pondremos esto (en los comentarios del código se describe que es lo que hace):
// Trae el post (testimonio) basado en el ID asignado como parámetro $testimonio_post = get_post($id); // Obtiene la URL de la imagen destacada del post (testimonio) $imagen_destacada = wp_get_attachment_image_src( get_post_thumbnail_id($testimonio_post->ID), 'thumbnail' ); /** * A continuación se define qué es lo que el shortcode imprime dentro del post cada vez que se usa * en este caso se trata de un blockquote con la clase testimonio que incluye una imagen * que es la imagen destacada, un contenido, que es el contenido del testimonio * y una cita, dentro de la cual se muestra el título del testimoni, es decir el nombre del autor */ return '<blockquote class="testimonio"> <img src=" ' . $imagen_destacada[0] . ' " alt=" ' . $testimonio_post->post_title . ' " /> <p>' . $testimonio_post->post_content . '</p> <cite> ' . $testimonio_post->post_title . ' </cite> </blockquote>';
Gracias a este código, ahora cuando usemos el shortcode, pasándole el ID de un testimonio publicado, de esta forma:
Una de las cosas más relevantes en todo sitio web comercial hoy en día es la validación social, es decir, dejar que los potenciales clientes se enteren que hubo gente que compró el producto o contrató el servicio antes que ellos y obtuvieron buenos resultados. De este modo, el producto o la marca, están validados o aprobados socialmente. La forma más directa y sencilla de conseguir la validación social es mostrando testimonios de clientes satisfechos. Insertar testimonios en WordPress puede ser algo relativamente complicado, que probablemente requiera editar algo en la vista de HTML, pero en este tutorial quiero mostrarte cómo puedes crear tu propio plugin para mostrar testimonios de una forma sencilla y muy rápida. En síntesis lo que haremos será:
Listo. Manos a la obra.
- Crear el plugin
- Crear el tipo de contenido testimonios
- Crear un shortcode para mostrar cada testimonio
- Crear una columna adicional en el listado de testimonios del área de administración de WordPress para mostrar el shortcode asociado a cada uno
1. Creamos el plugin
Crear un plugin pareciera ser una tarea ardua y difícil, pero en realidad no lo es, todo lo que necesitamos es crear una nueva carpeta dentro del directorio de plugins de nuestra instalación de WordPress (que sería algo más o menos así: mi-sitio/wp-content/plugins/carpeta-de-mi-plugin) y dentro de esa carpeta crear un archivo PHP que incluya una cabecera que defina las características del plugin. En mi caso la carpeta se llama franciscoamk-testimonios y dentro de ella puse el archivofranciscoamk-testimonios.php que todo lo que incluye hasta ahora es lo siguiente:<?php /* Plugin Name: Testimonios post type e inserción por Shortcode Plugin URI: http://franciscoamk.com/plugin-testimonios Description: Este plugin crea el post type testimonios y permite insertarlos en el contenido mediante un shortcode Version: 1.0 Author: Francisco Aguilera G. Author URI: http://franciscoamk.com/ License: GPLv2 */Con eso ya debiéramos poder ver en la pantalla de plugins de WordPress que el nuestro ya aparece y podemos activarlo: [caption id="attachment_1871" align="aligncenter" width="1060"]2. Creamos el post type 'testimonios'
Para crear el post type testimonio no nos vamos a complicar escribiendo todo por nuestra cuenta. Lo que haremos será usar GenerateWP para que obtener el código que necesitamos. Así que vamos a ir a la herramienta de generación de Post Types y vamos a llenar el formulario con las configuraciones que necesitemos, luego haremos click en el botón "Update Code" y listo, ya tenemos el código que insertaremos a continuación en nuestro plugin://--------------------------------------------------------------------- // REGISTER TESTIMONIOS POST TYPE //--------------------------------------------------------------------- if ( ! function_exists('apk_testimonios_post_type') ) { // Register Custom Post Type function apk_testimonios_post_type() { $labels = array( 'name' => _x( 'Testimonios', 'Post Type General Name', 'apk' ), 'singular_name' => _x( 'Testimonio', 'Post Type Singular Name', 'apk' ), 'menu_name' => __( 'Testimonios', 'apk' ), 'name_admin_bar' => __( 'Testimonios', 'apk' ), 'parent_item_colon' => __( 'Superior:', 'apk' ), 'all_items' => __( 'Todos los testimonios', 'apk' ), 'add_new_item' => __( 'Agregar testimonio', 'apk' ), 'add_new' => __( 'Agregar nuevo', 'apk' ), 'new_item' => __( 'Nuevo testimonio', 'apk' ), 'edit_item' => __( 'Editar testimonio', 'apk' ), 'update_item' => __( 'Actualizar testimonio', 'apk' ), 'view_item' => __( 'Ver testimonio', 'apk' ), 'search_items' => __( 'Buscar testimonios', 'apk' ), 'not_found' => __( 'No se ha encontrado :(', 'apk' ), 'not_found_in_trash' => __( 'Nada en la papelera', 'apk' ), ); $args = array( 'label' => __( 'testimonios', 'apk' ), 'description' => __( 'Testimonios de clientes', 'apk' ), 'labels' => $labels, 'supports' => array( 'title', 'editor', 'thumbnail', ), 'hierarchical' => false, 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'menu_position' => 20, 'menu_icon' => 'dashicons-editor-quote', 'show_in_admin_bar' => false, 'show_in_nav_menus' => false, 'can_export' => true, 'has_archive' => false, 'exclude_from_search' => true, 'publicly_queryable' => true, 'capability_type' => 'page', ); register_post_type( 'testimonios', $args ); } // Hook into the 'init' action add_action( 'init', 'apk_testimonios_post_type', 0 ); }Con esto ya debiéramos poder ver dentro de nuestro menú de administración de WordPress un nuevo ítem llamado testimonios, desde donde podremos crear nuevos testimonios y editar los ya publicados. Cada vez que creemos un nuevo ítem usaremos los campos de una forma muy específica:[caption id="attachment_1873" align="aligncenter" width="1024"]
- El título será el nombre del autor del testimonio
- El contenido será el texto del testimonio
- La imagen destacada será la foto del autor del testimonio
3. Creamos el shortcode
Hasta ahora ya tenemos listo el post type y podemos crear tantos testimonios como sea necesario, pero aún no tenemos forma de incluir cada uno de ellos dentro de una página o artículo según sea nuestro antojo. Para ello necesitamos un shortcode. Para crear el shortcode vamos a usar la herramienta de GenerateWP específicamente creada para ello. Desde allí, luego de llenar las opciones del formulario, obtenemos el siguiente código://--------------------------------------------------------------------- // TESTIMONIOS SHORTCODE //--------------------------------------------------------------------- // Add Shortcode function apk_testimonio_shortcode( $atts ) { // Attributes extract( shortcode_atts( array( 'id' => '', ), $atts ) ); // Code if ( isset( $id ) ) { return get_the_title( $id ); } } add_shortcode( 'testimonio', 'apk_testimonio_shortcode' );Si quieres modificar este código desde GenerateWP, tienes que visitar este link y clonarlo, para crear tu propia versión. Básicamente lo que hacemos con este código es crear el shortcode[ testimonio ]que incluye la posibilidad de recibir el parámetro id, y cada vez que se use, lo único que hará será mostrar el título del testimonio en base al id que se haya entregado como parámetro. Es decir, si usamos un shortcode como este, lo único que obtendríamos sería el nombre del autor:[testimonio id=1866]Obviamente eso no es lo que queremos, así que una vez que hayamos pegado este código dentro de nuestro plugin, vamos a hacer algunas modificaciones. Vamos a borrar esta línea, que es la que muestra el título del testimonio:return get_the_title( $id );y en su lugar pondremos esto (en los comentarios del código se describe que es lo que hace):// Trae el post (testimonio) basado en el ID asignado como parámetro $testimonio_post = get_post($id); // Obtiene la URL de la imagen destacada del post (testimonio) $imagen_destacada = wp_get_attachment_image_src( get_post_thumbnail_id($testimonio_post->ID), 'thumbnail' ); /** * A continuación se define qué es lo que el shortcode imprime dentro del post cada vez que se usa * en este caso se trata de un blockquote con la clase testimonio que incluye una imagen * que es la imagen destacada, un contenido, que es el contenido del testimonio * y una cita, dentro de la cual se muestra el título del testimoni, es decir el nombre del autor */ return '<blockquote class="testimonio"> <img src=" ' . $imagen_destacada[0] . ' " alt=" ' . $testimonio_post->post_title . ' " /> <p>' . $testimonio_post->post_content . '</p> <cite> ' . $testimonio_post->post_title . ' </cite> </blockquote>';Gracias a este código, ahora cuando usemos el shortcode, pasándole el ID de un testimonio publicado, de esta forma:[testimonio id=1867]obtendremos dentro del html del post algo más o menos así:<blockquote class="testimonio"> <img src="ruta-hacia-la-imagen.jpg" alt="Francisco Aguilera G."> <p>Escribir este tutorial ha sido los más entretenido que he hecho hoy. Ojalá te guste y aprendas mucho.</p> <cite>Francisco Aguilera G.</cite> </blockquote>Esto se puede ver bastante bien u horrendamente dependiendo del CSS de tu tema activo. No vamos a entrar en detalle en este asunto, así que vamos a dejarlo en manos de tu tema y de las modificaciones que puedas hacer a él.4. Creamos la columna adicional
Por ahora pareciera que ya tenemos el plugin listo y funcionando y ya podemos irnos a dormir tranquilos por hoy, pero ¿por qué no poner un poquito más de esfuerzo y hacer el trabajo más sencillo a la hora de insertar un testimonio? Piénsalo, cada vez que quieras insertar un testimonio tienes que recordar cómo se escribía el shortcode y luego buscar cual es el ID del que quieres insertar. Es un montón de trabajo, así que vamos a hacer que en el listado de testimonios se muestre de inmediato el código que permite insertar cada testimonio, para que solo tengas que copiarlo y pegarlo dentro del contenido. Para conseguir eso, agregaremos a nuestro plugin el siguiente código://--------------------------------------------------------------------- // TESTIMONIOS SHORTCODE COLUMN //--------------------------------------------------------------------- //Personaliza las columnas function apk_testimonios_columns($testimonios_columns) { //La columna con el checkbox $new_columns['cb'] = '<input type="checkbox" />'; //La columna con el título $new_columns['title'] = _x('Autor', 'autor'); //La columna con el código $new_columns['codigo'] = _x('Código de inserción', 'codigo'); return $new_columns; } add_filter('manage_edit-testimonios_columns', 'apk_testimonios_columns');Lo que hacemos con estas líneas es quitar la información de las columnas que se muestran por defecto para el post type y reemplazarlas por las columnas que nosotros queremos que se muestren, que en este caso son:Con este código conseguimos pasar de esto: [caption id="attachment_1876" align="aligncenter" width="1024"]
- La columna con el checkbox (para que se pueda seleccionar cada testimonio)
- La columna con el título, que en nuestro caso es el nombre del autor
- La columna de código, en donde mostraremos el código del shortcode para cada testimonio
Columnas estándar[/caption] A esto: [caption id="attachment_1877" align="aligncenter" width="1024"]
Columnas personalizadas[/caption] Ahora que ya tenemos listas nuestras columnas, debemos intervenir la columna codigo, para que allí se muestre el código de inserción que corresponda. Para ello usamos el siguiente código:
//Define el contenido de la columna codigo function apk_manage_testimonios_columns($column_name, $id) { global $wpdb; switch ($column_name) { case 'codigo': echo '<input type="text" readonly="readonly" value="[testimonio id=' . $id . ']" class="shortcode-in-list-table wp-ui-text-highlight code">'; break; default: break; } // end switch } add_action('manage_testimonios_posts_custom_column', 'apk_manage_testimonios_columns', 10, 2);Lo que hacen estas líneas es definir que en el espacio dedicado a la columna codigo de cada testimonio se mostrará un input de solo lectura que incluirá el código del shortcode que estará personalizado con el ID de cada testimonio y además con algunas clases específicas del área de administración de WordPress. Ahora nuestro listado de testimonios se ve así: [caption id="attachment_1878" align="aligncenter" width="1024"]Columna con shortcode[/caption] Así es mucho más fácil. De hecho, copié ese mismo código y lo pegué a continuación para que veas un testimonio de mí mismo contándote qué me pareció este tutorial: [testimonio id=1866]
Descarga el plugin
Este código ya está disponible como un plugin listo para usar y lo he añadido como parte de los recursos del Kit de ayuda al diseñador web, al cual tienes acceso una vez que te suscribes. Si lo deseas puedes descargar el plugin, y todos los otros recursos, para usarlos libremente en tu sitio o en el sitio de tus clientes, solo tienes que suscribirte a mi newsletter en el formulario que aparece más abajo. Si ya estás suscrito anteriormente, no necesitas registrarte de nuevo, ya tienes el link al pie de cada uno de mis emails 😉 Un abrazo, @FranciscoAMK Cómo crear un plugin de testimonios para WordPress
obtendremos dentro del html del post algo más o menos así:
<blockquote class="testimonio"> <img src="ruta-hacia-la-imagen.jpg" alt="Francisco Aguilera G."> <p>Escribir este tutorial ha sido los más entretenido que he hecho hoy. Ojalá te guste y aprendas mucho.</p> <cite>Francisco Aguilera G.</cite> </blockquote>
Esto se puede ver bastante bien u horrendamente dependiendo del CSS de tu tema activo. No vamos a entrar en detalle en este asunto, así que vamos a dejarlo en manos de tu tema y de las modificaciones que puedas hacer a él.
4. Creamos la columna adicional
Por ahora pareciera que ya tenemos el plugin listo y funcionando y ya podemos irnos a dormir tranquilos por hoy, pero ¿por qué no poner un poquito más de esfuerzo y hacer el trabajo más sencillo a la hora de insertar un testimonio?
Piénsalo, cada vez que quieras insertar un testimonio tienes que recordar cómo se escribía el shortcode y luego buscar cual es el ID del que quieres insertar. Es un montón de trabajo, así que vamos a hacer que en el listado de testimonios se muestre de inmediato el código que permite insertar cada testimonio, para que solo tengas que copiarlo y pegarlo dentro del contenido.
Para conseguir eso, agregaremos a nuestro plugin el siguiente código:
//---------------------------------------------------------------------
// TESTIMONIOS SHORTCODE COLUMN
//---------------------------------------------------------------------
//Personaliza las columnas
function apk_testimonios_columns($testimonios_columns) {
//La columna con el checkbox
$new_columns['cb'] = '<input type="checkbox" />';
//La columna con el título
$new_columns['title'] = _x('Autor', 'autor');
//La columna con el código
$new_columns['codigo'] = _x('Código de inserción', 'codigo');
return $new_columns;
}
add_filter('manage_edit-testimonios_columns', 'apk_testimonios_columns');
Lo que hacemos con estas líneas es quitar la información de las columnas que se muestran por defecto para el post type y reemplazarlas por las columnas que nosotros queremos que se muestren, que en este caso son:
- La columna con el checkbox (para que se pueda seleccionar cada testimonio)
- La columna con el título, que en nuestro caso es el nombre del autor
- La columna de código, en donde mostraremos el código del shortcode para cada testimonio
Con este código conseguimos pasar de esto:
A esto:
Ahora que ya tenemos listas nuestras columnas, debemos intervenir la columna codigo, para que allí se muestre el código de inserción que corresponda. Para ello usamos el siguiente código:
//Define el contenido de la columna codigo
function apk_manage_testimonios_columns($column_name, $id) {
global $wpdb;
switch ($column_name) {
case 'codigo':
echo '<input type="text" readonly="readonly" value="
" class="shortcode-in-list-table wp-ui-text-highlight code">';
break;
default:
break;
} // end switch
}
add_action('manage_testimonios_posts_custom_column', 'apk_manage_testimonios_columns', 10, 2);
Lo que hacen estas líneas es definir que en el espacio dedicado a la columna codigo de cada testimonio se mostrará un input de solo lectura que incluirá el código del shortcode que estará personalizado con el ID de cada testimonio y además con algunas clases específicas del área de administración de WordPress.
Ahora nuestro listado de testimonios se ve así:
Así es mucho más fácil. De hecho, copié ese mismo código y lo pegué a continuación para que veas un testimonio de mí mismo contándote qué me pareció este tutorial:
Escribir este tutorial ha sido los más entretenido que he hecho hoy. Ojalá te guste y aprendas mucho.
Francisco Aguilera G.
Descarga el plugin
Este código ya está disponible como un plugin listo para usar y lo he añadido como parte de los recursos del Kit de ayuda al diseñador web, al cual tienes acceso una vez que te suscribes.
Si lo deseas puedes descargar el plugin, y todos los otros recursos, para usarlos libremente en tu sitio o en el sitio de tus clientes, solo tienes que suscribirte a mi newsletter en el formulario que aparece más abajo.
Si ya estás suscrito anteriormente, no necesitas registrarte de nuevo, ya tienes el link al pie de cada uno de mis emails 😉
Un abrazo,
@FranciscoAMK