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

8 Min.
WordPress  5.4
Dernière mise à jour le

Le WordPress 5.4 Le communiqué a été publié le 31 mars 2020. Quels sont les avantages de cette version pour les utilisateurs et les développeurs ? Notre aperçu : C'est une nouveauté dans WordPress et Gutenberg.

WordPress met de plus en plus de place dans son éditeur Gutenberget lui offre de nouvelles fonctions. Avant de passer aux prochaines étapes de développement - c'est-à-dire dans le sens de la collaboration et Multilinguisme. Certaines nouvelles fonctionnalités peuvent être source de confusion pour les utilisateurs, vous devez vous y préparer. Nous résumons pour vous tous les changements importants.

Widget : État du site web

L'innovation de WordPress 5.4, ce 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". Cette fonction est disponible depuis WordPress 5.2. vous pouvez les trouver dans le backend 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 faiblesses 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 indices sur les éventuelles failles de sécurité. Il s'agit par exemple de

  • Une liste des noms de domaine inactifs Pluginset Themes. Vous devez toujours les supprimer, car même à l'état désactivé, ils restent une cible des pirates informatiques peut être.
  • Suggestions de modules PHP qui devraient être installés sur votre serveur. Sinon, il peut fonctionner WordPress lentement ou certaines fonctions peuvent manquer. Voir cette liste de WordPress Hosting-Équipes.
  • Un avertissement si votre site web n'utilise pas encore de connexion HTTPS.

Le cryptage via SSL est un must absolu pour toute présence professionnelle sur le web. Par exemple, via Cryptons. Google exige également une connexion sécurisée, faute de quoi votre site web perdra son classement et ses visiteurs. Idéalement, les certificats SSL sont inclus dans votre pack d'hébergement - le réduit vos dépenses.

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

WordPress  Configuration
La configuration de WordPress

Cela vous donnera de nombreux détails sur votre configuration de WordPress et WooCommerce. Vous pouvez les exporter, par exemple comme aide pour votre WordPress -fournisseur de services. Ou pour le dépannage des développeurs de Pluginset Themes.

Gutenberg en mode plein écran

Vous ne saviez pas qu'il avait Gutenbergun mode plein écran ? Vous serez alors irrité lorsque vous appellerez l'éditeur de la version 5.4 pour la première fois. Parce que là, la barre du tableau de bord sur le côté gauche est manquante. Cela présente des avantages mais aussi des inconvénients :

  • Sur les petits écrans, en particulier, vous disposez désormais de plus d'espace pour votre contenu
  • Vous ne serez pas distrait par les commentaires, les mises à jour, Pluginsetc.
  • Dans le même temps, l'encadré est absent de certains processus

Le dernier point ralentit surtout si vous devez passer de l'aperçu du poste à l'éditeur lors de la mise à jour de vos textes. Ou si vous voulez appeler la médiathèque pour un moment.

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. Aller aux options avancées de (les Gutenbergtrois points verticaux à côté du symbole de l'engrenage dans le coin supérieur droit)
  2. Pour l'instant, l'éditeur les appelle "Plus d'outils et d'options".
  3. Supprimez la coche de la case "Mode plein écran" à cet endroit

Le comportement - mode plein écran activé ou désactivé - peut être modifié avec quelques lignes de JavaScript même profess:

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

Grâce à cette fonction, vous pouvez ajouter des liens ou des icônes à vos apparitions dans les réseaux sociaux d'un simple 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
  • Il existe près de 40 icônes ou réseaux disponibles
  • En outreWordPress , Twitter, Facebook, YouTube ou Instagram sont par exemple Dropbox, Etsy, RSS, Flickr, GitHub, LinkedInPinterest, 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 précédente, vous pouvez le faire en cliquant sur l'icône et en sélectionnant ensuite l'option "Supprimer le bloc". Cela ne supprimera pas tout le bloc, 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 inclurez plus tard "l'icône sociale" dans un autre bloc ou message. La solution : vous convertissez votre résultat en un bloc réutilisable et vous n'utilisez que ce bloc.

Conseil : de nombreux utilisateurs ne sont pas encore familiarisés avec 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 correspondants des différents postes.

Gutenberg Boutons de blocage

Le nom dit tout : ce nouveau WordPress bloc vous permet d'inclure des boutons textuels dans vos messages. Par exemple, pour télécharger des livres électroniques ou pour les transmettre à la centrale pages d'accueil. Les boutons peuvent être personnalisés comme suit :

  • Différents styles (complètement rempli de couleur ou seulement avec le contour)
  • 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é (les temps sauvages du web design sont salués)
  • Réglages des bords (rayon des coins)
  • Options de liens comme target _blank

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

Gutenberg Boutons
Gutenberg Boutons avec gradient et courbes

De plus, il est désormais possible d'insérer plusieurs boutons les uns après les autres sans que cela ne détruise votre mise en page. Vous pouvez modifier l'ordre des boutons par glisser-déposer.

Remarque : à l'origine, le point WordPress 5.4 visait à fournir nouveau bloc de navigation pour insérer un menu de navigation également dans le contenu d'une page ou d'un article. Toutefois, cet ajustement a été modifié pour à un stade ultérieur reporté.

Écran : Bienvenue à l'éditeur de bloc

Tout comme le "Guide de bienvenue", les utilisateurs WooCommercesont désormais également accueillis par Gutenbergun "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

Une référence à la fin du document donne des instructions pour Gutenberg. Il est cependant 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 nouvel éditeur pour WordPress :

Pour les administrateurs, le guide n'est pas nouveau, mais pour les utilisateurs et les éditeurs, il pourrait être intéressant. Ils devraient s'Gutenbergy retrouver plus rapidement. Cela peut également réduire vos efforts de soutien en tant qu'administrateur.

Conseil : le guide de bienvenue ne démarre automatiquement que lorsque vous l'WordPress installez ou l'utilisez pour Gutenbergla 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 une photo de la contribution par glisser-déposer

Parfois, ce sont les petits changements qui rendent les utilisateurs WordPress heureux. Avec la version 5.4, vous pouvez télécharger l'image du message par glisser-déposer. Un exemple :

  1. Vous avez déjà traité ou envoyé 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

Seules les métadonnées de l'image doivent être saisies ensuite, si nécessaire, en cliquant sur l'image insérée. Ou dans la médiathèque du WordPress . C'est peut-être le plus grand "danger" de cette nouvelle option pratique : elle se fait au détriment des attributs qui pourraient être importants pour votre référencement.

Bloc optimisé Contributions récentes

L'affichage d'un plus grand nombre d'articles sous vos billets de blog est une fonction que de nombreux lecteurs aiment utiliser. Il est similaire aux derniers messages (actuellement appelés "Latest GutenbergPosts"). De cette façon, vos utilisateurs restent plus longtemps sur votre site web. Les valeurs "durée du séjour" et "nombre de pages vues par visite" augmentent - ce sont deux chiffres clés importants pour 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 :

Derniers messages WordPress
Dernières contributions avec photo de la contribution

Autres innovations dans le bloc "Messages récents" :

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

L'aperçu doit-il montrer l'article complet ou seulement un extrait de texte ? Certains blogs signalent que cette option a également été ajoutée. Toutefois, il est déjà disponible en 5WordPress .3, sous "Paramètres de publication de contenu".

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 avec la souris la partie correspondante dans le texte continu. 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 ce faire, vous pouvez utiliser une table de couleurs RGB et des valeurs de couleurs hexadécimales.

Autres changements pour les utilisateurs

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

  • Pour les blocs individuels, il y a maintenant des extensions Options de couleurs et de dégradéspour le bloc de couverture (image ou vidéo avec texte superposé) mais aussi pour les groupes et les colonnes
  • La navigation dans les miettes de pain des blocs imbriqués est plus claire
  • Dans le cas des smartphones, la vue reste la barre d'outils en hautpour qu'elle ne soit plus floue.
  • Dans le bloc "Galerie" vous pouvez influencer la taille de l'image (quatre niveaux : image de prévisualisation, moyenne, grande, pleine grandeur)
  • Il y a maintenant une signature ("caption") 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 comme nouvelle source d'intégration

En outre, la convivialité de a été Gutenbergoptimisée à certains endroits, par exemple en facilitant la sélection de plusieurs 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 WordPress route de le blog du WordPress projet de langue allemande. Ou la page https://de.wordpress.org/à propos de /carte de route/.

Changements pour les développeurs

Il y a aussi de nouvelles opportunités pour tous ceux qui travaillent en WordPress coulisses. Mais aussi plus de performance :

  • Plus de rapidité : l'équipe de développement autour de l'éditeur de bloc a, selon ses propres déclarations, développé un Réduction du temps de chargement de 14 % atteint
  • Widget calendrier : les liens de navigation sont déplacés dans un élément nav HTML qui suit immédiatement l'élément table, pour un HTML valide (selon la spécification 5.1)
  • Sémantique uniforme : la fonction do_shortcode() est représenté par apply_shortcode() a remplacé
  • Favicons : Les demandes de favicon peuvent être gérées de manière plus flexible, le WordPress logo sert de solution de repli
  • Journal des erreurs : Erreur dans wp_login_failed sont plus détaillées

Vous pouvez en savoir plus à ce sujet - ainsi que sur d'autres ajustements - dans le annonces officielles à WordPress 5.4 en savoir plus. Notes sur les tests WordPress 5.4 vous trouverez ici.

Quelles questions sur WordPress 5.4 vous avez ? Vous pouvez utiliser la fonction de commentaire. Vous voulez connaître les nouveaux postes à WordPress être informé ? Alors, suivez-nous TwitterFacebook ou sur notre Newsletter.

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .