Tutoriales, WordPress | 3 de junio de 2015

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

  1. Crear el plugin
  2. Crear el tipo de contenido testimonios
  3. Crear un shortcode para mostrar cada testimonio
  4. 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:

Con eso ya debiéramos poder ver en la pantalla de plugins de WordPress que el nuestro ya aparece y podemos activarlo:

plugin-testimonios
Ya podemos activar nuestro plugin 🙂

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:

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
Así luce el editor de testimonios
Así luce el editor de testimonios

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:

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:

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:

y en su lugar pondremos esto (en los comentarios del código se describe que es lo que hace):

Gracias a este código, ahora cuando usemos el shortcode, pasándole el ID de un testimonio publicado, de esta forma:

obtendremos dentro del html del post algo más o menos así:

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:

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:

  1. La columna con el checkbox (para que se pueda seleccionar cada testimonio)
  2. La columna con el título, que en nuestro caso es el nombre del autor
  3. La columna de código, en donde mostraremos el código del shortcode para cada testimonio

Con este código conseguimos pasar de esto:

Columnas estándar
Columnas estándar

A esto:

Columnas personalizadas
Columnas personalizadas

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:

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

Columna con shortcode
Columna con shortcode

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:

 Francisco Aguilera G.

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

También te podría interesar:

Cómo crear un tema de WordPress (Parte 1)

ACTUALIZACIÓN: La segunda parte ya está disponible en éste link. En este artículo vamos recorrer el proceso para crear un tema de wordpress, ya que es uno de los temas sobre los cuales más frecuentemente recibo preguntas. El tema que vamos a crear estará desarrollado desde cero, al menos en cuanto a funcionalidades y para […]

Seguir leyendo...

Usar plantillas de página en custom post types de WordPress

Sigo avanzando en el rediseño de mi sitio y me he encontrado con un nuevo desafío: la necesidad de usar plantillas de página en un custom post type. A primera vista parece algo sencillo, pero me sorprendí al notar que WordPress no soporta esta característica de manera nativa. Déjame darte algo de contexto. ¿Qué es […]

Seguir leyendo...

Cómo dupliqué mi sueldo gracias a WordPress

Hay personas que trabajando con WordPress han generado ganancias verdaderamente interesantes. En este contexto podemos mencionar el éxito que han tenido en WooThemes quienes comenzaron siendo 3 personas vendiendo temas y al cabo de algunos años se han convertido en una empresa avaluada en varios millones de dólares, por otra parte podemos mencionar el éxito […]

Seguir leyendo...

Hay 4 opiniones

  1. Muy bueno Francisco! super claro como siempre.
    Ahora me pregunto, que modificaciones son necesarias para que muestre todos los testimonios en un slider?
    Saludos

  2. ¡Genial Francisco!
    Me divierto mucho probando los códigos y siguiendo tus tutoriales.
    Ánimos y a seguir. Esperamos el siguiente post como el jarabe de la tos, «expectorantes» 😉 (expectantes) Jejeje

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 8.161 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.