5 Aug 2020 · 19 min
Episodio 225 (parte 1 de 3) del podcast WordPress Semanal con Gonzalo Navarro donde responde preguntas de suscriptores sobre gestión de webs con WordPress. Cubre temas prácticos: efectos CSS (zoom y bordes en imágenes), problemas al copiar/pegar código (comillas y editores), error de prefijo de tabla en wp-config, gestión de descargas para suscriptores y cómo crear avisos destacados con HTML/CSS y Restrict Content Pro. Incluye enlaces a vídeos y cursos mencionados.
Chapters
En el episodio 225 de WordPress Semanal te traigo respuestas fresquitas. Esta es la parte 1 de 3. 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 hoy respondo preguntitas relacionadas con todo esto, con la gestión de webs con WordPress. Son preguntas sacadas directamente del soporte que doy a los suscriptores. Ya sabes que si te suscribes en Gonzalo Navarro es cursos tienes acceso a eso, los cursos, a vídeos avanzados de la zona Código y a soporte personalizado conmigo, donde doy respuestas a preguntas como las que vamos a ver en este episodio. Pero, pero antes de comenzar, tengo cinco preguntas, pero primero vamos a ver qué está pasando en Gonzalo Es. Esta semana, como cada semana, tenéis un nuevo vídeo de la zona Código, en este caso es el vídeo 176, y os enseño a crear bordes especiales para vuestras imágenes en WordPress. En el vídeo anterior, en el 175, os enseñé a hacer un borde redondeado a cualquier imagen, independientemente de sus proporciones, porque cuando es cuadrada, perfectamente cuadrada, es muy fácil, con un poquito de CSS, darle un borde redondeado, pero cuando no lo es, cuando es por ejemplo, más rectangular, es más complicado. Pero con otro poquito más de CSS, como digo, en el vídeo anterior os enseñé a lograrlo. Y ya que estamos con esto de los bordes, en este vídeo 176 vamos un paso más allá y os enseño a crear bordes especiales, con efectos interesantes y demás, más al estilo de lo que puedes ver en, por ejemplo, constructores visuales como Elementor, que puedes crear efectos poligonales con curvas por Pues eso es lo que hacemos, pero simplemente con CSS, sin necesidad de plugins, ni de constructores ni nada. Recuerda el vídeo 176, puedes ir a Gonzalo Navarro es códigos y buscarlo o navegar entre el resto de vídeos que tienes disponibles por ser suscriptor. Después tienes el resto de contenidos, por supuesto, los cursos. Este mes estamos con el curso de crear una wiki en WordPress. Una wiki es algo al estilo Wikipedia, que puede venir cualquiera, entre comillas, cualquiera que tú elijas y editar contenidos o crear contenidos directamente desde la parte frontal. Os enseño prácticamente la única forma que hay de hacerlo dentro de WordPress. Sí, fantástico. Y antes de entrar con vuestras preguntas y mis respuestas, vamos a hablar del plugin de la semana que se llama Disable Plugin Deactivation. Este plugin está pensado para que quites las opciones que tienen que ver con los plugins y sobre todo eso está pensado por ejemplo si publicas o si creas una web para un cliente o si sois un equipo y determinados administradores de esa web, pues no quieres que tengan acceso a ciertas acciones que tienen relación con los plugins, como por ejemplo no permitir que se puedan activar, no permitir que se puedan desactivar, no permitir que se puedan actualizar, que se puedan eliminar o que se puedan editar, o sea que básicamente todas las acciones que se pueden hacer con los plugins. Con este plugin es un poco redundante todo esto, un poco meta, pues puedes controlarlo y puedes decidir si hacerlo o no hacerlo. Esto se puede hacer por código, no recuerdo si lo he cubierto en algún vídeo de la zona código, pero si no lo revisaré y lo publicaré porque también es interesante hacerlo por código, pero vamos, si tienes un plugin livianito como éste que te permite hacerlo, pues al final es prácticamente lo mismo que hacerlo por código, porque los plugins ya sabéis, no dejan de ser código. Así que esto os lo dejo en las notas de este episodio, recordad que este es el 225, o sea que si vais a Gonzalonabarro es 225, pues vais directamente a las notas de este episodio donde vais a poder ver las preguntas, los enlaces relacionados que dejo y todo lo que acabo de comentar. Y ahora sí, nos vamos con este Q a fresco, es la parte 1 de 3, tengo preparados o voy a preparar dos más que saldrán en las próximas semanas. Y primero nos vamos a ir con la pregunta de Marina que va sobre crear un efecto zoom al pasar el ratón por encima. Me dice hola Gonzalo, espero que estés bien y que no te haya pillado el bicho entre comillas, y me pone una carita sonriente y me dice mi consulta es muy sencilla, estoy haciendo una web con Elementor y me gustaría usar la animación que utilizas en tu página de cursos un pequeño zoom al pasar el ratón por encima, ¿Podrías decirme cómo lo has hecho? Pensaba que sería con el widget de caja de imagen con texto y luego la animación, pero solo consigo que se haga en la imagen, no en el texto. Un saludo. Bueno, otro saludo para Marina y básicamente ha visto el efecto que tengo yo cuando vas a Gonzalo es cursos y vas viendo la relación de cursos y te pones encima con el ratón de cualquiera de las cajitas o de las tarjetas para los cursos, pues hace un efecto zoom y ella entiende que podría estar hecho con Elementor o ella usa Elementor y quiere saber cómo hacerlo con Elementor. En mi caso no está hecho con Elementor, aunque creo que se podría llegar a conseguir. Estuve hablando un poquito con Marina, le envié el vídeo, digamos el enlace al curso de Elementor Pro y hay una clase que dedico a los efectos y tú puedes darle a efectos, pues no sólo a imágenes por ejemplo, sino también se los puedes dar a a secciones concretas o a columnas enteras. Lo que pasa que dependiendo de lo que tengas seleccionado, es decir, si tú vas a darle efectos como eso, como a lo mejor un efecto zoom o un efecto que aparezca con bote o cositas de estas, como digo, dependiendo del elemento que tenga seleccionado Elementor Pro te va a dar unas opciones de animaciones u otras. Con lo cual en este caso creo que Marina no encontraba para darle a una tarjeta entera este efecto zoom, a una imagen a lo mejor sí, o a un botón a lo mejor sí, pero. Pero una tarjeta entera quizás Marina no lo encontraba y entonces yo le expliqué cómo hacerlo por CSS, porque de hecho tengo un vídeo en la zona código, el vídeo 160, en el que enseño esto. Enseño a que cuando pases el ratón por encima de cualquier cosa, ya sea una imagen, como digo, una cajita, una tarjeta entera, lo que tú quieras, a cualquier cosa, al pasar el ratón por encima que haga ese efecto de zoom, ese efecto como que se agranda, pues lo puedes hacer aunque no venga con Elementor, le pones la pequeña clase que vemos en el vídeo de la zona código y y luego ese poquito de CSS y lo tendrías, ¿De acuerdo? Entonces combinando lo que te da Elementor Pro, que os dejo un enlace con esto que os digo de CSS se puede lograr sin problemas. A todo lo que voy comentando, si vais a Gonzalo es 225, debajo de cada pregunta siempre dejo una sección con enlaces relacionados directamente con esa pregunta. Así que estos dos enlaces que acabo de comentar, el vídeo de la zona código y el curso de Elementor Pro lo tenéis ahí. Fantástico. Dejamos la pregunta de Marina y nos vamos con la de Jair, que va sobre problemas que surgen cuando copias y pegas código. Me dice, buenas Gonzalo, estoy intentando poner un widget de escritorio personalizado en mi web y me pone entre paréntesis vídeo 8 del curso de WordPress avanzado, porque es algo que explico en ese curso, ahora hablaremos de ello. Y sigue diciéndome, me dice, sigo las instrucciones y tu código funciona sin problemas. El problema viene cuando empiezo a personalizar, es decir, a toquetear yo y me pone entre paréntesis, qué casualidad. Me dice, me pasan dos cosas, si tu código lo copio y lo manipulo en una nota de texto, edit por ejemplo, el código no funciona, aunque no haga modificaciones, tengo que copiarlo directamente desde tu web. Me ha parecido extraño que ni copiando el código en ver y me pone que es una aplicación de notas, tu código sin modificar no funcione. En cualquier caso he desistido y estoy modificando tu código directamente dentro del plugin Code Sniffets, puedo modificar la información de los títulos sin problema, pero cuando intento modificar la función, aunque solo sea el texto, no me deja. Y bueno, me sigue diciendo, me dice que ha querido cambiar un texto específico, pero cuando le da a guardar los cambios no funciona y desaparece. Y me pregunta si se me ocurre por qué no puede hacer ningún cambio al código que copia directamente de mi web, porque en lugar de mi ejemplo, pues querría hacer otro tipo de texto, en este caso él me dice con listas. Bueno, y este problema lo pongo, doy las gracias a Jair por su pregunta porque os va a venir muy bien creo a muchos de vosotros, porque esto es súper súper común y el error que ocurre con esto es por las comillas, o casi siempre es por eso, por las comillas. Entonces cuando tú copias un trocito de código de un sitio que está preparado para poner código, como por ejemplo es mi web, que siempre que os dejo códigos lo dejo en un formato que se llama preformateado para que el código se mantenga y no se pierda. Pues el problema es que muchas veces si tú lo copias y lo pegas y se utilizan por ejemplo las dos comillas, hay dos formas de poner comillas, las comillas que ves como rectas y luego las comillas que ves como un poquito curvas, que están pensados para cuando se pone una cita de alguien y hay veces que determinados editores de texto te lo cambian al copiar y pegar te lo cambian a comillas curvadas en lugar de comillas planas o comillas rectas. Esto muchas veces se soluciona si se pega el texto sin formato, que hay una forma con el teclado de pegar el texto sin formato, pero en otras ocasiones ni siquiera. Entonces, ¿Qué es lo que yo recomiendo? Si vais a estar usando código, utilizad un editor de código, tenéis el vídeo 91 de la zona código donde os enseño por ejemplo a utilizar Sublime Texto, que es gratuito, lo podéis usar de forma gratuita y está muy bien, o si utilizáis un programa de notas, yo por ejemplo utilizo mucho textedit que viene con Mac, lo que pasa que cuando trabajo con este programa lo pongo en texto sin formato, tiene una opción de poner texto con formato, que le puedes poner negrita y todo esto y otra texto sin formato, cuando lo pones sin formato puedes pegar código ahí directamente para cositas puntuales, por ejemplo, no lo uso para trabajar con código, pero sí para copiar y pegar y tenerlo ahí momentáneamente, ¿De acuerdo? Entonces básicamente es eso, casi siempre el problema es que algo del código se te cambia porque el editor de texto donde lo estás pegando no está preparado para el código y sobre todo se suelen cambiar las comillas y a veces incluso el HTML porque te lo reconoce, así que es un poco rollo. Por eso cuando Jair me dice que utilizaba el plugin Code Snippets y ahí viene un editor dentro de Code Snippets, ahí sí podía ir editándolo, pero en el editor de texto no. Pues es por esto precisamente. Os dejo enlaces al vídeo al que se refiere Jair, que es el vídeo 8 en el que os enseño a agregar widgets, cajitas al escritorio de WordPress. Así por ejemplo podéis dejar ahí un pequeño texto dando la bienvenida a un cliente si habéis hecho la web para un cliente o poniéndole enlaces a sitios relacionados o incluso para vosotros mismos, os podéis poner ahí enlaces a sitios que soléis visitar cuando estáis editando vuestra web con WordPress y es un ejercicio que está muy bien para ir avanzando un poquito en WordPress y siendo un poco, adquiriendo un nivel un poquito más intermedio, tirando avanzado, ¿De acuerdo? Os dejo esos enlaces. Bien, nos vamos ahora con la pregunta de Miguel Ángel que va sobre solucionar el mensaje de configuration error que te puede salir en WordPress. Me dice, buenas noches Gonzalo, mira, tengo un problema con una web que tengo bajo un subdominio. Me sale el siguiente error Your wpconfig PHP file has an empty database table prefix which is not supported. Básicamente que tu archivo de configuración, el wp config, tiene un prefijo de la tabla de la base de datos vacío. Y dice que esto no es soportado. Y luego me sigue diciendo Miguel Ángel, me dice el servicio técnico de mi hosting me indica que el error puede deberse a incompatibilidad entre plugins y la versión del core de WordPress o entre los propios plugins. Y bueno, entra un poquito más de tecnicismos que tampoco voy a explicar aquí y me dice de primeras me extraña un poco la solución, he quitado todos los plugins, los he vuelto a subir uno por uno y sigo igual. ¿Qué opinas? Bueno, a mí más que lo que comentan, el soporte del hosting que me indicabas, muchas veces hay que fijarse en el propio mensaje que te salta en pantalla, porque en pantalla lo que dice es que parece que hay un problema en el archivo de configuración, el wconfig, y que el prefijo de la base de datos. Ya sabéis que a través del archivo de configuración se pueden hacer muchas cosas que tienen que ver con eso, con la configuración de una web con WordPress. Y ahí por ejemplo se puede establecer el prefijo que va a salir en las distintas tablas que hay en la base de datos de WordPress, siempre antes del nombre. Por ejemplo, si una de las tablas de la base de datos de WordPress es para los usuarios, pues se llamará users, de usuarios en inglés, pues delante todas esas tablas llevan un prefijo, normalmente es wp que viene de WordPress, pero se suele cambiar por seguridad y se puede poner otra cosa. Pues bueno, parece que hay un problema con eso. Entonces, básicamente lo que comenté con Miguel Ángel es que se fijara en el archivo de configuración a ver si precisamente faltaba eso o algún problema con el prefijo de la tabla. Y efectivamente el problema estaba ahí y no sólo le faltaba eso, sino que me dijo Miguel Ángel que le faltaban más cosas. Entonces ahí básicamente pues casi que lo mejor es subir un archivo de configuración nuevo, volverá a descargarse WordPress y subir un archivo de configuración nuevo. Os dejo un enlace al episodio 119 del podcast donde hablo en profundidad, es un monográfico del archivo de configuración que es muy importante y se pueden hacer muchas cosas. Y este es un episodio que gusta mucho, os lo recomiendo, es el Gonzalonabarro es 119 o en la parte de enlaces. Y también si queréis saber más sobre la base de datos, tengo una clase en el curso de seguridad en WordPress, que es la clase 5, y ahí explico por ejemplo todo esto que te he dicho de cambiar el prefijo de la base de datos o de hacer limpieza incluso en la base de datos, todo en la parte de enlaces de esta pregunta 3 fantástico. Dejamos la de Miguel Ángel y nos vamos con la de Miriam, que va sobre cómo gestiona Gonzalo Navarro las descargas de sus suscriptores. En este caso la he planteado un poco así, pero básicamente me pregunta que cómo gestiono yo las descargas de suscriptores y me Hola, buenos días, ¿Qué tal? Verás, ¿Me podrías decir cómo gestionas tú el tema de las descargas para que desde el área de descargas se bajen los plugins y cosas que subes? Yo tengo Google Drive de pago, ¿Cómo podría vincular eso con una web y que desde descargas la gente se pueda descargar cosas? Gracias por tu ayuda, Miriam. Bueno, básicamente Miriam me pregunta aquí un poquito cómo puede hacer ella, al estilo de cómo lo tengo yo. Ya sabéis que si estáis suscritos y vais a vuestra cuenta, pues hay una parte de descargas. Ahí suelo dejar plugins que cubrimos en los cursos, más que nada para que podáis seguir el curso. Siempre recomiendo que si vais, por ejemplo, hay un plugin de pago y yo os lo dejo para que sigáis el curso. Si vais a hacer un proyecto serio, una web, lo recomendable es que contratéis la licencia, más que nada para que no tengáis problemas actualizando y es la mejor práctica, es mucho más seguro, pero si lo que queréis es probarlo y demás, pues os viene de sobra con el plugin que os dejo yo para que probéis, ¿De acuerdo? Y bueno, yo básicamente ahí lo que dejo es enlaces a descarga, yo tengo una cuenta en distintos sitios, pero en este caso los enlaces que dejo son de Box, que es algo como Dropbox, pero es de Microsoft en lugar de de. No sé si Dropbox es de Google o no, en lugar de quien sea Dropbox, ¿De acuerdo? Y nada, es un enlace, lo que pasa que como yo restrinjo el contenido en función de si estáis suscritos, si sois suscriptores de pago o no, pues hago lo mismo con la parte de descargas, igual que tengo restringido los vídeos de la zona código y los cursos, los vídeos de los cursos, pues restrinjo también esa zona. Entonces esto ya un poco depende, si tienes un sistema de de restricción de contenidos pues lo puedes aprovechar, si no, pues a lo mejor te interesa instalar un plugin como Restrict Content, yo creo que la opción sencilla, me refiero a la gratuita, sería suficiente o quizás te interesa una opción de gestión de descargas pues un poquito más avanzada que te mejora el aspecto de las descargas, puedes llevar un control, un conteo y eso lo vemos en el curso de productividad en WordPress en la clase 5. Os voy a dejar un enlace y os enseño cómo gestionar mejor un sistema de descargas, ¿De acuerdo? Pero básicamente la opción de que sólo le salga a los usuarios registrados, eso ya lo controlas con el sistema que tú tengas para tener usuarios o para tener suscriptores. Y bueno, y en el caso de Google Drive pues sería nada, poner el enlace a descarga de Google Drive, asegurarte de que tiene permiso para descargar cualquiera que le dé al enlace, pero luego restringirlo como digo, con el método que utilices de para obtener suscriptores. ¿Sí? Fantástico. Nos vamos con la quinta pregunta y última de este Q a fresquito que es de David y me dice cómo poner un aviso destacado en WordPress. Me Hola Gonzalo, espero que estés bien y que el virus no te haya atrapado. Tengo una consulta sobre cómo restringir contenido en WordPress. Estoy haciendo una web con Restrict Content Pro en la que voy a restringir unos vídeos formativos dejando el texto en abierto y restringiendo el espacio del vídeo como tú en la web. Y me sigue a la hora de configurar en RCP Restrict Content Pro el mensaje de contenido restringido. Se. Se me ha ocurrido poner en HTML para que tenga un sombreado de color a su alrededor. No soy un experto en HTML, así que lo he puesto con dudas. El código que he puesto es. Y bueno, el código lo omito, pero vaya, me pone un código y utiliza una tabla, utiliza HTML de una tabla para ponerlo e intenta darle un poquito de formato y le pone además el código CSS, se lo pone directamente inline, es decir, dentro del HTML. Y me sigue diciendo David, me dice el resultado es una tabla de una sola celda con un fondo de color, es lo único que se acerca al efecto que quiero. Sin embargo me han comentado que esto es mejor hacerlo en CSS, pero ¿Cuál es el camino? ¿Dónde se podría hacer y cómo? Un cordial saludo, David. Bueno, fantástico. Es una pregunta muy común cuando queremos empezar a toquetear un poquito de HTML, un poquito de CSS, hay muchas dudas de cómo hacerlo y de cómo afrontar ciertas cosas. Y básicamente David lo que quiere es. Él tiene un sistema, el plugin Restrict Content Pro, te permite restringir contenido y cuando alguien no está conectado le sale un mensajito y ese mensajito quiere personalizarlo un poco, quiere ponerle una cajita y que tenga un poquito un efecto más moderno, ponerle una sombra y demás. Y lo ha intentado hacer, imagino que con algún código que ha encontrado por ahí, que está un poquito anticuado, pienso yo, porque lo hace con una tabla. Yo esto lo haría de otra manera, otra aproximación, lo haría con un quin, y de hecho tengo un vídeo de la zona código, el vídeo 16, donde enseño precisamente a hacer esto, destacados con CSS en WordPress, vamos, en WordPress o lo que quieras, te enseño a copiar el HTML necesario y el CSS necesario, ¿De acuerdo? Y David en este caso ha puesto directamente el CSS que se puede, Tú puedes poner directamente el CSS dentro del HTML, que para un caso puntual no está mal, pero como bien dice David, no es la mejor opción y además, pues eso, lo ha usado en una tabla de HTML y yo usaría otra cosa. Así que básicamente, en lugar de una tabla con HTML, mejor utilizar un quin, que es otra. Otro elemento de HTML, asignarle una clase y luego esa clase en el personalizador de CSS de WordPress, por ejemplo, o en el style CSS de tu web, ahí ya sí darle unos estilos, le puedes poner un color de fondo, un poquito de padding para que tenga efecto, un poquito de sombra y ya con eso lo tendrías. Es bastante sencillo técnicamente si sabes dónde ir y cómo afrontarlo de primeras. ¿De acuerdo? Al final lo que ha hecho David era más complejo incluso y no le daba el resultado que él quería, pero ya con esto, que además me dijo que el vídeo 16 de la zona código era justo lo que necesitaba. Así que si estáis en este caso os lo recomiendo, os voy a dejar el enlace y así podéis hacer destacados en cualquier lugar de vuestra web, simplemente con un pelín de HTML y de CSS. Sí, Fantástico. Pues con esto dejamos el Q a fresco, que recordad, es la parte 1 de 3. En las siguientes semanas sacaré las próximas versiones. Recordad, para ver todos los enlaces que he dejado para revisar lo que he comentado, GonzaloNabarro es 225. Ahí además os podréis apuntar a la suscripción, ya sabéis, cursos, vídeos avanzados y además soporte conmigo para dudas como las que he comentado en este episodio. Nada más, 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)