Diseño Web

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.

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.

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.

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.

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;}

Nos han pedido recientemente, que el enlace de algunos de los productos de su tienda WooCommerce, vaya directamente a una página externa.WooCoomerce tiene algo parecido, los productos externos o de afiliados, pero para ir al enlace tienes que entrar en el producto. La idea es que al pinchar en la imagen de cualquier página donde esté listado el producto, esta te lleve al enlace externo. Cómo enlazar productos de WooCommerce con páginas externas. El proceso consta de dos pasos. Lo primero es que, en nuestra solución (mencionaremos otras) creemos los productos como externos con la opción de producto de WooCommerce y pongamos ahí la url.Nos ha parecido más sencillo y cómodo para los usuarios así. La segunda es crear un Snippet (como siempre puedes editar functions.php de tu tema hijo también) que detecte si son productos externos y cambie la url por la personalizada. Os dejamos este posible código: add_filter( ‘woocommerce_loop_product_link’, ‘cambiar_permalink_prod_externo’, 99, 2 ); function cambiar_permalink_prod_externo ( $link, $product ) {$this_product_id = $product->get_id();if ($product->is_type( ‘external’ ))$link = $product->add_to_cart_url();return $link;} Este Snippet podemos modificarlo de muchas maneras: Cambiar el enlace sólo para unos artículos (ponemos como ejemplo un enlace interno): if( $this_product_id=== 25 ) $link= ‘/enlaceinterno’;return$link; Poniendo un campo personalizado en el producto, por ejemplo con ACF, y su valor como URL. Espero que os sirva. Mejora 2021. Un cliente nos pidió que los enlaces externos se abrieran en una nueva pestaña. Aquí tenéis la modificación.