19 Aug 2020 · 16 min
Podcast episode 227 (Q&A fresco, part 3) by Gonzalo Navarro. Host gives site updates (video #178 about redirecting users after WooCommerce login; new courses and a plugin spotlight: WhatLayers TikTok Feed) then answers five subscriber questions: fixing the WordPress image "post-processing failed" error (disable 2,500px limit via plugin or code), creating comic-like image layouts (use Masonry galleries or Elementor widget), migrating from WordPress.com to a self-hosted WordPress.org site (refers to Fernando Tellado's guide), properly embedding JavaScript (ensure code is wrapped in <script> tags depending on theme), and controlling WooCommerce image dimensions (use CSS like object-fit or WooCommerce customizer settings). Episode includes links to resources and paid subscriber support materials.
Chapters
En el episodio 227 de WordPress Semanal rematamos la tercera tanda de preguntas y respuestas frescas. 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 mejor inversión que la de aprender a crear y gestionar tus propias webs con WordPress. Y seguimos con la tanda o las tandas de preguntas y respuestas. Esta es la tercera de las tres que voy a hacer de forma seguida. Y ya después pues continuaremos con el plan habitual de episodios del podcast, donde suelo publicar un episodio al mes de preguntas y respuestas y el resto son contenidos generales relacionados con WordPress. Bien, antes de contestar las cinco preguntas que están sacadas directamente del soporte que doy a los suscriptores, ya sabéis que en González tenéis cursos, vídeos avanzados y soporte conmigo, pues estas preguntas y estas respuestas que voy a dar están sacadas precisamente de ahí, del soporte personalizado para los suscriptores. Pero antes de adentrarnos de lleno en ellas, vamos a ver las novedades qué está pasando en Gonzalo Navarro. Es esta semana, como cada semana tenéis un nuevo vídeo de la zona código, en este caso ya es el vídeo 178. Ya sabéis que si estáis suscritos tenéis acceso a todos todos los vídeos ya publicados, más los nuevos de de cada semana. Y en este, como digo, que es el 178, os enseño a redirigir a un usuario tras hacer login en WooCommerce. Básicamente vas a poder enviar a todos los que inicien sesión en tu tienda online con woocommerce a donde quieras, a la página de tienda, a una página de categoría de productos o a cualquier URL. Tiene su truquito, pero en este vídeo y con el código que os dejo, cubrimos todas las posibilidades para que enviéis a vuestros posibles compradores a cualquier página de la web. Recordad, el vídeo 178, si vais a Gonzalo es códigos lo podéis buscar o GonzaloNavarro es códigos 178 y vais directamente a este vídeo. De todas maneras tenéis todo lo que comente en la parte de enlaces de este episodio que es el 227 y al que podéis ir yendo a Gonzalo es 227. Fantástico. Ya sabéis que además de los vídeos de la zona código, tenéis todos los cursos ya publicados. El último que publiqué fue el de creación de una wiki en WordPress, es decir, una web al estilo Wikipedia. El anterior fue pues el curso de cómo crear webs minimalistas. Y luego tenéis por supuesto cursos de WordPress básico, intermedio, avanzado, seguridad, SEO, marketing. Todo lo relacionado con la creación y la gestión de páginas web de forma profesional. Bien, esas son las novedades y antes de seguir con las preguntas y las respuestas, vamos a ver el plugin de la semana. Y no es nada más y nada menos que cuatro layers TikTok feedback. Es un plugin que te permite mostrar de forma sencilla las publicaciones de TikTok en tu web con WordPress, al igual que hay plugins que te permiten hacerlo para Instagram o para otras redes sociales, en este caso está pensado para TikTok. Así que si estáis en esta red social que se está haciendo tan popular, pues aquí tenéis la forma de conectar vuestra web con WordPress con la cuenta de TikTok y hacer que se muestre vuestros vídeos de TikTok. De nuevo, What Layers TikTok Feedback lo dejo en las notas del episodio. Recordad, episodio 227. Y ahora ya sí, vamos con vuestras preguntas y mis respuestas. Y empezamos con la de Adrián, que va sobre solucionar el error de el postproceso de la imagen ha fallado. Me dice Hola, estoy trabajando en Local con la aplicación Local y he seguido las instrucciones del curso y todo ha funcionado bien, carga de themes, plugins, etc. El inconveniente es que al querer cargar cualquier archivo a la biblioteca de medios de me aparece el siguiente mensaje Y ya entre comillas me pone el mensaje Y el mensaje pues bueno, viene a decir que el postproceso de haber subido una imagen que ha fallado y que seguramente no hay suficientes recursos y que la imagen debe ser más pequeña, de 2.500 píxeles, ¿De acuerdo? Y me sigue diciendo, te aclaro que intento subir un logo que no supera los 50 kb y aún así sale el error. ¿Podrías decirme cómo puedo corregirlo? Gracias desde ya. Bueno, gracias Adrián. Esta pregunta la pongo porque WordPress introdujo un límite de tamaño de subida de imagen a partir de la versión 5.3 y desde entonces, en determinadas ocasiones a algunos usuarios es cierto que les salta el mensaje cuando no tiene que saltarle el mensaje. No estoy seguro de si es por alguna cosa de servidor o algún fallo de WordPress, la verdad que no tengo claro la razón, pero al final donde he encontrado que se puede solucionar es desactivando el límite, se puede desactivar por código, pero también hay un plugin que te permite hacerlo, así que os dejo un enlace al plugin que os permite desactivar este límite de subida de 2.500 píxeles que aquí Adrián me dice que él no está subiendo una imagen tan grande pero que por algún motivo se está detectando mal, a lo mejor es porque está en local y por el tipo de configuración que tiene. Bueno en cualquier caso se puede desactivar como digo por código con el plugin, el plugin es muy liviano, simplemente sería como añadir el código prácticamente y ya con eso pues se soluciona. Esta medida la tomó WordPress para evitar que la gente suba imágenes muy grandes cuando no es necesario, lo que pasa que como digo a veces me he encontrado que algunos usuarios le ha surgido este error. Bien, nos vamos ahora con la pregunta de Juan que va sobre mostrar imágenes en formato cómic. Me Hola Gonzalo, antes de nada me gustaría darte las gracias por todos los cursos, podcast y vídeos, me han ayudado muchísimo a crear mi página web. Bueno gracias a ti Juan por tus palabras. Y me sigue diciendo estamos pensando en hacer una web que tenga una página de inicio similar a un cómic, con imágenes en viñetas y con tamaños diferentes que no siguen una disposición en columna, no sé si me explico, te mando un enlace para que te hagas una idea. Y bueno me pone un enlace que lo dejo oculto por privacidad y continúo. Me dice también había pensado en poner las imágenes con marcos de diferentes tamaños y así se podría adecuar más o menos a lo que buscamos. He estado mirando plugins pero no he visto nada que me convenza, pero tampoco sé si con el theme de Elementor podría sin más, aunque me temo que no. Muchas gracias y cuídate Juan. Bueno entiendo que Juan aquí con el theme de Elementor se refiere a Hello, que es un tema que lo ha sacado la misma gente de Elementor, que partes en blanco y luego pues diseñas las páginas con Elementor o Elementor Pro. Pero bueno, la pregunta de Juan va enfocada un poco a cómo poner imágenes en una disposición que quede similar a cómo se vería una viñeta de un cómic o varias viñetas de un cómic. Entonces en el caso de que ya le contesté a Juan de que al final use Elementor, pues con el widget de galería se puede hacer. La clave está en ponerlo en formato Masonery, que lo que hace es que las imágenes se quedan en el tamaño en el que están. Así se puede conseguir el efecto de cómic, que pues por ejemplo, una imagen pequeña primero, después una imagen grande y después que quede debajo de la imagen pequeña la siguiente viñeta. Pues eso, con Elementor se podría hacer sin duda, como digo, con el widget de galería, lo vemos en el curso de Elementor, en el curso de Elementor Pro. Y luego, si no con cualquier otro plugin, si no se va a usar Elementor, con cualquier plugin que permita poner galerías en formato Masonery, que como digo, es que las imágenes se van adaptando al espacio que hay dependiendo del tamaño de cada imagen, pues con eso se tiene, ¿De acuerdo? Luego, pues por CSS a lo mejor, como dice Juan, se le puede dar algún borde o incluso subir las imágenes ya con borde. Pero básicamente la clave está en conseguir el efecto Masonery. También si buscáis en la zona código, podéis ir a la web, ir a la parte de código y escribís Masonery en el buscador. También os enseño cómo hacerlo por código. Lo que pasa que, bueno, en este caso a Juan le dije las opciones más sencillas, o con un plugin, o si ya se usa Elementor, con uno de los widgets de Elementor. Fantástico. Dejamos la pregunta de Juan y nos vamos con la de Ana, que va sobre migrar de WordPress. Com a WordPress. Org. Me Hola Gonzalo, anteriormente te comenté que la web que he hecho está en WordPress. Com, pero me interesaría tenerla en WordPress. Org, ya que tus cursos están enfocados a este. ¿Cómo podría hacer el cambio? ¿Qué me recomiendas? Aunque claro, ya he pagado por el año y por el dominio. Ya me dices. Muchas gracias, un saludo y salud. Bueno, un saludo y salud también para ti, Ana, y yo no tengo ningún contenido todavía explicando cómo migrar de WordPress. Com a WordPress. Org, pero a Ana lo que hice fue pasarle un enlace del blog de Ayuda WordPress de Fernando Tellado, donde explica muy bien y de forma actualizada por cómo pasar o cómo migrar de WordPress. Com a WordPress. Org. Así que os lo voy a dejar a vosotros también porque está muy bien, muy completo la verdad, y a mí me gusta. Si no tengo yo un contenido explicando algo, pues intento buscar el que mejor lo explica y dároslo también. Así que os lo dejo en la parte de enlaces. Por otro lado me dice Ana que ha pagado ya por el año y por el dominio. A ver, realmente con WordPress puntocom lo que puedes comprar es el dominio y lo compras en el año, pero. Pero no pasa nada, puedes seguir teniendo el dominio en WordPress. Com y apuntarlo al hosting nuevo donde instales tu web con WordPress. Con WordPress ya autogestionado y descargado desde WordPress. Org. Así que eso, no hay problema, simplemente le pagas el dominio a WordPress. Com en lugar de pagárselo a Godaddy o a Namecheap o a cualquier otra empresa. Eso también está explicado incluso en el post que os comparto de Fernando Tellado. Bien, vamos con. Dejamos la pregunta de Ada, Nos vamos ahora con la de David, es la pregunta número 4 y. Y va sobre cómo pegar JavaScript dependiendo del método que sigas. Me dice, Hola Gonzalo, necesito crear un pop up para una web de suscripción, en él quiero que se pueda poner el email y la contraseña para entrar. He seguido este vídeo de la zona código y me pone un enlace al vídeo 63 de la zona código, que también os dejo a vosotros, donde explico cómo crear un pop up con un poquito de JavaScript, un poquito de HTML y un poquito de CSS. Y me dice, He seguido estos pasos 1. Crear una página de prueba para aprender antes de implementarlo y poner en ella el HTML del botón. 2. En el CSS del theme, poner el css que indicas. 3. ¿En los scripts del bot y de la página he puesto el CSS aquí entiendo que se refiere al JavaScript, de acuerdo? Me dice, Estoy usando el sample theme de Genesis. Y me sigue diciendo, Al ver la página y hacer clic sobre el botón no se abre ningún pop up. Lo he probado en los principales navegadores y en ninguno funciona. No me sale ningún mensaje de que hay errores en el JavaScript del navegador. He comprobado que los códigos están bien copiados, el HTML, el css, el JavaScript. ¿Crees que hay algo más que esté pasando por alto o que deba comprobar? Un cordial saludo David Bueno, esto también lo pongo, no sé si ha quedado claro, pero básicamente debéis tener en cuenta que cuando estáis pegando código JavaScript, depende de dónde se pegue, quizás hay que especificar qué es un script hay que ponerlo entre las etiquetas script. Por ejemplo, en el caso de David me dice que está usando Genesis Sample Theme y Genesis trae una opción donde tú puedes poner scripts, trozos de código, por ejemplo el código de seguimiento de Google Analytics, el pixel de Facebook. Y si os fijáis, cuando pegáis ese tipo de scripts, ese tipo de códigos siempre van precedidos por una apertura que es script, una etiqueta de script para especificar esto es un script y luego al final una etiqueta de cierre de script. Pues lo mismo, si vais a poner JavaScript personalizado tenéis que especificar que lo que estáis poniendo es un script, porque si no Genesis no va a ser capaz de entender que eso que estás poniendo es código JavaScript, ¿De acuerdo? ¿Qué pasa? Que en el vídeo de la zona código, pues yo el código seguramente lo pegaré en algún otro lugar, ahora mismo no recuerdo cómo lo hago, aunque bueno, en el vídeo podéis seguir el mismo método que yo, pero seguramente ahí ya esté especificado que se está usando JavaScript. Entonces yo en el vídeo no usé la apertura y el cierre con las etiquetas de script y esa fue la confusión de David y por eso a David no le funcionaba. En cuanto le expliqué esto y ya puso las etiquetas, me comentó que le funcionó sin problemas. Así que lo quería comentar por si os veis en esta situación, que lo tengáis en cuenta, dependiendo de dónde pegues el JavaScript, de cómo lo hagas, quizás necesitéis las etiquetas especificando que se trata de un script. Dejamos esta pregunta un pelín más técnica de David y nos vamos con la de Jorge, que es la quinta y última y que va sobre cómo controlar las dimensiones de las imágenes en woocommerce. Me Hola Gonzalo, muchas gracias por esta estupenda web, tus consejos y cursos. Tengo un problema que por mucho que he buscado no logro solucionar. El caso es que con las imágenes de mi web no consigo que se adapten al cuadro en las que las quiero contener, o bien se recortan o se expanden de forma que no deseo. He logrado mitigar algo esto con los plugins The Smart Thumbnails y Regenerate Thumbnails, pero no es exactamente lo que busco, ya que aunque me las deja bien en la página de archivo de productos, no lo hace bien en la propia página de productos. Podrías decirme si hay algo que pueda hacer a través de código o por medio de otro plugin, si quieres verlo, mi web es. Y bueno, me deja su web y me dice gracias por tu ayuda, un saludo Jorge Bueno, gracias aquí a Jorge y estuve un poquito hablando con él y primero le dije que se hubiese asegurado de comprobar que las opciones de personalizar WooCommerce, imágenes de producto, que las hubiese toqueteado, que supiese que existían, porque tienes opciones, porque como digo, dentro del personalizador y las opciones de WooCommerce de elegir cómo quieres que se muestren las imágenes de producto en tu tienda online con WooCommerce y realmente con cualquier otro plugin que intentes utilizar para personalizar las imágenes o como dices que has utilizado, has intentado redimensionarlas con algunos plugins y demás, regenerarlas, pues te va a pasar lo mismo. Digamos que salvo que apliques un poquito de CSS ya con algún truquito no vas a poder controlar tanto en detalle cómo se muestran las imágenes. Entonces, ¿Qué se puede hacer? Por ejemplo, por CSS se puede aplicar una propiedad que se llama object fit y le puedes decir que sea nada, es decir, que no intente adaptar ese objeto, que no intente adaptar esa imagen, así quedarán expandidas, que entiendo es lo que busca Jorge en este caso, ¿De acuerdo? Después, por otro lado, hay veces en las que la gente importa directamente las imágenes de una URL cuando las ponen sus tiendas, con WooCommerce sobre todo esto se hace pues cuando se hacen tiendas nicho de Amazon y demás, para buscar afiliados en Amazon me refiero, y ese tipo de cosas, y se importan las imágenes directamente en una URL. Cuando se hace esto no se puede controlar la imagen porque no está en tu web, no la tienes tú, entonces eso tenlo en cuenta, si no la tienes en la librería multimedia, las opciones que tú configures en WooCommerce no te van a funcionar, ¿De acuerdo? Por CSS sí que siempre lo puedes controlar, digamos, el aspecto desde la parte frontal, pero es eso, hay que jugar un poco con el CSS, quitarle como digo, o establecer object fit none, es decir, que el objeto, que la imagen no se cuadre automáticamente y ya cuando hagas eso, pues puedes intentar jugar un poco con cómo queda la imagen por CSS, pero hay que trabajarlo un poco, no es tan sencillo, ¿De acuerdo? Bueno, me han quedado estas dos preguntas un poquito más técnicas, pero entiendo que si los suscriptores las tienen, pues seguro que muchos de vosotros también podéis llegar a tenerlas. Os dejo un enlace de la zona código donde os enseño cómo editar el CSS en WordPress para que así este tipo de cositas así un poquito más avanzadas pues la podáis hacer sin mayor dificultad. ¿De acuerdo? Recordad que todo este episodio está cargadito de enlaces. Debajo de cada pregunta tenéis el enlace correspondiente donde podéis ampliar información o incluso resolver directamente la duda. Podéis ir a ella en Gonzalo es 227 y recordad que si queréis soporte como este, acceso a cursos avanzados, vídeos avanzados, todo por solo 10 euros al mes, pues podéis ir a gonzalonavarro es barra cursos y apuntaros. Nada más por este episodio. Nos seguimos escuchando. Adiós.
More from Gonzalo
518 | Redes sociales, precios personalizados, audios desde Drive y temas de bloques (Q&A)
513 | Por qué sigo usando estos plugins después de tantos años (y cuáles he abandonado)