147 | Q&A sobre mails de WooCommerce, código Genesis, intra enlaces, local y javascript above the fold

En el episodio 147 de WordPress Semanal resuelvo dudas sobre adjuntos en los emails de WooCommerce, código en Genesis, enlaces dentro de la misma página, cuál es la mejor opción para trabajar en local y optimizar el JavaScript antes del scroll. Vamos allá. Hola hola, Soy Gonzalo de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mayor satisfacción ni mejor inversión que la de crear y gestionar tu propia web con WordPress. Y hoy voy a responder algunas de vuestras dudas. Ya sabéis que desde hace un tiempo para acá estoy respondiendo mensualmente pues algunas de vuestras preguntas. Básicamente hago selección, básicamente hago una selección de los que me contactáis a través del soporte, los que sois suscriptores pues, pues tenéis la posibilidad de contactarme y preguntarme cualquier duda que tengáis a lo largo de vuestro camino en esto de la creación de webs con WordPress y voy escogiendo algunas que pienso que pueden ayudar al resto de oyentes. Así que vamos a verlas. Voy a responder a cinco preguntitas que ya más o menos os he dicho de qué va a ir cada una, pero antes de adentrarnos en ello vamos a ver qué está pasando en Gonzalo Navarro es. ¿Esta semana qué novedades tenemos? Bien, como cada semana tenemos un nuevo vídeo de la zona Código y y en este caso os enseño a crear una tabla de precios utilizando las columnas de Gutenberg. Ya sabéis que Gutenberg, no sé si lo habéis probado aún o no, pero viene con un bloque que te permite poner columnas, algo que siempre se ha echado mucho de menos en WordPress y que siempre hemos tenido o que instalar un plugin o que utilizar CSS para conseguir columnas, pues ahora ya viene integrado, pero claro, aún así son columnas digamos básicas y que dependiendo del theme que uses, pues unos themes digamos dan soporte para esas columnas y le dan unos estilos, le dan otros, pero tú puedes darle tus propios estilos, por ejemplo para crear una tabla de precios, que es algo pues muy común y que casi todos en algún momento lo vamos a necesitar. Así que en lugar de tener que instalar un plugin específico pues para crear tablas de precios, vamos a crear nosotros por CSS de forma bastante sencilla. Os dejo todo el código para que copiéis peguéis y si queréis cambiar algún color, queréis cambiar alguna cosa, pues simplemente es cambiarlo de forma sencilla. Si aún no usáis Gutenberg y queréis hacer esto mismo, también tengo varios vídeos de la zona código en los que os enseño a crear columnas responsive con CSS de forma normal, incluso columnas desiguales. Tengo varios contenidos a este respecto, incluso un vídeo concreto para crear tablas de precios en WordPress fuera de lo que es Gutenberg, o sea que hay mucho, mucho contenido al respecto, sea cual sea tu situación. ¿Vale? Dentro de este vídeo de la zona código, que es ya el vídeo 98, tenéis los enlaces a todo esto que os he comentado, digamos extra o complementario. Fantástico. ¿Qué más cositas? Bueno, el curso del mes. He sacado una versión 100% renovada del curso de WordPress básico, ya lo comenté en el anterior episodio, básicamente está al día con la versión 5.0 de WordPress, he hecho los vídeos desde cero, todos más cortitos, creo que más fáciles de seguir, son más clases, pero como digo, los vídeos son más cortitos, creo que esto va a favorecer el consumo de los mismos, incluso siempre, si ya has visto el curso pero tienes una duda concreta, pues vas a ver ese vídeo y no tienes que ver un vídeo de 30 minutos, sino que puedes ver un vídeo más cortito de 10. Otra cosa, por cierto, el reproductor de vídeo que uso, que es el de Vimeo, tiene la posibilidad de que aumentes la velocidad de reproducción, esto no lo recomiendo si estás viendo el vídeo de primera, si es la primera vez que lo ves, pero si estás revisitando algo, si estás revisando algún tema o algún vídeo que ya habías visto, le puedes dar a la pestañita que está en la esquina inferior derecha de del reproductor del vídeo y puedes acelerar hasta creo que más del doble la velocidad, está muy bien, sobre todo eso si quieres repasar algo y quieres ver rápidamente un vídeo hasta llegar a una parte concreta y así no perder tanto tiempo. Esas son las novedades. Ya sabéis que tanto los cursos como la zona código es parte del área para suscriptores, si estáis suscrito pues tenéis acceso a todo y a soporte conmigo y si no, podéis ir a Gonzalo Navarro es cursos y ahí tenéis toda la información, cuánto vale, qué incluye y cómo apuntaros. Fantástico. Saltamos ahora al plugin de la semana, que es para Poner un aviso de política de cookies de forma sencilla y sin tonterías. El plugin se llama Cookie Notice, es uno de los más sencillos de usar y cumple a la perfección con su función, que es básicamente ofrecerte la posibilidad de poner un aviso de cookies. Este plugin es súper popular, seguramente muchos de vosotros lo conoceréis porque está activo en más de 900.000 webs con WordPress. Viene para mí con las opciones de personalización justas y es una de las mejores opciones si buscas algo sencillo y efectivo. Te permite personalizar el mensaje, por supuesto, te permite poner un enlace por si quiere la gente ampliar información a tu política de cookies, te da opciones para que juegues con la caducidad de las cookies, puedes sincronizarlo incluso con la página de política de privacidad, incluso con la propia de WordPress, y varias opciones en cuanto a la traducción y y en cuanto a cómo va a aceptar la gente la política de cookies o si se va a recargar la página cuando la acepten. En fin, tienes bastantes opciones si te quieres meter, digamos un poquito más de lleno en ello. Pero si lo que quieres es una cosita sencilla, poner tu mensaje y que aparezca, es súper fácil, lo pones, le das a guardar y tienes el mensaje para que la gente acepte tu política de cookies. Sí, bueno, de estos hay miles de plugins y muchos funcionan bien. Simplemente comento este porque sé que es una apuesta segura. Fantástico. Ahora sí nos adentramos de lleno con las preguntas q a de febrero de 2019 y empezamos con una de José Antonio, que es sobre Enviar Adjuntos en el Email del recibo de WooCommerce. Y me muy buenas Gonzalo. Tengo una duda de Un cliente necesita que cuando compren un producto se envíe adjunto y automáticamente la ficha de Seguridad y Técnica del Mismo, y así con cada uno de los productos, ya que son varios con diferente documentación. ¿Hay algo para esto? He estado buscando pero seguramente he buscado mal porque no he encontrado nada. Saludos. Pues sí, básicamente lo que quiere José Antonio es que cuando alguien compre un producto de una web que estaba haciendo para un cliente, pues ese producto necesita una documentación para poder ser utilizado, o a él le gustaría enviar una documentación junto con el producto. Entonces, como WooCommerce manda un email de gracias por tu compra y manda un recibo y demás, me pregunta si hay algún plugin que en ese email de gracias por tu compra o en el email del recibo, pues que vaya adjunto el documento que él quiera. Y. Y sí que hay un plugin, hay uno oficial de WooCommerce que hace precisamente eso. Os lo dejo en las notas del programa. Se llama email attachment. Vale 20. Vamos a mirarlo. 29 dólares ¿Vale? Con actualizaciones anuales, es decir, el pago sería anual si quieres continuar recibiendo actualizaciones. Es bastante asequible para lo que suelen valer los plugins o las extensiones para WooCommerce. Y después estuve buscando porque quería darle a José Antonio a ver si había un plugin gratuito, una opción gratuita para esto y. Y encontré uno que yo no lo he probado personalmente, pero que tenía buena pinta, tanto por valoraciones como por número de instalaciones activas. Está activo en 2.000 sitios, no tiene demasiadas valoraciones, pero las que tiene son positivas y se llama WooCommerce Product Attachment. No veo exactamente si tiene la posibilidad de enviarlo por email, pero lo que sí te permite es ponerlo en la página de gracias del producto. Básicamente tú le asignas los documentos que quieras al producto concreto y cuando la gente lo compre y ya haya terminado de comprarlo, pues se le ofrece la posibilidad de descargarlo, que es una opción creo que bastante válida. Así que si estáis en esta situación, probad este que es gratuito. Si veis que no, pues ya usad el de pago de WooCommerce. Sí, fantástico. Dejamos la pregunta de José Antonio y nos vamos con la de David, que quiere saber dónde colocar código para modificar según qué partes de Génesis. Y me Hola, aquí va otra consulta para la web que estoy desarrollando tal tal punto. Esta duda está relacionada con mi consulta anterior que que habla sobre cómo modificar el footer de Genesis sin usar plugins. En esta ocasión mi duda es dónde poner el código para modificar el footer de Genesis. En muchas ocasiones se nos dice que es mejor crear un plugin con nuestras funciones y escribir ahí el código. También se nos dice que es mejor no tocar el archivo functions php. Así lo he hecho yo tengo mi plugin en el que estoy metiendo mis trocitos de código, de hecho tengo dos, uno solo para cpts y otro para las cosas estéticas. Pero al poner el código para modificar el footer de Genesis me pasa lo que si lo pongo en mi plugin de funciones, la página tarda mucho en cargar. Antes de cargar la página se pone la pantalla en blanco y aparece arriba del todo el código que se pone en el plugin para modificar el footer. Pasados unos instantes ya carga la página con normalidad. Esto me parece feísimo y seguro que no es bueno para el funcionamiento de la página. Por otro lado, si lo pongo en el archivo Functions php todo funciona bastante bien, la página carga rápido y no aparece ese código ni nada raro. Esto es así porque WordPress carga primero los plugins y luego el theme. En este caso está justificado modificar el archivo functions php, aunque en general no se recomiende mucho. Saludos David Bueno David, muchas gracias por tu pregunta, o resumo básicamente porque es una pregunta un pelín larga. Bueno, estuve conversando con él un poquito porque quería modificar el footer de Genesis sin utilizar plugins, quería hacerlo por código y bueno, le estuve recomendando cómo hacerlo y luego pues tenía dudas sobre dónde colocar ese código para modificar el footer de Genesis. Bueno, primero Genesis ya sabéis que es un tema para WordPress, realmente es un framework, es un tema especial que ofrece un marco de trabajo específico para desarrollar páginas web y para hacer modificaciones en tu web, pero al final es un tema de WordPress al que le instalas temas hijo para que puedan funcionar, y entonces él quiere modificar el tema hijo que tiene instalado para Genesis, si quiere cambiar el footer y tiene dudas me dice que si lo pone en su plugin de funciones, que es una forma de modificar nuestras webs, pero nosotros también podemos modificar nuestra web utilizando el propio archivo functions php de nuestro child theme. Y entonces David tiene aquí un poquito de duda y me dice que es mejor que qué va a hacer y qué demás. A ver, como norma general, si los cambios que vas a hacer van a aplicar al tema que estás utilizando, al tema hijo, al child theme, entonces yo los cambios los pondría en el functions php de ese child theme, Es decir, si tú en algún momento en el futuro cambias de tema, quieres que ese cambio que estás aplicando sea siga manteniendo en tu web o no, si es que no pones los cambios en el functions php de tu child theme, si es que quieres que siempre se mantenga ese cambio, lo pones en tu plugin de funciones, en el functions php de tu plugin de funciones. Entonces en este caso es un cambio específico, incluso cosmético, para el tema hijo que está usando David, con lo cual debería de ponerlo en el functions PHP de su tema hijo. Esto de que se recomiende no ponerlo en el functions PHP realmente no es así, lo que no se recomienda es ponerlo en el tema padre, pero en el tema hijo sí. Y. Y luego también preguntaba David sobre qué carga primero, si los plugins o luego el theme. Realmente sí que cargan primero los archivos de los plugins, pero de todas maneras os dejo un enlace a la documentación del codex de WordPress donde puedes ver un listado en una petición normal, es decir, en una acción normal que un usuario haga en nuestra web, qué es lo que se iría cargando antes y qué es lo que se iría cargando después en términos de archivos y demás. Os lo dejo porque está bastante interesante. Bueno, espero que quede clara la pregunta de David. Pasamos ahora a la de Wojtek, que es sobre cómo poner enlaces a partes concretas dentro de una misma página. Y me Hola Gonzalo, ¿Cómo puedo crear un link que redirija un sitio concreto en la misma página? Me parece haberlo visto en alguno de tus cursos, pero ahora no lo encuentro. Muchas gracias por adelantado. Un saludo. Wojtek Kucharski Bueno, otro saludo para ti Wojtek. Esto es una pregunta que me llega a veces, así que me parece interesante comentarla por aquí. Y básicamente lo que quiere Wojtek es poder poner enlaces que lleven a un lugar distinto dentro de una misma página. Cuando digo una misma página no me refiero una página web, me refiero a una página concreta dentro de tu página web. Y esto es muy sencillito y tengo un tutorial explicando cómo hacerlo, es gratuito, puede acceder todo el mundo a él y os lo dejo en las notas del programa, ¿Vale? Es muy facilito, pero es un poquito difícil explicar sin texto y sin imágenes, entonces mejor prefiero que veáis el tutorial, que como digo es el enlace número 6 de la parte de enlaces de las notas del programa. Vale, Fantástico. Dejamos la pregunta de Wojtek y nos vamos con la de Miguel Ángel, que es sobre cómo elegir entre tantas opciones para trabajar en local. Y bueno, me hace una pregunta un poco larga, la dejo entera en el episodio, pero la voy a resumir Al leerla me Hola Gonzalo, quería hacerte una pregunta desde el principio. He pensado que trabajar paralelamente a la web que tuviese con una web en local o a través de hosting de pruebas era la mejor opción para ir aprendiendo y trabajando a la vez. He visto un poco tu curso de WordPress en local y prueba y creo que la mejor opción es tenerlo como lo tienes tú. En mi caso sería para validar diferentes nichos sobre los que quiero trabajar, pero si creo varias webs de prueba como tú tienes para tus cursos, me ralentizará mucho el ordenador. Tengo pensado subir vídeos y fotografías a la nube y tenerlos linkeados para así aligerar bastante. En cuanto a la forma de escoger para hacer webs clonadas o de pruebas, hay tantas que al final te acabas mareando y pasas a la parálisis por análisis. ¿Si escojo la de Desktop Server que es gratuita, podré trabajar perfectamente tal y como dices en los vídeos no? ¿Qué te parece lo del alojamiento en la nube de mis vídeos y mis fotos? En una semana me hago una cuenta de ActiveCampaign, me la haré a través del link tuyo de afiliado, aunque tengo muchas otras opciones, lo hago a través de ti que te lo curras guay. Saludos. Bueno, muchísimas gracias Miguel Ángel. Vale, os resumo rápidamente lo que Miguel Ángel tiene dudas porque hay muchísima oferta en cuanto a. ¿Bueno, tampoco hay tanta no? Pero bueno, hay varias opciones. En cuanto cómo hacer tu web en local Cuando usas WordPress, básicamente las más importantes son Desktop Server y Local By Flywheel. Me refiero a las que te dan ya todo hecho, luego tú puedes instalar por tu cuenta el entorno ideal para trabajar en local, pero estas herramientas te lo dan ya todo hecho y simplemente instalas el programa y ya puedes empezar a crear webs en local. Y tiene dos dudas, una si esto va a ralentizar mucho su ordenador, si va a consumir muchos recursos. Y luego por otro lado me habla de la posibilidad de clonar las webs. Pues entiendo también para hacer pruebas. Son dos cositas distintas, por un lado trabajar en local, trabajar en tu propio ordenador y por otro lado hacer copias de tu web para trabajar en ellas. Bueno, sobre la memoria del ordenador, básicamente Desktop server es más liviano que local, Local consume más recursos. Y sobre si puedes utilizar Desktop server la versión gratuita para tener un funcionamiento completo. ¿Sí, la versión gratuita puedes hacer prácticamente de todo, pero tienes que tener en cuenta que solo puedes tener 3 webs en local a la vez, es decir, que tendrías que ir borrando para crear otras webs en local, dependiendo ya del tipo de uso que le vayas a dar o si quieres opciones premium como para hacer la migración y demás, pues ahí ya sí te recomendaría contratarlo, vale? Y sobre los vídeos, realmente yo los alojaría en YouTube, en Vimeo, en Wistia o en alguno de estos, es decir, si después tú cuando los tengas en tu web, lo normal es que los vayas a tener subidos pues a eso, a YouTube, a Vimeo o alguno de estos, entonces para trabajar en local sigue la misma aproximación, sube los vídeos a donde sea donde los vayas a subir y luego luego simplemente los incrustas. No es buena idea subir los vídeos, eso por supuesto sí que te ocuparía muchísimo espacio y sobre todo si la gente ve mucho esos vídeos, eso te consume el ancho de banda y adiós. Así que ahí simplemente elige, bueno si lo quieres subir a Google Drive también puedes incrustarlo, pero bueno, yo usaría una plataforma pues o YouTube o Vimeo especializada en vídeo digamos. ¿Y para las imágenes yo realmente no la subiría a la nube tampoco, las imágenes tampoco te van a ocupar demasiado, yo las usaría de forma normal, tal y como hicieras si estuvieses en vivo, de acuerdo? En general te aconsejo que trates la web en local como si estuviera en un hosting, tampoco tendrías que hacer nada distinto. Y luego para el tema de clonado depende un poquito, pero para hacer un clon de una web a mí me encanta el plugin WordPress Staging, que lo vemos en el curso, en el curso de WordPress en local y pruebas, puedes hacer una copia exacta de tu web rapidísimo, directamente en tu mismo hosting y luego es súper fácil borrarla, es súper fácil modificarla, es súper fácil crear otras copias, a mí me encanta. ¿Vale? Lo vemos en el curso como digo de WordPress en local y prueba. Así que en general Desktop server para mis webs en local, yo en mi caso uso el servicio de pago y WordPress staging para clonar. Fantástico. Pues muchas gracias a Miguel Ángel por su pregunta y vamos con la de Miquel que es sobre la optimización above default. ¿Me Buenos días Gonzalo, cómo va todo? Verás, te escribo porque estaba viendo el curso de velocidad en WordPress, concretamente el 9 Eliminar el JavaScript que bloquea la visualización en la mitad superior. En él recomiendas el plugin Above default y metiéndome en el enlace que dejas para descargarlo pone que no está disponible desde el 1 de abril de este año por violación de las directrices. ¿Hay algún otro que haga lo mismo y que hayas probado y sea fiable? Muchas gracias. Bueno, gracias a ti Miquel. Esto que comenta Miquel es verdad, hubo un revuelo grande con este plugin porque básicamente lo banearon, lo quitaron del repositorio porque los que controlan esto decían que estaba incumpliendo las normas. Entonces lo que hicieron esta gente fue dejar su plugin en GitHub, que ya sabéis que GitHub es un sitio que utilizan los desarrolladores para poner su código y poder ir indicando ahí las distintas modificaciones que se hacen y otros desarrolladores pueden ir y colaborar pues para un plugin, por ejemplo para un Thing o para un trocito de código cualquiera. Y pues bueno, la mayoría de la gente o mucha gente tiene sus plugins ahí puestos y vas viendo ahí todos los cambios que se hacen y como digo, otra gente puede colaborar. En fin, pues siguieron dejando su plugin ahí en GitHub y se podía descargar desde ahí. Y ahí explicaron además que no entendían por qué los habían baneado del repositorio, que ellos no habían hecho nada malo, que no sé qué, que no sé cuánto. Por otro lado, gente digamos del mundillo de WordPress decían que sí que habían hecho cosas mal, no sé qué. Bueno, realmente no sé quién tiene razón. En cualquier caso el plugin se podía descargar de GitHub hasta hace unos meses, ya han dejado de darle soporte, o sea que tampoco recomiendo que lo descarguéis desde GitHub. Y bueno, os dejo una alternativa que es un plugin que es bastante usado, tiene 60.000 instalaciones activas, que se llama Async JavaScript. Básicamente lo que consigues con este plugin es eliminar ese mensaje que te pone Google pagespeed cuando que te dice que se está cargando código JavaScript antes de hacer scroll y que eso puede ralentizar la carga de la página. En general os recomiendo que no os volváis locos con esto porque suele ser demasiado lío quitar esos mensajes y si realmente tu web carga bien, carga rápido y tú notas que carga rápido a tus usuarios les va bien, tampoco te vuelvas loco con esto de la velocidad y muchas veces es técnicamente muy complejo, quita mucho tiempo intentar, digamos, hacer que el JavaScript se cargue un poquito más tarde, eso puede hacer que tu web no se acabe viendo bien o que algunos servicios no funcionen del todo bien. Pero bueno, si tenéis interés, este plugin que os digo, Async JavaScript, te da mucho control sobre lo que puedes hacer en términos de cuándo y cómo se Carga el JavaScript antes de hacer scroll, digamos en la parte alta de tu web, que es lo que Google mira, digamos, ese primer vistazo que ve el usuario es lo que a Google le interesa porque no quiere que los usuarios tengan que estar esperando para ver ese primer contenido. También os dejo el enlace a la página de GitHub del plugin Above Default, ahí explican todo el rollo este que os he contado de cuando los banearon del repositorio de plugins, por si os interesa. Y luego en el grupo de Facebook de WordPress avanzado también lo comentaron y había gente como digo que decía que sí que tenían razón para verlos echado de ahí. Bueno, con esto quedan resueltas las dudas sobre temas varios de febrero. Recuerda que si quieres que te ayudes, que si quieres soporte personalizado conmigo a través de correo electrónico, pues puedes apuntarte al área para suscriptores y siempre que pueda ayudarte lo haré para ver toda la info Gonzalo Navarro es Cursos Y nada más. Si te ha gustado el episodio de hoy y quieres ayudarme a que siga creciendo, a que siga creando episodios como este, ya sabes que hay una forma muy facilita en la que puedes aportar tu granito de arena y que no me voy a cansar de agradecértelo y es dejándome una valoración en iTunes o en Apple Podcast. Simplemente vas a tu aplicación de podcast, buscas WordPress semanal, le das a reseñas y dejas la reseña que consideres de verdad, aunque te lo diga siempre, te lo agradezco mucho de verdad, porque es lo que me ha permitido estar ahí, que me encuentren cuando alguien está interesado en algo de WordPress y espero poder seguir estando ahí. Para los nuevos que vayáis llegando o que vayan llegando los que no tenéis un dispositivo Apple y me escucháis desde otra plataforma como iVoox, como Spotify, como Google Podcast, donde sea. También si le dais a me gusta, os Lo agradezco mucho porque todo eso ayuda, me da más visibilidad. Si, si podéis comentar, pues también fantástico. Lo que podáis hacer, os lo agradezco mucho, mucho. Así que nada más, por este episodio. Nos seguimos escuchando. Adiós.