Gestores de contenidos

Diseño Web, Gestores de contenidos

Crear Objetivos en Google Analytics para medir eventos y accesos a nuestra web.

Google Analytics nos da, cuando la activamos en nuestra web, mucha información sobre los accesos a la misma. Pero en ocasiones hay que ser un poco más preciso, y pedirle que mida ciertos destinos o eventos.Para eso existen los Objetivos. Los Objetivos de Google Analytics te permiten medir, de forma individual, diferentes cosas como (los dos primeros son los más habituales): Un Destino: accesos una página en concreto, un “landing page“. Eventos: hacer clic a un botón, a un div o enviar un formulario. Duración: cuando alguien pasa más de cierto tiempo en un sitio. Páginas o pantallas por sesión: a las que se accede, por ejemplo un mínimo de 3 pantallas por sesión para medir la permanencia. Hace unos días os explicamos cómo crear “disparadores” en tu web para los tipos de Objetivo Eventos para Contact Form 7 y para pinchar en IDs o Clases (botones, div etc). Hoy os enseñamos a crear dichos Objetivos en Google Analytics. Otro día os enseñaremos a probarlos a tiempo real para ver que funcionan. En este vídeo explicamos cómo se crean:

Diseño Web, Gestores de contenidos, Trucos

Usar Geolocalización en WordPress para proporcionar contenido según IP o país. Plugin GeoIP Detection.

Hoy os vamos a hablar de un plugin gratuito GeoIP Detection, que proporciona todo lo necesario para darle funcionalidad “geolocalizadora” a nuestro WordPress. ¿Y para que sirve esto?Para todo lo que puedas imaginar sobre variar el contenido según el país o ciudad del visitante. Te damos alguna de las miles de ideas. Mostrar contenido personalizado sólo a ciertos países (cambiar la dirección de un negocio según el país por ejemplo). Ocultar contenido según país (mostrar a todos salvo….). Redirigir a usuarios de ciertas zonas a páginas específicas. Cambiar títulos, colores o incluso palabras según el país. Los límites son tu imaginación. Y da más potencia de personalización que los plugins de traducción como WPML que suelen basarse en el idioma del navegador (y por lo tanto no distinguir localización física). ¿Cómo se activa la Geolocalización en WordPress? Lo primero es instalar un plugin como GEOIP Detect que puede descargarse del repositorio o de su cuenta de Github. Lo que hace el plugin es create el entorno para poder facilitarte la dirección de los visitantes según su dirección IP. Esta información la puedes usar luego con scripts, CSS, snippets etc. Para ello el plugin usa una base de datos de IPs y países que puede ser gratuita (usa MaxMind GeoIP2 Lite o HostIP.info  ) , de pago, o basada en el proveedor (como Cloudflare o Amazon AWS). Nota: en modo automático instala MaxMind, y lo actualiza cada mes. Esto está bien en la mayoría de las webs…pero MaxMind tiene licencia Creative Commons ShareAlike-Attribution . No requiere mencionarles en la mayoría de las webs porque no se comparte información PERO si compartes la información proporcionada por tu geolocalización SI tienes que decir quién te da ese servicio (ver FAQ). El plugin usa 5 funciones geoip_detect2_get_info_from_ip($ip, $locales = array(‘en’), $options = array()) , geoip_detect2_get_info_from_current_ip($locales = array(‘en’), $options = array()) , geoip_detect2_get_current_source_description(…) , geoip_detect2_get_external_ip_adress() y geoip_detect2_get_client_ip() para realizar sus tareas. Podemos acceder a la información de dichas funciones con varios códigos bien documentados y de manera sencilla usando códigos ISO de país o nombres de países.También es compatible con Contact Form 7 Ejemplos. Ocultar contenido excepto para ciertas ciudades de Francia (usa el nombre en inglés para comparar):[geoip_detect2_hide_if lang=”en” country=”France” not_city=”Paris, Lyon”] TEXT [/geoip_detect2_hide_if] Muestra el contenido si está en Texas, USA:[geoip_detect2_show_if country=”US” state=”Texas”] TEXT [/geoip_detect2_show_if]

Diseño Web, Gestores de contenidos, Trucos

Script para disparar eventos de Google Analytics al pinchar en una clase o id.

Hace unos días hablamos sobre cómo usar los Eventos (Objetivos) de Google Analytics para los formularios de contacto de Contact Form 7. Hoy os vamos a dejar una solución para las conversiones que funcionaría en cualquier otro tipo de formulario, o incluso al finchar en cualquier tipo de elemento web. Lo que vamos a hacer es dejaros un script (que hemos usado) para que el evento se dispare cuando pinchemos en una clase o id, y eso mande el código a Google Analytics. Código la pinchar en una clase o id. Primero os dejo los códigos que, como siempre, podéis poner en WordPress en un Snippet o en el functions.php de tu tema hijo. En otro tipo de página podéis ponerlo como código Javascript. Al pinchar en una clase. Al pinchar en un id. Explicación del código. Como veis el código es muy similar. Ambos son scripts que se ponen en el pie de WordPress y están escuchando a ver si el usuario hace clic en alguno de los elementos que hemos puesto. XXXX es la clase del elemento en la que queremos que “escuche”.YYYY es la id del elemento en la que queremos que “escuche”.Ambas pueden ser un botón, un enlace, un div o lo que queramos, por eso decimos que estos códigos sirven para cualquier elemento o formulario. En la parte del gtag tenéis que poner en aaaa, bbbb, cccc, dddd, (y en el valor) los elementos que hayáis puesto al crear el elemento en Google Analytics. Como antes, es fácil comprobar si funciona con el menú “Tiempo Real” de GA, haciendo pruebas y viendo la respuesta inmediatamente.Pero como os digo nosotros hemos usado estos códigos varias veces sin problemas.

Diseño Web, Gestores de contenidos, Trucos

Cómo subir a WordPress tipos de archivo no permitidos.

WordPress, por defecto, sólo permite subir cierto tipo de archivos. Si intentas subir un formato que no está dentro de la siguiente lista, da este error: Lo siento, este tipo de archivo no está permitido por motivos de seguridad. Los formatos permitidos son (más información aquí): Images .jpg .jpeg .png .gif .ico Documents .pdf (Portable Document Format; Adobe Acrobat) .doc, .docx (Microsoft Word Document) .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation) .odt (OpenDocument Text Document) .xls, .xlsx (Microsoft Excel Document) .psd (Adobe Photoshop Document) Audio .mp3 .m4a .ogg .wav Video .mp4, .m4v (MPEG-4) .mov (QuickTime) .wmv (Windows Media Video) .avi .mpg .ogv (Ogg) .3gp (3GPP) .3g2 (3GPP2) En ocasiones queremos subir algún formato que no está incluido aquí. Así que hoy os dejamos un Snippet que te permite hacerlo. Por código. Código para permitir tipos de archivo no permitidos. Explicamos el código. La línea que tenéis que modificar, y de la que podéis añadir tantas como tipos queráis añadir, es $mime_types[‘XXX’] = ‘YYY’; Los valores de XXX y YYY los podéis sacar de esta tabla o de esta web.En vez de XXX ponéis el valor de la extensión (izquierda de la tabla). En vez de YYY ponéis el valor del tipo (derecha de la tabla). Por ejemplo para permitir archivos de vídeo webm ponéis:$mime_types[‘ webm’] = ‘video/webm’; Nota: os añado algunos tipos que no vienen ahí: Por plugin. Si no queréis complicaros podéis agregar este plugin: File Upload Types by WPForms. Pero recordamos que cuantos más plugins más vectores de ataque dejamos a los “malos” y más lenta será nuestra web.

Diseño Web, Gestores de contenidos, Trucos

Conversiones (Eventos) de Google Analytics con Contact Form 7

Hace unos días hemos tenido que hacer esto para un cliente. Hay muchísima información en Internet, y mucha desactualizada, así que os dejamos la que nos sirvió a nosotros. La idea es la siguiente, se crean unos Eventos (Objetivos) en Google Analytics, para que podamos realizar seguimiento de los formularios que mandamos con Contact Form 7 en WordPress. Doy por supuesto que se sabe crear Objetivos en GA, y que se ha creado uno (o varios) de tipo Evento con la Categoría, Acción, Etiqueta y Valor necesarios. Cómo implementarlo en Contact Form 7 en WordPress. Ahora necesitamos que nuestro WordPress envíe una notificación a Google Analytics cada vez que se envíe un formulario. Para ello vamos a poner un javascript que “escuche”. ¿Escuchar a qué? Afortunadamente el creador de Contact Form 7 ha sido previsor, y ha programado unos eventos DOM que se ejecutan cuando se realizan diversas acciones. Así que vamos a escuchar al evento DOM wpcf7mailsent  que se ejecuta cuando se ha enviado un formulario correctamente. ¿Qué enviamos a Google Analytics? Hay dos maneras de hacer esto, con ga o con gtag (gtag.js). Cuidado porque la sintaxis es diferente. gtag(‘event’, eventName, {  ‘send_to’: ‘GA_MEASUREMENT_ID’,  ‘parameter1’: ‘value1’,  ‘parameter2’: ‘value2′,  // …}); Nosotros hemos optado por gtag (más nuevo) y este artículo se basa en eso. Código en WordPress. Cómo siempre hacemos últimamente, este truco se basa en un código que podemos poner o en functions.php de nuestro tema hijo o (como lo hacemos nosotros) en un Snippet. Nos gusta los Snippets porque podemos activarlos, desactivarlos, etiquetarlos, clonarlos, poner descripción…. Vamos a poner un Snippet que se ejecutará “sólo en la portada” (mala traducción de Frontend). El código es el siguiente: Explicación. Creo que se explica bastante, pero estas son las claves del código: if ( ‘XXX’ este XXX tenemos que sustituirlo por el id del formulario en cuestión). EL Id lo podemos encontrar en el shortcode que nos da CF7 gtag(‘event’, ‘evento3’, { ‘event_category’: ‘envento3’, ‘event_action’: ‘enviar’, ‘event_label’: ‘es’, ‘value’: ‘0’});Este es el evento de GA que se dispara cuando el formulario enviado tiene el ID que ponemos. Aquí tienes que poner tus valores detrás de los campos event_category, event_action, event_label y value. Con esto activado, idos a En Tiempo Real>Eventos en Google Analytics y haced una prueba de envío. Deberíais ver cómo se dispara el evento en tiempo real.

Diseño Web, Gestores de contenidos, Trucos

Eliminar opciones del menú del backend de WordPress según el rol del usuario.

Hace unos días un cliente nos pidió que sus usuarios de un rol específico sólo pudieran acceder a ciertas cosas. Es decir, o crear un nuevo rol con capacidades específicas, o limitar uno de los roles de WordPress. Esto normalmente se hace de manera sencilla con plugins que editan las “capabilities” de los roles de WordPress, como este. PERO tienen un fallo. Esos plugins restringen “capabilities” de Wordress. Hay recursos que comparten la misma. Así que a veces quieres dar acceso a una opción pero limitar otra, y no es posible porque ambas usan la misma. Una opción que soluciona esto es quitar esas opciones del menú de administrador para esos roles. Cómo eliminar opciones del menu del backend de WordPress según el rol de ususario. Para ello vamos a usar un código que, como siempre, podemos o poner en el archivo functions.php de nuestro tema hijo o en un Snippet (sólo para el backend en este caso). Es el siguiente: Las claves están en1) La línea de current_user_can( ‘editor’ ). Como véis aquí hemos puesto un rol, pero también podemos poner una capability para afectar a más de un rol. En Internet podéis ver muchos ejemplos.2) La parte de remove_menu_page( ‘urlquequierasquitar‘ ). Estas son las opciones que tenemos que eliminar. Tienes que poner entre paréntesis la url o parte de la url a la que apunte el menú que quieres quitar. Juega con las opciones hasta conseguir el resultado optimo. Por ejemplo si pasas el ratón por encima de Apariencia y copias el enlace (botón derecho, copiar dirección del enlace) es algo como tudominio/wp-admin/themes.php Si quieres eliminarlo pon en el código superior la línea:remove_menu_page( ‘themes.php’ ) . Os dejamos algún ejemplo: Como veis este código admite eliminar todas las opciones que quieras, y también, con más if, usarlo para diferentes roles. Espero que os sea útil.

Diseño Web, Gestores de contenidos

Enable Media Replace: plugin para reemplazar imágenes y archivos en los medios de WordPress.

La utilidad de este plugin sólo la verás si has gestionado una página en WordPress. En ocasiones tienes que cambiar una imagen de los medios de tu WordPress. Porque quieras poner una con mejor resolución, porque la hayas modificado o lo que sea. En estos casos, sólo tienes dos opciones. O borras la imagen y la vuelves a subir (en cuyo caso pierdes los enlaces y tienes que volver a ponerla), o entras por FTP y sustituyes la imagen en su sitio (búscala, entra por FTP etc…y no tiene mucho sentido tener un gestor para eso). Enable Media Replace arregla esto. Con este plugin puedes sustituir una imagen en tu galería de medios, sin tener que borrarla. Sólo tienes que cambiar la nueva por la vieja desde la galería.De hecho tiene dos funcionamientos, o cambias la imagen, o te deja sustituir imágenes y busca y reemplaza los vínculos de la vieja por la nueva. Otra cosa muy importante, no es sólo para imágenes. También para cualquier fichero de la galería de medios, pdf incluidos. Así que si tienes que cambiar o modificar documentos, ya no tienes que borrarlos. Buen plugin.

Diseño Web, Gestores de contenidos, Trucos

Quitar columnas extra en productos de WooCommerce con Yoast SEO plugin

Cuando tienes una página con WooCommerce, y añades el plugin más conocido de SEO, el Yoast SEO, lo más seguro es que veas que tu backend de productos se descoloque. Se ven nombres a los lados y cada fila es mucho más alta que antes.. Lo que está pasando es que Yoast SEO añade unas columnas a un, ya por sí lleno, listado de productos. Y como no cabe bien se descoloca. Cuando queremos solucionarlo, siempre pensamos en cosas complejas como Snippets, funciones o trucos CSS. Pero es mucho más sencillo. Aquí os dejamos cómo solucionarlo.

Diseño Web, Gestores de contenidos, Trucos

Ocultar contenido por CSS según el idioma de WPML

Las webs multilingües son muy habituales hoy en día y, para nosotros, el mejor plugin para ello es WPML. Es de pago, si, pero no es excesivo y el plugin es potentísimo. Una de las cuestiones que nos salió hace poco con una web de este estilo, con varios idiomas, era cómo ocultar contenido para ciertos de ellos. Es decir, mostrar algo para unos idiomas y ocultarlo para otros. WPML permite definir widgets según idioma, pero hay ciertos componentes que o no son compatibles, o no se puede hacer ese cambio. Así que la opción es o quitarlo por Snippet, o quitarlo por CSS. Hoy os enseñaremos a hacerlo de las dos maneras Ocultar contenido con un Snippet. Podemos añadir el siguiente código en functions.php del tema hijo o en un Snippet para mostrar el código según el idioma. Ocultar contenido por CSS según el idioma. Para ello vamos a usar el siguiente código: html[lang=”código idioma”] claseoid {display:none;}Por ejemplo html[lang=”en-US”] #Footer .widgets_wrapper {display:none;}

Diseño Web, Gestores de contenidos, Seguridad

Firewall para .htaccess de Apache nG y firewall para WordPress BBQ: Block Bad Queries

Muchos de los ataques a páginas web son por scripts o robots que primero “inspeccionan” la web para ver sus vulnerabilidades. Preguntan cosas como la versión del gestor de contenidos, versión de php etc. Están buscando agujeros de seguridad, y ocurre constántemente. Por esto nos gusta este firewall que hemos encontrado para .htacess (Apache). El creador ha recopilado una serie de peticiones o queries que son maliciosas y con contenido potencialmente dañino (como  eval(, base64_ ..), y ha creado una lista para que podamos bloquearlas. Lo interesante es que este bloqueo se realiza a nivel de servidor, antes del acceso a la página. Así que, al bloquear estos intentos de acceso, también mejora el rendimiento de la misma. nG Firewall, como decimos, es una lista de queries maliciosas que, en el momento de escribir el artículo está en su versión 6G. La manera de implementarlo en cualquier web es sencillo, añade la lista de exclusiones que da a tu fichero .htaccess. El Apache, al leerlas, se encargará de bloquear estos accesos indebidos.La lista está dividida en secciones, y puedes añadir todas, o sólo alguna de las secciones (son independientes). Aunque están muy probadas, mira el artículo de tu nG antes sobre las notas de implementación y su sección de troubleshooting. # 6G:[QUERY STRING] # 6G:[REQUEST METHOD]# 6G:[REFERRER] # 6G:[REQUEST STRING] # 6G:[USER AGENT] # 6G:[IP ADDRESS] Firewall ligero para WordPress: BBQ: Block Bad Queries Si tienes WordPress, es más fácil implementar este firewall. Puede servir tanto como capa añadida de seguridad a lo que tengas de firewall, o como solución ligera y sencilla para aquellos a los que el alojamiento o los conocimientos no les deje usar soluciones más complejas. BBQ: Block Bad Queries implementa el firewall nG, con añadidos que te permite gestionarlo de modo gráfico. Un plugin muy interesante a tener muy en cuenta.

Scroll al inicio