WordPress 5.4

Nuevo en WordPress 5.4 y Gutenberg: Iconos sociales, botones, pantalla completa y más

La versión 5.4 de WordPress se publicó el 31 de marzo de 2020. ¿Qué aporta la versión para los usuarios y los desarrolladores? Nuestra visión general: Las novedades de WordPress y Gutenberg.

WordPress sigue limpiando su editor Gutenberg y lo dota de nuevas funciones. Antes de pasar a los siguientes pasos de desarrollo, es decir, en la dirección de la colaboración y el multilingüismo. Algunas innovaciones podrían causar confusión entre los usuarios, así que debes estar preparado para ello. Te resumimos todos los cambios importantes.

Widget: Estado del sitio web

La novedad de WordPress 5.4 que destaca a primera vista: ahora hay un nuevo widget para el "estado del sitio web" en Dashboard . La función que hay detrás ya existía desde WordPress 5.2. La función detrás de esto ya existe desde WordPress 5.2 y se puede encontrar en el backend en "Herramientas". Con la nueva ubicación central, es probable que muchos usuarios la conozcan por primera vez:

Estado del sitio web
El nuevo widget

La idea detrás de esta función: los administradores, pero también los usuarios de WordPress, deben ser conscientes de las posibles vulnerabilidades de la instalación. Asimismo, un vistazo a los detalles vinculados en el widget ofrece sugerencias de mejora o pistas sobre posibles vulnerabilidades de seguridad. Estos son, por ejemplo:

  • Una lista de plugins y temas inactivos. Deberías eliminarlos siempre, ya que pueden ser un objetivo para los hackers incluso cuando están desactivados.
  • Sugerencias de módulos PHP que deberían instalarse en tu servidor. De lo contrario, WordPress puede funcionar con lentitud o pueden faltar algunas funciones. Consulta esta lista del equipo de alojamiento de WordPress.
  • Una advertencia si el sitio web tu no utiliza todavía una conexión HTTPS.

El cifrado mediante SSL es una necesidad absoluta para todo sitio web profesional. Por ejemplo, a través de Let's Encrypt. Google también exige una conexión segura, de lo contrario tu perderá posiciones y visitantes importantes. Lo ideal es que los certificados SSL estén incluidos en tu paquete de alojamiento, lo que reduce tu esfuerzo.

Hasta ahora, la funcionalidad de la sección Estado del sitio web o Mejoras sigue siendo manejable. Sin duda, esto cambiará en futuras versiones. Sin embargo, la pestaña "Informe" contiene información apasionante:

Configuración de WordPress
La configuración de WordPress

Esto le dará muchos detalles sobre su configuración de WordPress y WooCommerce. Puede exportarlas, por ejemplo, como ayuda para su WordPress proveedor de servicios. O para la solución de problemas para los desarrolladores de Pluginsy Themes.

Gutenberg en modo de pantalla completa

¿No sabías que Gutenberg tiene un modo de pantalla completa? Entonces se irritará la primera vez que abra el editor en la versión 5.4. Falta la barra del panel de control en el lado izquierdo. Esto tiene ventajas pero también inconvenientes:

  • Especialmente en las pantallas más pequeñas, ahora tienes más espacio disponible para el contenido de tu .
  • No te distraes con los comentarios entrantes, los plugins que hay que actualizar, etc. cuando escribes
  • Al mismo tiempo, falta la barra lateral para los procesos individuales

El último punto te ralentiza especialmente cuando tienes que ir y venir entre la vista general del artículo y el editor al actualizar los textos de tus . O cuando quieras llamar brevemente a la mediateca.

Gutenberg Pantalla completa
Gutenberg en modo de pantalla completa

¿El modo de pantalla completa es contraproducente para el trabajo de tu ? Entonces puedes restaurar la antigua vista de la siguiente manera:

  1. Ve a las opciones avanzadas de Gutenberg (los tres puntos verticales junto al símbolo de la rueda dentada en la parte superior derecha).
  2. Hasta ahora, se llaman "Más herramientas y opciones" en el editor.
  3. Quita la marca de "Modo de pantalla completa".

El comportamiento -modo de pantalla completa activado o desactivado- también puede predefinirse con unas pocas líneas de JavaScript:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
    wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

Esto es especialmente útil si tú como administrador/a o desarrollador/a eres invadido/a por las solicitudes de usuarios/as tan pronto como WordPress 5.4 se pone en marcha en el sitio web.

Gutenberg Block: Iconos sociales

Con esta función puedes insertar enlaces o iconos a tus apariciones en las redes sociales con un clic del ratón. Las opciones básicas del "Icono Social":

  • Tú mismo puedes determinar el tipo, el número y el orden de los iconos, así como los enlaces respectivos, por supuesto.
  • Hay casi 40 iconos o redes disponibles
  • Además WordPress, Twitter, Facebook, YouTube o Instagram, estos son por ejemplo Dropbox, Etsy, RSS, Flickr, GitHub, LinkedIn, Pinterest, Skype, Vimeo o Spotify
  • También se pueden insertar enlaces a otros sitios web (por ejemplo, para autores invitados) o a direcciones de correo electrónico.

Algo confuso: Si quieres eliminar un icono existente, puedes hacerlo haciendo clic en el icono y luego utilizando la opción "Eliminar bloqueo". En este caso, no se borra todo el bloque, sino sólo la entrada correspondiente:

Eliminar el botón social Gutenberg
Eliminar los botones sociales en Gutenberg

tu no es un elemento reutilizable por defecto. Esto significa que si realizas cambios -como añadir o eliminar iconos sociales individuales- tendrías que volver a hacerlo cuando integraras posteriormente el "icono social" en otro bloque o publicación. La solución: convertir tu en un bloque reutilizable y luego utilizar sólo este bloque.

Consejo: Muchos usuarios aún no están familiarizados con la función "bloques reutilizables". Es extremadamente práctico: cuando desapareció Google+, por ejemplo, sólo tuviste que ajustar el cambio en el elemento reutilizable. Esto se hace automáticamente en los bloques asociados de los puestos individuales.

Gutenberg Block: Botones

El nombre lo dice todo: este nuevo bloque de WordPress te permite integrar botones basados en texto en tus entradas. Por ejemplo, para descargar libros electrónicos o para redirigir a páginas centrales de aterrizaje. Los botones se pueden adaptar como sigue:

  • Diferentes estilos (completamente rellenos de color o sólo con contorno)
  • El color del fondo y del texto se puede seleccionar libremente, también con colores individuales (mediante valores de color hexadecimales)
  • Fondo de un color o con degradado (saludos desde los tiempos salvajes del diseño web)
  • Ajustes del margen (radio de las esquinas)
  • Opciones de enlace como target _blank

Los usuarios atentos de Gutenberg saben que ya existe un bloque llamado "Botón". Sin embargo, la nueva opción "Botones" ofrece muchas más opciones:

Gutenberg Botones
Gutenberg Botones con gradiente de color y curvas

Además, ahora se pueden insertar varios botones uno detrás de otro, sin que esto destruya el diseño de tu . Puedes ajustar el orden de los botones como quieras arrastrando y soltando.

Nota: Originalmente, WordPress 5.4 iba a recibir un nuevo bloque de navegación para insertar un menú de navegación también en el contenido de un sitio o un post. Sin embargo, este ajuste se pospuso a una fecha posterior.

Pantalla: Bienvenido al editor de bloques

Al igual que en WooCommerce , ahora los usuarios de Gutenberg también son recibidos con una "Guía de Bienvenida". Contiene:

  • Una introducción a cómo funciona el enfoque basado en bloques
  • Explicación básica de las opciones por bloque (por ejemplo, color, anchura, alineación)
  • Notas sobre la biblioteca de bloques

Un enlace al final lleva a un manual para Gutenberg. Sin embargo, esto está en inglés.

Gutenberg Pantalla de bienvenida
La Guía de Bienvenida de Gutenberg

Recomendamos las siguientes fuentes si aún no has trabajado con el nuevo editor WordPress:

Para administradores, la guía no es nada nuevo, pero para puros usuarios y editores puede ser interesante. Deberían encontrar su camino con Gutenberg más rápidamente. Esto también puede reducir tus esfuerzos de ayuda como administrador.

Consejo: La Guía de Bienvenida sólo se inicia automáticamente cuando instalas WordPress o utilizas Gutenberg por primera vez. ¿Quieres llamarlo manualmente? Puedes hacerlo en las opciones generales en Herramientas -> Guía de Bienvenida (bajo el punto en el que puedes cambiar entre código y editor visual).

Insertar la imagen de la entrada a través de arrastrar y soltar

A veces son los pequeños cambios los que hacen felices a los usuarios de WordPress. Con la versión 5.4, puedes subir la imagen de la entrada mediante arrastrar y soltar. Un ejemplo:

  1. Ya has editado o recibido la imagen, y está en una carpeta de tu ordenador.
  2. A partir de ahí, arrástralo con el ratón a la zona "Establecer imagen de la entrada" en la barra lateral derecha de Gutenberg a partir de la versión 5.4 de WordPress.
  3. Hecho - la carga a la biblioteca multimedia se realiza automáticamente en segundo plano

Sólo tienes que añadir la metainformación de la imagen más tarde, si es necesario, haciendo clic en la imagen insertada. O dentro de la biblioteca multimedia de WordPress. Este es probablemente el mayor "peligro" de la nueva y conveniente opción: es a expensas de atributos que pueden ser importantes para tu SEO.

Bloque optimizado Mensajes recientes

A muchos lectores les gusta ver más artículos debajo de las entradas de tu blog. Algo similar ocurre con las últimas publicaciones (actualmente llamadas "Últimas publicaciones" en Gutenberg ). Esto permite a los usuarios de tu permanecer más tiempo en tus . Aumentan los valores "tiempo de permanencia" y "páginas vistas por visita", que son cifras clave importantes para la optimización de los motores de búsqueda (SEO).

La tasa de clics de esta función aumenta significativamente si se utilizan no sólo los enlaces de texto, sino que también se muestran las respectivas imágenes del post. Esto es exactamente lo que es posible a partir del WordPress 5.4:

Últimas entradas WordPress
Últimas entradas con imagen del puesto

Más innovaciones en el bloque "Mensajes recientes":

  • Establece el tamaño de la imagen de la vista previa
  • Puedes definir valores fijos en píxeles, o utilizar diferentes valores porcentuales.
  • También se puede ajustar la alineación de la imagen (alineada a la izquierda, centrada, alineada a la derecha).

¿Debe ser visible el post completo en la vista previa, o sólo un extracto del texto? Algunos blogs informan de que también se ha añadido esta opción. Sin embargo, ya existe en WordPress 5.3, en "Ajustes del contenido de las entradas" .

Color del texto de las palabras y frases individuales

Hasta ahora, el color del texto en Gutenberg sólo podía ser cambiado para un párrafo o sección completa. Con WordPress 5.4 hay ahora una opción para cambiar el color de las letras, palabras u oraciones individuales:

Color del texto en Gutenberg
Ahora también se puede colorear en partes de los textos de tus

Para ello, marca con el ratón la parte correspondiente del texto continuo. En las opciones avanzadas (junto al símbolo del enlace) encontrarás la entrada "Color del texto". Allí puedes elegir entre colores predefinidos o definir un color individual. Para ello se dispone de una tabla de colores RGB y de valores de color hexadecimales.

Otros cambios

WordPress 5.4 trae numerosos ajustes menores bajo el capó, para el propio sistema o también para el editor Gutenberg. Aquí tienes un resumen de los puntos más importantes:

  • Para los bloques individuales hay ahora opciones ampliadas de color y degradado, por ejemplo para el bloque de portada (imagen o vídeo con texto superpuesto), pero también para los grupos y las columnas.
  • Se ha hecho más clara la navegación en las migas de pan de los bloques anidados
  • En la vista de smartphone, la barra de herramientas permanece en la parte superior, por lo que ya no desaparece del foco
  • En el bloque "Galería" puedes influir en el tamaño de la imagen (cuatro niveles: imagen de vista previa, mediano, grande, tamaño completo).
  • Ahora hay un título para las tablas, para las imágenes el atributo de título se puede asignar directamente en el editor (en las opciones avanzadas).
  • Los vídeos del portal TikTok están disponibles en el editor de bloques como nueva fuente de incrustación

Además, se ha optimizado la usabilidad de Gutenberg en algunos puntos, por ejemplo, simplificando la selección múltiple de bloques o la navegación con el tabulador. Esto último ahora también funciona dentro de las barras laterales de los bloques.

Tabla de subtítulos WordPress
Una tabla con firma (leyenda)

Consejo: Si buscas información sobre la futura hoja de ruta de WordPress, visita el blog del proyecto WordPress en alemán. O visita sitio https://de.wordpress.org/sobre/mapa de carreteras/.

Cambios para los desarrolladores

Para todos los que trabajan en WordPress entre bastidores, también hay nuevas posibilidades. Pero también más rendimiento:

  • Mayor velocidad: Según el equipo de desarrollo del editor de bloques, se ha conseguido una reducción del tiempo de carga del 14%.
  • Widget de calendario: Los enlaces de navegación se trasladan a un elemento HTML nav que sigue inmediatamente al elemento tabla, para que el HTML sea válido (según la especificación de la 5.1).
  • Semántica uniforme: La función do_shortcode() se consigue mediante apply_shortcode() sustituye a
  • Favicons: Las solicitudes del favicon se pueden gestionar de forma más flexible, el logotipo de WordPress sirve como solución de emergencia
  • Registro de errores: Error en wp_login_failed se muestran con más detalle

Puedes leer más sobre esto, así como sobre otros ajustes, en los anuncios oficiales de WordPress 5.4. Puedes encontrar consejos para probar WordPress 5.4 aquí.

¿Qué preguntas tienes sobre WordPress 5.4? No dudes en utilizar la función de comentarios. ¿Quieres estar informado de las nuevas aportaciones de WordPress? Entonces síguenos en Twitter, Facebook o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Un comentario sobre"Novedades en WordPress 5.4 y Gutenberg: Iconos sociales, botones, pantalla completa y más"

  1. Hola, Agregué el widget iconos sociales en una de las páginas, pero cuando visito el sitio y abro es página, no aparecen. Hay algo que yo pueda hacer o es error de programación de wordpress? Gracias

Escribe un comentario

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