Creando una Tabla comparativa en WordPress

Hola y bienvenido una vez más a mi blog. Como ya sabrás hoy quiero compartir contigo la manera de crear tablas comparativas en wordpress. Las mismas que te ayudarán a incrementar tus ingresos si monetizas tu web con amazon.

Las tablas comparativas es uno de los principales factores a tener en cuenta cuando estás enfocado a trabajar con el marketing de contenido o afiliación. Ya que al hacer comparaciones de «X» productos o servicios, le facilitas la toma de decisiones a tus lectores. Y ésta es; hacer la compra. Un ejemplo claro sería la siguiente imagen.

La imagen anterior está tomada del mismo amazon. Si la web considerada como la más grande del comercio electrónico lo hace, porque no deberías hacerlo tu. Ya sea que tengas una web de afiliación, que no necesariamente puede ser usando amazon; sino otras web.

Éste tutorial esta enfocado para todo tipo de servicio que esté en internet. Entonces ya con la introducción hecha te invito a leer, tomar nota y llévalo a la practica. Sigue leyendo.

Formas de crear una tabla en wordpress para hacer comparaciones

En este nuevo post compartiré el proceso de cómo crear una tabla comparativa de productos sin utilizar código html o css, esto es muy importante cuando no se tiene los recursos económicos para comprar plugins orientados a monetizar con Amazon; pero como es de conocimiento, ahora Amazon está limitando la entrega de las API, lo que para muchos es un inconveniente. Esto dificulta el  poder hacer tablas comparativas semi automáticas.

Para crear tablas en worpdres no se necesita ser un experto en html y csss; basta con un poco de conocimiento, creatividad e ingenio. Y como wordpress nos facilita el trabajo gracias a los plugins, es solo aprender a usarlos de manera adecuada. Con éste tutorial te vas a convertir en el amo y señor creando  las tablas.

¿Se puede crear tablas sin plugins de pago o gratuitos?

Claro que sí, pero debes ser muchos mas ingenioso, y puedes hacer uso de programas como; word o excel, yo te aconsejo usar excel, en su momento lo utilizaba bastante. También se puede hacer tablas para comparar, utilizando html y css, pero ésto es algo mas complejo cuando no estás muy familiarizado con desarrollo web. No digo que sea difícil.

¿Que plugins permiten crear tablas en wordpress?

Bien, conozco a lo mucho 4, de los cuales todos son gratuitos, mas aya de ellos quizá si lo hay; pero como éste tutorial solo hablaré de su funcionalidad para trabajar con amazon. Me centraré específicamente en uno, es decir el que uso muy seguido.

Lista de plugins para crear tablas

Se que solo hablaré de uno, quiero dejarte una lista de los que podrás hacer uso en el momento que creas conveniente.

• TablePress
• TinyMCE Advanced
• Ninja Tables
• Table Maker
• Table Maker (NEW)

Si te das cuenta he repetido dos veces un mismo plugin, de ello hablaré mas adelante. Pero no es necesario solo eso, vamos a necesitar mas y lo bueno es que todo será 100% gratis.

¿Que vamos a utilizar para hacer las tablas comparativas?

Vamos a necesitar utilizar dos plugins que mas adelante hablaré muy detalladamente de cada uno, ademas de ello vamos a utilizar una pagina para obtener los iconos de amazon y el carrito de compras. Necesarios? diría que en un 40%; pero es decisión de cada uno y como desees trabajar tu contenido.

Plugins a utilizar

No te preocupes por el precio de ellos, ya que son totalmente gratis, ésto ya lo dije. Espero que te tranquilice saberlo. Ahora si ya se pone muy interesante todo ésto.

Table Maker

Existen otros plugins similares para crear tablas; pero me gusta trabajar con éste ya que es 100% compatible con el theme que uso(rehub) para mis webs de afiliación; y aquí es donde te verás limitado, ya que el programador del theme, es el mismo del plugin; pero tranquilo que todo tiene solución y te ayudaré con ello, para lo cual vamos a necesitar otro plugin con el que complementaremos las demás funciones.

El plugin para las tablas que utilizaremos tampoco es compatible con el theme de mi blog; pero como a mi sobra algo de creatividad he conseguido que se ajuste a la mayoría de themes. Por lo que irá perfectamente con el tuyo. Y esto te lo garantizo.

Table maker (new)

Funcional para servidores que usan Maria DB. Es importante que lo consultes con tu proveedor de hosting; pero si usas banahosting y hostinger te recomiendo que uses este enlace para descargarlo.

Table maker

Para servidores como MySQL y otros, puedes realizar la búsqueda en el repositorio de wordpress, instalarlo y activarlo. O pinchar en este enlace para ir a la descargarlo.

Para que éste plugin sea compatible con el theme que estás usando solo debes copiar y pegar el estilo css en el apartado. Apariencia > personalizar > css adicional. Hecho todo eso, debes darle a guardar. Es todo.

/*table-maker*/ .wpsm-comptable td img { max-width: 160px; max-height: 160px; padding: 0px; }

El max-width y el max-height puedes reducirlo, si consideras que las imágenes están muy grandes; a mi me va bien con 160px.

Hasta aquí es lo mas sencillo y rápido, sin ninguna complicación, el siguiente plugin es compatible con todos los servidores.

Forget About Shortcode Buttons

Si no conoces nada de html y css para crear botones; entonces éste plugin es ideal para ti, es muy completo en cuanto a diseño; pero si hablamos de implementación con icons, le faltan muchos; entonces es aquí donde entra al ruedo las paginas de iconos, suelo trabajar con fontawesome, hay otras más; pero la verdad es que estoy acostumbrado a usarla ya desde hace mucho tiempo. Puedes descargarlo en el link que está arriba o buscarlo en el repositorio de wordpress.

Paginas web

Ya te di un adelanto de las que vamos a utilizar, pero se nos olvida la mas importante amazon.es y amazon.com, las necesitaremos para obtener el enlace de afiliado y la url de la imagen, muy necesaria para mostrarla en la tabla comparativa.

Lista de Paginas

• https://fontawesome.com/v4.7.0/icons/.
• Amazon.es
• Amazon.com

Los enlaces de Afiliación

Los enlaces a amazon incluyen link de afiliado con el micrófono que uso para grabar mis vídeos, el modelo de micrófono que uso es el BOYA BY-M1 3.5mm Lavalier, compatible con cámaras nikon, canon y otras mas, ademas de ser compatible con latops y smartphones.

No es mi intención venderte éste modelo de micrófono, pero si compras algún producto con mi link de afiliado bien bienvenido sea, eso ayuda a seguir subiendo vídeos a mi canal y a mantener en linea mi blog. Un ingreso pasivo extra no viene nada mal verdad?

Pasos para crear la tabla comparativa

Lo principal será que instales los dos plugins antes mencionados y está demás decir que deberás activarlos. Ya con esos dos primeros pasos solo falta, abrir dos ventanas en el navegador, una para amazon y la otra para fontawesone. Para que no estés de manera constante accediendo a la ultima web te recomiendo copiar el icono en un block de notas.

Así sería nuestra tabla comparativa

Muy bonita y fácil de interpretar para los visitantes de nuestros sitios web. Verdad? Los pasos son muy sencillos y vamos a ello.

Pasos numerados para crear la tabla

1.- Nos dirigimos a la barra lateral de wordpress y buscamos Table Maker. Click derecho en el abrir en una nueva ventana. El área donde crearemos nuestra primera tabla.

Ajunto imagen

2.- En donde dice table damos clic en add new.

3.- Ahora le asignamos un nombre y luego de damos a create table. Es importante realizar los pasos tal cual te los detallo.

4.- En mi caso usaré el nombre de micrófonos. Ve la imagen N° 1.

5.- Luego nos mostrará la siguiente imagen.

6.- Ya seleccionada la tabla es momento de agregar mas columnas y filas. Por defecto vienen 4X4, éstas pueden ser eliminadas; pero no lo aconsejo, es mejor agregar mas filas y dejar las 4 columnas.

A mi me gusta hacer comparaciones de tres productos. Según los expertos en neuromarketing el cerebro reacciona mucho mejor cuando tiene tres alternativas, similar al semáforo. Stop, avanzar y cambio. Quizá es el peor ejemplo; pero no se me ocurrió otro.

Quiero decir que; si le pones 4 o 5, le dificultas aun mas la acción de comprar. Y tampoco puede ser 2 porque no tendrá la suficiente información. El 1 se utiliza para análisis y opiniones.

Bueno ésta no es una clase de neuro ventas. Y tampoco soy un neuromarketer; pero comparto mi poco conocimiento y espero te ayude.

7.- En la parte inicial de color gris, escribirás el nombre del producto o lo ya conocido(Más Vendido, Nuestro Favorito, Más Barato).

8.- En la primea columna escribirás las características que los tres productos tiene en común o muy similares. En mi caso he usado 11 filas y 4 columnas. Los productos que vas a comparar pueden necesitar mucho menos o quizá un poco mas.

Funcionalidades de la tabla

Al final de la tabla tendremos unos códigos que son de mucha ayuda para calificar o lo que yo llamo, resaltar las buenas o pésimas características, funciones y detalles de un producto. Los cuadros, en este caso las celdas de la tabla soportan código html, por lo que se puede agregar imágenes, botones, listas ya sea numeradas o con viñetas ademas shortcodes.

Adjunto Imagen

Describiendo cada código

Es mucho más fácil cuando se explica y se da una breve información de cada término. Así que eso haré en éste momento.

Primeros códigos

%TICK%: Un check de ok o bueno, en color verde.
%CROSS%: Una equis, que indica lo malo del producto.
%INFO%: A esto le llamo informacional.
%WARNING%: Que esa característica no está disponible.
%HEART%: Un corazón, puedes usarlo como que es tu favorito.
%LOCK%: Un candado, mayormente no suelo utilizarlo
%STAR%: Estrella de valoración, de color amarillo.
%STAR-EMPTY%: Una estrella; pero no completamente amarilla.

Para darte una ayuda de como se usan los códigos para crear estrellas. En el siguiente párrafo, lo explico muy bien.

Si un determinado producto en amazon tiene 5 estrellas amarillas, entonces deberás usar 5 veces el primer código; pero si tiene apenas 4, el proceso es el mismo y la estrella numero 5 sería el ultimo código. Espero me hayas entendido. Lo mismo aplica para 3, 2 o 1.

Adjunto imagen

El segundo grupo de códigos

Se usan para resaltar el producto que tu estás queriendo vender a tus lectores. Como funcionan? Ahora te describo; pero un claro ejemplo es lo que viste en la tabla de demostración.

%ROW-CHOICE%: Seleccionará toda la fila con un recuadro de color verde.
%COL-CHOICE-IMAGE%: Hace lo mismo; pero ahora agrega una imagen con un mensaje en ingles «Editor’s Choice». Quiere decir, elección del editor.
%ROW-CHOICE%: Igual que el primer código; pero ahora selecciona la columna.
%ROW-CHOICE-IMAGE%: Mismo proceso que el segundo; pero también en forma vertical, tal como el tercer código.

Ajunto imagen

De los dos últimos, yo uso el numero 4. No detallaré el motivo, pero si debo decir que está fundamentado en neurmarketin. Pero si a ti se te da mejor por comparar los productos en horizontal deberás usar los dos primeros.

Agregando imágenes y el botón para comprar

Te comenté que las cedas soportan código html verdad? Pues bien eso quiere decir que: podemos agregar todo los códigos que se usan en el lenguaje html. Puedes agregar imágenes, botones, videos, h1,h2,h3 y muchas mas opciones; pero esto lo recomiendo para quienes conocen de html. A nosotros solo nos interesa; imágenes y botones.

Insertando la imagen del producto

9.- Nos dirigimos a donde dice Image helper, damos click al botón choose image, se nos mostrará una ventana emergente para seleccionar la imagen. Si has descargado las imágenes del producto deberás subirlas a tu wordpress; sino fuera ese el caso, sigue los pasos que hago yo.

Adjunto imagen

Selecciona cualquier imagen que tengo en mi wordpress, y le doy a «use this image«. Enseguida se nos mostrará la imagen y una linea de código, la que deberemos cortar o copiar.

Ejemplo del código

<img src ="https://cruzdavid.com/wp-content/uploads/2019/02/trofeo-seo" alt="" />

10.- Nos vamos a la celda donde queremos mostrar esa imagen, y pegamos dentro.

11.-  Vamos a amazon, debo asumir que ya tienes los productos que vas a comparar.

12.- Selecciona una imagen del producto con click derecho y copiar dirección de la imagen.

13.- Ahora borramos toda la url de la imagen que seleccionamos de nuestro wordpress ejemplo(<img src =»[mks_highlight color=»#1e73be»]https://images-na.ssl-images-amazon.com/images/I/410qpNCiZjL._SX425_.jpg[/mks_highlight]» alt=»» />) y dentro de las comillas pegamos la url del producto antes copiado en amazon.

14.- En el atributo atl puedes escribir el nombre del producto. Repite éste mismo proceso para las dos imágenes restantes. Aclaro, ya no es necesario que repitas el paso 9, solo copia y pega en las dos celdas restantes y cambia la url de los productos.

Ya solo nos queda hacer los botones, esos que enviarán a amazon a tus lectores, listos para comprar. Vamos a ello.

Agregando botones

El plugin que instalamos creará un icono en las funcionalidades del editor de wodpress, lo puedes identificar al pasar el muose por encima y debe mostrar un texto como este»Insert Button«.

15.- Damos click en él. Su funcionalidad y manejo es cosa de niños, no te vas a complicar la vida creando botones. Es mas ésta es la parte mas divertida. Veamos.

Te explicaré lo mas importante, es decir lo que yo uso.

16.- En la opción falt damos click y seleccionamos Flat Rounded.

17.- En Medium lo dejamos tal cual, pero si deseas un botón mas pequeño usa small, lo mismo para que sea mas grande.

18.- En text lo que el usuario verá (Ver precio, ver en amazon, ira a amazon o comprar ya!)

19.- En url, pegas tu link de afiliado, cosa sencilla.

20.- Agregas nofollow y que se abra en una nueva ventana.

21.- Ahora seleccionamos la pestaña icon.

22.- De entrada seleccionamos before. Y elegimos un icono relacionado con comprar o algo similar, yo uso el icono de un carrito.

Ahora nos falta darle color al botón.

23.- Click en el segundo cuadrado que está antes de la letra B. Ahí eliges un color que mas te guste. Yo uso, color naranja y color verde. También puedes hacer que se vea mas gruesa la letra, para ello damos click en la B.

24.- Ahora ya hemos terminado, y damos click en update. Pero si deseas guardar éste botón puedes dar click en el icono del disket.

Una ves presionado en update se cerrará la ventana emergente. Y nos mostrará un botón en nuestro editor de wordpress.

Ejemplo del botón, ya creado

Ver Precio https://amzn.to/2T7WZlT

Para llevarlo a nuestra tabla en formato html, sigue éstos pasos.

25.- Selecciona el texto que le pusiste a tu botón, dirígete a donde dice HTML en el editor de wordpress. Parte superior derecha, justamente al costado de Visual.

26.- Ahora copia todo, desde donde inicia con <a>hasta el cierre </a>, puedes copiarlo o cortarlo. Yo copio porque ese botón me servirá para ponerlo debajo del producto que a posterior hago su descripción, pros y contras.

27.- Ya copiado el botón, vamos a la tabla. Nos dirigimos a la celda donde tenemos el texto comprar o el que tu hayas escrito. En las 3 celdas vacías págalo y solo reemplaza el link del producto.

Ahora si ya tenemos todo casi listo, solo faltan los últimos retoques.

Necesitamos que sea responsive, es decir que en móvil los productos se vean uno bajo del otro con sus respectivos botones y demás características. Vamos a terminar.

28.- Al costado del nombre de la tabla damos click en «Table column stack«. Luego donde dice «green«, selecciona el color que mas te guste. Yo uso el color naranja y damos al botón «save Chnages«.

29.- Ahora vamos a hacer que todo esté centrado, para ello marcamos los dos checks que están debajo del nombre o al costado. Una vez hecho este último paso, ya tenemos la tabla creada y lista para ponerla en nuestra entrada o pagina.

Usando el shortcode de la tabla

El shortcode es una pequeño código que se puede utilizar las veces que sea, en todas las paginas o entradas de nuestro worpdess, y siempre funcionará igual. Copiamos el shortcode que está justo debajo del nombre de la tabla.

30.- Nos dirigimos a la entrada y lo pegamos precisamente después del primer o segundo párrafo. Así tienes mas probabilidades de hacer ventas; pero ello dependerá del buen trabajo que hayas hecho previamente.

Nada difícil; pero si toma un buen tiempo crearla. Esto se puede hacer mas automático? Sí pero solo cuando tienes acceso a la API de amazon y compras el plugin aawp. De tal modo agilizas el proceso para comparar productos. Claro que cuando ya tienes ventas es mejor invertir para ahorrar tiempo.

Hay otros plugins para crear tablas gratis de manera más rápido? La respuesta es no. Pero en este tutorial te enseñan como crear una tabla con el plugin «TablePress«. Te lo recomiendo.

Creando el icono de amazon

Si te preguntas como he creado el icono de amazon para ponerlo en la tabla, pues es muy sencillo. Solo debes buscar una imagen de ese icono en google con formato .png y editarla en photoshop dándole las siguientes dimensiones (40px X40px). Luego das a guardar con el mismo formato. Ahora ya tienes el icono para usarlo en todo tu sitio web. El proceso para ponerlo dentro de la tabla es el mismo que para mostrar la imagen del producto.

No sabes usar photoshop o no deseas hacerlo, ve a la imagen que está en la tabla y dale click derecho, guardar imagen como. Asunto solucionado.

Espero que te haya servido de mucha ayuda y lo pongas en práctica.

Conclusión

Como verás es trabajoso crear una tabla usando varias herramientas; pero llega un punto en que te acostumbras y te divertirás mientras lo haces. Usar varias herramientas a la vez te permite usar mucho mas tu imaginación y eso es bueno para cuando se hacer marketing de contenido.

Hasta la próxima, no olvides compartir con tus amigos que tienen webs dedicadas a monetizar con amazon y hacen reviews de los productos. También es ideal para tiendas online o infoproductos. Comparar otros servicios  Suerte y muchos éxitos. Gracias por leer. 😀

Por si te interesa comprar el theme rehub solo debes visitar . Que theme uso? Johannes, lo encuentras en . Si necesitas ver como funciona el plugin aawp, visita . Lo recomiendo mucho cuando ya se tiene la API de amazon, para poder usarlo en su totalidad.