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

8 Min.
WordPress  5.4
Última actualización en

El WordPress 5.4 El lanzamiento se publicó el 31 de marzo de 2020. ¿Cuáles son los beneficios de la liberación para los usuarios y los desarrolladores? Nuestra visión general: Esto es nuevo en WordPress yGutenberg...

WordPress ordena su editor Gutenbergcada vez más y le proporciona nuevas funciones. Antes de pasar a los siguientes pasos de desarrollo, es decir, en la dirección de la colaboración y Multilingüismo. Algunas nuevas características podrían causar confusión a los usuarios, debe estar preparado para ello. Resumimos todos los cambios importantes para usted.

Widget: Estado del sitio web

La innovación de WordPress 5.4, lo que se nota a primera vista: En el tablero de mandos hay ahora un nuevo widget para el "estado del sitio web". La función detrás de ella ha estado disponible desde WordPress 5.2. puedes encontrarlos en el backend bajo "Herramientas". Con la nueva colocación central, muchos usuarios probablemente se darán cuenta por primera vez:

Estado del sitio web
El nuevo widget

La idea detrás de la característica: Los administradores pero también los usuarios de WordPress deben ser conscientes de las posibles debilidades de la instalación. Asimismo, una mirada a los detalles vinculados en el widget ofrece sugerencias de mejora o pistas sobre posibles agujeros de seguridad. Estos son, por ejemplo:

  • Una lista de los inactivos plugins y themes. Siempre debes eliminar esta lista, porque incluso en estado desactivado sigue siendo una objetivo del hacker puede ser.
  • Sugerencias de módulos PHP que deberían ser instalados en su servidor. De lo contrario, puede funcionar WordPress lentamente, o faltan algunas funciones. Ver esa lista de la WordPress Hosting-Equipos.
  • Una advertencia si su sitio web aún no utiliza la conexión HTTPS.

Especialmente la encriptación a través de SSL es una necesidad absoluta para toda presencia web profesional. Por ejemplo, a través de Ciframos. Google también requiere una conexión segura, de lo contrario su sitio web perderá clasificaciones y visitantes. Lo ideal es que los certificados SSL estén incluidos en su paquete de alojamiento - el reduce sus gastos.

Hasta ahora la funcionalidad de la sección estado o mejoras del sitio web es todavía manejable. Esto ciertamente cambiará con las futuras versiones. Sin embargo, la pestaña "Informe" contiene información interesante:

WordPress  Configuración
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 tenía Gutenbergun modo de pantalla completa? Entonces se irritará cuando llame al editor en la versión 5.4. Porque allí falta la barra del tablero de mandos del lado izquierdo. Esto tiene ventajas pero también desventajas:

  • Especialmente en las pantallas más pequeñas, ahora tienes más espacio para tu contenido
  • No se distraerá con los comentarios, actualizaciones, Pluginsetc. mientras escribe.
  • Al mismo tiempo, la barra lateral falta en algunos procesos

El último punto se ralentiza especialmente si tienes que cambiar entre el resumen del post y el editor cuando actualizas tus textos. O si quieres llamar a la mediateca un momento.

Gutenberg Pantalla completa
Gutenberg en modo de pantalla completa

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

  1. Ir a las opciones avanzadas de (los Gutenbergtres puntos verticales junto al símbolo del engranaje en la esquina superior derecha)
  2. Estos se llaman "Más herramientas y opciones" en el editor hasta ahora
  3. Quita la marca de verificación en el "Modo de pantalla completa" allí

El comportamiento - modo de pantalla completa activada o desactivada - puede ser cambiado con unas pocas líneas de JavaScript incluso profesar:

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 añadir 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, número y orden de los iconos, así como los enlaces
  • 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, a autores invitados) o a direcciones de correo electrónico.

Un poco confuso: Si quieres eliminar un icono anterior, puedes hacerlo haciendo clic en el icono y luego seleccionando la opción "Eliminar el bloque". Esto no borrará todo el bloque, sino sólo la entrada respectiva:

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

El bloque creado no es un elemento reutilizable por defecto. Esto significa que si haces cambios, como añadir o eliminar iconos sociales individuales, tendrás que volver a hacerlo cuando más tarde incluyas el "icono social" en otro bloque o publicación. La solución: conviertes el resultado en un bloque reutilizable y luego usas sólo ese bloque.

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

Gutenberg Block: Botones

El nombre lo dice todo: Con este nuevo WordPress bloque pueden incluir botones de texto en sus mensajes. Por ejemplo, para descargar libros electrónicos o para enviarlos a la central páginas de destino. Los botones se pueden personalizar de la siguiente manera:

  • Diferentes estilos (completamente llenos de color o sólo con contorno)
  • Color de fondo y de texto seleccionables libremente, también con colores individuales (mediante valores de color hexadecimales)
  • Fondo monocromo o con gradiente (los tiempos salvajes del diseño web son un saludo)
  • Ajustes de los bordes (radio de la esquina)
  • Opciones de enlace como el objetivo _blank

Los usuarios atentos de Gutenbergsaber que ya hay un bloqueo llamado "Botón". Sin embargo, la nueva opción "Botones" ofrece muchas más opciones:

Gutenberg Botones
Gutenberg Botones con gradientes y curvas

Además, ahora es posible insertar varios botones uno tras otro sin que esto destruya su diseño. Puedes cambiar el orden de los botones con el método de arrastrar y soltar.

Nota: Originalmente, el WordPress 5.4 estaba destinado a proporcionar nuevo bloque de navegación para insertar un menú de navegación también en el contenido de una página o un post. Sin embargo, este ajuste se cambió a en una etapa posterior aplazado.

Pantalla: Bienvenido al Editor de Bloques

Al igual que la "Guía de bienvenida", los usuarios WooCommerceahora también son bienvenidos por Gutenberguna "Guía de bienvenida". Esto 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

Una referencia al final lleva a instrucciones paraGutenberg... Sin embargo, esto está en el idioma inglés.

Gutenberg pantalla de bienvenida
La guía de bienvenida de Gutenberg

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

Para los administradores la guía no es nada nuevo, pero para los puros usuarios y editores puede ser interesante. Deberían encontrar su camino Gutenbergmás rápido con él. Esto también puede reducir sus esfuerzos de apoyo como administrador.

Consejo: La Guía de bienvenida sólo se iniciará automáticamente cuando la WordPress instale o la use por Gutenbergprimera vez. ¿Quieres iniciarlo manualmente? Puedes hacerlo en las opciones generales en Herramientas -> Guía de bienvenida (bajo el punto donde puedes cambiar entre el código y el editor visual).

Insertar la imagen de la contribución mediante arrastrar y soltar

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

  1. Ya has procesado o enviado 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 subida a la biblioteca de medios ocurre automáticamente en el fondo

Sólo los metadatos de la imagen deben ser introducidos después, si es necesario, haciendo clic en la imagen insertada. O dentro de la mediateca de WordPress . Esto podría ser el mayor "peligro" de la nueva opción conveniente: viene a expensas de los atributos que podrían ser importantes para su SEO.

Bloque optimizado Contribuciones recientes

Mostrar más artículos en las entradas de su blog es una característica que a muchos lectores les gusta usar. Es similar con las últimas publicaciones (actualmente llamadas "Últimas Gutenbergpublicaciones"). De esta manera sus usuarios permanecen más tiempo en su sitio web. Los valores "duración de la estancia" y "páginas vistas por visita" aumentan - ambos son cifras clave importantes para Optimización del motor 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:

Últimos mensajes WordPress
Últimas contribuciones con foto de la contribución

Otras innovaciones en el bloque de "Mensajes recientes":

  • Establecer el tamaño de la imagen para la miniatura
  • Puede definir valores fijos en píxeles, o usar diferentes tamaños de porcentaje
  • La alineación de la imagen también puede ser ajustada (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".

El color del texto para las palabras y oraciones 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:

El color del texto en Gutenberg
Ahora también puede ser colorido en partes de sus textos...

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

Otros cambios para los usuarios

WordPress 5.4 trae bajo el capó numerosos ajustes más pequeños, para el sistema mismo o también para el editor Gutenberg. Aquí hay un resumen de los puntos más importantes:

  • Para los bloques individuales ahora se han ampliado Opciones de color y gradientepara el bloque de la portada (imagen o vídeo con texto superpuesto) pero también para los grupos y columnas
  • La navegación en las migas de pan de los bloques anidados está más claramente dispuesta
  • En la vista del smartphone permanece la barra de herramientas en la parte superiorasí que ya no está desenfocada.
  • En el bloque "Galería" se puede influir en el tamaño de la imagen (cuatro niveles: vista previa de la imagen, media, grande, tamaño completo)
  • Ahora hay una firma ("caption") para los cuadros, para las imágenes el atributo de título puede asignarse directamente en el editor (en las opciones avanzadas)
  • Los videos del portal TikTok están disponibles en el editor de bloques como una nueva fuente de incrustación

Además, se ha Gutenbergoptimizado la usabilidad de la misma en algunos lugares, por ejemplo, facilitando la selección de múltiples bloques o la navegación con la tecla de tabulación. Este último ahora también funciona dentro de las barras laterales de los bloques.

Tabla de títulos WordPress
Una tabla con firma (pie de foto)

Consejo: Si está buscando información sobre la futura hoja de ruta deWordPress el blog del WordPress proyecto de idioma alemán. O la página https://de.wordpress.org/sobre el mapa de carreteras.

Cambios para los desarrolladores

También hay nuevas oportunidades para todos los que trabajan WordPress entre bastidores. Pero también más rendimiento:

  • Mayor velocidad: El equipo de desarrollo alrededor del editor de bloques ha desarrollado, según sus propias declaraciones, un Reducción del tiempo de carga del 14% logrado
  • Widget de calendario: Los enlaces de navegación se mueven a un elemento de navegación HTML que sigue inmediatamente al elemento de tabla, para un HTML válido (según la especificación 5.1)
  • Semántica uniforme: La función do_shortcode() está representado por apply_shortcode() reemplazado
  • Favicons: Las solicitudes del favicon pueden ser gestionadas de forma más flexible, el WordPress logo sirve como una solución alternativa
  • Registro de errores: Error en wp_login_failed son más detallados

Puedes leer más sobre esto - así como otros ajustes - en el anuncios oficiales a WordPress 5.4 leer más. Notas sobre las pruebas WordPress 5.4 que encontrarás aquí.

¿Qué preguntas sobre WordPress 5.4 que tienes? Puede utilizar la función de comentarios. Quieres saber acerca de los nuevos mensajes para WordPress ser informado? Entonces síguenos. TwitterFacebook o sobre nuestra Boletín de noticias.

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

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