Preseleccionar el valor de un campo select en Contact Form 7 mandándolo por una url.

Hoy vamos a explicar un truco con CF7 de WordPress que no está en su documentación. Imaginaos que tenemos un formulario en WordPress con un campo select (un desplegable con opciones).Lo más normal es que el usuario elija la opción que quiere.
Pero, ¿y si quieres que dicho desplazamiento se preseleccione dependiendo de la página de la que venga?

Por ejemplo, el desplegable puede ser un selector de departamentos, como el que os mostramos el otro día. Y queremos que, dependiendo de la página de la que venga, esta opción ya esté seleccionada con el departamento adecuado.

La solución es sencilla pero, como decimos, no está documentada en ningún sitio y hemos tenido que hacer un poco de prueba y error. Hay que hacer dos cosas:

  1. Cambiar el código del select en el formulario para incluir el que, por defecto, le llegue el valor por get.
    Así que campo que en el artículo antes mencionado era:

    [select* Departamentos “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”]

    Pasará a ser:

    [select* Departamentos default:get “Opción 1|correo1@dominio1.es” “Opción 2|correo2@dominio2.es” “Opción 3|correo3@dominio3.es”]
  2. Ahora tenemos que poner el enlace que ponemos y añadirle el valor del campo que queremos añadir.
    Por ejemplo, si suponemos que hemos puesto el formulario en la página de contacto, desde otra podemos preseleccionar la Opción 1 con:
https://tudominio.es/contacto/?Departamentos=Opci%C3%B3n%201

Como veis ponemos el valor del campo que queremos, pero en formato url. Lo más sencillo es que uséis herramientas como esta para convertir del texto a url.

Cambiar la foto de usuario en WordPress con WP User Avatar.

Curiósamente este es un plugin que llevamos usando desde hace AÑOS, casi desde que empezamos con WordPress, y no hemos hablado de él hasta ahora. Se lo debíamos.

Por defecto WordPress sólo deja poner las fotos de perfil que tienes en Gravatar, un sitio online para subir fotos de perfil. Pero puede que quieras usar una foto local, de la carpeta medios de tu WordPress. Y poder personalizarlo. Os enseñamos a hacerlo.

Cómo cambiar la foto de perfil en WordPress.

El plugin que vamos a usar se llama WP User Avatar. Es un plugin gratuito que te permite:

  • Usar una imagen que subas a tu WordPress como foto de perfil.
  • Fotos personalizadas por usuario.
  • Poner una foto por defecto, o un icono por defecto que escojas tú, si un usuario no tiene foto de perfil asignada.
  • Tiene shortcodes para poder crear páginas donde la gente suba sus fotos de perfil, o para mostrar la foto de perfil donde quieras.
  • Puedes deshabilitar Gravatar.

Sencillo, pero muy útil.

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.