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 a los usuarios y 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 dirección a la colaboración y el multilingüismo. Algunas innovaciones podrían causar confusión entre los usuarios, por lo que debe estar preparado para ello. Le resumimos todos los cambios importantes.

Widget: Estado de la 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 está disponible desde WordPress 5.2. La función detrás de esto ya ha existido 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 la 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. Siempre debe eliminarlos, ya que pueden ser un objetivo para los hackers incluso cuando están desactivados.
  • Sugerencias de módulos PHP que deberían ser instalados en su servidor. De lo contrario, WordPress puede funcionar con lentitud o pueden faltar algunas funciones. Consulte esta lista del equipo de alojamiento de WordPress.
  • Una advertencia si el sitio web tuaún no utiliza 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 requiere una conexión segura, de lo contrario tuperderá importantes posiciones y visitantes. Lo ideal es que los certificados SSL estén incluidos en su paquete de alojamiento, lo que reduce su 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 interesante:

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 tiene más espacio disponible para el contenido de tu.
  • No se distrae con los comentarios entrantes, los plug-ins que hay que actualizar, etc. cuando escribe
  • Al mismo tiempo, falta la barra lateral para los procesos individuales

El último punto ralentiza el trabajo, sobre todo cuando hay que ir y venir entre la vista general del artículo y el editor al actualizar los textos de tus. O si quieres 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? A continuación, puede restaurar la antigua vista de la siguiente manera:

  1. Vaya 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. Quite 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 usted como administrador o desarrollador es invadido por las solicitudes de sus usuarios tan pronto como WordPress 5.4 se pone en marcha en su 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 de "Icono Social":

  • Usted mismo puede 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, 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 "Quitar bloque". En este caso, no se borra todo el bloque, sino sólo la entrada correspondiente:

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

tuno 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: Convierte el resultado de tuen un bloque reutilizable y luego sólo utiliza este bloque.

Sugerencia: Muchos usuarios aún no están familiarizados con la función de "bloques reutilizables". Es extremadamente práctico: cuando desapareció Google+, por ejemplo, sólo hubo 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 le permite integrar botones basados en texto en sus entradas. Por ejemplo, para descargar libros electrónicos o para redirigir a páginas centrales de aterrizaje. Los botones se pueden adaptar de la siguiente manera:

  • 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)
  • Configuración de los márgenes (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 sitioo un post. Sin embargo, este ajuste se pospuso a una fecha posterior.

Pantalla: Bienvenido al editor de bloques

Al igual que en WooCommerce , los usuarios de Gutenberg también son recibidos con una "Guía de bienvenida". Esto contiene:

  • Introducción al funcionamiento del enfoque por 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, 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 se instala WordPress o se utiliza Gutenberg por primera vez. ¿Quieres llamarlo manualmente? Puede hacerlo en las opciones generales en Herramientas -> Guía de bienvenida (bajo el punto donde puede cambiar entre el código y el 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 a través de arrastrar y soltar. Un ejemplo:

  1. Ya has editado o recibido la imagen, y está en una carpeta de tu ordenador.
  2. Desde allí, arrástrelo con el ratón hasta el área de "Definir la imagen del puesto" en la barra lateral derecha de la versión WordPress 5.4 y superior de Gutenberg
  3. Hecho: la carga en la biblioteca multimedia se realiza automáticamente en segundo plano

Sólo tiene que añadir la meta-informació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 los atributos que pueden ser importantes para tuSEO.

Bloque optimizado Mensajes recientes

A muchos lectores les gusta ver más artículos debajo de las entradas de su blog. Algo similar ocurre con las últimas publicaciones (actualmente llamadas "Latest Posts" en Gutenberg ). Esto permite a los usuarios de tupermanecer más tiempo en tus. Aumentan los valores de "tiempo de permanencia" y "páginas vistas por visita", ambas 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 de la entrada

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

  • Establecer el tamaño de la imagen para la vista previa
  • Puede 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).

¿Debería la vista previa mostrar el artículo completo o sólo un extracto del texto? Algunos blogs informan que esta opción también ha sido añadida. Sin embargo, ya existe en el WordPress 5.3, en "configuración del contenido de los mensajes".

Color del texto para 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, marque con el ratón la parte correspondiente del texto continuo. En las opciones avanzadas (junto al símbolo del enlace) encontrará la entrada "Color del texto". Allí puede elegir entre los 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. He aquí 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.
  • La navegación en las migas de pan de los bloques anidados se ha hecho más clara
  • 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" puede 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 puede ser asignado directamente en el editor (bajo 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. Este último ahora también funciona dentro de las barras laterales de los bloques.

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

Sugerencia: Si busca información sobre la futura hoja de ruta de WordPress, visite el blog del proyecto WordPress en alemán. O visite sitiohttps://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 reducir el tiempo de carga en un 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 para 5.1).
  • Semántica uniforme: La función do_shortcode() se logra a través de apply_shortcode() sustituye a
  • Favicons: Las solicitudes del favicon pueden gestionarse 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 otros ajustes - en los anuncios oficiales de WordPress 5.4. Puede encontrar consejos para probar WordPress 5.4 aquí.

¿Qué preguntas tienes sobre WordPress 5.4? No dude en utilizar la función de comentarios. ¿Quieres estar informado de las nuevas aportaciones de WordPress? Entonces síganos 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 en"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á.