L’évolution de WordPress a mis du temps à mûrir, mais il est passé d’une simple plateforme de blog à un système de gestion de contenu (CMS) robuste qui fait presque fonctionner le web. Les progrès les plus importants ont été réalisés dans le domaine de la création de sites. L’édition complète de sites (FSE) de WordPress est un moyen ambitieux de mettre des outils complexes à la portée de tous.
Ce guide complet explorera l’histoire et les fonctionnalités de l’édition complète de sites WordPress. L’objectif final est de vous montrer comment fonctionne le FSE et de vous permettre de développer vos propres sites, comme le font les professionnels.
Un bref historique de la conception et de la création de sites sur WordPress
Comprendre l’évolution de la conception des sites et des mises en page dans WordPress est un élément essentiel pour apprécier l’importance de FSE. L’outil clé qui est au cœur de la situation actuelle est l’éditeur classique.
Bien sûr, il n’a pas toujours été « classique » Il a toujours été l’éditeur TinyMCE – l’éditeur par défaut depuis la première version de WordPress jusqu’à environ 2018. Il s’agit d’un simple éditeur de texte WYSIWYG (What You See Is What You Get) qui vous permet de saisir du contenu et du HTML de base, ainsi que quelques styles de mise en forme. En fait, vous pouvez toujours obtenir l’éditeur TinyMCE, car il s’agit d’un outil commercial :
Les principaux inconvénients de l’éditeur TinyMCE sont le manque d’options de prévisualisation et une flexibilité parfois insuffisante. Les frameworks de thèmes sont devenus une alternative viable et puissante. Bien sûr, le framework Genesis de StudioPress est toujours parmi nous, mais il y en a eu d’autres, comme Thesis.
Vous pouvez voir ici comment nous passons de l’édition de texte à la conception visuelle de sites web. Le framework vous offre des options sur le backend de WordPress, ce qui vous permet de modifier certains aspects du frontend. En outre, vous disposez de plus de fonctionnalités « brutes » pour apporter d’autres modifications, telles que des crochets et des filtres, la prise en charge des modèles, et bien plus encore.
Cependant, l’accessibilité pour l’utilisateur type n’est pas encore très bonne, et c’est là que les extensions de construction de pages sont devenus populaires. Vous les utiliserez avec l’éditeur TinyMCE/Classique pour vous donner un système de glisser-déposer pour concevoir votre site. Ces extensions sont en grande partie les mêmes qu’en 2011. Divi et Beaver Builder dominent toujours, bien qu’Elementor soit également un mastodonte :
Vous voudrez bien lire la section suivante pour comprendre pourquoi nous avons des alternatives à l’éditeur TinyMCE et à une extension de construction de pages.
L’éditeur de blocs et l’édition complète du site WordPress
WordPress est le numéro un en termes de popularité, mais pour en arriver là, il a dû défendre son titre. Au fil des ans, de nombreuses autres plateformes ont saturé le marché.
Squarespace, Wix, Medium, et bien d’autres, veulent tous le même public et la même base d’utilisateurs que WordPress, et jusqu’à l’éditeur de blocs, ils avaient tous une bien meilleure expérience d’édition.
C’était une grande préoccupation pour la direction de WordPress, car d’autres plateformes à l’époque gagnaient en visibilité. La concurrence disposait également d’interfaces modernes, visuelles et performantes, même pour le simple contrôle de la mise en page.
L’éditeur de blocs est un moyen modulaire de construire les articles et les pages de votre site, mais il présente aussi des inconvénients. Tout d’abord, son champ d’application limité signifie que son utilisation nécessite probablement une extension de construction de pages si vous souhaitez apporter des modifications « plus profondes ». Vous aurez également besoin de connaissances en développement pour construire un site complet, ce qui est une barrière créative à laquelle l’équipe de WordPress a trouvé une solution.
Ce qu’est l’édition complète de site WordPress (FSE)
L’édition complète d’un site WordPress représente la dernière et la plus grande frontière pour le développement de votre site. Elle s’appuie sur l’utilisation de blocs pour assembler votre design et va au-delà des articles et des pages individuels. À la base, FSE vous permet de gérer tous les aspects de la conception de votre site WordPress à l’aide d’une interface unifiée et intuitive.
C’est désormais la manière « officielle » de modifier votre site. Il prend en charge tous les aspects de votre site :
- L’édition de la navigation. L’ancienne méthode, qui consistait à utiliser l’écran de création Apparence > Menus, est désormais intégrée à l’Éditeur de site.
- Styles globaux. Vous disposez d’un meilleur contrôle sur l’aspect et la convivialité de l’ensemble de votre site. Cela comprend les couleurs, la typographie, l’espacement et bien plus encore.
- Édition de modèles. Cette fonction nécessitait auparavant des connaissances en matière de développement et de codage (PHP, HTML et CSS). Désormais, vous pouvez utiliser l’éditeur de site pour créer et modifier des modèles pour les différentes parties de votre site sans avoir besoin de code.
- Compositions de blocs. Il s’agit d’éléments de conception réutilisables utilisant des collections de blocs que vous pouvez insérer dans vos mises en page.
Compte tenu de l’évolution de l’éditeur, certaines fonctionnalités disparaissent également. Par exemple, vous n’avez plus besoin de zones de widgets, bien que WordPress les utilise encore comme fonctionnalité héritée pour les thèmes qui ne sont pas basés sur des blocs.
Nous reviendrons plus tard sur ce que l’édition complète d’un site WordPress peut vous permettre de réaliser. Avant cela, examinons plus en détail pourquoi nous avons besoin de FSE en premier lieu.
Pourquoi FSE est dans WordPress
L’équipe de WordPress a plusieurs raisons d’introduire FSE. Certaines d’entre elles sont d’ordre technique. Par exemple, l’éditeur de blocs ne nous permet pas de modifier tous les aspects du site alors que cette fonctionnalité devrait être présente dès le départ.
Il est difficile de comprendre pourquoi il a fallu tant de temps pour nous permettre de travailler sur les styles de modèles sans avoir besoin de code. Entre l’éditeur classique, les frameworks, les extensions de construction de pages et l’éditeur de blocs, nous n’en avons jamais eu l’occasion. FSE résout ce problème de manière native pour WordPress.
Cette simplification unifie l’expérience d’édition et la place sous le contrôle de l’équipe principale de WordPress plutôt que de développeurs tiers. Cela signifie également que la courbe d’apprentissage est cohérente. Entre le contenu, la mise en page et la conception, vous avez une expérience familière d’un écran à l’autre.
Cette expérience est également synonyme de longévité. L’édition complète de sites WordPress ne disparaîtra pas ; elle évoluera simplement au fil du temps. Cela donne à la plateforme une base pour s’adapter à tout ce que l’équipe de développement souhaite apporter à WordPress.
Dans l’ensemble, ce pouvoir s’étend des développeurs aux utilisateurs finaux. L’édition complète d’un site WordPress donne à chacun un plus grand contrôle sur les modifications de conception qu’il souhaite apporter sans dépendre de développeurs, de personnalisations complexes ou de connaissances en matière de codage.
Les alternatives à FSE
Pour l’équipe de WordPress, FSE n’est pas seulement le présent, c’est aussi l’avenir de la plateforme. Cependant, vous aurez besoin d’un thème compatible pour l’utiliser (nous y reviendrons plus tard). De plus, d’autres entreprises WordPress pourraient ne pas être d’accord, en particulier celles qui proposent des produits concurrents.
Par exemple, les développeurs web WordPress diront que c’est une bonne idée de confier la conception de votre thème à quelqu’un d’expert. Nous sommes d’accord dans de nombreux cas, surtout si vous avez des besoins complexes, le budget et le temps nécessaires.
Bien sûr, l’éditeur de blocs reste viable pour la majorité des créations de contenu et des personnalisations. Le passage à l’édition complète d’un site se fera en un clin d’œil, et vous l’utiliserez probablement déjà :
Beaucoup d’utilisateurs se tourneront vers l’éditeur de blocs pour la plupart avant d’apporter une autre solution. L’ajout d’une extension de construction de pages offre certaines des fonctionnalités qui manquent à l’éditeur de blocs. Divi, Elementor, Beaver Builder, Brizy, et bien d’autres ont de grandes fonctionnalités et permettent des personnalisations et des développements plus profonds :
Pour une expérience diamétralement opposée à l’édition complète d’un site WordPress et un retour à la case départ, vous pouvez opter pour un tout nouveau CMS : ClassicPress.
La philosophie du projet est que l’évolution de WordPress est une excellente idée, à l’exception de l’éditeur de blocs et, par extension, de FSE. En tant que tel, le fork ClassicPress ne l’inclut pas. Au lieu de cela, vous créerez des sites en utilisant l’éditeur classique ou TinyMCE, comme par le passé.
Il s’agit essentiellement d’une solution unique à l’immaturité de l’éditeur de blocs lors de sa première sortie. A l’époque, le concept avait un sens théorique. Cependant, étant donné l’expérience actuelle de WordPress en matière d’édition, il n’y a que peu de raisons d’opter pour ClassicPress.
Comment fonctionne l’édition complète d’un site WordPress
En quelques mots, l’édition intégrale de WordPress étend les fonctionnalités de l’éditeur de blocs à l’ensemble de votre site. Pour utiliser FSE, vous avez besoin d’un « thème à base de blocs » ou d’un « thème FSE » qui le supporte. Nous en reparlerons plus tard.
La vue d’ensemble du fonctionnement de FSE est simple :
- FSE utilise des blocs. Tout comme l’itération actuelle de l’éditeur WordPress, l’ensemble de votre site utilise des blocs pour chaque composant. Ici, tant les éléments de contenu individuels que les composants structurels plus importants (tels que les en-têtes et les pieds de page) utiliseront des blocs.
- Vous pouvez modifier les modèles de page dans WordPress. Il n’est plus nécessaire d’avoir des connaissances en PHP pour modifier les fichiers de modèles. Vous pouvez les créer et les modifier à partir de l’éditeur de site.
- Vous avez accès à des outils de conception pour l’ensemble du site. Nous verrons plus tard le panneau des styles globaux, mais il vous permet de contrôler les éléments de conception qui affectent l’ensemble de votre site. Dans de nombreux cas, vous n’aurez pas besoin de CSS personnalisés pour mettre en œuvre votre vision.
- Les modèles de blocs vous permettent de construire rapidement. Comme pour l’éditeur de blocs, il existe des modèles pour les sections courantes du site que vous pouvez insérer et personnaliser sans restriction.
- Le fichier theme.json est un élément central de FSE. Ce fichier de configuration définit les styles et les réglages fondamentaux de votre thème. Il s’agit d’un point de départ pour la personnalisation de votre site, mais il peut également être le « centre » de votre développement.
La plupart des utilisateurs ne disposent pas d’une version de WordPress antérieure à la 5.9, mais si c’est le cas, vous devrez effectuer une mise à jour pour tirer parti de FSE. Comme nous l’avons souligné, vous aurez également besoin d’un thème de soutien. Voyons cela rapidement.
Choisir un thème FSE approprié
Heureusement, le choix d’un thème basé sur des blocs nécessite le même niveau de soin que tout autre type de thème. Vous devrez examiner quelques aspects objectifs pour vous assurer que vous téléchargez une solution solide :
- Vérifiez que la base de code du thème est régulièrement mise à jour.
- Découvrez ce que les autres utilisateurs pensent du thème en consultant les évaluations et les commentaires.
- Assurez-vous que le développeur offre un niveau d’assistance adapté à vos besoins.
Étant donné que l’édition complète d’un site WordPress est une nouveauté sur la plateforme, vous disposez de moins d’options de thèmes. Cela ne signifie pas pour autant que la qualité est difficile à trouver. De nombreux grands développeurs ont leur propre thème FSE/Block. L’un des premiers a été la version FSE de Neve de ThemeIsle :
La version « traditionnelle » ou « classique » du thème utilise l’ancien outil de personnalisation de l’onglet Apparence de l’écran Apparence. Cette version intègre entièrement l’éditeur de site et offre de meilleures performances subjectives.
Il existe d’autres thèmes de blocs, tels que Portfolio WP et Mugistore. Cependant, Ollie est sans doute le meilleur de tous :
Ce thème s’engage à éditer le site complet de WordPress sans hésiter. Il dispose d’un assistant de prise en main, et même d’une version premium qui inclut de nombreux éléments et modèles de la librairie de compositions.
Même le thème par défaut Twenty Twenty-Four est un choix viable pour votre site maintenant :
La capacité et la profondeur de l’éditeur de site nous permettent de construire au-dessus (et d’étendre) des thèmes qui nécessitent souvent beaucoup de code et de ressources. Il démocratise la capacité à construire et à développer des thèmes, et l’interface principale est le premier point de contact pour cela.
Visite de l’interface principale de FSE
Pour trouver l’éditeur de site, naviguez vers Apparence > Éditeur dans WordPress :
Cet écran est assez simple. Sur le côté droit, vous verrez l’aperçu de la mise en page. Vous pouvez cliquer dessus pour ouvrir l’interface de l’éditeur de site pour votre page d’accueil. Sur la gauche, vous trouverez une série de liens vers d’autres pages d’édition pour des tâches spécifiques. Nous examinerons ces écrans plus en détail dans un instant.
Avant d’aborder chacun des cinq écrans de FSE, notez que vous pouvez quitter l’Éditeur de site en utilisant le logo WordPress dans le coin supérieur gauche de l’écran. Vous pouvez également cliquer sur la flèche « retour » de la page principale de Design :
Ceci étant dit, passons à l’utilisation de FSE.
Les 5 piliers du Full Site Editing de WordPress
Nous allons maintenant examiner chaque écran de l’éditeur de site dans l’ordre où il apparaît dans la navigation. En fait, cela nous amène à discuter de cet écran !
1. Navigation
La page Navigation remplace l’écran Apparence > Menus. Une fois que vous y êtes entré, vous verrez une liste des articles et des pages de votre site :
S’il s’agit d’un nouveau site, vous verrez ici tous vos articles et toutes vos pages. Cela peut prêter à confusion, car il s’agit de votre menu de navigation principal. Près de l’en-tête Navigation, ouvrez le menu Actions. Vous pourrez ainsi modifier le menu, changer son nom, le supprimer ou le dupliquer :
Si vous cliquez sur Modifier, une version de l’éditeur de blocs contenant votre menu en tant que bloc de navigation s’ouvre :
Dans la colonne latérale, vous avez la possibilité de déplacer chaque entrée vers le haut ou vers le bas, de la supprimer du menu ou de créer un sous-menu à partir d’elle :
Chaque entrée du menu utilise un bloc de lien de page, qui dispose de ses propres options. Vous disposez de réglages de formatage en ligne, ainsi que de réglages de style de la colonne latérale :
Notez que vous pouvez ajouter des images en ligne, des sous-menus, etc. Cette méthode est plus souple que la méthode classique de création de la navigation. Pour ajouter simplement un élément au menu, cliquez sur l’icône Plus et sélectionnez votre article ou votre page :
Une fois que vous aurez enregistré vos modifications, vous verrez la navigation refléter vos changements. Pour créer d’autres menus, vous pouvez utiliser le lien Actions > Dupliquer sur la page Navigation.
2. Styles
L’écran Styles vous permet de contrôler l’apparence de votre site à un niveau global. La colonne latérale propose quelques palettes et réglages de typographie différents pour différentes conceptions :
En cliquant sur l’une d’entre elles, vous verrez le design en place sur votre site. Cependant, une icône « Crayon » en haut de la colonne latérale vous permet d’effectuer des modifications dans l’éditeur de site :
Chacune des options de la colonne latérale couvre les couleurs, les mises en page, la typographie et même les réglages des ombres. Par exemple, vous pouvez sélectionner des polices pour l’ensemble du site et les appliquer à divers éléments de votre conception :
Si vous allez plus loin dans les menus, vous pourrez souvent jouer avec d’autres options, telles que l’espacement, les couleurs, etc. La section Mise en page vous permet de personnaliser les dimensions de votre zone de contenu principale, ainsi que le remplissage et l’espacement des blocs :
Si vous souhaitez voir à quoi ressemblent ces modifications sans naviguer sur votre site, vous pouvez utiliser l’icône « œil » pour ouvrir le carnet de style. Il s’agit d’un outil de visualisation pratique que les concepteurs apprécieront :
Enfin, même si nous ne nous y attarderons pas ici, vous pouvez également personnaliser l’apparence de chaque bloc de votre site. Par exemple, vous pouvez vous appuyer sur le style global d’un bloc Paragraphe. Une fois encore, lorsque vous aurez terminé, vous pourrez enregistrer vos modifications, qui s’appliqueront à votre site.
Utiliser le fichier theme.json avec WordPress pour l’édition complète du site
Avant de passer à l’écran FSE suivant, vous devez connaître le fichier theme.json. Il s’agit essentiellement de la version développeur des écrans Styles.
Il vous permet de définir les styles par défaut de votre site et de ses blocs, et vous l’utiliserez comme un fichier de configuration. De plus, il utilise le format JSON, ce qui permet d’avoir une expérience moins lourde en termes de code que par le passé.
Enfin, sachez que tout ce que vous pouvez faire dans theme.json, vous pouvez également le faire dans l’Éditeur de site.
3. Pages
L’écran Pages duplique les fonctionnalités des écrans classiques Articles et Pages dans le tableau de bord de WordPress. Par exemple, vous verrez une liste d’états qui filtrent vos pages en Publiées, Planifié, Brouillons et autres :
Chaque page comporte des actions supplémentaires, telles que Modifier, Afficher, Renommer et Supprimer. Vous pouvez également modifier une page à l’aide de l’icône « crayon ». En haut de la liste, vous trouverez un bouton Ajouter une nouvelle page qui fait tout ce qu’il y a à faire.
Si vous utilisez déjà l’éditeur de blocs, ces écrans vous sembleront plus familiers. Cependant, bien que vous disposiez des mêmes fonctionnalités que d’habitude, l’éditeur de site vous offre quelques blocs de thèmes supplémentaires pour vous aider à construire votre site. Ceux-ci couvrent des cas d’utilisation typiques tels que l’ajout d’un logo de site, la navigation, les auteurs, les commentaires, etc :
L’un d’entre eux, le bloc Boucle de requête, peut vous aider à réaliser des tâches que vous auriez souvent besoin de PHP pour accomplir. Par exemple, parce qu’il vous permet d’afficher des articles en fonction de réglages spécifiques, vous pouvez afficher vos derniers articles ou même créer un portfolio. Cependant, rien de tout cela n’est possible sans les deux derniers écrans de l’éditeur de site.
4. Modèles
Les modèles sont un élément essentiel du développement de WordPress. Il s’agit de modèles réutilisables qui vous aident à définir la structure des différentes parties de votre site. Ils nécessitent généralement des connaissances en PHP, mais vous pouvez tous les personnaliser (et en créer de nouveaux) sans code dans l’éditeur de site.
Le travail sur les modèles suit la même approche que pour les articles et les pages : vous utiliserez l’éditeur de site pour ajouter des blocs au modèle, puis vous enregistrerez les modifications. Bien entendu, ces modifications s’appliqueront à toutes les pages qui utilisent le modèle en question.
Pour créer un nouveau modèle, cliquez sur le bouton Ajouter un nouveau modèle:
Un assistant rapide vous permet de sélectionner le type de modèle que vous souhaitez créer et un modèle de bloc approprié pour commencer la conception. Ces modèles font l’objet de notre dernière section.
5. Les compositions
Les compositions de blocs sont des collections apparentées de blocs qui remplissent des rôles spécifiques sur votre site. Par exemple, vous pouvez insérer un modèle d’en-tête comprenant le logo, la navigation et le titre du site :
La création de ces compositions est simple, même si, sans l’éditeur de site, vous devriez les enregistrer à l’aide de PHP. Désormais, vous pouvez utiliser la page Compositions :
Sur le côté gauche, vous verrez tous les modèles disponibles répartis dans des dossiers appelés « types » Ces modèles sont un excellent moyen d’élaborer rapidement un design de site et sont souvent fantastiques.
Le bouton Ajouter une nouvelle composition ouvre l’éditeur et vous permet de créer ces sections vous-même. Cela vous permet de créer des éléments réutilisables pour votre site, ce qui représente une manière durable et intéressée de développer des sites pour vous-même et pour toute autre personne avec laquelle vous travaillez.
Conseils sur l’utilisation de l’édition complète de sites WordPress pour créer des designs
L’édition complète de sites WordPress est un sujet très vaste et nous ne pouvons pas couvrir toutes les possibilités qu’elle offre. Cependant, nous pouvons vous donner quelques conseils pour tirer le meilleur parti de FSE.
Par exemple, vous pouvez exporter vos modèles et styles pour les réutiliser sur d’autres sites. Pour ce faire, accédez à l’éditeur de site pour n’importe quel article ou page, puis cliquez sur le menu Options dans la barre d’outils supérieure. Dans le menu déroulant, choisissez Exporter :
Cela vous donnera un fichier ZIP de votre thème, et si vous avez besoin de l’importer, vous pouvez le faire en utilisant l’extension WordPress Importer.
L’icône de recherche sur les écrans de l’éditeur de site et la barre de recherche dans la barre d’outils de l’éditeur de blocs vous permettent d’accéder à la palette de commandes ou au centre de commandes de WordPress. Si vous utilisez des éditeurs de code, vous comprendrez comment cela fonctionne. C’est un moyen d’accéder à presque n’importe quel endroit de l’éditeur de site à l’aide d’une requête de recherche contextuelle et même d’exécuter des commandes :
L’utilisation de la palette de commandes peut accélérer votre développement et réduire le nombre d’actions que vous devez effectuer au clavier ou à la souris. Vous pouvez ajouter, supprimer et modifier toutes sortes d’éléments du site à partir de cette palette, ainsi que basculer entre différentes vues et travailler avec des modèles.
Résumé
L’édition complète d’un site WordPress représente la manière actuelle de concevoir votre site sans code. Il s’agit d’une avancée significative par rapport aux itérations précédentes de l’édition de contenu, vous offrant un ensemble complet d’options avec lesquelles jouer.
Nous apprécions sa flexibilité : les propriétaires de sites classiques n’auront pas à toucher à une ligne de code et pourront travailler dans les écrans de l’éditeur de site. Les développeurs ont accès au fichier theme.json, que nous aborderons dans un prochain article. Quoi qu’il en soit, nous avons aujourd’hui le summum de la création d’un site WordPress selon vos spécifications exactes.
Voulez-vous commencer à utiliser l’édition complète de site WordPress pour vos projets WordPress ? Laissez-nous savoir ce que vous en pensez dans la section des commentaires ci-dessous !
Laisser un commentaire