Gestores de contenidos

Diseño Web, Gestores de contenidos, Información Tecnica, Sistemas

Fallo de seguridad grave en Prestashop y cómo solucionarlo. Junio 2022.

/

El viernes Prestashop nos mandó, a los que estamos en su lista de correo, que se había descubierto un fallo de seguridad grave en su sistema. Y que, por lo tanto, todas las páginas que están funcionando con este sistema tienen esta vulnerabilidad y debe arreglarla lo antes posible. Aquí podéis ver cómo funciona el ataque que aprovecha el fallo: https://build.prestashop.com/news/major-security-vulnerability-on-prestashop-websites Básicamente los atacantes usan inyecciones de SQL para poder poner un formulario de pago falso en tu página, normalmente en la parte del pago. Y así recopilar datos de tarjetas de crédito. Qué se puede hacer para solucionar el problema. Como siempre, lo importante es mantener tu web lo más actualizada posible, tanto el core de Prestashop como los módulos. Sabemos que esto no siempre es fácil en este gestor de contenidos, pero es importante. Prestashop ha sacado esta mañana una nueva versión, un parche, que arregla los posibles vectores de ataques conocidos de este fallo (Prestashop 1.7.8.7) https://build.prestashop.com/news/prestashop-1-7-8-7-maintenance-release/ Actualiza en cuanto puedas. Los desarrolladores de Prestashop han identificado que uno de las posibles (puede haber más) vectores de ataque en este caso es una funcionalidad poco usada de este sistema: MySQL Smarty cache. Mientras actualizas, puedes deshabilitar este sistema. Nosotros lo hicimos el viernes en todos nuestros clientes con PS. Para ello tienes que ir al fichero config/smarty.config.inc.php y editarlo. Ahí, entre las líneas 43-46 (PrestaShop 1.7) o 40-43 (PrestaShop 1.6), tienes el siguiente código que puedes comentar o quitar: Guarda el fichero y súbelo, y ya tienes ese vector tapado. Importante: esto es sólo para evitar que entren por este fallo. NO es suficiente si ya han entrado. Y no quita que tengas que actualizar todo por si hay otros vectores. Cómo saber si te han afectado. Esto debes hacerlo aunque soluciones el fallo antes mencionado. Es identificar si han usado el ataque en tu web. Busca en los registros a ver si encuentras el fichero que es un fichero que se crea durante el ataque. Si es así, estás “infectado” y deberías revisar los ficheros modificados que puedan tener código malicioso y reemplazarlos.

Código Worpdpress, Diseño Web, Trucos

Cómo añadir Disqus en WordPress sin plugin.

/

Hace unos días tuvimos que actualizar la web de un cliente que usa Disqus. Disqus es un sistema de moderación de comentarios que añade funcionalidades a WordPress. El problema surgió porque lo tenía instalado con el plugin de Disqus para WordPress (sin actualizar desde hace un año) pero en la actualización del Tema no era compatible. Con un tema por defecto aparecían los comentarios, pero con el tema actualizado no. Tocaba buscar la solución sin plugin. PD: Suponemos que la web está configurada en Disqus. Para eso puedes usar el plugin anterior o hacerlo a mano. Añadir el sistema de comentarios Disqus a WordPress sin plugin. Disqus deja un código para añadir a mano en cualquier CMS , lo que llaman el Universal Embed Code aquí. Vamos a basarnos en ese código para crear un Snippet. Normalmente usamos este plugin, pero hoy vamos a usar uno similar.: Woody Code Snippets. ¿Por qué? Porque te permite crear automáticamente, sin más desarrollo, un shortcode. y lo vamos a necesitar. Primero, tras la instalación de ese u otro plugin de Snippets vamos a añadir este código (o en functions.php). Es JavaScript, así que o lo metemos como código de Javascript en un módulo de Snippets como Woody o lo ponemos entre las etiquetas de <script> </script> en un php (o función). Nosotros lo hemos metido como shortcode de Javascript. Donde SHORTNAME es el nombre abreviado (shortname) que Disqus nos ha proporcionado cuando damos de alta la web.Woody si lo ponemos en opción de mostrar el código donde está el shortcode nos proporciona a la derecha un shortcode para este código. Ahora lo que vamos a hacer es editar nuestra plantilla de página o entrada para poner el shortcode. Lo podemos hacer de varias maneras: Si estamos usando plantillas de entradas en un constructor lo ponemos ahí. Si estamos usando una plantilla lo mejor es crear un tema hijo, y copiar del tema padre el fichero donde ponga los comentarios. Normalmente es single.php o comments.php. y tiene un código como: Lo vamos a sustituir por Donde XXXxx es el id del snippet que nos ha dado Woody. Es importante que esté un div con ese id o en esta parte del código o en la anterior, porque ahí es donde Disqus hará un “embed” de los comentarios. Y con esto ya deberían aparecer los comentarios. Nota: hay otras maneras de hacer esto. Podemos crear un shortcode directamente en el snippet. O meter el div en el snippet como código php y luego el javascript. Sólo son variantes de lo mismo.

Clientes, Diseño Web, Gestores de contenidos, Trabajos, Webs

Nueva web refuerzoenverano.es

/

Ayer publicábamos una nueva web de la empresa formativa Smyth Academy, hoy compartimos otra que se ha hecho para las campañas de verano: refuerzoenverano.es. El objetivo de esta página es servir de landing page para la campaña de cursos de refuerzo de verano. De todas las asignaturas (matemáticas, física, español, inglés,….). Como página comercial tiene toda la información relevante en la página principal, con el uso de anclas y botones para navegar de manera fácil entre las diferentes secciones.El diseño está pensado para ser limpio, orientado a móviles, sencillo y rápido (SEO). Esperamos que os guste.

Clientes, Diseño Web, Gestores de contenidos, Webs

Nueva web idiomasenverano.es

/

Acabamos de terminar un par de páginas web para el grupo de formación Smyth Academy. Una de ellas es la que os dejamos aquí hoy: Idiomasenverano.es Esta página es una landing page dedicada a la promoción y venta de cursos de idiomas en verano. Como tal, la página es sencilla. Se trata de un escaparate con toda la información en la pantalla principal. Fácilmente accesible, con “anclas” que llevan a las diferentes secciones y botones que enlazan a la misma. Con un diseño minimalista y cuidado, y ajustado principalmente para móviles y para el rendimiento. Es decir, landing pages pensadas para comercializar unos productos. En este caso el estudio de idiomas como el inglés, francés, alemán, portugués o italiano en verano. Principalmente de forma online, lo que permite que los alumnos puedan dar clase desde la playa o la montaña, en cualquier momento y desde cualquier lugar. Esperamos que os guste.

Diseño Web, Gestores de contenidos, Navegadores

Cómo comprobar las Cabeceras de Control de Caché de una web con el navegador.

/

La memoria caché ayuda a mejorar la puntuación en los buscadores, el SEO, haciendo que la página se sirva más rápidamente y, por lo tanto, que mejorando la experiencia de usuario. En las páginas web, existen dos cachés principales. Una caché en el servidor, y una caché que guardan los navegadores de cada cliente. Ahí se guardan los contenidos estáticos (fotos, ficheros CSS, ficheros JS etc). Si hacemos cambios en una web, podemos borrar la caché de nuestro servidor, pero no la de cada uno de nuestros clientes. Eso lo tiene que hacer ellos manualmente. Así que puede darse el caso, y de hecho se da mucho últimamente, que hemos cambiado algo y los clientes ven la versión antigua. ¿Podemos hacer algo para evitarlo? Si, podemos decirle a los navegadores cuánto guardar cada uno de los recursos estáticos con nuestras Cabeceras de Control de Caché. En este artículo os mostramos cómo configurarlas. Cómo comprobar las cabeceras de control de caché de una página con el navegador? En este vídeo, os mostramos cómo comprobar con un navegador Chrome, Edge o Firefox, qué cabeceras de control de caché tenemos para una página web.

Compartir, Diseño Web, Gestores de contenidos, Trucos

Cómo compartir Shorts de Youtube en WordPress

/

Si creas Shorts en Youtube, e intentas compartirlos en WordPress te habrás dado cuenta que el gestor de tu web no reconoce el código del Short. Youtube ha puesto hace relativamente poco el código de los shorts, y WordPress todavía no se ha puesto al día para reconocerlo. ¿Cómo compartimos estos vídeos en nuestras páginas entonces? Hoy te enseñamos. Cómo compartir Shorts de Youtube en WordPress. La idea es encilla. El código de un Short es algo como esto: Y el código de un vídeo (que sí reconoce WordPress) algo como esto: Las letras del final son el código del vídeo o short. Así que sólo tienes que coger el código del sort y convertirlo de lo que pone arriba a esto: Como veis hemos cambiado el /shorts/ por /watch?v= Este último código sí que lo reconoce WordPress.

Diseño Web, Gestores de contenidos, Módulos Prestashop

Descripción adicional para las categorías. Módulo gratuito para Prestashop.

/

Por defecto Prestashop sólo deja poner dos cosas en las páginas de categorías: Imagen de categoría. Descripción (normalmente justo debajo de la imagen). Hay que tener en cuenta que, como en muchos CMS. las páginas de categorías no son páginas en sí, sino que se crean dinámicamente con los parámetros que deja Prestashop. Hay muchos dueños de tienda que, por motivos de SEO y por motivos de presencia de la página, quieren añadir descripciones adicionales en otra parte de la página. Esto normalmente no es posible, pero os dejamos hoy un módulo gratuito que te permite hacerlo. Descripción adicional en la página de categoría. Módulo gratuito de Prestashop. El módulo puedes encontrarlo en esta página, tanto para Prestashop 1.6 como para Prestashop 1.7. El módulo, una vez instalado, añade un apartado Second Description en la página de edición de categorías, con un editor WYSIWYG que permite añadir tanto texto como otros elementos y diferente para cada idioma. El proceso de instalación, para 1.7, es el siguiente: Descargar el módulo Instalarlo como cualquier otro módulo. Editar el fichero /themes/tutema/templates/catalog/listing /product-list.tpl. y añade la línea siguiente justo antes del else (o donde quieras que aparezca la descripción). También puedes no hacer esta parte y manejar los hooks poniendo el módulo donde quieras. Pon contenido y mira cómo aparece la segunda descripción.

Código Worpdpress, Diseño Web

Cambiar la fecha del pie de WordPress automáticamente.

/

Hay clientes que les gusta poner el copyright con el año en el pie de sus páginas de WordPress. Pero entonces todos los años tienen que entrar y cambiarlo y, claro, es una lata. Hoy os dejamos un script que crea un shortcode que lo cambia automáticamente. Script para cambiar la fecha de cualquier sitio de una web de WordPress automáticamente con un shortcode. El script va a usar la función date_i18n de WordPress. Y el formato de fecha también de WordPress. Os lo dejamos aquí como referencia por si queréis modificar el script para aptarlo a vuestras necesidades: https://wordpress.org/support/article/formatting-date-and-time/ Recordad que tenéis que poner el código o en el functions.php de vuestro tema hijo o en un plugin de Snippets. El script es el siguiente: Y para usarlo sólo tenéis que añadir el shortcode (podéis cambiar el nombre modificando la parte que os marcamos en negrita) : En este vídeo os explicamos y mostramos cómo se usa.

Diseño Web, Gestores de contenidos

Informes y análisis de ventas en Woocommerce

/

Desde hace unas versiones, Woocommerce, el mayor plugin de tiendas online del mayor CMS del mundo, WordPress, ha ampliado mucho sus secciones de informes. Estos antes eran bastante escasos, pero ahora son completos, personalizables, exportables y, consideramos, más que suficiente para la mayoría de tiendas. Hoy os enseñamos cómo funcionan y dónde tienes estos informes. Woocommerce: informes y análisis sobre ventas, clientes y productos. Woocommerce incluye informes en dos sitios: Informes: en el menú de la zona de administración Woocommerce->Informes tienes una pequeña sección con Ventas por fecha, Ventas por producto, Ventas por categoría, Cupones por fecha, Descargas del cliente. En todas estas secciones podemos seleccionar las fechas que queremos, y nos muestra los datos y gráficas de los mismos. En muchas de ellas podemos exportar el contenido en csv. Análisis: Más recientemente, Woocommerce ha añadido los análisis, como un menú aparte. Tienes un panel completamente personalizable, donde puedes añadir secciones, parámetros, qué quieres incluir. Y tiene un resumen con datos y gráficas. Debajo de este menú, tienes los apartados con más información de productos, ingresos, pedidos, variaciones, categorías, cupones, impuestos, descargas e inventario. En cada uno de esos apartados, de nuevo puedes modificar los parámetros, datos y fechas que quieres ver, y exportarlo a csv. Como decimos, muy potente y más que suficiente para la mayoría de las tiendas, y un gran añadido por parte de Woocommerce. Os lo explicamos en este vídeo:

Gestores de contenidos, Sistemas, Soporte, Trucos

El editor deja de funcionar en WordPress cuando activo un CDN como Cloudfront

/

Algo que nos ha ocurrido varias veces. Activar un CDN en una web es algo que incluso Google recomienda en su PageSpeed. Lo que hace es “cachear” (guardar una copia) el contenido de tu web, sobre todo el estático, y servirlo más rápido que tú. Porque lo da ya montado (tu web dinámica lo construye en cada petición), porque tiene más velocidad, porque está optimizado…etc. El problema es que guardar copias que no cambian de ciertas partes de tu web, puede romper funcionalidades. Y entonces hay que excluirlas de este “caché”. Hoy vamos a tratar uno de estos fallos, como en su día hablamos de otro. El editor visual deja de funcionar en WordPress tras activar un CDN como Cloudfront. Los síntomas son claros: El texto para editar lo ves en blanco. No ves las pestañas y botones de tu editor. Lo ves todo como si fuera html. No puedes añadir o guardar ningún bloque en el editor. La razón es que WordPress manda en un header (cabecera) llamado user-agent, desde la carpeta wp-admin, el campo que indica si el usuario en cuestión puede usar el editor visual o no (TinyMCE o el que sea). Es un campo del tipo user_can_richedit con valores true o false. El problema es que los CDNs como Cloudfront eliminan las cabeceras de estas partes de la web, para hacerla más rápida. Y entonces el usuario se encuentra con que deja de funcionar el editor. Puedes ver que es la causa fácilmente o desactivando el CDN o apuntando tu web directamente al servidor fuente (o balanceador en caso de Amazon) en vez de al CDN. ¿Cómo lo soluciono? Sencillo, tienes dos opciones: Tienes dos maneras de activarlo en Cloudfront y vienen explicadas aquí.En las políticas de caché del directorio de /wp-admin/* puedes añadir la cabecera “user-agent” al whiteliste, a la lista de exclusiones. Y verás que funciona. De hecho esto debe ser tan frecuente, que Amazon en el 2020 ya incluyó una política que excluye esta cabecera y puedes usar : https://aws.amazon.com/es/blogs/networking-and-content-delivery/amazon-cloudfront-announces-cache-and-origin-request-policies/ Si no sabes cómo resolverlo, no puedes, o mientras lo resuelves, puedes añadir un código en functions.php o en tu plugin de Snippets. Es el siguiente (recordad que es un parche, arregla un problema que debería resolverse en origen): Nosotros, añadiendo la política de exclusión en Cloudfront y dejando pasar ese header pudimos arreglar el problema en un cliente.

Scroll al inicio