Gestores de contenidos

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, 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.

Diseño Web, Gestores de contenidos, Trucos

Cómo actualizar plugins de pago como WP Backery Builder, Revolution Slider o Layer slider en temas de WordPress que los contiene.

Cuando hacemos una página web en SmythSys en WordPress normalmente adquirimos temas de pago. Por mil razones que no vienen al caso, pero que se resumen en usar buenos materiales para entregar un producto mejor. Uno de los sitios que más usamos para estos temas es Theme Forest, y ahí, muchos temas de pago incluyen plugins que son, a su vez, de pago.Al cabo de poco tiempo de instalar un tema, con sus plugins, tanto estos como aquél necesitan actualizarse (no necesito explicar por qué es importante). El tema, con la licencia, puede actualizarse automáticamente. Los gratuitos se actualizan desde el backend, en la sección de plugins. ¿Pero cómo actualizo los plugins de pago Como por ejemplo WP Backery Builder, Layer Slider o Revolution Slider (por decir algunos de los más famosos). Estos no pueden actualizarse automáticamente y, en muchos casos, salen avisos que no están en la última versión. Si no los actualizamos, al final del tiempo tendremos incompatibilidades y/o problemas de seguridad graves. Os contamos cómo hacerlo de varias maneras más o menos automáticas. La clave está en darse cuenta que nuevas versiones del tema SI contienen (normalmente, suelen ir algo atrasados) las nuevas versiones de los plugins. Lo que pasa es que te pueden actualizar los que ya tienes por problemas de licencia. Y tu si tienes acceso a actualizaciones del tema con tu licencia (o deberías). Tenéis varias opciones. Comprar una licencia del plugin. Si no sabes, o no tienes tiempo, y no quieres preocuparte, compra una licencia y activa el plugin. Esto hará que se quite el aviso y es lo más sencillo…..pero no es necesario. Desinstala e instala con las opciones del tema. Muchos temas de pago tienen una opción de “required plugins” o similar donde te indican si ya tienen la última versión. Si vas ahí y ves que la tienen, haz copia de seguridad de tu web (por si acaso), desinstala el plugin de pago, ve a la opción de plugins requeridos y, curiosamente, podrás instalar la nueva versión.Es decir la clave es que no te deja actualizar, pero si instalar la nueva (una vez eliminada la antigua). Coge el nuevo plugin del tema y súbelo. Algunos temas todavía no tienen esa sección para instalar plugins de pago. Pero si descargas la actualización del tema SI tiene el plugin actualizado. Descarga el tema, abre el zip, busca una carpeta de módulos o plugins y encuentra el que necesitas. Después sólo tienes que (tras hacer copia de seguridad) desinstalar tu versión y, o subir la carpeta del plugin por FTP, o comprimirla e instalarla desde el backend. Espero que os sirva para mantener las páginas optimizadas y actualizadas.

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.

Scroll al inicio