HECHO CON BLOQUES #49: Cómo probar WordPress 6.5; personalizar tu sitio web con CSS Adicional; La comunidad Femularity; y más

Share to social media
HECHO CON BLOQUES #49: Cómo probar WordPress 6.5; personalizar tu sitio web con CSS Adicional; La comunidad Femularity; y más - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.

Este episodio de HECHO CON BLOQUES versa sobre cómo probar las nuevas funciones que vienen en WordPress 6.5, usando el plugin Gutenberg y consejos para personalizar sitios de WordPress. También menciona una comunidad de IA llamada Femularity, una comunidad de WordPress en Mastodon y tiene una cita inspiradora.

[Episodio estrenado en Blogpocket: 06/03/24]

Aquí hay un resumen de cinco puntos clave de este vídeo

Puntos claves obtenidos a partir de la transcripción de este episodio sobre herramientas de IA generativa, por la herramienta AssemblyAI.

  • WordPress 6.5 llegará pronto. Puedes probar nuevas funciones utilizando el plugin Gutenberg o Blogpocket Playground.
  • Blogpocket Playground te permite probar la última versión de Gutenberg sin necesidad de un sitio de prueba. Simplemente agrega un iframe a tu sitio.
  • Se puede agregar CSS a las plantillas de WordPress para modificar partes específicas del diseño de tu sitio, como el espacio entre los elementos de una lista (implementada con el bloque RSS).
  • Nuevas e interesantes comunidades de IA y WordPress en Mastodon que puedes seguir.
  • Te puedes suscribir al podcast a través de RSS, Mastodon, correo electrónico o YouTube.

Contenido del episodio nº 49 del videopodcast HECHO CON BLOQUES (transcripción)

00:00 – Estamos a las puertas de una versión nueva de WordPress, la 6.5. A lo mejor quieres probarla y no sabes cómo hacerlo. Aquí te lo vamos a contar en este vídeo, eso y otras muchas cosas.

Soy Antonio Cambronero y esto es HECHO CON BLOQU.

00:19 – Como sabes, muchas de las funciones nuevas de WordPress, las que van a venir en la versión 6.5, por ejemplo, ya están en la última versión de Gutenberg, del plugin Gutenberg.

¿Cómo puedes tener el plugin Gutenberg en tu instalación de WordPress? Muy sencillamente, vas a buscar el plugin y lo instalas, lo activas si tienes una instalación de pruebas en tu hosting. Pero imagínate que no tienes la posibilidad de tener un WordPress de pruebas. ¿Cómo puedes probar estas nuevas funciones? ¿Cómo puedes explorar las posibilidades del plugin Gutenberg? Pues de una manera muy sencilla.

Nosotros en Blogpocket tenemos una página que se llama Playgrounds, y que te permite, entrando en ella, probar la última versión del plugin. Como ves aquí, lo que se presenta en la página es una especie de caja en cuyo contenido vemos lo que sería una instalación de WordPress con la ventaja, en este caso, de que tú puedes entrar aquí y probar todas las posibilidades. Incluso, esto es el editor de WordPress pero si haces clic en el botón de salir al entorno del escritorio o el dashboard de WordPress pues podrías ir por ejemplo a la parte de Gutenberg, porque en esta versión del Playground que tenemos en la página correspondiente, que se llama Playground, pues tenemos el plugin instalado ya.

Iríamos a la opción de Gutenberg y aquí vemos la opción de experimentos, donde podrías probar, por ejemplo, una de las nuevas funciones que se va a incluir en WordPress 6.5, que es la colaboración en directo o en vivo, haciendo clic aquí y salvando los cambios. Esto está dentro de nuestro sitio web de Blogpocket, en nuestro blog, en una página que se llama Playground, como decía antes, y que puedes utilizar perfectamente para probar.

¿Qué ventaja tiene? Que lo haces en un entorno tuyo, No necesitas tener un hosting ni nada de eso. De acuerdo, hay algunas otras formas de probar WordPress que ya hemos visto en Blogpocket, pero esta es, digamos, la más sencilla y la que menos coste tiene para ti y ningún esfuerzo porque ya está todo instalado.

Pero imagínate ahora que tienes tú un sitio web de WordPress y quieres implementar esta función para tus usuarios.

Bueno, pues eso es muy sencillo también. Lo que tienes que hacer únicamente es venir a la página donde quieres insertar esa caja de Playground y añadir este código, este iframe, que te permitiría tener esto, un entorno de pruebas tan sencillo como el que acabamos de ver. Este iframe lo pondremos en la descripción del vídeo, naturalmente, en blogpocket.com,

<iframe style="width: 1200px; height: 900px;" 
src="https://playground.wordpress.net/
?plugin=gutenberg&url=/wp-admin/post-new.php&mode=seamless">
</iframe>

pero, bueno, Lo que podríamos destacar de este iframe es que la url que te permite tener esta herramienta hay que añadirle, después de la interrogación, como vemos aquí, si quiero instalar o tener una instalación de pruebas con el plugin Gutenberg u otro plugin, tendríamos que tener el parámetro plugin igual al nombre del plugin. ¿De acuerdo?

04:11 – La compresión Gzip es muy importante para la optimización del rendimiento de tu sitio web. Con esta herramienta vas a poder verificar si tienes instalada la compresión Gzip y además una herramienta que te brinda información adicional sobre, por ejemplo, el tamaño original de las páginas sin la compresión gzip.

04:32 – Hablando de páginas interesantes que tenemos en Blogpocket, una de ellas es el agregador de feeds, un agregador de feeds muy sencillo que tenemos implementado con sitios, últimas publicaciones de sitios que hablan sobre WordPress. Como ves aquí, al final, en cada sitio web se ofrece una lista de las últimas publicaciones, una lista que se obtiene a través de un bloque nativo de WordPress, el bloque RSS, y como ves aquí entre elementos de la lista hay un pequeño espacio en blanco. Este espacio en blanco entre los dos elementos de la lista no se ve con el bloque original.

Vamos a ver cómo podríamos modificar el CSS de este bloque para mostrar este espacio en blanco, para separar los elementos de la lista, como decía, cosa que no vas a tener con el bloque original.

05:42 – Y para ello es muy sencillo añadir instrucciones CSS en nuestro sitio web. modificar el CSS de nuestro sitio web.

Es muy sencillo. Si sabemos las instrucciones de modificación o de una estructura cualquiera de un área concreta de nuestro sitio web, simplemente tenemos que ir a una de las plantillas del sitio, con el editor del sitio, por ejemplo la de inicio del blog, y después en el iconito de estilos globales tenemos la opción de CSS adicional y ahí es donde podemos añadir las instrucciones concretas que nos permitirían establecer esa distancia entre los elementos de una lista. Este código lo pondremos en la descripción del vídeo en blogpocket.com

ul.wp-block-rss {
  list-style-type: circle;
}

ul.wp-block-rss li {
  margin: 5px;
}

Explicación de este código: «ul» es la instrucción CSS que permite implementar listas. Y «wp-block-rss» es la clase de referencia. La hemos encontrado entrando en la consola de javascript e inspeccionando los elementos. «list-style-type» define el estilo del elemento de la lista, en este caso un círculo y «margin» define la separación entre los elementos de la lista.

y lo explicaremos también ahí para que puedas tú saber cómo modificar áreas concretas o el diseño de áreas concretas de tu sitio web.

06:43 – Y nos ha llamado mucho la atención esta semana esta comunidad de usuarios de inteligencia artificial que se ha creado en Internet, Femularity, que es una comunidad para trabajar, colaborar, aprender sobre inteligencia artificial.

07:05 – Y otra comunidad muy interesante es la de usuarios de WordPress en Mastodon.

¿Cómo puedes seguir a esta comunidad? Simplemente tienes que entrar en esta página que ha creado Daniel Auener y hacer clic en este botón de obtener el fichero CSV para la lista completa. Luego tienes que ir a Mastodon, por ejemplo, o cualquier plataforma del Fediverso e importar esa lista.

07:32 – Y por petición popular vuelve nuestra sección de frases inspiradoras.

De la mano, por supuesto, de Lisa Simpson, esta semana, que regresa muy feliz de estar aquí. Tenemos una frase de Matt Mullenweg, el creador de WordPress, el co-creador de WordPress, y que dice lo siguiente: «La tecnología es mejor cuando juntas las personas.«

08:00 – Claro que sí, sí, señor. Tienes tres maneras de suscribirte a Blogpocket. La primera, la más importante, el RSS, puede seguir tanto las publicaciones del blog como los episodios del podcast.

Segunda manera, en el Fediverso, a través del usuario, acambronero@www.blogpocket.com, que es nuestro usuario, o el usuario del blog en Mastodon. Puedes seguir el blog en el Fediverso. ¿Por qué? Porque está federado, sí, señor.

Y la tercera forma sería, la manera clásica, recibiendo todas las publicaciones del blog y los episodios del podcast, todas las semanas, los lunes a primera hora, por e-mail, cómodamente, desde tu bandeja de entrada, puedes seguir todo lo que se publica en Blogpocket. Este vídeo se sube también una semana después a YouTube.

Ahí puedes activar la campanita para no perderte nada.

El vídeo podcast HECHO CON BLOQUES, también lo tenemos en formato de audio en todas las plataformas de podcasting. Spotify, Apple Podcasts, Google Podcasts, iVoox, etcétera.

Te hablo, encantado como siempre, Antonio Cambronero. ¡Saludos cordiales! Nos vemos en un próximo episodio de HECHO CON BLOQUES.

Acciones propuestas, a partir del contenido de este episodio

Acciones propuestas a partir de la transcripción de este episodio por la herramienta AssemblyAI.

A continuación se muestran algunas posibles medidas de acción basadas en en este vídeo:

  • Instala la última versión del plugin Gutenberg en un sitio de prueba de WordPress para probar las nuevas funciones que vienen en WordPress 6.5. Utiliza el código iframe proporcionado para agregar un cuadro de juegos (playground) del plugin Gutenberg a tu propio sitio.
  • Verifica si la compresión Gzip está habilitada en tu sitio de WordPress usando la herramienta recomendada. Esto puede mejorar el rendimiento del sitio.
  • Agrega CSS personalizado a tu tema para modificar el estilo de elementos específicos, como agregar espacio entre elementos en una lista.
  • Únete a la comunidad de WordPress en Mastodon importando el archivo CSV de los usuarios. Sigue las cuentas relevantes para mantenerte actualizado.
  • Suscríbete al blog Blogpocket a través de RSS, Mastodon o correo electrónico para recibir las últimas publicaciones y episodios de podcasts.
  • Mira nuevos vídeos de Blogpocket en YouTube y activa las notificaciones para no perderte ninguno. Escucha la versión podcast en Spotify, Apple Podcasts, etc.
  • Revisa citas inspiradoras de figuras como Matt Mullenweg para encontrar motivación.
  • Utiliza comunidades de IA como Femularity para colaborar y aprender más sobre inteligencia artificial.
Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de acambronero

Copia y pega esta URL (https://www.blogpocket.com/podcast/hecho-con-bloques-49-como-probar-wordpress-6-5-personalizar-tu-sitio-web-con-css-adicional-la-comunidad-femularity-y-mas/) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido