Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Sencillas reseñas de usuarios con Gravity Forms y un tipo de entrada personalizada

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product image
What You'll Be Creating

Mi cliente vende algunos productos y quería configurar un medio para que los visitantes fuesen capaces de enviar una reseña o un testimonio sobre un producto concreto, y mostrar esas opiniones en las correspondientes páginas de productos del sitio WordPress.

Trabajé en esta tarea toda la tarde de ayer para mayor frustración personal, y acabo de conseguir que funcione. Me di cuenta de que lo estaba complicando mucho más de lo que realmente era. ¡Gravity Forms vino en mi rescate!

Este proceso está formado por varios pasos:

  • Crear un tipo de entrada personalizada.
  • Crear un formulario con Gravity Forms para que los usuarios puedan enviar entradas con un estado de borrador usando nuestro formato de entrada personalizada.
  • Añadir el formulario a la página.
  • Mostrar las entradas enviadas por los usuarios en tu sitio.

Empecemos.

1. Crear un tipo de entrada personalizada

Esta es una situación perfecta para el uso de una entrada personalizada, es igual que una entrada de blog, solo que especial. Los tipos de entradas personalizadas están separadas de las entradas estándar de blog; pueden ayudarte a convertir tu sitio en una base de datos de películas o un sitio web de recetas, con sus propias taxonomías (en lugar de categorías de blog, piensa en Directores de películas, Actores y Géneros).

Aunque puedes crear un tipo de entrada personalizada (Custom Post Type o CPT) usando código, hagámoslo de la forma más sencilla. Instala Custom Post Type UI  y actívalo. Se trata de un útil y estable plugin que ha estado disponible durante muchos años.

En Custom Post Type UI configurarás un nuevo tipo de entrada personalizada. Aquí tienes una captura de pantalla del mío. Denomínalo como quieras; en este caso el mío se llama Reviews (reseñas).

Creating a custom post type in Custom Post Type UI

Puedes dejar la sección Labels (etiquetas) tal y como está. Pero en Settings (ajustes), querrás hacer algunos cambios.

He dejado casi todo lo que hay en Settings con los valores estándar, pero he marcado la casilla Exclude from Search (excluir de la búsqueda), ya que no quiero que las entradas de las reseñas aparezcan en los resultados de búsqueda. Y en la sección Supports (soporte), solo he marcado las casillas de los elementos que necesitaba mostrar en la página de edición de la entrada: Title, Editor, y Custom Fields.

Si situas el puntero sobre las marcas rojas de consulta que aparecen en el panel Settings, verás qué hace cada ajuste; siempre podrás volver y realizar cambios.

2. Crear un formulario con Gravity Forms

Gravity Forms es un plugin excelente, pero no gestiona los tipos de entradas por sí mismo. Para ello necesitarás instalar y activar otro plugin, Gravity Forms + Custom Post Types. Avanza haciendo esto, y empezaremos con el formulario.

En Gravity Forms, crea un nuevo formulario; llamémosle Submit a Review (envía una reseña), y después abre Post Field (campo de entrada) situado en la columna derecha. Usando estos campos en lugar de los campos de formulario estándar crearemos una nueva entrada cuando el usuario envíe el formulario.

Primero, haz clic sobre Post Title (título de la entrada). En este caso, quiero que el título de mi entrada coincida con el nombre de la persona que está enviando la reseña, echa un vistazo a la siguiente captura de pantalla.

Info for the Post Title in Gravity Forms

Asígnale un nombre a tu campo (he usado "Your Name", así que esta será la etiqueta que verá el usuario). Para Post Status (estado de la entrada), probablemente querrás usar Draft (borrador); esto significa que la nueva entrada tendrá formato de borrador y no será publicada en tu sitio hasta que la apruebes.

Default Post Author (autor predeterminado de la entrada) está establecido de manera que tú seas el autor, eso no tiene importancia aquí, y tampoco la tiene Post Category (categoría de la entrada) ya que estamos utilizando un tipo de entrada personalizada. Haz que este campo sea requerido marcando la casilla Required situada en la parte inferior.

Después dirígete a la pestaña Advanced (avanzado). Marca la casilla Save as Post Type (guardar como tipo de entrada personalizada) y selecciona el tipo de entrada que has creado al principio de este tutorial.

Choosing the custom post type for your Post Title

Después haz clic sobre Update (actualizar) para guardar tus cambios.

A continuación añadiremos un campo para el correo electrónico (desde la sección Advanced Fields) como en cualquier formulario, haciendo que sea un campo requerido (Required).

A continuación añadiremos otro Post Field, denominado Body. Esto funcionará como Paragraph Text (texto de párrafo) en un formulario normal. No deberías tener que cambiar ningún ajuste en este campo a excepción de Field Label y marcar la casilla de verificación Required.

¡Ya casi hemos terminado! Ahora dado que mi cliente tiene varios productos, queremos preguntarle al usuario qué producto compró. Para ello vamos a añadir un campo personalizado desde el área Post Fields (arrástralo de manera que aparezca antes del campo Body de manera que el flujo tenga sentido).

Para nuestro objetivo, queremos que este campo personalizado sea un botón de radio, así que selecciónalo desde Field Type. Después tenemos que asignar un nombre a nuestro campo. Elige el botón New, ya que lo estamos creando aquí, y luego escribe un nombre en el campo de texto. En este caso será product_name.

Entering product choices as a custom field in Gravity Forms

Continúa cumplimentando las opciones del botón de radio como de costumbre, asegurándote de introducir tanto una etiqueta (lo que el usuario ve) y un valor (lo que podrás usar para separar las reseñas en base al nombre del producto).

Haz que este campo sea requerido (y no olvides añadir tu propia etiqueta de campo, Field Label, en la parte superior para el usuario) y actualiza el formulario. Ya hemos acabado con la parte 2.

3. Añadir el formulario a la página

Espero que ya sepas como hacer esto, pero si no es así, es bastante fácil. Dirígete a la página en la que quieras colocar tu formulario y edita la página.

Coloca el cursor allí donde quieras añadir el formulario. Haz clic en Add Form (añadir formulario) en la parte superior, selecciona tu nuevo formulario, desmarca las casillas de verificación de Title (título) y Description (descripción), y haz clic en Insert Form (insertar formulario). Esto añadirá un shortcode a la página.

Eso es todo. Este es el aspecto que tiene el formulario en la página.

The Submit Feedback form on a page

Avanza y prueba el formulario, añadiendo un par de reseñas. Te sugiero que añadas reseñas para al menos dos o tres productos, de manera que tengamos algo con lo que trabajar en la siguiente parte de este tutorial. Siempre podrás eliminar tus reseñas de prueba más adelante.

4. Mostrar las entradas en tu sitio web

Ahora hemos llegado a la parte que tiene un montón de posibilidades. Si te fijas en el menú Admin situado en el lateral izquierdo, puedes comprobar que ahora tenemos un nuevo elemento de menú, en mi caso se denomina Reviews. Si te fijas en esto, verás las valoraciones de prueba que has enviado (si no aparece ninguna, significa que te has saltado la parte 3, dirígete a tu formulario y envía las reseñas de prueba, al menos para algunos productos, ya que necesitamos material con el que trabajar en esta parte).

Se trata de entradas de blog, pero tienen su propio elemento de menú gracias a nuestro tipo de entrada personalizada. Esto te ayudará a mantener las cosas por separado en tu sitio; puedes tener un blog estándar, y después aparte cualquier cantidad de tipos de entradas personalizadas para gestionar cualquier tipo de información más especializada. Es genial, ¿no?

Abre una de estas entradas y verás solo los elementos que marcaste anteriormente en Supports durante el Paso 1 cuando configuraste tu tipo de entrada personalizada. En este caso, se trata del título, el editor, y los campos personalizados. Nos gustaría mantenerlo tan simple como sea posible. Observa el campo personalizado y verás que tiene tanto un nombre (el Label que introdujiste) y un valor (que también indicaste). Ese valor puede usarse para controlar que valoraciones se van a mostrar en una plantilla personalizada.

Mostrar entradas en tu sitio puede lograrse introduciendo código en los archivos de tu tema o tus plugins; existen muchas, muchas formas de hacer esto. En este tutorial, vamos a añadir las valoraciones en un widget de barra lateral. Te mostraré dos formas de hacer esto usando un plugin: de una forma sencilla, y otra mucho mejor.

Mostrar los tipos de entradas personalizadas en un widget: la forma fácil

Para este ejemplo usaremos el plugin Special Recent Posts. Instálalo y actívalo y después dirígete a Settings > Widgets. Arrastra el widget a una barra lateral.

Cuando lo abras verás un montón de opciones. Para este ejemplo, estos son los ajustes que usé para obtener la lista de entradas que se muestran aquí, pero puedes usar aquello que mejor funcione en tu sitio.

  1. He cambiado el Título del widget a Recent Reviews (reseñas recientes) y el límite de entradas (Post Limit) a 2.
  2. Sin miniaturas, ya que no hay ninguna asociada a las reseñas.
  3. Bajo Post Options (opciones de entradas) he optado por usar la longitud completa en Post Content Length (longitud del contenido de la entrada). Marca la casilla Enable WordPress Filters (habilitar los filtros de WordPress), porque usaremos esto más tarde.
  4. No realizaremos cambios en Advanced Post Options 1 or 2 (opciones avanzadas de entradas 1 o 2).
  5. En Filtering Options (opciones de filtrado), escribe el nombre de la entrada personalizada en el último cuadro (si no funciona, prueba la versión singular: revisión o revisiones).
  6. Guarda el widget.

Este es el aspecto de mi columna lateral:

Reviews widget using the Special Recent Posts plugin

Funciona bastante bien sin hacer nada más, pero puedes personalizar la presentación si sabes algo de CSS. Sin embargo, no tienes mucho control sobre lo que se va a mostrar; puedes optar por mostrar las valoraciones de un producto y ocultarlas para otro. Pero te mostraré cómo hacer esto en la siguiente parte.

Mostrar los tipos de entradas personalizadas en un widget: con control total

Custom Content Shortcode es un plugin increíblemente útil que te permitirá mostrar cualquier tipo de contenido en cualquier parte de tu sitio, incluyendo los widgets. Cuesta un poco aprender a usarlo, pero además incluye una excelente documentación en una sección de Referencia justo en tu Escritorio de administración. Proporciona un montón de control sobre lo que se muestra, y lo que no se muestra, y no te defraudará si te tomas un poco de tiempo para aprender a usarlo. Es una herramienta que puedes usar una y otra vez en tu sitio web o blog.

Simplemente para tu conocimiento, necesitarás sentirte un poco más cómodo con HTML y CSS para aplicar estilo a la presentación de este widget. No tiene muy buen aspecto de forma predeterminada. Puedes añadir estilos al archivo style.css de tu tema.

Vamos a usar Custom Content Shortcode para crear otro widget, pero esta vez limitaremos lo que se mostrará de manera que podamos mostrar solo valoraciones de un cierto producto.

En Settings > Widgets, arrastra un widget de texto en una columna lateral y añade un título.

Te enseñaré cómo establecer el shortcode para este ejemplo, pero te recomiendo que eches un vistazo a la sección Reference del plugin, a la que accedes a través de la página Plugins (verás el enlace relacionado bajo el nombre del plugin). ¡Es una herramienta muy potente!

Aquí tienes el shortcode que estoy utilizando. Lo explicaré línea a línea.

Para loop type, introduce el nombre de tu campo personalizado, probablemente en singular (si no funciona, inténtalo con el plural).

Field es el nombre del campo personalizado que usaste en Gravity Forms. Value es el valor asociado al botón de opción en Gravity Forms.

Estos elementos controlan el bucle, lo que significa que revisará cada entrada 'review' una por una hasta haber visto todas y que se mostrarán solo aquellas con el valor 'boulder_case'.

Así que dentro de tu bucle, va a mostrar tres cosas: el contenido de la entrada (del campo Body en Gravity Forms), el título (el nombre del usuario) y la fecha de publicación.

¿Tiene sentido? Escribe o copia esto en tu widget de texto, reemplazando los elementos de la sección con tus propios nombres, guárdalo y echa un vistazo a lo que genera.

Probablemente parezca un desastre, pero todo el contenido está ahí, y notarás que solo se muestran las entradas con el valor concreto que escribiste. Esto es muy potente; significa que puedes crear un widget de reseñas para cada producto en lugar de tener todas las opiniones mezcladas.

Así que ahora tendrás que aplicar algunos formatos para que las cosas tengan mejor aspecto, necesitamos un poco de HTML.

Esto consigue que las cosas sean mucho más legibles, pero necesitamos algo de CSS para aplicarle estilo. Añadiré algunas clases a este código para conseguirlo.

Y aquí está el producto final con todos los estilos y listo para más contenido.

Reviews widget using the Custom Content shortcode plugin

Resumiendo

De manera que ahora sabes lo siguiente:

  • Cómo y cuándo crear una entrada personalizada
  • Cómo crear un formulario para recopilar contenido del usuario para tu tipo de entrada personalizada
  • Cómo mostrar ese formulario en una página o entrada
  • Cómo mostrar tus tipos de entradas personalizadas en un widget usando un sencillo plugin
  • Cómo mostrar tus tipos de entradas personalizadas con mayor control

En un tutorial de continuación a este, te mostraré cómo mostrar tu nuevo contenido personalizado en una página usando una plantilla personalizada y un bucle. Es un poco más complicado, pero te dará el poder de controlar realmente el contenido que haya sido enviado por el usuario. Y luego puedes pensar en otras formas de usar el contenido del usuario: enviar fotos a una galería, por ejemplo. Involucrar a los visitantes es una excelente manera de promocionar el sitio web de tu negocio.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.