Una guía detallada para optimización para sitios WordPress

Índice del artículo

1. Diagnóstico: herramientas para evaluar la velocidad actual
2. Plugins: sólo los estrictamente necesarios
3. Imágenes: optimizadas y con su versión webp
4. Tip secreto: el mejor plugin de cache para WordPress
5. Medidas técnicas para el servidor
6. Correr nuevamente las herramientas de diagnóstico.
7. Caso de éxito: soluciones en optimización WordPress

Consejos para optimizar tu sitio WordPress

Con una gran cantidad de excelentes complementos y temas disponibles, WordPress facilita la creación de un sitio web completo con muchas funciones.

Sin embargo, es fácil que tu instalación de WordPress se infle y no esté optimizada, lo que perjudica el rendimiento del sitio.

En esta guía, enumeramos algunos complementos gratuitos y escribimos algunas recomendaciones para los desarrolladores WordPress así como usuarios que buscan un servicio de optimización de sitios web WordPress.

En nuestra experiencia estos son los puntos más importantes a la hora de optimizar un sitio web.

1. Diagnóstico: herramientas para evaluar la velocidad actual

Lo primero que debemos conocer es dónde estamos parados respecto a la velocidad de el sitio WordPress. En algunos casos puede que no se note a simple vista, pero luego de correr un test de velocidad con estas herramientas podremos conocer más en detalle qué tan optimizado está nuestro sitio.

Asimismo podremos saber qué componentes están generando una carga más lenta y sobre todo tener indicios de cómo resolver la lentitud de el sitio web WordPress.

Recomendamos utilizar estas herramientas de diagnóstico web, c:

a) Las herramientas de optimización de Google: estas son esenciales por el simple hecho de que toda la mejora que perciban impactará de lleno en nuestro posicionamiento en el buscador de Google. Un primer y rápido análisis de velocidad web puede realizarse con Test my Site de Google que aportará una métrica de velocidad para móviles. En segundo lugar podremos realizar un examen más exhaustivo con la herramienta Page Speed Insights . La misma nos indicará toda serie de métricas y un detalle pormenorizado sobre los motivos del puntaje de optimización tanto para móviles como para pc desktop.

b) GTmetrix: Entre sus variadas herramientas existe la posibilidad de descarga de un reporte en pdf así como gráficas de visualización de la carga de componentes en tu sitio web.

c) Pingdom: Pingdom ofrece monitoreo de rendimiento y tiempo de actividad rentable y confiable para su sitio web. Con Pingdom puede monitorear el tiempo de actividad, el rendimiento y las interacciones de sus sitios web para una mejor experiencia del usuario final. La ventaja de pingdom es que permite simular la velocidad desde diferentes partes del mundo.

Extra Tip: Vale la pena volver a analizar la página después de cada paso de optimización para que puedas ver qué elementos son grandes ganancias y qué pasos posiblemente empeoren las cosas.

2. Plugins: sólo los estrictamente necesarios

Es común instalar muchos complementos en el transcurso de una implementación de un sitio WordPress. La desactivación de complementos reduce las solicitudes de la página y el tamaño total de la página.

Por eso es importante revisar uno por uno qué funcionalidad atienden en tu sitio web y eliminar los que ya no se necesitan o no se usan. O los que pueden ser reemplazados por una línea de código sin demasiado esfuerzo ni conocimiento. Como Font Awesome, muy utilizado para implementar íconos de calidad, que puede ser reemplazado por solo una línea de código en la cabecera del tema (header.php)

<script src=»https://kit.fontawesome.com/024d56c0fb.js» crossorigin=»anonymous»></script>

Por último es importante mantener los plugins actualizados ya que pueden contener mejoras de rendimiento y seguridad.

3. Imágenes: optimizadas y con su versión webp

La optimización de imágenes es una tarea importante y, en muchos casos, de alto impacto en su flujo de trabajo de optimización de WordPress, reduce el tamaño total de la página así como la velocidad de carga de los elementos de la misma. Asimismo incorporar formatos de última generación como webp (muestra la misma calidad que JPEG sin pérdidas) permite un mejor rendimiento y es uno de los requerimientos más usuales que Google exige para la optimización de la página y la consecuente mejora en el posicionamiento.

Existen varias herramientas para optimización de imágenes de forma masiva, como shortpixel, imagify o smush que si bien son potentes e contienen además la posibilidad de generar las versiones webp de las imágenes existentes en el carrete de imágenes, en general permiten un porcentaje limitado de imágenes a comprimir por mes.

Otra herramienta interesante es EWWW Image Optimizer que permite comprimir y generar las versiones webp de forma masiva sin límites o cuotas mensuales. Recomendamos tenerla instalada y activarla cada vez que se vayan a incorporar contenidos a la web. Asimismo para subir de mejor manera nuestras imágenes podemos previamente pasarlas por un compresor como compressor.io o redimensionarlas con iloveimg luego pasarlas por un conversor a webp online y subir esas versiones directamente.

4. El tip secreto: el mejor plugin de cache para WordPress

¡Atención a esta sección! Con el almacenamiento en caché, tu sitio web brindará datos ya generados (es decir, contenido almacenado en caché) a los visitantes, en lugar de generar datos dinámicamente para cada visita. Sea cual sea el que instalemos, es prioritario configurar lo siguiente: Minimizar HTML, Minificar CSS,  Habilitar la compresión GZip.

Una vez más, hay muchos complementos de almacenamiento en caché disponibles para WordPress. Como WP Fastest Cache (ligero y gratuito) o WP Rocket (muy completo pero de pago). 

Pero la que sin duda hemos encontrado infalible luego de varias optimizaciones web es una herramienta de cache poco conocida, que es muy bien recibida por las herramientas de diagnóstico de google.

Te compartiremos el mejor plugin para optimizar tu web que utilizamos en todas nuestras implementaciones. Permite generar más de 90 puntos en el ranking de optimización de Google tanto para pc desktop como para móviles. ¡TOTALMENTE GRATIS!

CLICKEÁ EN ESTE LINK PARA SOLICITAR EL

PLUGIN Y LA GUÍA DE INSTALACIÓN

5. Tips más técnicos: Cloudflare, carga selectiva de elementos y configuración del servidor

a) Cloudflare actúa como intermediaria entre el cliente y el servidor, usando unos sistemas llamados proxies reversos (reverse proxies) para crear copias espejo y cachés de sitios web. Eso permite distribuir las copias y que estén accesibles de forma rápida y segura a los clientes. Podes conectarla con un plugin.

b) Carga selectiva: Por otro lado a medida que agregas complementos a tu instalación de WordPress, los scripts de los complementos se agregan al encabezado global de la página, lo que significa que se cargan en cada página.

Entonces, cada vez que un visitante carga su página, también se cargan todos los scripts de complementos, ya sea que realmente se necesiten en la página específica o no . Cuantos más complementos tenga, más scripts tendrá, lo que puede tener un gran impacto en su rendimiento.

Una tarea efectiva que puede realizar para mejorar el rendimiento de la página es servir solo los scripts que realmente se necesitan en las distintas páginas de su sitio web. Puede realizarse manualmente con un plugin como WP Asset Clean Up.

c) Configuración del servidor: podes ver una guía detallada en el blog de GTmetrix.

6. Último paso en la optimización para sitios WordPress: 

Por último debemos correr la purga de Cache de el plugin de cache que tengamos instalados, borrar el historial de navegación en nuestro browser y correr una vez más las herramientas de diagnóstico enunciadas en el punto 1.

Deberías ver mejoras en las siguientes métricas:

• Puntuaciones de rendimiento/estructura
• Primera pintura con contenido
• Pintura con contenido más grande
• Tiempo para Interactivo
• Índice de velocidad
• Número de solicitudes

También deberías ver mejoras en las siguientes auditorías:

• Elimine los recursos que bloquean el renderizado
• Minimizar CSS/JavaScript
• Reducir CSS/JavaScript no utilizados
• Codifique imágenes de manera eficiente
• Habilitar la compresión de texto
• Servir activos estáticos con una política de caché eficiente

7. Caso de éxito: soluciones rápidas en optimización de WordPress

En esta implementación ejecutamos una migración de otro sitio anterior replicando los contenidos de un sitio original que el cliente poseía anteriormente, por lo que luego tuvimos que realizar una serie de pasos para poder optimizarla correctamente.

Comenzamos con estos puntajes:

Luego de pasar las imágenes por EWWW Optimizer, instalar el plugin de cache – nuestro tip secreto – que recomendamos en el punto 4 y conectar a la CDN de Cloudflare obtuvimos estos resultados:

Conclusión sobre optimización para sitios WordPress

Es importante respetar estos ítems a la hora de tener un sitio web dinámico y bien posicionado.

WordPress tiene muchos complementos que no solo te permiten crear fácilmente un sitio web con todas las funciones, sino que también optimizan el rendimiento para una buena experiencia de usuario.

Los complementos de optimización anteriores son una buena opción general para la mayoría de los sitios web, tanto en términos de compatibilidad como de mejora del rendimiento del sitio.

Si tenés un sitio de WordPress, probá seguir esta guía y mejorá la experiencia de tu página para todos los visitantes. O contáctanos para optimizar tu sitio web ecommerce.

Fuentes: https://gtmetrix.com/wordpress-optimization-guide.html

La entrada Guía de optimización para sitios WordPress se publicó primero en Cónclave.

¿Cómo solicitar presupuesto para un sitio web institucional o e-commerce?

Índice del artículo

1. ¿Es una migración o un proyecto desde cero?
2. Dominio, Hosting y cuentas de mail
3. Identidad y Contenidos
4. Tamaño del proyecto (ecommerce, portfolio o blog)
5. Funcionalidad e Integraciones

¿Cómo solicitar cotización de un sitio web institucional o ecommerce?

Cuando se toma la decisión de agregar un canal virtual a nuestras opciones de comunicación con usuarios y clientes es de gran utilidad contar con una hoja de ruta que nos servirá para clarificar internamente a qué apuntamos y transmitirlo en detalle a desarrolladores WordPress o agencias dedicadas a implementar ecommerce, blogs y sitios institucionales.

En nuestra experiencia estos son los puntos más importantes a la hora de solicitar un presupuesto para desarrollo web.

1. ¿Es un proyecto desde cero, una migración o una nueva funcionalidad?

Lo primero que deberá ser aclarado es el tipo de proyecto al que apuntamos. Un proyecto desde cero tendrá un grado de complejidad diferente que una migración de una página en un formato o tecnología anterior o un agregado de una funcionalidad.

Solicitar cotización para un proyecto web de cero permitirá mucha más flexibilidad a la hora de elegir el formato y herramientas a utilizar. Mientras que una migración si bien por un lado permitirá acelerar el proyecto por contar con una estructura y contenidos de la página, tendrá la contrapartida de cierta rigidez a la hora de integrar o mantener las funcionalidad deseadas.

El agregado de una o varias nuevas funcionalidades en muchos casos requerirá un permiso temporal al desarrollador o agencia. Esto para comprobar la estructura interna de la web a la que se le desea realizar modificaciones, la factibilidad y las herramientas necesarias para llevarlo a cabo.

2. Dominio, Hosting y cuentas de mails

Dominio: es nuestro nombre en el espacio virtual, el principio de todo. Es importante clarificar si ya se cuenta con el mismo o si se debe incluir en el presupuesto.

En caso de solicitar que se incluya, será útil aclarar qué tipo de dominio precisaremos (.com o .com.ar). Los valores y moneda de pago difieren sustancialmente, así como algunas variantes para permitir a la Agencia o desarrollador chequear la disponibilidad del dominio. Cuánto más popular sea la palabra o frase que deseamos para nuestro dominio más difícil será que esté disponible, y si lo está, su costo será considerable. El dominio es un costo que debe ser pagado en forma anual. Se puede chequear la disponibilidad de dominios locales en nic.ar y dominios .com en Namecheap o Godaddy.

Hosting:

será el espacio donde alojaremos nuestra web o aplicación. En este punto es importante clarificar si ya se cuenta con un servicio de hosting y cuál sería este. Eso indicará al desarrollador o agencia cómo debe realizar la implementación, y que plan es el más adecuado para el tipo de web que se desea. En caso de no contar con un hosting muchas agencias, como es nuestro caso en Cónclave, cuentan con alianzas con servicios de hosting que permite abaratar costos y tener concentrado un pack de servicios con un solo oferente. Para cualquiera de los dos casos, es importante tener en cuenta que no será lo mismo solicitar un hosting para un blog o una landing page que para un ecommerce o marketplace. Estos últimos incluirán múltiples funcionalidades como el carrito de compras, cotizadores online, registro de usuarios, conversor de monedas etc.. 

Mails:

este caso se podría incluir dentro de lo considerado para el hosting, ya que los servicios de hosting suelen incluir dentro de sus plantes cuentas de mails. Nuevamente será importante aclarar si ya contamos con un servicio de mailing o no, cuántas cuentas precisamos dar de alta. También irá atado al dominio ya que las direcciones de mails contendrán el dominio luego del @ .

presupuesto para un sitio web o e-commerce

3. Identidad, Referencias y Contenidos

Si queremos algo sobrio, con caminos de usuario simples para que el usuario encuentre rápidamente lo que precisa, o bien si precisamos que el usuario quede impactado visualmente dando mayor prioridad a sliders con videos, transiciones y botones que generen deslizamientos en la página etc.. Las posibilidades son muchas, por ello es bueno acotar lo mejor posible la identidad del proyecto.

Identidad:

En este punto será importante aclarar cuál será la identidad que se está buscando. Para que el encargado de cotizar pueda incluir elementos u opciones estéticas dentro del presupuesto. Esto permitirá tomar una decisión mejor fundada a la hora de elegir una agencia para implementar un sitio web o ecommerce. 

Páginas de referencia:

A su vez, suma mucho añadir páginas de referencia, o secciones dentro de las mismas que permitan hacerse una idea más acabada de la identidad que se pretende.

Contenidos:

Por último pero no menos importante, es muy positivo haber realizado el ejercicio previo de un menú inicial. Esto permitirá listar la cantidad de páginas internas que requerirá el proyecto, así como las relaciones internas necesarias. Ejemplos de estas páginas internas son la sección de «Nosotros» o o «Sobre la empresa», «Contacto», «Preguntas Frecuentes» entre otras.

Si bien el detalle o secciones dentro de cada página interna ya entrará más en la órbita del desarrollador, así como las recomendaciones según su expertise, siempre es importante que se adjunten aclaraciones en caso de alguna sección sea de especial importancia. Para dar un ejemplo, no será lo mismo una sección de Contacto estándar con un texto inicial, un formulario web, un mapa y datos de contacto que una sección de contacto de una clínica donde haya que seleccionar un especialista y un horario disponible, donde ya se apunta más a una sección de reservas que de contacto.

4. Tamaño del proyecto (ecommerce, portfolio o blog)

A continuación es importante aclarar el tamaño del proyecto. Muchas agencias utilizan este ítem para medir el tiempo y recursos que deberán dedicarle. Es importante aclarar no solo la cantidad de productos o servicios (100, 1.000, 10.000) que se desean ofrecer sino también la complejidad de los mismos. No será lo mismo una web para estudio de arquitectura que quiera ofrecer una docena de servicios con un formulario para solicitar entrevista en cada uno de ellos que una vinoteca con muchas categorías y cientos de productos o una imprenta con 20 o 30 productos variables donde el usuario debe seleccionar tamaño, color, forma, grosor del papel entre otros atributos posibles con distintos valores resultantes según las variantes escogidas antes de agregar al carrito. Cada proyecto requiere un armado distinto del archivo de productos a subir, que llevara más o menos tiempo en función de la complejidad.

Para el caso de una web para portfolios o un blog si bien pueda tener una menor complejidad también aplican las consideraciones de cantidad de elementos y categorías necesarias.

En este punto también es importante considerar si se proveerán las imágenes de los elementos a cargar en la web con el formato preciso (600×600 píxeles por ejemplo para productos) o si esto también será encargado a la agencia o desarrollador.

5. Funcionalidad e Integraciones 

Este último punto está destinado a lo que se pretende que los usuarios así como el operador o administrador del sitio puedan realizar en nuestro sitio web. Es importante sumar un listado de funcionalidades e integraciones para que el presupuesto pueda contener lo más fielmente posible la cantidad de horas y recursos necesarios.

Ejemplos de funcionalidades son desde ya:

• Agregar al carrito
• Formularios Web
• Cotizador Online
• Conversor de monedas
• Multilenguaje
• Ofertas por cantidad
• Web Chat o Whatsapp Web
• Buscador de productos

Adicionalmente la definición de las integraciones requeridas son importantes ya que en este punto la agencia o desarrollador podrá definir el alcance total del proyecto, si puede o no cumplir con la totalidad de los requerimientos o precisa tercerizar alguno de ellos en alguna agencia especializada. Esto suele ser particularmente importante cuando se requiere que el sistema ecommerce se integre con el sistema de gestión interna y el mismo posiblemente haya sido generado hace mucho tiempo y a medida. Algunas integraciones pueden ser las que se muestran a a continuación:

• Pasarela de pago (Mercado Pago, Paypal)
• Pasarela de Envíos (OCA, Correo Argentino, Fedex)
• Sistema de envíos de mailing (Mailchimp, Doppler)
• Facturación (AFIP)
• Sistemas de gestión (Odoo)
• Otros sistemas internos

Conclusión sobre presupuesto para un sitio web o e-commerce

Este listado de ítems a tener en cuenta para pedir un presupuesto web vale tanto para un proyecto de cero, como para una adaptación o nueva funcionalidad que estemos buscando. El mayor detalle permitirá al encargado de generar un presupuesto web contar con datos precisos para listar las tareas, tiempo y recursos necesarios de la mejor manera. Esto da lugar a tener un presupuesto en línea con la expectativa y minimiza los errores de interpretación que podrían dar lugar un importe mayor o menor al necesario.

Tener claro internamente qué tipo de web necesitamos permite solicitar presupuesto para un sitio web a varios oferentes en poco tiempo y recibir una respuesta con mayor celeridad. Y dado que todos contarán con el mismo detalle será más simple comparar cada una de las ofertas. Una solicitud de presupuesto detallada genera también confianza, respeto y compromiso a futuro en el desarrollador web o agencia que tomará el trabajo a futuro.

Fuentes: https://conclave.ar

La entrada 5 claves a la hora de pedir un presupuesto para un sitio web o e-commerce se publicó primero en Cónclave.

Paso a paso para duplicar tus contactos gratuitos en Mailchimp

Índice del artículo

1. ¿Qué es el email marketing?
2. ¿Qué es Mailchimp?
3. Cómo ampliar los 2.000 contactos del plan gratuito de Mailchimp en pocos clics

¿Qué es el email marketing?

Email Marketing (o marketing por correo electrónico) es toda comunicación realizada por email entre una empresa y sus contactos (o clientes). Una campaña de Email Marketing puede ser desarrollada en texto o HTML y contener promociones, contenidos, etc. En general, se envían con una herramienta de disparo de emails.

La ventaja del email marketing es que está totalmente incorporado a nuestras vidas, por ende es un método de llegada muy efectivo. Hay distintos tipos de correos que podemos enviar, entre ellos:

• NEWSLETTER
• PROMOCIONAL
• ESTACIONAL
• MARKETING DE BIENVENIDA
• PARA CLIENTES INACTIVOS
• PARA ECOMMERCE
• AUTOMATIZACIÓN DE EMAILS

Existen herramientas para tareas importantes como la limpieza de base, la comprobación de entregabilidad, la calidad del email entre otros. Existen plataformas que combinan varios de estos servicios y cuentan con planes gratuitos básicos y luego pagos a medida que crecemos en cantidad de contactos o en el tipo de herramientas que precisamos. Una de ellas es Mailchimp, unas de las más famosas y accesibles para las personas que recién comienzan en el mundo del email marketing. 

¿Qué es Mailchimp?

Mailchimp es una plataforma de automatización de marketing que te ayuda a compartir campañas de correo electrónico y publicitarias con clientes y otras partes interesadas. Su enfoque del marketing se centra en prácticas saludables de administración de públicos, campañas bellamente diseñadas y un potente análisis de datos. Mailchimp además nos permite:

• Hacer un uso muy intuitivo de su plataforma online.
• Crear newsletters con diseños personalizados, de modo que quienes las reciben lo hacen con un formato visual único y diferenciador.
• Obtener y medir los resultados de cada campaña de email marketing, pues sus diseños son estéticamente muy agradables.
• Llevar un seguimiento de la actividad de tus suscriptores (tanto los más activos como aquellos que parecen no tener interés en tu negocio).
• También ofrece una poderosa integración con plataformas de ecommerce, por lo que es un gran activo a la hora de implementar un ecommerce con WordPress ya que permite acumular los contactos que ingresen por registros, formularios o compras por WooCommerce, así como enviarles recordatorios de carritos abandonados y mails de bienvenida a los contactos registrados.

Como ocurre con muchos recursos digitales, MailChimp también cuenta con una versión gratuita y otra mejorada de pago. La versión gratuita llega hasta los 2.000 contactos y puede que en poco tiempo esta cantidad quede corta y tengas que estar limpiando contactos muy seguido para poder mantenerte dentro del límite, ya que si bien es una gran herramienta de base, una vez que empezamos a escalar en las versiones de pago el costo puede ser bastante alto para nuestro tamaño de negocio.

Aquí compartimos una guía que con una pequeña carga extra de trabajo nos permitirá duplicar la cantidad de contactos disponibles en Mailchimp gratis.

Cómo ampliar los 2.000 contactos del plan gratuito de Mailchimp

Aquí una guía breve de soluciones una vez llegamos al límite de contactos en Mailchimp. Siempre es recomendable hacerlo cuando estemos en los 1.950 contactos de la cuenta original para dejar un resto por las dudas.

1. Crear una nueva cuenta de correo de Mailchimp e ingresar los correos nuevos que no podemos ingresar en la cuenta original (en la sección de Audience > All contacts > import contacts)

   

2. Regresar a la cuenta original y diseñar la campaña que enviaremos normalmente.

   

   

3. Una vez finalizada el diseño de la campaña daremos click en «Save this design as template» (guardar este diseño como plantilla). De esta manera almacenaremos la campaña en la sección de plantillas y quedará disponible para usarla de base en otras ocasiones.

   

4. Enviar la campaña a nuestra base de contactos como lo hacemos normalmente.

5. Una vez enviada la campaña iremos a la sección de Campañas > Email templates y haremos clic en el botón a la derecha de la plantilla guardada recientemente.  Se abrirá un menú de opciones y haremos clic en «Share» (Compartir)
   
   
6. En esta pantalla escribiremos el correo con el que dimos de alta nuestra segunda cuenta de mailchimp, para compartir la plantilla a esa cuenta. Luego podemos cerrar la cuenta original de Mailchimp.
   
   
7. Acto seguido nos dirigimos a la cuenta de correo de nuestro nuevo Mailchimp, donde habremos recibido un correo para añadir la plantilla guardada a nuestra nueva cuenta de Mailchimp.

   

8. Una vez añadida nos dirigimos a nuestra nueva cuenta de Mailchimp.

9. Allí crearemos nuestra campaña normalmente, y en la sección de diseño en lugar de hacer un diseño de cero haremos clic en la solapa de «Saved Templates» (Plantillas guardadas). 
   
   
10. Así podremos enviar en pocos clics la misma campaña que enviamos a nuestros contactos de la cuenta original a los nuevos contactos de nuestra segunda cuenta, duplicando nuestra base de contactos con una pequeña carga extra de trabajo como dijimos al principio.

Extra: duplicar tus contactos gratuitos en Mailchimp más de una vez

Tip sorpresa: este proceso podemos hacerlo cuantas veces queramos, dependiendo de nuestras ganas y tiempo para replicar campañas, ya que la herramienta de compartir campañas de Mailchimp nos permite ingresar cuantos correos queramos, separados por coma.

Esperamos que esta mini guía para utilizar mailchimp al máximo les sea útil a quienes comienzan en el mundo del email marketing.

Fuentes: mailchimp.com

La entrada Tuts: Cómo duplicar tus contactos gratuitos en Mailchimp se publicó primero en Cónclave.

Medidas eficaces para evitar el spam en tus formularios de contacto

Índice del artículo

1. ¿Qué es Contact Form 7?
2. Tips Anti Spam para formularios de Contacto
   1. Añadir Recaptcha
   2. Instalar el complemento  Contact Form 7 Honeypot
   3. Instalar Aksimet
   4. Palabras no permitidas en comentarios

¿Qué es contact form 7?

Contact Form 7 es un plugin de WordPress que puede gestionar múltiples formularios de contacto, por ser ligero suele venir ya integrado en la mayoría de plantillas de WordPress. Además, se puede personalizar el formulario y el contenido de los correos electrónicos de manera sencilla mediante un simple marcado. El formulario es compatible con envíos por Ajax, CAPTCHA, filtrado de spam de Akismet y mucho más.

Tips Anti Spam para formularios de contacto

1. Añadir reCAPTCHA

El plugin contact form 7 trae una integración con reCAPTCHA.Para acceder, simplemente navega hasta ‘Contacto’ en la barra de menú de la izquierda y selecciona ‘Integración’. Se presentará un enlace a google.com/recaptcha. Deberás registrarte para obtener una clave API. A continuación, agrega un código abreviado a tu formulario de contacto [recaptcha] y se mostrará reCAPTCHA.

2. Instalar el complemento Contact Form 7 Honeypot

Esta adición al Formulario de contacto 7 agrega la funcionalidad antispam básica de honeypot para frustrar los robots de spam.

Si bien parte del spam se envía manualmente, la gran mayoría la publican bots con secuencias de comandos específicas para enviar spam a la mayor cantidad de tipos de formularios. Con este método, completan los campos de forma un tanto ciega, independientemente de si el campo debe completarse o no. Así es como un honeypot atrapa al bot: introduce un campo adicional en el formulario que, si se completa, hará que el formulario no se valide.

3. Instalar Akismet

Akismet compara sus comentarios y envíos de formularios de contacto con una base de datos global de spam para evitar que su sitio publique contenido malicioso. El complemento verifica automáticamente todos los comentarios y filtra los que parecen spam.

El primer paso es activar el complemento Akismet. Dado que el paquete de complementos de Akismet se incluye con WordPress, no es necesario instalarlo manualmente. Ve al menú Complementos y simplemente activa el complemento titulado Akismet Anti-Spam.

Necesitas una clave API para usar Akismet. Si lo usas en un blog personal, puedes obtener una clave API de forma gratuita. Para sitios corporativos o comerciales, hay suscripciones pagas disponibles.

El objetivo principal de Akismet es proteger los formularios de comentarios de WordPress. Para usar Akismet para proteger el Formulario de contacto 7, debes dar opciones específicas a los campos de entrada (etiquetas de formulario).

Hay tres opciones relacionadas con Akismet:

akismet:autor

Le da esta opción al campo donde los remitentes ingresan sus nombres.

Ejemplo: [texto* tu-nombre akismet:autor]

akismet:autor_email

Le da esta opción al campo donde los remitentes ingresan sus direcciones de correo electrónico.

Ejemplo: [correo electrónico* tu-correo electrónico akismet:autor_correo]

akismet:autor_url

Le da esta opción al campo donde los remitentes ingresan la URL de sus sitios web.

Ejemplo: [texto su-url akismet:author_url]

Para implementar Akismet en un formulario de contacto, usa una o más de estas opciones en el formulario. Para obtener resultados precisos, se recomienda utilizar tantas opciones como sea posible.

Cuando se implementa Akismet, Contact Form 7 envía datos a Akismet cuando un usuario envía el formulario. Los datos se componen de todas las entradas del usuario (no solo los campos con una opción akismet:*) y variables de los entornos. Akismet verificará los datos para responder con una respuesta de «spam» o «ham».

Si la respuesta es «spam», Contact Form 7 suspenderá el correo electrónico y mostrará un mensaje que dice: «Hubo un error al intentar enviar su mensaje», rodeado por un borde naranja.

Probando el filtrado de spam

Para probar si el filtrado de spam funciona correctamente, intenta ingresar «viagra-test-123» en el campo de nombre (akismet:autor) o «akismet-garantizado-spam@example.com» en el campo de correo electrónico (akismet:autor_email), y enviando el formulario. Con estas palabras mágicas reservadas para la prueba, Akismet debe devolver una respuesta de «correo no deseado». Si funciona como se esperaba, verás un mensaje de error con un borde naranja.

evitar el spam en tus formularios de contacto

Informar detección falsa

El filtrado automático de spam no puede ser 100% preciso. Existirán falsos positivos (ham clasificado incorrectamente como spam) y falsos negativos (spam clasificado incorrectamente como ham). Cuando encuentres que los mensajes son tratados incorrectamente por Akismet, puedes informar la detección falsa. Akismet aprende de la información que reporta y se mejorará la precisión del algoritmo de filtrado de spam.

Para informar detecciones falsas a Akismet, necesitas activar el complemento Flamingo porque Contact Form 7 no viene con la capacidad de almacenar datos de envío en la base de datos. Puede ver mensajes a través de formularios de contacto en el menú Flamingo > Mensajes entrantes. Los mensajes normales están en la lista de Bandeja de entrada y los mensajes de spam están en la lista de Spam.

Cuando encuentres un mensaje en la lista de la Bandeja de entrada que debería haber sido marcado como correo no deseado, ábrelo y cambia el Estado a Correo no deseado. Flamingo envía automáticamente un informe de falso negativo a la API de Akismet. Del mismo modo, cambia el estado a No es spam cuando encuentre un mensaje normal en la lista de spam. Flamingo informa correctamente los falsos positivos a Akismet.

4. Palabras no permitidas en comentarios

Si sufres una afluencia de spam o mensajes no deseados a través de los formularios de contacto y no puedes bloquearlos por completo utilizando reCAPTCHA o Akismet, la función de lista no permitida será de gran ayuda.

La lista no permitida es originalmente una característica de WordPress para ayudar a administrar los comentarios. Contact Form 7 también puede utilizarlo para bloquear palabras específicas o direcciones IP.

La lista no permitida es bastante simple de usar; simplemente inicia sesión en la pantalla de administración de WordPress, ve al menú Configuración> Discusión, y luego encontrarás la sección Claves de comentario no permitidas en el medio de la pantalla.

La sección Claves de comentario no permitidas en Ajustes > Comentarios

Escribe una palabra o dirección IP por línea en el cuadro de texto. Los mensajes que contengan la palabra o que se envíen desde la dirección IP de la lista que ha creado serán tratados como spam por el Formulario de contacto 7 y no se entregarán.

¿Cómo se puede obtener la dirección IP desde la que se originan los mensajes? El método más simple es usar la etiqueta de correo especial [_remote_ip] en el contenido del correo electrónico que se le envió. Mostrará la dirección IP del remitente, conocida como «Lista negra de comentarios»)

Estas son algunas de las herramientas para evitar el spam en sus formularios de contacto de WordPress, de esta manera evitaremos los envíos masivos de mensajes spam a nuestra casilla de correos provenientes de el rellenado de formularios de contacto en nuestra web.

Fuentes: https://contactform7.com/spam-filtering-with-akismet/ / https://www.clook.net/blog/stopping-contact-form-7-spam/

La entrada Tuts: Cómo evitar el spam en tus formularios de contacto se publicó primero en Cónclave.

Código html para insertar el seguimiento de envíos de oca en tu web

Índice del artículo

1. ¿Qué es una pasarela de envíos en WooCommerce?
2. Ejemplo de una pasarela de envíos: el plugin de OCA E-pack 
3. Cómo insertar una sección de seguimiento de pedidos de OCA en tu web ecommerce.

¿Qué es una pasarela de envíos en WooCommerce?

Una pasarela de envíos en WooCommerce se le llama a la implementación de una vía automatizada de envíos a través de un plugin que trabajará junto a WooCommerce para ofrecer opciones de envío a los usuarios.

Por default WooCommerce ofrece opciones de envío como «recogida local» o bien la posibilidad de envíos por monto fijo según países, provincias, o incluso se puede definir a nivel de código postal. Esto permite crear diferentes opciones de envíos.

Ahora bien, luego de las opciones estándar existen plugins más complejos que permiten calcular el valor del envío en base a atributos de producto como alto, largo, ancho y peso del objeto que estemos ofreciendo.

Esos atributos se linkean a la base de datos de la empresa oferente del servicio de envíos (por ejemplo OCA, Correo Argentino, Andreani, o Envio Pack que nuclea a varias de ellas) y devuelve el valor del envío para el artículo deseado.

Puede que luego de la compra el usuario desee conocer el estado de su envío. Y en general podremos ofrecer una mejor experiencia de usuario si el cliente puede revisar el estado de su pedido desde la misma web donde realizó la compra.  Por lo que sería razonable generar una sección dentro de la página de Mi cuenta en WooCommerce o WordPress o bien generar una página específica de seguimiento de envíos dentro de nuestra web, insertarla en el footer o en el header para que tenga un lugar destacado.

Ejemplo de una pasarela de envíos: el plugin de OCA E-pack

Una vez configuramos WooCommerce en nuestra web, el siguiente paso será añadirle una pasarela de pagos via plugins como los ofrecidos por mercado pago o decidir de prisma y por otro lado añadir una pasarela de envíos a través de un plugin de envíos.

Por ejemplo con el plugin de envíos de oca desarrollado por Wanderlust se puede calcular el costo del envío, mostrarlo en el carrito y el checkout, y si el usuario compra, nos permitirá generar la etiqueta de envío desde la sección de pedidos de WooCommerce sin necesidad de cargar el pedido en la web de oca, reduciendo tiempos y costos en nuestro proceso de venta y distribución.

El plugin de oca pueden descargarlo desde el repositorio de wordpress con una versión gratuita y el plugin premium desde la página de Wanderlust donde explica paso a paso como configurarlo y también se cuenta con un muy buen servicio de asistencia posventa.

Cómo insertar una sección de seguimiento de envíos en tu sitio web

Si bien estos plugins son buenas soluciones tecnológicas, nos permitirán ofrecer una buena experiencia de usuario antes y durante la transacción. 

Si lo que queremos es reforzar la experiencia de usuario posventa, tenemos que pensar en que datos precisará conocer el usuario luego de realizar la transacción, uno de ellos es el «estado del envío».

Para ello tendremos que generar una sección donde el usuario pueda revisar el estado de su pedido desde la misma web.

Para ello sería razonable generar una sección a tal efecto que podría estar estratégicamente posicionada en alguno de los siguientes lugares:

Lugares estratégicos:

1) Dentro de la página de Mi cuenta en WooCommerce o WordPress

2) o bien generar una página específica de seguimiento de envíos dentro de nuestra web,

3) O insertarla en el footer

4) O en el header para que tenga un lugar destacado.

Una vez seleccionemos el o los lugares donde deseamos aparezca el mismo tendremos que instalarlo. Para el caso de OCA, copiando y pegando el siguiente código HTML podrán hacer funcionar la opción de comprobación del estado del envío una vez el usuario ingrese el código de envío proporcionado por la empresa de servicios de entregas, OCA en este caso.

La secuencia de código html es la siguiente: 

Aquí pueden ver el código en acción:

Para realizar el seguimiento de su pedido ingrese el número de envío (todo seguido sin paréntesis) en el siguiente recuadro y presione el botón “BUSCAR”. (Ej.: YAA05655084 ó 4706600000000009539)

Insertando este código tendrán entonces una sección de búsqueda de pedidos dentro de su web. Mejorando así el servicio posventa y la lealtad de los clientes, ofreciendo un servicio que será una ventaja competitiva respecto de los competidores.

Fuente: www.conclave.io / www.oca.com.ar

La entrada Tuts: Cómo insertar el seguimiento de envíos de oca en tu web se publicó primero en Cónclave.

Índice del artículo

1. ¿Qué es un producto variable y qué son los atributos?
2. ¿Qué son los atributos de producto con valores excluyentes?
3. Ejemplo de atributos con valores excluyentes en productos variables de WooCommerce
4. ¿Qué ocurre con los valores excluyentes con productos variables con múltiples variantes en WooCommerce?
5. Solución para la correcta vista de productos variables con múltiples variantes y valores excluyentes
6. Para más información sobre configuración de productos en WooCommerce

¿Qué es un producto variable y qué son los atributos?

Como describíamos, el producto variable es un tipo de producto que podemos configurar con el plugin WooCommerce. Implica generar un producto con atributos y opciones dentro de estos atributos.

Este caso suele ser muy común en los e-commerce de ropa o las tiendas on line de imprentas o servicios gráficos, donde cada producto contiene una gran variedad de opciones. Por ejemplo en el caso de un sitio de venta on – line de calzado los productos podrían tener el atributo talle y tantos valores como medidas de esos productos tengamos en stock.

Es según la combinación de atributos correcta que lograremos representar la realidad de nuestro negocio y potenciar la elección de los clientes así como su experiencia de usuario.

Los atributos ordenan la información y clarifican el proceso de elección de un producto a medida con muchas opciones posibles. De esta manera en lugar de generar un producto por cada opción se resumen en una sola vista con filtros. Es una herramienta muy útil a la hora de generar una experiencia de usuario positiva, una experiencia de usuario que no confunda a las personas que navegan por nuestra tienda y deben elegir un producto con atributos variables.

¿Qué son los atributos de producto variable con valores excluyentes?

Una particularidad de los productos variables y sus atributos que suele potenciar aún más la experiencia de usuario se refiere a las condiciones excluyentes.

En WooCommerce cuando ingresamos variantes con valores excluyentes automáticamente los atributos exhiben y ocultan valores en función de las combinaciones de cada variante que hayamos configurado.

Ejemplo de atributos de productos variables con valores excluyentes en WooCommerce

Por ejemplo en el caso de una imprenta que ofrece tarjetas personales a sus clientes puede darse el escenario donde la imprenta ofrece las opciones de impresión de tarjetas con diseño provisto por el cliente, o un un servicio de diseño para los clientes que no tienen su propio diseño. Lógicamente la segunda opción demorará unos días más de entrega respecto de la primera.

Entonces para el producto creado «Tarjetas Personales» tendremos entre otros atributos (tamaño, papel, impresión) los siguientes:

1. DISEÑO (Cliente trae diseño)
   Con sus opciones a) Trae diseño b) No trae diseño
2. TIEMPO DE ENTREGA
   Con sus opciones a) 48 hs  b) 3 a 4 días hábiles

Para representar el escenario correctamente precisamos que estas opciones sean excluyentes entre sí, es decir:

Si el cliente selecciona

DISEÑO: a) Trae diseño

Siempre debe ir acompañado de

TIEMPO DE ENTREGA: a) 48 hs.

y

Si el cliente selecciona

DISEÑO: b) No trae diseño

Siempre debe ir acompañado de

TIEMPO DE ENTREGA: b) 3 a 4 días hábiles

Creando las variantes correctas, el cliente solo verá las combinaciones pretendidas, evitando confusiones y mala experiencia de usuario con productos variables. WooCommerce trae incoporada por default la funcionalidad que «oculta» aquellas variantes no creadas, como sería en este caso DISEÑO b) No trae diseño y TIEMPO DE ENTREGA a) 48 hs.

¿Qué ocurre con los productos variables con múltiples variantes de valores excluyentes en WooCommerce?

Sin embargo, una vez pasadas las 25 o 30 variantes en un producto variable suele ocurrir que la vista de producto comienza a mostrar combinaciones que no configuramos, lo que redunda en una confusión para el cliente y puede incidir negativamente en nuestras conversiones on line.

Por ejemplo sería el caso de unos botines de fútbol para los que tenemos color naranja solo en talle 50, pero al seleccionar color naranja y luego ir al atributo de talle nos continuara mostrando otros talles para los cuales no tenemos en naranja. En estos casos Woocommerce solo se limitara a mostrarnos un mensaje diciendo que «la combinación solicitada no corresponde a un producto en stock, selecciona otra combinación». Esto puede generar una gran confusión y abandono del proceso de compra por parte del cliente.

Solución para la correcta vista de productos variables con múltiples variantes y valores excluyentes

En general luego de cierta cantidad de variantes (25/30) los datos se cargarán a través de AJAX en lugar de manejarse en línea y esto genera la ausencia de valores excluyentes.  Es posible cambiar esta cantidad usando el filtro woocommerce_ajax_variation_threshold y puede usarse así:

add_filter( ‘woocommerce_ajax_variation_threshold’, ‘wc_ninja_ajax_threshold’ ); function wc_ninja_ajax_threshold() {     return 150; }

Para quienes no están familiarizados con la edición de código, se puede insertar esta línea de código vía el plugin «Code Snippets» que Elimina la necesidad de agregar fragmentos personalizados al archivo functions.php de tu tema. El mismo se puede encontrar acá: https://wordpress.org/plugins/code-snippets/

De esta manera podremos presentar productos variables con valores excluyentes correctamente para casos de múltiples variantes, así quedaría bien representado el caso de la imprenta:

Para más información sobre configuración de productos en WooCommerce

Para más información o una sesión de consultoría para implementación de tiendas on line con WordPress y WooCommerce pueden solicitar una sesión gratuita de consultoría e-commerce en www.conclave.io/contacto o directamente al Whatsapp en el siguiente link.

Fuente: https://wordpress.org/support/topic/variable-products-showing-all-possible-product-combos-even-nonexisting/#post-9557136

La entrada Tips: Productos Variables en WooCommerce se publicó primero en Cónclave.