Diseño Web

Diseño Web, Gestores de contenidos

Plugins gratuitos para Elementor que añaden funcionalidad.

Elementor es, ahora mismo, uno de los constructores para páginas web (builders) más usados. Creo que porque permite modificar casi cualquier plantilla de modo visual y con muchas opciones. Y porque tiene una versión gratuita MUY potente (suficiente para páginas sencillas) y una versión PRO excelente.Además, las páginas que crea suelen no ser tan pesadas como en el caso de otros “builders“. Nota: tiene puntos en contra. Por ejemplo no me gusta que no se pueda editar o ver el contenido si Elementor se daña, ni la manera que tiene de exportar las entradas y páginas. Además, existen muchos plugins gratuitos que extienden las funcionalidades de la versión free, haciendo que CASI se parezca a la PRO (casi, si tu proyecto es importante compra la PRO). Hoy os vamos a mostrar algunos de los más importantes. Plugins gratuitos para Elementor. Os dejamos varios. Muchos de ellos añaden varios bloques y tienen también versiones de pago que añaden más. Y obviamente los bloques que añaden son los que son, no permite mucha configuración. Essential Addons for Elementor. 29+ widgets gratuitos y más de 57 en la versión de pago. Entre ellos alguno tan útil como el Post Grid , Team Members o widgets para Contact Form 7, Ninja Forms, WooCommerce Product Grid etc. Por algo tiene 646 votos de 5 estrellas y más de 200.000 descargas. Livemesh Addons for Elementor. 12 widgets gratis, más en la pro. Widgets como el Portfolio Grid, Blog post Grid, Post Carousel etc. WidgetKit for Elementor. Más de 20 widgets adicionales. Elementor – Header, Footer & Blocks. Plugin para crear tu mismo la cabecera o pie personalizados SI es compatible con tu plantilla. Elementor Addons & Templates. Específicos para WooCommerce. WidgetKit for Elementor. Anywhere Elementor. Este no añade widgets. Lo que hace es que permite añadir un elemento de Elementor en cualquier sitio con un shortcode. Si creas un elemento global, permite añadirlo en otros sitios por shortcode y los cambios se ven en todos los sitios.

Diseño Web, Gestores de contenidos, Webs

Plugintest.com: Comprueba si un plugin funciona con la última versión de WordPress.

Una de las cosas que más asustan a los usuarios de WordPress es que actualizar o instalar un plugin pueda “tirar” su página. Básicamente las soluciones que se dan son probar (siempre si puedes en un sitio de pruebas) y, si falla, desactivarlo. Antes podíamos desactivarlos por FTP, ahora con el nuevo modo Fatal Error Protection ya no es necesario. Pero la prueba no nos la quita nadie. Por eso es tan interesante esta página Plugintest.com, que realiza un smoke test del plugin en la última versión de WordPress. ¿Qué significa esto? Básicamente que la web prueba (o ha probado porque tiene un gran listado de pruebas anteriores), si: El plugin se puede activar Si no salen errores visibles al hacerlo. Si no se rompe la página de manera visible. ¿Es la panacea? No, obviamente no. Puede que un plugin no de error al activar, pero luego no funcione algo de tu web, es cuestión tuya probarlo.Pero nos quita (o al menos reduce) de gran manera ese primer susto de que nuestra web no funcione durante un tiempo al activar ese plugin. Si la web indica que falla, ante pruebas tan básicas, yo descartaría el plugin y buscaría una alternativa. No cuesta nada comprobarlo en esta web antes de hacerlo, así que gran recurso a tener en caso de dudas.

Diseño Web, Gestores de contenidos, Trucos

Añadir NIF, CIF o DNI a los formularios y facturas de WooCommerce.

Como os dijimos el otro día, WooCommerce, aun siendo increíble, no tiene en cuenta cuestiones importantes como el NIF, CIF o DNI en los datos de cliente. Algo obligatorio para las facturas en España.Hoy vamos a enseñaros a añadirlo con y sin plugin. 1. Añadir el NIF, CIF o DNI a WooCommerce sin plugin. En este caso añadiremos uno o varios códigos. Por lo tanto o los añades al functions.php de tu tema hijo, o a Snippets (como prefieras). Sinceramente, con lo que se actualiza WooCommerce, y siendo algo tan vital, yo estoy más cómodo usando un plugin que código personalizado.Porque si hay errores más adelante los del plugin pueden arreglarlo, y puedes deshabilitar los plugins también rápidamente. Si no quieres complicarte, vete directamente al siguiente apartado para hacerlo con un plugin.Pero esto es a gusto del consumidor. El código ya lo han desarrollado otros, y os dejamos los ejemplos: https://www.wpdesk.net/blog/vat-eu-woocommerce/ https://ayudawp.com/como-anadir-el-cifnif-en-woocommerce/ Aquí os dejo el primero resumido: 2. Añadir el NIF, CIF o DNI a WooCommerce con plugin. (OPCIÓN MÁS RECOMENDABLE) Como os he dicho, yo prefiero este método. Al final el plugin es el código anterior “empaquetado”. Pero podemos gestionarlo de otra manera, y los plugins más maduros tienen soporte y actualizaciones (con mejoras del código y nuevas funcionalidades).Hay dos tipos de plugins que podemos usar para esto. Plugins específicos: Ya existen plugins específicos para añadir estos campos. Os dejo unos pocos: WC – APG Campo NIF/CIF/NIE. Compatible con WooCommerce PDF Invoices & Packing Slips (que usamos para tener las facturas con numeración consecutiva). Es instalar y activar y ya aparece el DNI en la factura. DNI WooCommerce. EU VAT for WooCommerce. Permite deshabilitar el IVA para ciertos países (EUROPA) y dejarlo para España. Plugins no específicos. Podéis también usar los plugins que permiten añadir campos a WooCommerce y hacerlos o no obligatorios. Tiene la ventaja que son plugins que llevan mucho tiempo, ya probados para todo tipo de campos y compatibles con otros plugins.Os recordamos dos de los más importantes. WooCommerce Checkout Manager. El más usado para esto. En un artículo próximo os enseñamos a hacerlo con este plugin (porque no es inmediato). Flexible Checkout Fields. Os dejamos que probéis y elijáis la opción que más os convenga. Pero con esto, y el artículo del día pasado de la numeración, tendréis las facturas de WooCommerce legales en España.

Diseño Web, Gestores de contenidos, Trucos

Nueva herramienta Salud del Sitio en WordPress

Con la llegada de WordPress 5.1, y mejorado en la 5.2, se ha activado una nueva herramienta de la que queremos hablaros hoy: Salud del Sitio. Para acceder a ella tienes que ir a Herramientas- > Salud del Sitio. Como veis disponemos de dos pestañanas MUY útiles. En la primera, Estado, tenemos un listado de errores críticos y recomendaciones. Tanto versiones de Php, errores de https, problemas con los módulos o con el core de WordPress.En la segunda Información, disponemos de información sobre Wordress, el servidor, los directorios, temas, módulos etc etc. Todo exportable al portapapeles. Como veis es mucha información que puede usar el administrador para adelantarse a problemas futuros, o analizar y resolver problemas actuales. En muchos casos nos ahorra instalar otras cosas como phpinfo o similar y nos proporciona casi toda la información que necesitamos en un mismo sitio. Todas estas pruebas que realiza ahora el sistema, se pueden modificar o detener por código, o por plugins, hablaremos de eso otro día. Fatal Error Protection. Pero no es todo. Junto a la información, Site Health incluye otra función que, una vez depurada algo más, será muy útil y promete conseguir que nunca nos veamos sin acceso al backend. Se llama Fatal Error Protection: Protección de Error Fatal. El objetivo del mismo es: It should be possible for an administrator to access their admin backend, even in case of a fatal error. “Debería ser posible, para un adminsitrador, acceder al backend incluso en caso de error fatal”. Antes, sin Fatal Error Protection, cuando ocurría un error fatal solía aparecer la White Screen of Death, WSOD (página en blanco de la muerte), y no se podía acceder. Teníamos que entrar por FTP y deshabilitar plugins o temas. Con este nuevo sistema, incluido en la Salud del Sitio, aunque no visible, cada vez que ocurra un error de este tipo, se le notificará por correo al administrador. En el correo tiene la página o páginas que han sufrido el error, y la posible causa, junto a detalles técnicos.Además, le llega un enlace de un “modo de recuperación” (enlace que caduca en 1 día) . Si accede a través de ese enlace, podrá entrar en el backend porque el módulo o tema que está dando error estará “pausado”. Así el administrador podrá tomar las medidas necesarias para arreglarlo, directamente en WordPress sin usar herramientas adicionales. Buena solución…aunque depende de que nos llegue el correo porque el enlace no se puede conseguir, todavía, por ningún otro medio.

Diseño Web, Gestores de contenidos, Trucos

Cómo crear facturas legales en España en WooCommerce

WooCommerce es un gran plugin para crear una tienda con WordPress. Pero tiene, de serie, un fallo bastante grande y que muchos desconocen: las facturas. Hay varios puntos donde las facturas no son aceptables. WooCommerce, “de fábrica” sólo genera e-mails de factura. Lo que puede estar bien para el pedido de cliente. Pero no para la tienda si necesita una copia para su contabilidad, para la asesoría o para reenviárselo al cliente. No tener pdfs en el tema de las facturas no es útil cuando tienes una tienda. Las numeración de las facturas de WooCommerce no es secuencial. Y Hacienda si que obliga a que lo sea. Esto hay que solucionarlo. No es posible modificar mucho los datos del correo que envía “de serie”. Y en España necesitamos datos como el CIF y NIF que hay que añadir. Suele ser habitual tener tienda física, y tienda virtual. En este caso, lo interesante es tener numeración diferente en series (lo permite Hacienda). Por lo tanto es interesante si en WooCommerce se pudiera personalizar un sufijo o prefijo. Necesitamos que el I.V.A. salga desglosado en las facturas. ¿Por qué no son consecutivas las facturas? Esto es algo que pocos nos esperamos pero tiene mucha lógica cuando entiendes cómo funciona WordPress. Los pedidos de WordPress son “posts personalizados” de WordPress, y siguen dicha numeración. Cada post y página tienen un ID. Por ejemplo puedes tener un post en tu página con ID 1, luego un pedido que cogerá el ID 2, luego una página con el 3 etc. Es más, las facturas de WordPress no tienen la misma numeración que los pedidos. Porque hay pedidos que no acaban en pago, pedidos fallidos etc. No es necesaria que la factura tenga el mismo número que el pedido (mientras vengan reflejados en la misma), pero otro día os enseñaremos a hacer esto. Lo que si es necesario es que las facturas sean consecutivas. ¿Cómo podemos tener facturas legales en pdf en WooCommerce? Nota: el punto 3, el del NIF/CIF en la factura lo resolveremos en otro post. Lo mismo con el 5. Vamos a tratar hoy los puntos 1 y 2. Como siempre, todo esto se puede resolver con Snippets, pero como se tratan de varios puntos que afectan a algo vital como las facturas, es muy recomendable usar plugins. Recomendamos varios: WooCommerce PDF Invoices & Packing Slips. El plugin que solemos usar. Os explicaremos aquí cómo configurarlo. Soluciona casi todos los problemas y de manera gratuita. WooCommerce Print Invoice & Delivery Note. Otra versión similar a la anterior. WooCommerce PDF Invoices, Packing Slips, Delivery Notes & Shipping Labels. Como veis otro plugin que hace todo lo anterior, y mucho más. Si necesitas el resto de funciones, instala este. YITH WooCommerce PDF Invoice and Shipping List. Otro gran plugin que arregla todos los problemas antes mencionados y también tiene versión pro con funciones extra. Cómo configurar WooCommerce PDF Invoices & Packing Slips. Cogiendo este primer plugin como ejemplo vamos a configurarlo para tener facturas legales (salvo el tema del NIF/CIF que veremos aparte).Sólo instalando el plugin ya tendrás las facturas en pdf, por lo tanto resuelve el punto 1. Tras instalar el plugin tenemos que ir a WooCommerce > Facturas PDF . Ahí podemos configurarlo. Puedes configurar cosas tan importantes como: Cuando enviar la factura al cliente y cuando recibirla tú. Si al pinchar en la factura se la descargan o abre el navegador. Si los clientes pueden verla en Mi Cuenta. Si quieres ver el número de factura en los pedidos. El siguiente número de factura (en qué numero empiezan). Esto resuelve el tema de la numeración (punto 2), porque será consecutiva a partir de este número. El prefijo o sufijo (resuelve el tema de las series, punto 4) y número de dígitos de la numeración. Esto es lo esencial, pero el plugin permite poner logos, plantillas de factura, pies y cabecera de página, tamaño de la factura, albaranes de entrega y MUCHO más. Algo casi imprescindible para una tienda en España.

Diseño Web, Gestores de contenidos, Trucos

WordPress, apuntar a una página o post en concreto con CSS

Hace unos días explicamos cómo usar CSS para los miembros que estén o no estén “logados” en WordPress. Hoy vamos a explicar un truco similar. En WordPress es preciso apuntar a una página en concreto con CSS, y así poder cambiar el aspecto de algún elemento sólo en una página en concreto. Para hacer eso lo primero que tenemos que hacer es identificar el ID de la página a la que queremos apuntar. Para eso edita la página, y mira en la URL, donde pone post.php?post=XXXX. Ese XXXX es el ID. Ahora, en tu código CSS pon lo siguiente para identificar a la página .page-id-XXXX. Por ejemplo .page-id-11199 span {color:black;} Para un post .post-XXXX , por ejemplo .post-11199 También puedes especificar en concreto a la pagina principal con la clase .home. O a la página de entradas (si la tienes definida) con .blog .

Diseño Web, Gestores de contenidos, Prestashop

Carritos vacíos al enviar productos al mismo en Prestashop. Posible solución.

Hace unos días, tras una actualización en un Prestashop 1.6 de un cliente, empezaron a ocurrir “cosas raras”. En el Front End, de manera aleatoria (y muy frecuente en ciertos momentos), los clientes estaban enviando productos al carrito, y al llegar al mismo estaba vacío.En el Back End, algunos plugins como el de TPV, al intentar enviar productos para cobrar, también daban un resultado vacío. Todo esto sin errores significativos en los logs del servidor, ni en modo debug. Sólo salía este error en los logs de Prestashop (backend) : Frontcontroller::init – Cart cannot be loaded or an order has already been placed using this cart Posible solución. Y digo posible porque en estas cosas las causas pueden ser múltiples, y lo que vale para uno no siempre vale para otro. Nosotros descubrimos la causa en este post. Al comprobar las tablas ps_cart y ps_order, viemos que el id del carrito que estaba asignando ps_cart, como posible siguiente carrito, era MUCHO menor que los que estaban en ps_order. Y los pedidos fallaban cuando coincidían con un ps_cart que ya había tenido un pedido (en ps_order). A veces no fallaba porque no todos los carritos se convierten en pedidos. La solución entonces es hacer que el último número de ps_cart (a partir del cual crea el siguiente) sea mayor que el último de los carritos de los pedidos. Así no pueden coincidir.

Diseño Web, Software

Dos editores web gratuitos: Brackets y Atom.

Los diseñadores web, necesitamos muchas veces un buen editor. No el editor WYSIWYG – el visual que usa la mayoría de la gente con pocos conocimientos de código -, porque mete mucho código innecesario. Sino un editor que permita escribir código, relacionar lenguajes de estructura (como HTML) con lenguajes de estilo (como CSS) y de comportamiento (como Javascript). Es verdad que podemos usar editores avanzados como Notepadd++ (que hemos usado muchos años y seguimos usando a veces), pero un editor específico para diseñadores viene con muchas más ventajas. Hoy os dejamos dos gratuitos muy eficientes y muy usados. Brackets. Editor web orientado a diseñadores, el proyecto lo empezó Adobe aunque ahora creo que es independiente.Es un editor gratuito de código libre que te permite editar en HTML y CSS y previsualizar los cambios en tiempo real. También permite ver los cambios en Javascript (salvando antes). Dispone de una comunidad muy activa, y opción para añadir extensiones que añaden funcionalidades y le dan mucha potencia.Está escrito en Java y se puede usar en Windows, Mac y Linux. Lo hemos usado y la verdad es que sin problemas, estamos muy contentos. Atom. El editor web de código libre creado por Github, muy publicitado, muy usado y muy potente. Es similar al anterior, aunque usando los complementos adecuados puede usarse para programar en muchísimos lenguajes. También disponible para Linux, Mac y Windows. De los dos seguramente el más famoso y con opciones para más lenguajes. Aunque si sólo quieres CSS, HTML y Javascript los dos son muy similares.

Diseño Web, e-Learning, Gestores de contenidos, Trucos

Crear un usuario administrador para Greenlight, el interfaz gráfico de Big Blue Button.

Una de las primeras cosas que me faltaron cuando instalé Big Blue Button con Greenlight era tener un usuario administrador para poder gestionar la creación de usuarios, y alguna personalización de la interfaz gráfica.Bueno, ya lo han remediado y os enseñamos a activarlo. Paso 1. Actualizar Greenlight. Lo primero es actualizar Greenlight, porque esta característica está en las “nuevas versiones” y si lo intentas en las anteriores dará error (no reconoce admin:create ). Pero esto es fácil, entra por ssh a tu servidor BBB y escribe lo siguiente. Paso 2. ¿Has pasado de docker run a docker compose? Los anteriores sistemas de Greenlight se ejecutaban con docker run. Pero eso no está admitido ya y hay que pasar a ejecutarlo con docker compose. Para hacerlo tienes que seguir estos pasos, que consisten en (más info): Si no has actualizado (si lo has hecho no hace falta) limpia la instancia anterior con: Instala docker-compose en tu servidor. No vale con la versión de la distribución, necesitas una más reciente. Así que sigue los pasos aquí. Comprueba que está con docker-compose -v Paso 3. Arranca Greelight con Docker Compose. Desde el directorio greenlight ejecuta:docker run –rm bigbluebutton/greenlight:v2 cat ./docker-compose.yml > docker-compose.yml Ahora arranca Greenlight con docker-compose up -d Puedes pararlo a partir de ahora con docker-compose down (más fácil que antes). Paso 4. Ahora crea el usuario administrador. Para ello ejecuta el siguiente comando desde el directorio greenlight:docker exec greenlight-v2 bundle exec rake admin:create[“name”,”email”,”password”] Donde tienes que cambiar name, email y password por lo que quieras (puedes no poner los valores entre [] y el creará los datos por defecto y te los pasará en pantalla. Con esto ya tendréis usuario administrador en Greenlight. El usuario administrador es útil porque puedes usarlo para crear otros usuarios, borrarlos, promocionarlos a administrador, y algunas opciones de personalización del frontend como logo y colores.Para ello pincha en tu perfil, y en Organización. Nota: si has actualizado, cuando entres como administrador, revisa las opciones de creación de cuentas porque se habrá modificado. Pero con ese usuario se puede cambiar rápidamente.

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

Cómo usar imágenes Webp en WordPress con EWWW Image Optimizer.

Si pruebas tu página en Google Page Speed, una de las primeras cosas que te dirá hoy en día es: ” Publica imágenes con formatos de próxima generación“. Uno de estos formatos es Webp, diseñado por Google y que comprime las imágenes, haciendo la web más rápida, haciendo que los usuarios no tengan que usar tantos datos para ver tu página, y mejorando así, la puntuación de SEO. Problemas: no todos los navegadores son compatibles con webp (casi todos ya), no todos los alojamientos permiten estas imágenes, y Wordress no las acepta (no puedes subir las imágenes directamente, da error). Además, puede que tengamos muchas ya subidas y convertir todas sería tedioso. Solución: os vamos a explicar cómo usar el plugin EWWW Image Optimizer, gratuito, para mostrar vuestras imágenes png y jpg en formato webp. Esto hará que se quite el aviso en PageSpeed, que mejore vuestro SEO y velocidad de la web (experiencia del usuario) y que se muestren los formatos “antiguos” si los navegadores no son compatibles. Cómo activar Webp en EWWW Image Optimizer. Para ello tenemos que (tras instalar y activar el plugin) irnos a la pestaña de Webp y marcar la primera opción. Una vez hecho esto, está preparado para mostrar las imágenes png y jpg en Webp, pero hay que decírselo al servidor web. Podemos hacerlo de dos maneras: Al activar la primera casilla en Webp veréis que debajo aparece una serie de reglas de htaccess. Podéis pinchar en el botón para que inserte esas reglas en vuestro fichero o insertarlas vosotros.Tras refrescar varias veces, tenéis que comprobar que la imagen en la esquina inferior derecha pasa de rojo png a verde webp. Si es así, lo tenéis activado y podéis inspeccionar vuestra web para ver que ya está mostrando imágenes en formato webp.O analizar de nuevo vuestra página con Page Speed. Si lo anterior no funciona- no es compatible con todas las configuraciones- el plugin permite instalar un javascript que será el encargado de ver si piden una imagen, y mostrar su webp. Esta opción es menos recomendable porque estamos añadiendo un script más…pero funciona casi siempre. Podéis ver cómo se hace en este vídeo.

Scroll al inicio