WordPress  5.4

Nouveautés WordPress 5.4 et Gutenberg : Icônes sociales, boutons, plein écran et plus

La version 5.4 de WordPress a été publiée le 31 mars 2020. Qu'apporte cette version aux utilisateurs et aux développeurs ? Notre aperçu : les nouveautés de WordPress et Gutenberg.

WordPress continue de nettoyer son éditeur Gutenberg et lui donne de nouvelles fonctions. Avant de passer aux prochaines étapes de développement, c'est-à-dire à la collaboration et au multilinguisme. Certaines nouvelles fonctionnalités peuvent être source de confusion pour les utilisateurs, vous devez donc vous y préparer. Nous résumons pour vous tous les changements importants.

Widget : État du site web

L'innovation de WordPress 5.4, qui est perceptible au premier coup d'œil : dans le tableau de bord, il y a maintenant un nouveau widget pour l'"état du site". La fonction qui le sous-tend existe déjà depuis WordPress 5.2. Vous pouvez la trouver dans l'arrière-plan sous "Outils". Avec le nouveau placement central, de nombreux utilisateurs en prendront probablement conscience pour la première fois :

État du site web
Le nouveau widget

L'idée derrière cette fonctionnalité : les administrateurs mais aussi les utilisateurs de WordPress doivent être informés des éventuelles vulnérabilités de l'installation. De même, un coup d'œil aux détails liés dans le widget offre des suggestions d'amélioration ou des conseils sur d'éventuelles vulnérabilités de sécurité. Il s'agit par exemple de

  • Une liste des sites inactifs Plugins et Themes. Vous devez toujours les supprimer, car ils peuvent être la cible de pirates informatiques, même lorsqu'ils sont handicapés.
  • Suggestions de modules PHP qui devraient être installés sur votre serveur. Dans le cas contraire, WordPress peut fonctionner lentement ou certaines fonctions peuvent manquer. Voir cette liste dans le WordPress Hostingl'équipe.
  • Un avertissement si votre site web n'utilise pas encore de connexion HTTPS.

Le cryptage via SSL est un must absolu pour tout site web professionnel. Par exemple via Let's Encrypt. Google exige également une connexion sécurisée, sinon votre site web perdra des rangs et des visiteurs importants. Dans l'idéal, les certificats SSL sont inclus dans votre pack d'hébergement - cela réduit votre effort.

Jusqu'à présent, la fonctionnalité de la section "État du site web/améliorations" est encore gérable. Cela va certainement changer avec les versions futures. Cependant, l'onglet "Rapport" contient des informations passionnantes :

WordPress  Configuration
La configuration de WordPress

Vous obtiendrez ainsi de nombreux détails sur votre configuration de WordPress et WooCommerce. Vous pouvez les exporter, par exemple comme outil pour vos fournisseurs de services WordPress . Ou à des fins de débogage pour les développeurs de Plugins et Themes.

Gutenberg en mode plein écran

Vous ne saviez pas que Gutenberg dispose d'un mode plein écran ? Vous serez alors irrité lorsque vous ouvrirez pour la première fois l'éditeur dans la version 5.4. La barre du tableau de bord sur le côté gauche est manquante. Cela présente des avantages mais aussi des inconvénients :

  • Surtout sur les petits écrans, vous disposez maintenant de plus d'espace pour votre contenu.
  • Vous ne serez pas distrait par les commentaires reçus, Plugins à mettre à jour, etc. pendant que vous écrivez
  • En même temps, la barre latérale est manquante pour les processus individuels

Le dernier point ralentit surtout lorsque vous devez passer de la vue d'ensemble du poste à l'éditeur lors de la mise à jour de vos textes. Ou lorsque vous voulez appeler brièvement la médiathèque.

Gutenberg plein écran
Gutenberg en mode plein écran

Le mode plein écran est contre-productif pour votre travail ? Vous pouvez ensuite rétablir l'ancienne vue familière comme suit :

  1. Accédez aux options avancées de Gutenberg (les trois points verticaux à côté de l'icône de l'engrenage en haut à droite)
  2. Jusqu'à présent, l'éditeur les a intitulées "Plus d'outils et d'options".
  3. Décochez la case "Mode plein écran" à cet endroit.

Le comportement - mode plein écran activé ou désactivé - peut également être prédéfini avec quelques lignes de JavaScript :

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

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

C'est particulièrement pratique si, en tant qu'administrateur ou développeur, vous êtes submergé par les demandes de vos utilisateurs dès que la version WordPress 5.4 est mise en ligne sur votre site web.

Gutenberg Bloquer les icônes sociales

Cette fonction vous permet d'ajouter des liens ou des icônes à vos apparitions sur les réseaux sociaux en un clic de souris. Les options de base de "l'icône sociale" :

  • Vous pouvez déterminer vous-même le type, le nombre et l'ordre des icônes, ainsi que les liens respectifs, bien entendu.
  • Il existe près de 40 icônes ou réseaux disponibles
  • Outre WordPress , Twitter, Facebook, YouTube ou Instagram, il s'agit par exemple de Dropbox, Etsy, RSS, Flickr, GitHub, LinkedIn, Pinterest, Skype, Vimeo ou Spotify.
  • Des liens vers d'autres sites web (par exemple, des auteurs invités) ou vers des adresses électroniques peuvent également être insérés.

Un peu déroutant : si vous souhaitez supprimer une icône existante, vous pouvez le faire en cliquant sur l'icône, puis en utilisant l'option "Supprimer le bloc". Dans ce cas, ce n'est pas le bloc complet qui est supprimé, mais seulement l'entrée correspondante :

Supprimer le bouton social Gutenberg
Supprimer les boutons sociaux dans Gutenberg

Par défaut, le bloc que vous avez créé n'est pas un élément réutilisable. Cela signifie que si vous apportez des modifications - comme l'ajout ou la suppression d'icônes sociales individuelles - vous devrez le faire à nouveau lorsque vous intégrerez plus tard "Icône sociale" dans un autre bloc ou un autre message. La solution : vous convertissez votre résultat en un bloc réutilisable et n'utilisez ce bloc qu'après.

Conseil : de nombreux utilisateurs ne connaissent pas encore la fonction "blocs réutilisables". C'est extrêmement pratique : lorsque Google+ a disparu, par exemple, il suffisait d'ajuster la modification de l'élément réutilisable. Cela se fait ensuite automatiquement dans les blocs associés des différents postes.

Gutenberg Boutons de blocage

Le nom en dit long : tu peux utiliser ce nouveau bloc WordPress pour intégrer des boutons textuels dans tes messages. Par exemple, pour télécharger des livres électroniques ou pour rediriger vers les pages de renvoi centrales. Les boutons peuvent être personnalisés comme suit :

  • Différents styles (complètement colorés ou avec un contour seulement)
  • Couleur de fond et de texte librement sélectionnable, également avec des couleurs individuelles (via des valeurs de couleur hexadécimales)
  • Fond monochrome ou avec dégradé (salutations de l'époque sauvage du web design)
  • Réglages des bords (rayon des coins)
  • Options de liens comme target _blank

Les utilisateurs attentifs de Gutenberg savent qu'il existe déjà un bloc appelé "Button". Cependant, la nouvelle option "Boutons" offre beaucoup plus de possibilités :

Gutenberg Boutons
Gutenberg Boutons avec gradient et courbes

En outre, vous pouvez désormais insérer plusieurs boutons les uns après les autres, sans que cela ne nuise à votre mise en page. Vous pouvez ajuster l'ordre des boutons comme vous le souhaitez par glisser-déposer.

Note : A l'origine, WordPress 5.4 était censé obtenir un nouveau bloc Navigation pour insérer un menu de navigation également dans le contenu d'une page ou d'un article. Toutefois, cet ajustement a été reporté à une date ultérieure.

Écran : Bienvenue à l'éditeur de bloc

Tout comme WooCommerce , les utilisateurs de Gutenberg sont désormais accueillis par un "guide de bienvenue". Ceci contient :

  • Une introduction au fonctionnement de l'approche par blocs
  • Explication de base des options par bloc (par exemple, couleur, largeur, alignement)
  • Notes sur la bibliothèque du bloc

Un lien à la fin mène à un manuel pour Gutenberg. Mais c'est en anglais.

Gutenberg Écran d'accueil
Le guide de bienvenue de Gutenberg

Nous vous recommandons les sources suivantes si vous n'avez pas encore travaillé avec le nouveau rédacteur en chef de WordPress :

Pour les administrateurs, le guide n'est pas nouveau, mais pour les utilisateurs et les éditeurs, il pourrait être intéressant. Elle devrait les aider à s'orienter plus rapidement sur Gutenberg . Cela peut également réduire votre effort de soutien en tant qu'administrateur.

Conseil : le guide de bienvenue ne démarre automatiquement que lorsque vous réinstallez WordPress ou utilisez Gutenberg pour la première fois. Vous voulez le démarrer manuellement ? Vous pouvez le faire dans les options générales sous Outils -> Guide d'accueil ( sous le point où vous pouvez passer du code à l'éditeur visuel).

Insérer l'image du message par glisser-déposer

Parfois, ce sont les petits changements qui font le bonheur des utilisateurs de WordPress . Avec la version 5.4, vous pouvez télécharger l'image du message par glisser-déposer. Exemple :

  1. Vous avez déjà édité ou reçu l'image, et elle se trouve dans un dossier sur votre ordinateur.
  2. De là, faites-le glisser avec la souris jusqu'à la zone "Définir l'image du message" dans la barre latérale droite de la version WordPress 5.4 et supérieure de Gutenberg
  3. Terminé - le téléchargement vers la médiathèque se fait automatiquement en arrière-plan

Il vous suffit ensuite d'ajouter les méta-informations à l'image, si nécessaire, en cliquant sur l'image insérée. Ou dans la médiathèque de WordPress . C'est peut-être le plus grand "danger" de cette nouvelle option pratique : elle se fait au détriment des attributs qui peuvent être importants pour votre référencement.

Bloc optimisé Messages récents

L'affichage d'autres articles sous vos billets de blog est utilisé par de nombreux lecteurs. Il est similaire aux derniers messages (actuellement appelés "Latest Posts" dans Gutenberg ). Cela permet à vos utilisateurs de rester plus longtemps sur votre site web. Les valeurs "temps de séjour" et "nombre de pages vues par visite" augmentent - ce sont deux chiffres clés importants pour l'optimisation des moteurs de recherche (SEO).

Le taux de clic de cette fonction augmente considérablement si vous utilisez non seulement des liens textuels, mais aussi si les images des billets respectifs sont affichées. C'est exactement ce qui est possible à partir de WordPress 5.4 :

Dernières contributions WordPress
Derniers messages avec image de poste

Autres nouveautés dans le bloc "Messages récents" :

  • Définir la taille de l'image de prévisualisation
  • Vous pouvez définir des valeurs fixes en pixels, ou utiliser différentes valeurs en pourcentage.
  • L'alignement de l'image peut également être ajusté (aligné à gauche, centré, aligné à droite).

L'article complet doit-il être visible dans l'aperçu, ou seulement un extrait du texte ? Certains blogs signalent que cette option est également nouvelle. Cependant, il existe déjà sur WordPress 5.3, sous "Settings for post content" .

Couleur du texte pour les mots et phrases individuels

Jusqu'à présent, la couleur du texte dans Gutenberg ne pouvait être modifiée que pour un paragraphe ou une section complète. Avec WordPress 5.4, il est désormais possible de changer la couleur des lettres, des mots ou des phrases :

Couleur du texte en Gutenberg
Désormais, il peut aussi devenir coloré dans certaines parties de vos textes

Pour ce faire, marquez la partie correspondante dans le corps du texte avec la souris. Dans les options avancées (à côté du symbole du lien), vous trouverez maintenant l'entrée "Couleur du texte". Vous pouvez y choisir parmi des couleurs prédéfinies ou définir une couleur individuelle. Pour cela, une table de couleurs RVB ainsi que des valeurs de couleurs hexadécimales sont disponibles.

Autres modifications

WordPress 5.4 apporte sous le capot de nombreux petits ajustements, pour le système lui-même ou aussi pour l'éditeur Gutenberg. Voici un aperçu des points les plus importants :

  • Pour les blocs individuels, il existe désormais des options de couleur et de dégradé étendues, par exemple pour le bloc de couverture (image ou vidéo avec texte en superposition) mais aussi pour les groupes et les colonnes.
  • La navigation dans les miettes de pain des blocs imbriqués a été rendue plus claire
  • Dans la vue du smartphone, la barre d'outils reste en haut, donc elle ne disparaît plus du focus
  • Dans le bloc "Galerie", vous pouvez modifier la taille de l'image (quatre niveaux : vignette, moyen, grand, plein écran).
  • Il y a maintenant une légende pour les tableaux, pour les images l'attribut title peut être attribué directement dans l'éditeur (sous les options avancées).
  • Les vidéos du portail TikTok sont disponibles dans l'éditeur de bloc en tant que nouvelle source intégrée

En outre, la convivialité de Gutenberg a été optimisée à certains endroits, par exemple en simplifiant la sélection multiple des blocs ou la navigation avec la touche de tabulation. Ce dernier travaille désormais également dans les barres latérales des blocs.

Tableau des légendes WordPress
Un tableau avec signature (Légende)

Conseil : si vous cherchez des informations sur la future feuille de route de WordPress , visitez le blog du projet germanophone WordPress . Ou visitez le site https://de. wordpress.org /about/roadmap/.

Changements pour les développeurs

Pour ceux qui travaillent en coulisses sur WordPress , il existe également de nouvelles possibilités. Mais aussi plus de performance :

  • Vitesse accrue : l'équipe de développement autour de l'éditeur de bloc a réussi à réduire le temps de chargement de 14 %, selon ses propres informations.
  • Widget calendrier : les liens de navigation sont déplacés vers un élément HTML nav qui suit immédiatement l'élément table, pour un HTML valide (selon la spécification 5.1).
  • Une sémantique cohérente : La fonction do_shortcode() est remplacée par apply_shortcode() remplace
  • Favicons : Les demandes de Favicon peuvent être gérées de manière plus flexible, le logo WordPress sert de solution de repli
  • Journal d'erreurs : Erreur dans wp_login_failed sont présentés plus en détail

Vous pouvez en savoir plus à ce sujet - ainsi que sur d'autres ajustements - dans les annonces officielles de WordPress 5.4. Des conseils pour les tests WordPress 5.4 peuvent être trouvés ici.

Quelles sont vos questions sur WordPress 5.4 ? N'hésitez pas à utiliser la fonction de commentaire. Vous souhaitez être informé des nouvelles contributions à WordPress ? Alors suivez-nous sur Twitter, Facebook ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.