WordPress 6.0 : la nouvelle version majeure est arrivée - Letecode
NON ! à la guerre à l'Est de la RDC rdc ! non à la guerre

WordPress 6.0 : la nouvelle version majeure est arrivée

WordPress 6.0 "Arturo" est enfin lancé. Cette deuxième version majeure de 2022 apporte de nombreuses améliorations, dont plus de 600 mises à jour et plus de 600 corrections de bogues.

Jean Claude - 24 juin 2022 28 Web

De nombreuses améliorations affinent l'éditeur de blocs de sites, une fonctionnalité importante introduite dans WordPress 5.9. WordPress 6.0 s'appuie sur l'éditeur de blocs en ajoutant le sélecteur de styles global, la conservation du style de bloc et la transformation de bloc de conteneur.

Regardons les nouvelles fonctionnalités que vous verrez dans WordPress 6.0.

Améliorations de l'éditeur de blocs

Lorsqu'il a été introduit dans WordPress 5.9, l'éditeur de blocs a apporté une nouvelle expérience de personnalisation du site. WordPress 6.0 propose de nombreuses mises à jour pour améliorer sa convivialité.

Sélecteur de styles globaux

Le sélecteur de styles globaux de l'éditeur de blocs est l'une des fonctionnalités les plus attendues de WordPress 6.0. Il permet aux créateurs de thèmes d'utiliser des variations de style et de basculer entre eux en un seul clic.

Le thème par défaut Twenty Twenty-Two a maintenant quatre variations de style. Pour accéder au sélecteur, ouvrez le panneau des styles globaux et cliquez sur Parcourir les styles .

Bouton Parcourir les styles pour afficher les variations de thème disponibles.

Vous devriez voir les variations de style disponibles. Cliquez sur l'un d'eux pour changer de style facilement.

Utilisation des options de variation de thème pour modifier les styles globaux.

Notez que le bouton Parcourir les styles n'apparaîtra que lorsque des variations de style sont disponibles dans le dossier du thème.

Pour ajouter une variation de style au thème Twenty Twenty Two, vous devez ajouter un nouveau fichier JSON dans le répertoire /wp-content/themes/twentytwentytwo .

Par exemple, suivez ces étapes pour ajouter une variation de style sombre au thème Twenty Twenty-Two.

Utilisez le gestionnaire de fichiers ou un client FTP et ouvrez le dossier /wp-content/themes/twentytwentytwo sur votre répertoire d'installation WordPress.

Créez un nouveau fichier nommé Dark.json .

Insérez l'extrait de code de cet essentiel GitHub dans le fichier Dark.json .

Enregistrez le fichier.

Revenez à votre tableau de bord WordPress et ouvrez l'éditeur de blocs. Vous devriez voir la variation de thème sombre nouvellement ajoutée dans le sélecteur de styles globaux.

 

Le panneau de variation de style global, affichant le nouveau style de thème sombre dans les options.

API des polices Web

L'API Webfonts vise à rationaliser l'enregistrement des polices Web locales dans les paramètres de styles globaux. Il standardise le processus, assurant la cohérence entre les sites et les thèmes.

 

Dans WordPress 6.0, vous pouvez ajouter de nouvelles polices Web via le fichier theme.json et les faire apparaître sur le panneau de typographie des styles globaux.

 

Dans l'exemple suivant, nous allons ajouter la police Montserrat au thème Twenty Twenty-Two. Vous pouvez télécharger la police à partir du répertoire Google Fonts .

 

Utilisez le gestionnaire de fichiers ou un client FTP pour télécharger le fichier de police Montserrat dans le répertoire /wp-content/themes/twentytwentytwo/assets/fonts/montserrat .

Ouvrez le fichier theme.json dans le répertoire du thème et ajoutez l'extrait de code suivant dans la section typographie :

{

  "fontFamily" : "\"Montserrat\", sans empattement" ,

  "nom" : "Montserrat" ,

  "limace" : "Montserrat" ,

  "fontFace" : [

    {

      "fontFamily" : "Monserrat" ,

      "fontWeight" : "200 900" ,

      "style de police" : "normal" ,

      "fontStretch" : "normal" ,

      "src" : [ "fichier:./assets/fonts/montserrat/Montserrat.ttf" ]     

    }

  ]

}

Enregistrez et fermez le fichier theme.json .

Accédez à l'éditeur de blocs et ouvrez le panneau des styles globaux. Ouvrez la section typographie et utilisez le menu déroulant pour parcourir les polices installées. Vous devriez maintenant voir la police Monserrat en option.

 

Menu déroulant de la famille de polices, affichant la nouvelle option de typographie Montserrat.

Éditeur de code

L'éditeur de blocs dispose désormais d'un éditeur de code, permettant aux utilisateurs d'éditer le HTML d'un thème.

 

Pour accéder à l'éditeur de code, cliquez sur l' icône des trois points dans le coin supérieur droit de l'écran et sélectionnez Éditeur de code .

 

Editeur de code dans l'éditeur de site.

Outil d'exportation de thème

WordPress 6.0 introduit l'outil d'exportation de thème. Il vous permet de télécharger votre thème actuel et ses personnalisations sous forme de fichier .zip .

 

Cliquez sur l' icône des trois points dans le coin supérieur droit de l'écran et sélectionnez Exporter . Le thème et ses personnalisations actuelles seront alors téléchargés sur votre ordinateur.

 

Menu des options de l'éditeur de site WordPress, mettant en évidence la fonction d'exportation de thème.

C'est un moyen plus simple d'enregistrer toutes vos personnalisations et de les réutiliser pour d'autres sites Web. Au lieu de personnaliser deux sites Web séparément, exportez simplement le thème d'un site Web et téléchargez-le sur l'autre site Web.

 

Nouveaux types de modèles

WordPress 6.0 ajoute cinq nouveaux types de modèles : auteur , catégorie , date , balise et taxonomie . Vous pouvez y accéder lors de l'ajout d'un nouveau modèle dans l'éditeur de blocs.

 

Ouvrez le panneau Modèles dans la barre latérale gauche de l'éditeur et cliquez sur Ajouter nouveau dans le coin supérieur droit de l'écran. Il affichera six modèles parmi lesquels choisir.

 

Nouvelles options de modèle dans l'éditeur de site WordPress 6.0.

Les nouveaux types de modèles rationalisent le processus d'édition du site car vous n'avez plus besoin de créer des modèles de page personnalisés à ces fins.

 

Motifs de bloc

Les modèles de blocs jouent un rôle plus important dans WordPress 6.0, avec de nouvelles mises à niveau pour l'insertion rapide de l'éditeur de blocs.

 

Lors de son ouverture au niveau racine et en dehors de tout bloc, l'insertion rapide recommande désormais des modèles au lieu de blocs.

 

Bloc d'insertion rapide, montrant les options de modèle.

Cette mise à niveau facilite la construction d'une section spécifique.

 

Par exemple, vous souhaitez ajouter une section d'appel à l'action d'abonnement avant le pied de page. Au lieu d'insérer manuellement le texte et les blocs de boutons, utilisez l'outil d'insertion rapide pour ajouter un modèle de bloc d'abonnement afin d'accélérer le processus.

 

Nouveaux blocs

Les développeurs WordPress ont amélioré la capacité d'édition complète du site en ajoutant plus de blocs de base. Examinons les cinq nouveaux blocs de base de WordPress 6.0.

 

Boucle de requête de commentaires

Le bloc de boucle de requête de commentaires remplace le bloc obsolète de commentaires de publication . Il comprend plusieurs blocs enfants comme le titre du commentaire , l' auteur du commentaire et le contenu du commentaire que vous pouvez personnaliser individuellement.

 

Blocage de boucle de requête de commentaires sur l'éditeur de site.

Aucun résultat dans la boucle de requête

Aucun résultat est un nouveau bloc conteneur qui affiche un texte spécifique ou d'autres blocs lorsqu'il n'y a aucun résultat de requête à afficher.

 

Aucun bloc de résultats sur l'éditeur de site.

Puisqu'il s'agit d'un bloc conteneur, vous pouvez utiliser des paragraphes, des liens ou des images pour informer les visiteurs que le site n'a pas encore de publication. Notez que vous ne pouvez insérer le bloc aucun résultat qu'à l'intérieur du bloc de boucle de requête .

 

Une page d'accueil avec un bloc sans résultats affichant un message personnalisé.

Lire la suite

Auparavant, le lien en savoir plus dans la boucle de requête était intégré au bloc d' extrait de publication , ce qui réduisait sa personnalisation.

 

WordPress 6.0 corrige cela en introduisant le bloc Lire la suite , le rendant indépendant de l'extrait de publication. Cela vous permet de faire preuve de créativité en appliquant une couleur, un style de bordure et une typographie différents au lien En savoir plus .

 

En savoir plus sur le bloc de l'éditeur du site.

Biographie de l'auteur et blocs d'avatars

WordPress 6.0 ajoute deux nouveaux blocs pour diviser le contenu du bloc de l' auteur de la publication . Le bloc de biographie de l'auteur de la publication affiche la description du profil de l'auteur, tandis que le bloc d' avatar affiche la photo de l'auteur.

 

De cette façon, vous obtenez plus d'options lors de l'affichage des informations sur l'auteur. Par exemple, vous pouvez utiliser le bloc de lignes pour contenir l'avatar et le bloc de biographie de l'auteur du message pour les afficher côte à côte.

 

Blocs avatar et biographie de l'auteur sur l'éditeur du site.

Améliorations des blocs

Outre l'ajout de nouveaux blocs, WordPress 6.0 introduit également plusieurs améliorations aux blocs existants. Examinons certaines des mises à niveau et voyons comment elles offrent une meilleure expérience utilisateur et des options de personnalisation.

 

Image sélectionnée pour le bloc de couverture

WordPress 6.0 ajoute une nouvelle fonctionnalité pour le bloc de couverture . D'un simple clic sur la barre d'outils du bloc, vous pouvez connecter le bloc de couverture à l'image sélectionnée et l'utiliser comme arrière-plan.

 

Utilisation d'une image en vedette pour le bloc de couverture.

Avec cette intégration, le bloc de couverture changera en conséquence lors de la mise à jour de l'image sélectionnée.

 

Sélecteur de taille d'image en vedette

Un sélecteur de taille déroulant est ajouté aux outils de conception du bloc d' image en vedette . Cette fonctionnalité n'est accessible que lors de l'ajout d'un bloc d'image en vedette sur une publication ou une page.

 

Pour l'activer, ouvrez le panneau des paramètres de bloc en cliquant sur Paramètres dans le coin supérieur droit de l'éditeur. Ensuite, cliquez sur l' icône des trois points dans la section Dimensions et sélectionnez Taille de l'image .

 

Le sélecteur de taille d'image pour le bloc d'images en vedette.

Options de transformation de bloc

WordPress 6.0 ajoute plus d'options de transformation de bloc. Une amélioration significative est la possibilité de transformer facilement les blocs de conteneurs - group , row et stack - les uns dans les autres.

 

Lors de la sélection d'un groupe , d'une ligne ou d'un bloc de pile , ouvrez le panneau des paramètres de bloc. Vous devriez voir les trois icônes en haut représentant chaque bloc. Cliquez sur l'un d'eux pour transformer le bloc en celui que vous voulez.

 

Transformateur de mise en page pour les blocs de conteneur dans le panneau des paramètres de bloc.

Vous pouvez désormais également regrouper plusieurs blocs dans un bloc conteneur. Par exemple, vous souhaitez regrouper plusieurs paragraphes et blocs d'images. Cliquez simplement et faites glisser pour sélectionner ces blocs. Ensuite, cliquez sur l'une des icônes de bloc conteneur dans la barre d'outils.

 

Démonstration de la transformation de plusieurs blocs en un bloc de groupe.

De plus, WordPress 6.0 ajoute également les options de transformation de bloc suivantes :

 

Logo au titre

Extrait du contenu

Nuage de tags aux catégories

Du calendrier aux archives

Paragraphe à Code

Grouper en ligne

Améliorations du bloc de navigation

Le bloc de navigation a une fonctionnalité de prévisualisation riche pour le bloc de lien de page. Lorsque vous liez la navigation à une page publique, l'aperçu apparaîtra dans la barre d'outils.

 

Bien qu'il ne s'agisse pas d'une mise à jour majeure, un aperçu enrichi peut être très utile pour s'assurer que vous avez ajouté le bon lien.

 

Un aperçu riche pour un lien de navigation.

Une autre amélioration est la possibilité de définir le bloc de navigation sur le seul menu disponible. Dans la version précédente, vous deviez sélectionner le menu ou repartir de zéro lorsque vous n'aviez qu'un seul menu. Cette mise à niveau accélère le flux de travail.

 

Il convient également de mentionner que vous pouvez avoir un panneau Menus de navigation sur l'éditeur de blocs si vous activez le plugin Gutenberg . Une fois activé, accédez au panneau des menus de navigation en cliquant sur Navigation dans le coin supérieur droit de l'écran de l'éditeur.

 

Panneau de menu de navigation sur l'éditeur de site.

Dans ce panneau, vous pouvez sélectionner et configurer n'importe quel menu de navigation. Par exemple, vous pouvez supprimer ou verrouiller n'importe quel élément de navigation ou créer une structure de navigation imbriquée.

 

Panneau de menu de navigation, affichant une structure de navigation imbriquée.

Espacement des blocs de galerie

WordPress 6.0 ajoute un contrôle d'espacement des blocs pour le bloc de galerie , permettant plus de flexibilité lors de la conception d'une mise en page de galerie. Vous pouvez maintenant spécifier les espaces entre les images.

 

Ouvrez le panneau des paramètres de bloc. Vous devriez voir le champ Espacement des blocs dans la section Dimensions . Définissez le nombre de pixels que vous voulez pour les espaces entre les images.

 

La fonction d'espacement des blocs pour le bloc de la galerie.

Combinez cette fonctionnalité avec l' outil de contrôle des bordures pour les blocs d'images individuels afin de créer une mise en page unique.

 

Un bloc de galerie utilisant une bordure personnalisée, un espacement de bloc et des paramètres de rayon.

Paramètres de bordure et de mise en page des colonnes

WordPress 6.0 ajoute des paramètres de bordure pour le bloc de colonnes . Vous pouvez maintenant modifier la couleur, l'épaisseur et le rayon de la bordure.

 

Cette fonctionnalité est disponible pour le conteneur de colonnes, mais vous pouvez en ajouter une pour des blocs de colonnes individuels en activant le plugin Gutenberg. En tant que tel, vous pouvez être créatif avec la section de contenu basée sur des colonnes.

 

Les paramètres de bordure pour le bloc de colonnes.

Une autre amélioration pour le bloc de colonnes concerne les paramètres de mise en page. Vous pouvez maintenant définir la largeur du contenu pour les blocs de colonnes individuels. Ce paramètre fonctionne pour le contenu à l'intérieur de la colonne avec un alignement centré ou large.

 

Par exemple, vous souhaiterez peut-être définir un bloc de paragraphe dans une colonne avec un alignement centré. Si vous définissez la largeur maximale, le texte ne dépassera pas la limite et la bordure l'entourera.

 

Les paramètres de mise en page pour le bloc de colonnes.

Améliorations de la convivialité

WordPress 6.0 améliore l'expérience utilisateur pour offrir une meilleure convivialité et un flux de travail plus fluide. Il convient de mentionner que cette version vise également à améliorer l'accessibilité .

 

Examinons les améliorations significatives de la convivialité dans WordPress 6.0.

 

Amélioration de la vue de liste

Les nouvelles améliorations de la vue de liste facilitent le travail avec une structure de page complexe.

 

Le panneau d'affichage de la liste affichera désormais une vue réduite pour tous les blocs par défaut. De cette façon, vous pouvez trouver plus facilement les blocs pertinents. C'est particulièrement utile lorsque vous travaillez avec une structure complexe comportant de nombreux blocs imbriqués.

 

Vue de liste réduite par défaut.

Lors de la sélection d'un bloc et de l'ouverture du panneau d'affichage de la liste, vous verrez le nid de blocs correspondant et le bloc sélectionné dans la structure.

 

Démonstration de l'ouverture de la vue liste alors qu'un bloc est sélectionné.

La vue de liste améliorée vous permet également de sélectionner plusieurs blocs à l'aide de Maj + clic . Vous pouvez effectuer des actions groupées telles que déplacer, supprimer ou dupliquer de nombreux blocs.

 

Démonstration de la sélection et de la suppression de plusieurs blocs dans la vue de liste.

Sélection de texte dans les blocs

L'éditeur de blocs vous permet désormais de sélectionner du texte dans plusieurs blocs, y compris des paragraphes , des titres et des guillemets . Vous pouvez ensuite supprimer, remplacer ou copier le texte sélectionné.

 

Sélection de texte sur plusieurs blocs dans l'éditeur de site.

Ceci est considéré comme une amélioration significative de WordPress 6.0 car il facilite beaucoup l'édition de texte. Sur la version précédente de WordPress, cette tentative sélectionnera automatiquement le bloc entier.

 

Interface utilisateur de verrouillage de bloc

WordPress 5.9 a introduit l'attribut de verrouillage de bloc pour empêcher tout bloc d'être déplacé ou supprimé. Cependant, l'édition du code était nécessaire pour verrouiller un bloc. WordPress 6.0 résout ce problème en ajoutant l'interface utilisateur de verrouillage de bloc dans l'éditeur de blocs.

 

Il existe deux manières de verrouiller un bloc. La première méthode est à partir de la barre d'outils du bloc. Sélectionnez un bloc et cliquez sur l' icône des trois points dans la barre d'outils du bloc. Ensuite, sélectionnez Verrouiller .

 

L'option de verrouillage dans le menu de la barre d'outils des blocs.

La fenêtre contextuelle d'attribut de verrouillage de bloc apparaîtra. Vous pouvez choisir de désactiver le mouvement , d' empêcher la suppression ou les deux.

 

La fenêtre contextuelle de choix des attributs de verrouillage du bloc.

La deuxième méthode consiste à utiliser le panneau d'affichage de liste. Trouvez le bloc que vous souhaitez verrouiller et cliquez sur l' icône des trois points . Sélectionnez Verrouiller et la même fenêtre contextuelle apparaîtra.

 

Bloquer l'option de verrouillage dans la vue de liste

Le déverrouillage du bloc implique des étapes similaires. Cependant, un bloc verrouillé aura une icône de cadenas sur la barre d'outils du bloc . Cliquez dessus pour ouvrir la fenêtre contextuelle et déverrouiller le bloc.

 

Icône de verrouillage de bloc sur la barre d'outils d'un bloc verrouillé

Style de bloc de retenue

La conservation du style de bloc conserve les styles personnalisés du bloc pour gagner du temps.

 

Le premier concerne la transformation de bloc. Par exemple, vous pouvez avoir un bloc de titre avec une typographie et une couleur personnalisées. Lorsque vous le transformez en bloc de paragraphe, la typographie et la couleur restent les mêmes.

 

Style de bloc conservé lors de la transformation d'un bloc.

Le deuxième cas consiste à ajouter un autre bouton à l'intérieur d'un bloc de boutons. Par exemple, vous avez peut-être personnalisé le bouton avec une couleur et un style de bordure personnalisés. Lorsque vous ajoutez un autre bouton, il aura le même style.

 

Ajout d'un nouveau bouton dans un bloc de boutons avec les styles de bloc conservés.

Cette fonctionnalité vous évite de refaire un travail de personnalisation lors de la transformation d'un bloc ou de l'ajout de boutons sur votre page.

 

Aperçu du style de bloc

L'aperçu du style de bloc est remplacé par une fenêtre contextuelle lorsque vous survolez une option de style. Cela offre un meilleur visuel car l'aperçu apparaît plus grand.

 

La fenêtre contextuelle d'aperçu des options de style de bloc.

Rappel de catégorie de publication

Lors de la publication d'un article sans sélectionner de catégorie, l'éditeur de l'article proposera désormais d'en ajouter une. Bien que cela semble être une amélioration mineure, cela peut vous empêcher de publier accidentellement un message sans catégorie.

 

Suggestion de catégorie sur les vérifications de pré-publication de l'éditeur de publication.

Comment mettre à jour vers WordPress 6.0

Assurez-vous de créer une sauvegarde WordPress avant la mise à jour. De cette façon, vous pouvez récupérer votre site en cas de problème lors de la mise à jour. Nous vous recommandons également d'utiliser un environnement intermédiaire pour tester la nouvelle version avant de l'implémenter sur le site Web en direct.

 

Une fois que vous avez terminé la préparation, utilisez l'une des méthodes suivantes pour mettre à jour WordPress :

 

Tableau de bord WordPress – Connectez-vous à votre tableau de bord WordPress. Ensuite, accédez à Tableau de bord -> Mises à jour ou cliquez sur le bouton Veuillez mettre à jour maintenant dans la bannière de notification. Sur la page de mise à jour, cliquez sur Mettre à jour vers la version 6.0 .

hPanel - Cette méthode est disponible pour les clients d'hébergement Web Hostinger WordPress, Cloud et partagés. Allez dans WordPress -> Tableau de bord et trouvez la section Version de WordPress . Cliquez sur Mettre à jour vers 6.0 pour mettre à jour votre site WordPress.

Mise à jour manuelle à l'aide d'un client FTP - Cette méthode d'installation manuelle implique le téléchargement des fichiers WordPress 6.0 à partir de WordPress.org. Extrayez le fichier .zip et supprimez le dossier wp-content et le fichier wp-config-sample.php pour éviter la perte de données et de configuration. Ensuite, utilisez un client FTP pour écraser les fichiers et dossiers principaux de WordPress, à l'exception du dossier wp-content et du fichier wp-config-sample.php .

Interface de ligne de commande WordPress (WP-CLI) – Utilisez SSH pour accéder au répertoire racine public_html de votre site Web . Une fois l'interface de ligne de commande connectée, entrez la commande wp core update pour effectuer la mise à jour.

Conclusion

WordPress 6.0 améliore l'expérience d'édition complète du site avec diverses améliorations des blocs et de l'interface utilisateur. Avec cette nouvelle version, les utilisateurs peuvent être plus créatifs et avoir plus de contrôle sur la conception de leur site Web.

 

Nous vous recommandons de mettre à jour votre site vers WordPress 6.0 dès que possible pour accéder à ses avantages et vous protéger des vulnérabilités potentielles.

 

Avant de mettre à jour votre site, effectuez une sauvegarde et vérifiez la compatibilité de votre thème et plugin. Si nécessaire, utilisez un environnement de staging WordPress pour tester WordPress 6.0 en toute sécurité.

 

vote
Jean Claude Mbiya
Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.

0 commentaire(s)

Laissez votre commentaire à @johnmbiya

ou pour laisser un commentaire