Cómo poder elegir el destinatario en un formulario de Contact Form 7 con un desplegable en WordPress.

Normalmente los formularios de Contact Form 7 suelen tener un sólo destinatario. PERO, en una empresa, suele ser habitual crear formularios que pueden ir a diferentes departamentos.

Es decir, queremos crear un formulario de atención al cliente en el que el usuario pueda, mediante un campo desplegable, la dirección o el departamento al que enviar el formulario.
Hoy os enseñamos a hacerlo.

Crear un desplegable para seleccionar el destinatario en Contact Form 7.

Para poder crear un desplegable desde el que seleccionar el destinatario de un formulario con CF7 tenemos que hacer lo siguiente.

  • Creamos un campo “menú desplegable“.
  • En el cuadro Opciones ponemos, línea por línea, el texto a mostrar en cada opción del desplegable y el correo del destinatario, separados por un pipe.
    Por ejemplo:
    Opción1|correo@dominio.es
    Opción2|correo2@dominio2.es
  • Pon que el campo sea obligatorio (hay una casilla de verificación), porque destinatario tiene que haber.
  • Llama el campo de una manera que te acuerdes donde pone Nombre . Por ejemplo Departamentos.
  • Opcional. A mi me gusta que el primer campo sea blanco, para que la persona no tenga opción hasta que la elija. Puedes hacerlo poniendo como primera opción ” ” (que es un espacio en blanco) o en el código con la opción include_blank (lo mostramos en los ejemplos).
  • El código resultante debería ser algo como:
    [select* Departamentos “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”]
  • Por último hay que ir a la pestaña Correo electrónico del formulario y, en Para poner el campo del selector. En nuestro ejemplo [Departamentos]

Os lo mostramos en el siguiente vídeo.

Juegos para aprender conceptos de CSS como Flexbox, Grid o selectores.

Si estás aprendiendo CSS, una buena manera es jugando. Os dejamos unos cuantos juegos web para aprender, repasar o afianzar ciertos conceptos de CSS.

Selectores CSS.

Aprender a manejar los selectores de CSS es muy importante, ya que nos ayuda a asignar nuestro código a los elementos que queremos.

CSS Diner es un juego en el que te va a pedir que selecciones, mediante código CSS, los elementos que te piden. Tienes 32 niveles con dificultad ascendente, así que está muy completo.

Grid.

Poner los elementos en Grid, con filas, columnas y celdas, es algo muy común en las páginas web. Así que controlar su uso es treméndamente útil.
CSS Garden tiene 28 niveles de dificultad en los cuales podrás aprender a manejar este elemento CSS.

Flexbox.

Otro elemento muy importante en las páginas de hoy en día: Flexbox (más info aquí y aquí ). Te permite colocar los elementos donde quieras en tu pantalla, y de modo “responsive” (adaptable a varios dispositivos).

Del mismo creador que el juego anterior tenemos FlexboxFroggy. Probadlo, es excelente (24 niveles).

También tenéis Flexboxdefense para manejar otros elementos de Flexbox.

Cómo cambiar el texto “Oferta” en Woocomerce.

Tenéis una tienda en WooCommerce y no os gusta el texto Oferta. Queréis poner algo más “vendible”, como “Promoción”, “Super Oferta” o similar. ¿Cómo se hace?
Hoy os lo explicamos.

Cómo cambiar el texto Oferta en tu tienda de Woocommerce.

Si quieres cambiar ese texto te dejamos dos opciones:

  1. Traducirlo con Loco Translate (o similar). Una opción muy sencilla, que no requiere conocimientos previos, es usar un plugin de traducción de plugins y temas. Nosotros usamos Loco Translate.
    Sólo tienes que instalarlo, buscar “Traducción de Plugins”, elegir Woocommerce y buscar “Oferta”. Veréis el término en Inglés y que está traducido por “Oferta”. Cambiáis esto último por lo que queréis, y comprobáis que se cambia en el frontend.
    Fácil y rápido. Además permite que cualquier persona lo modifique (como un cliente).
  2. Con un Snippet. Se puede usar un código y añadirlo a tus Snippets o al functions de tu tema hijo.
    Os dejamos un Snippet posible (página del autor aquí). No lo hemos probado pero debería funcionar sin problemas.
add_filter( 'woocommerce_sale_flash', 'dinapyme_wc_modificar_texto_oferta' );

function dinapyme_wc_modificar_texto_oferta( $texto ) {
    //cabia el valor del texto original 'Sale!' de WooCommerce por el texto '¡Promoción!'
    return str_replace( __( 'Sale!', 'woocommerce' ), __( '¡Promoción!', 'woocommerce' ), $texto );
}

Uindades de medida en CSS. Medidas absolutas vs medidas relativas. Px,em,rem,vw,vh,%

Cuando tenemos que colocar elementos en una página web, las medidas son importantes, y conocer las opciones que nos da CSS (mencionaremos las más usadas). Existen medidas:

  • absolutas: que no se adaptan a los dispositivos. Su tamaño no cambia y es siempre fijo. Por lo tanto son cómodas para empezar a diseñar, pero no siguen las tendencias actuales de ser variables para diferentes dispositivos. Tampoco son adecuadas para la accesibilidad (gente que necesita ver la pantalla en dimensiones más grandes por problemas de visión o similares).
  • relativas: son unidades que dependen de algún otro factor, veremos cuáles. Si son adaptables a diferentes dispositivos.
    Dentro de estas unidades relativas cabe destacar las unidades viewport, que son las relativas a la ventana de visualización.

Vamos a entender cada una de ellas un poco más. En general se recomienda usar unidades relativas cuando sea posible.

Unidades absolutas.

Os mencionamos algunas de mayor a menor. Creemos que se explican por sí solas.

  • in: pulgadas. – Equivalente a 25,4 mm.
  • cm: centímetros – Equivalente a 10 mm.
  • pc: picas – Equivalente a 4,23 mm.
  • mm: milímetros
  • pt: puntos – Equivalente a 0,35 mm.
  • px: píxeles – Equivalente a 0,26 mm.

Unidades relativas.

  • rem: Estas unidades son relativas a la fuente raíz de la web. 1rem = al tamaño de la fuente raíz (normalmente 16px y suele ser el del BODY). Es una buena unidad para webs adaptables porque permite relacionarlo todo a una misma cantidad. Y podemos escalar fácilmente toda la web.
  • em: Es parecida a la anterior, pero es relativa al tamaño fuente del elemento en que esté (que si no está definido se hereda del superior, del padre). Es un tamaño que se ha usado mucho, pero puede llevar a confusiones porque las fuentes dependen de unos elementos que pueden depender de otros.
  • %: Porcentaje. Relativo al elemento padre.
  • ch: Relativo al ancho del cero “0”.

Por ejemplo, con una fuente raíz de 16px, 10 rem serán 160px.
Con em, si un div tiene 12px de fuente, algo dentro que tenga 10em equivaldrá a 120px.

Las unidades anteriores permiten crear un diseño de tamaños dependiendo de elementos como la fuente raíz. Y desde ahí poner elementos relativos a esta fuente, o relativos a cada contenedor. Esto permite que toda la página sea escalable, y no tener que hacer cambios a todos los elementos cuando se quiera variar el tamaño.
Las rem se usan cuando queremos escalabilidad global respecto a la raíz.
Las em se usan cuando queremos escalabilidad dentro de un elemento.

Unidades relativas viewport.

Dentro de las unidades relativas existen unas especiales que son relativas a la ventana de visualización (y por lo tanto pensadas para su uso en diferentes dispositivos). Las más importantes son las siguientes:

  • vw: viewport width. – 1vw = 1% del ancho del navegador.
  • vh: viewport height. – 1vh = 1% del alto del navegador.
  • vmin: viewport minimum. – 1vmin = 1% del mínimo entre el ancho y el alto del navegador.
  • vmax: viewport maximum. – 1vmax = 1% del máximo entre el ancho y el alto del navegador.

Estas unidades permiten poner como referencia el tamaño de la pantalla – algo importante en un mundo de dispositivos de tamaños cambiantes. Y desde ahí diseñar los elementos de la página.
Por ejemplo 50vw sería la mitad del ancho del navegador, o 100vw sería el 100% del mismo.

vw se usaría para elementos que se relacionen con la anchura del dispositivo (columnas por ejemplo).
vh se usaría para elementos que se relacionen con la altura del dispositivo.

Configuración de cuentas de Office 365 en Moodle

Para configurar una cuenta de correo en Moodle por SMTP, para que envíe correo desde esa cuenta, tienes que ir a Administración del sitio->Servidor->Correo Electrónico-> Configuración de correo saliente .

Pero la configuración de Office 365 tiene alguna peculiaridad. Os dejamos la que nos funcionó para que lo probéis. Estos son los datos que tenéis que poner:

  • Servidores SMTP (smtphosts) : smtp.office365.com:587
  • Seguridad SMTP (smtpsecure) : TLS
  • SMTP Auth Type (smtpauthtype) : LOGIN
  • Nombre de usuario SMTP (smtpuser): usuario@tudominiodeoffice365.com
  • Contraseña SMTP (smtppass): tucontraseña

Salvo el puerto, estos detalles son bastante comunes. PERO no funciona sólo con esto. La clave es que las restricciones de Office365 obligan a estas modificaciones (para que la cuenta saliente sea igual a la que lo envía).

  • Dirección ‘no-reply’ (noreplyaddress): tiene que ser la misma que smtpuser de arriba
  • Tienes que bajar en esta misma página hasta donde pone Información de origen en el asunto (emailfromvia) tiene que poner NUNCA.
  • Por último tenemos que ir a Administración del sitio->Servidor-> Contacto de soporte y donde pone Email de soporte (supportemail) tiene que poner lo mismo que en smtpsecure arriba.

Tu cuenta de correo tiene que estar en smtpuser, noreplyaddress y supportemail.

Con esto ya debería funcionar.

Puedes hacer las pruebas desde la página de Administración del sitio->Servidor->Correo Electrónico-> Configuración de correo saliente

Si tienes más problemas, existe un plugin (que no hemos probado), Email Test, que te permite hacer un análisis de dónde puede estar fallando el SMTP y te ayuda a intentar encontrar el error.

Establecer una fecha de caducidad en los posts de WordPress.

En ocasiones te interesa que el contenido en WordPress esté publicado sólo cierto tiempo. Es decir, quieres establecer una fecha de caducidad para ese post. Razones para hacer esto pueden ser:

  • Una noticia, oferta o una sección de Novedades que sólo dura un tiempo.
  • Información que se puede volver obsoleta en un corto periodo de tiempo y es mejor pasarlo a la sección de archivo.
  • Campañas de publicidad.
  • Posts subvencionados que se han pagado sólo por un tiempo (aquí tenemos de esos).
  • Publicaciones que van a ser gratuitas sólo por un corto periodo de tiempo.

Hoy os vamos a enseñar a hacerlo, obviamente con un plugin. Obviamente para que funcionen estos plugins es necesario que tu alojamiento sea compatible con el cron de WordPress (Wp-cron). Este es el encargado de ejecutar tareas programadas en WordPress. Ciertos alojamientos no son compatibles con este componente, y en otros sitios se deshabilita. Comprobad que wp-cron funciona en vuestra web.
Si te funcionan las publicaciones programadas, o tienes plugins de copia de seguridad cada cierto tiempo, wp-cron funciona.

Cómo establecer fecha de caducidad en los posts de WordPress.

El mejor plugin para esto a día de hoy es Post Expirator. Lleva desde el 2012 en funcionamiento y, de los plugins de este estilo, es el que más recientemente se ha actualizado.

Este plugin establece una fecha de caducidad a los posts o páginas. Se puede también elegir entre varias acciones que se activarán al caducarse la publicación: pasar a borrador, a la papelera, eliminarlo, fijar o no fijar (entradas destacadas), pasar a privado o cambiar, añadir o eliminar la categoría.

El plugin tiene además otras funcionalidades muy útiles:

  • Puedes mostrar la fecha de caducidad en la publicación con el shortcode
  • En el backend puedes ver la fecha de caducidad de cada publicación.
  • Nos puede avisar por correo electrónico cuando llegue la fecha de caducidad.

Si no te convence este plugin (es el que usamos nosotros), os dejamos otras opciones que no hemos probado:

Cómo excluir páginas del sitemap de Yoast en WordPress

En ocasiones tenemos que excluir páginas del mapa del sitio, sitemap, para que los navegadores no los indexen. Páginas de registro, de información, archivos etc. Cosas que no quieres que los usuarios vean cuando buscan tu dominio en Internet. O simplemente páginas que han dado avisos o error en Search Console (por ejemplo) y quieres que Google no las “vea”.

Hoy vamos a explicar cómo hacer esto con uno de los plugins más usados para SEO en WordPress, Yoast SEO.

Excluir páginas de un sitemap en Yoast SEO.

Para excluir las páginas del sitemap de Yoast tenemos que ir, en el backend, a la página en concreto y editarla. Debajo del contenido tenemos la sección (metabox) de Yoast. Una de las secciones desplegables (la última) es Avanzado.
Si la despliegas ves un apartado que pone:
¿Permitir a los motores de búsqueda mostrar esta Página en los resultados?
Por defecto está en Si, pero podemos cambiarlo a No, y de esta manera, cuando guardemos la página, se actualizará el sitemap eliminando este contenido.
Más información aquí.

Por código.

También puedes usar un filtro que proporciona Yoast para, poniéndolo en el CodeSnippets, o en functions.php de tu tema hijo, hacer que se excluya la página.
El código de ejmplo sería (excluyendo los posts o páginas con ID 311 y 312).

add_filter( 'wpseo_exclude_from_sitemap_by_post_ids', function () {
  return array( 311, 322 );
} );

Obviamente este código puede usarse para excluir cualquier elemento de WordPress por ID.

Recordad que también podéis gestionar los elementos que hay en el sitemap por defecto. Podéis seguir este manual.

Módulo de popup gratuito para Prestashop 1.6 y 1.7

Hoy os dejamos un módulo gratuito para Prestashop, tanto para la verisón 1.6 como para la verisón 1.7. El módulo es para crear ventanas emergentes, Popups, tanto en la portada, como en toda la tienda o en páginas seleccionadas.

El módulo se llama Custom popup notification, de Prestacraft y puedes descargarlo en esta página.
Tiene además un apartado de foro con información y dudas en este enlace.

Una vez instalado (como cualquier módulo) es bastante sencillo de usar. Tiene unas opciones para seleccionar dónde queremos verlo y de qué manera, y luego un editor de texto para añadir el texto o la imagen deseado.
También unas opciones sobre la visualización (fondo del popup, modo de cierre, botones…)

La única sorpresa que puedes llevarte es que configures todo y no aparezca. En tal caso recuerda que el módulo tiene que estar en la posición (apartado posiciones de Módulos) que quieres, y además que deberías borrar cualquier caché que tengas.

Me gusta que, además, han añadido una opción para guardar una cookie (para que una vez cerrado no te salte todo el rato) y duración de la misma, así como un “delay” (retardo) para la aparición de la ventana emergente.

Prestashop: encontrar productos con o sin una característica mediante consulta SQL.

Hace unos días, un cliente nos pidió que encontráramos qué productos tenía en la tienda sin cierta característica. Porque quería saber si le faltaba alguno por ponerle la característica.

Cuando queremos saber algo como esto, podemos comprar módulos, pero Prestashop tiene una herramienta muy poderosa (si sabes algo de SQL) para poder realizar consultas directamente a la base de datos. Os vamos a mostrar estas dos consultas (productos con una característica y productos sin una característica) para que podáis aprender a realizar vuestras propias consultas.

En ambos casos hay que ir a Parámetros Avanzados>Base de datos>Gestor SQL y pinchar en Añadir una nueva consulta SQL.

Consulta SQL: Productos con cierta característica asignada.

Para ello os proponemos esta consulta:

SELECT * FROM `ps_feature_product` WHERE `id_feature_value` LIKE '24'

24 en el ejemplo es el ID de la característica que podemos encontrar editando la característica y mirando la url.
Esta consulta muestra todos los productos con característica X. Puedes modificarla para buscar sólo en ciertas categorías (ver ejemplo siguiente).

Consulta SQL: Productos sin cierta característica asignada.

La consulta base para ver qué productos no tienen cierta característica asignada (el contrario al anterior) podría ser:

SELECT `p`.`id_product` FROM `ps_product` `p` WHERE `p`.`id_product` NOT IN (SELECT `id_product` FROM `ps_feature_product` WHERE `id_feature` = 11)

Si queremos ver aquellos productos que no tienen una característica asignada Y están en ciertas categorías podemos hacer:

SELECT `p`.`id_product` FROM `ps_product` `p` WHERE `p`.`id_product` NOT IN (SELECT `id_product` FROM `ps_feature_product` WHERE `id_feature` = 11) AND (`p`.`id_category_default`=32 OR `p`.`id_category_default`=33 OR `p`.`id_category_default`=14 OR `p`.`id_category_default`=15)

En esta última consulta miramos si está en una de 4 categorías (32,33,14 o 15).

Esperamos que os sirva.

Vulnerabilidad en Prestashop ante el malware XsamXadoo Bot. Solución.

Si tienes una tienda de Prestashop, puede que hayas recibido un aviso que tu tienda puede ser vulnerable ante ataques del malware XsamXadoo Bot. Mediante este malware, los atacantes pueden tomar el control de tu página web y acceder a tus datos.

No es un ataque exclusivo a Prestashop, muchos gestores y módulos de diferentes entornos, creados en php con la herramienta PHPUnit, pueden ser vulnerables. Pero se ha detectado en Prestashop estos días.

En qué consiste la vulnerabilidad.

Este ataque hace uso de un fallo de seguridad conocido desde el 2017: el CVE-2017-9841. Este fallo está presente en la herramienta PHPUnit, un framework que usan los desarrolladores de php para probar y crear sus módulos y aplicaciones. La vulnerabilidad se ha corregido en las versiones de PHPUnit 7.5.19 y 8.5.1 , pero las anteriores la tienen. Y muchos creadores de Prestashop usan esta herramienta.

Lo curioso es que los desarrolladores dejan ciertas carpetas y ficheros de este framework cuando pasan los módulos a producción. Carpetas y ficheros que ya no son necesarios porque son sólo para desarrollo, pero que dejan ahí. Y estos son los que contienen el fallo de seguridad.

Cómo solucionarlo.

Lo que tienes que hacer es borrar todos los directorios phpunit tanto de Prestashop como de los módulos (recuerda, la carpeta es sólo para desarrollo).

  • Si gestionas un servidor Linux puedes hacer esto con este comando:

    find . -type d -name "phpunit" -exec rm -rf {} \;

    En caso de no tener acceso a terminal, puedes buscar los directorios por FTP. Para ello.
  • En la carpeta de Prestashop busca la carpeta Vendor. Dentro de esa carpeta mira si tiene otra que se llame phpunit. Si es así, borra esa carpeta.
  • Ahora entra en cada carpeta de módulo. Busca la carpeta Vendor dentro de cada módulo. Si esta carpeta incluye el directorio phpunit borralo.

Cómo saber si te han infectado.

Es difícil porque pueden dejar diferentes rastros. Pero
1) mira en tu servidor a ver si tienes los siguientes ficheros:

File namemd5
XsamXadoo_Bot.php0890e346482060a1c7d2ee33c2ee0415 or b2abcadb37fdf9fb666f10c18a9d30ee
XsamXadoo_deface.php05fb708c3820d41c95e34f0a243b395e
0x666.phpedec4c4185ac2bdb239cdf6e970652e3
f.php45245b40556d339d498aa0570a919845

2) Entrar en Parámetros Avanzados->Información para ver si al final te indica si se ha modificado algún fichero del core de Prestashop. Esto también puede dar una pista de si te han infectado.

Para más información lee el anuncio de Prestashop y el artículo más detallado al respecto.