Faire ressembler l'éditeur WordPress Block à la conception frontale

Faites l'apparence de l'éditeur de blocs WordPress cohérent avec la conception frontale!

En tant qu'utilisateur WordPress, avez-vous souvent besoin d'ouvrir deux onglets en même temps pour l'édition d'articles? Un onglet montre le nouvel éditeur de bloc Gutenberg, et l'autre prévisualise l'effet frontal de l'article pour s'assurer que le rendu final n'est pas faux?

Les styles de thème WordPress affectent uniquement l'avant du site Web, et les éditeurs backend sont généralement très différents de l'avant. Mais ce n'est pas immuable! Avec une feuille de style personnalisée, vous pouvez faire en sorte que l'éditeur WordPress reflète le look frontal presque parfaitement.

Cela ne prend que deux étapes simples:

1. Ajoutez quelques lignes de code PHP au fichier functions.php du thème pour informer l'éditeur pour charger la feuille de style personnalisée.
2. Créez et configurez cette feuille de style personnalisée.

Commençons!

Étape 1: Modifiez functions.php

Si vous utilisez un thème WordPress non développé, il est fortement recommandé de créer un sous-thème avant d'apporter des modifications sur le thème principal.

Ouvrez le fichier functions.php du thème (généralement situé dans le répertoire racine du dossier du thème) et ajoutez le code suivant à la fin du fichier:

 // Gutenberg Custom Stylesheet Add_Theme_Support ('Editor-Styles');
add_editor_style ('editor-tyle.css'); // Assurez-vous que le chemin pointe correctement vers le fichier de feuille de style

Ce code indique WordPress que vous prenez en charge l'utilisation de styles de style personnalisés pour travailler avec Gutenberg et spécifie l'emplacement du fichier de feuille de style ( editor-style.css ).

Étape 2: Écrivez le style CSS

Maintenant, nous entrons dans le processus d'écriture CSS.

En raison de la grande variété de thèmes WordPress, il est impossible d'écrire une feuille de style qui fonctionne pour tous les thèmes. L'exemple suivant est basé sur les sujets utilisés par mon site Web et, espérons-le, vous aidera à comprendre comment créer des feuilles de style pour votre site Web. À la fin de l'article, un modèle sera fourni pour vous aider à démarrer rapidement.

Créez un nouveau fichier nommé editor-style.css et placez-le dans le répertoire racine du thème (ou du répertoire de thème enfant).

Le style CSS de l'éditeur de blocs est légèrement différent du CSS standard. Par exemple, le code suivant ne peut pas appliquer correctement la taille du texte dans un article:

 H2 {
  taille de police: 1.75EM;
}

Pour définir correctement le style, vous devez localiser les blocs dans l'éditeur de blocs. Cela signifie<h2></h2> Les éléments doivent être étendus à l'aide de .rich-text.block-editor-rich-text__editable Classe:

 H2.rich-text.block-éditor-rich-text__editable {
  taille de police: 1.75EM;
}

J'ai créé un fichier CSS de base qui suit ce modèle pour styliser les éléments de l'éditeur de bloc commun. Vous pouvez obtenir le fichier de GitHub et remplacer le style pour correspondre à votre thème.

Je n'élargirai pas le processus de construction de feuille de style en détail ici, mais le modèle devrait vous donner une idée claire. Un bon point de départ consiste à copier des éléments de votre feuille de style frontal, mais vous devrez peut-être modifier certaines classes d'éléments afin qu'elles s'appliquent à la fenêtre de l'éditeur de blocs.

En cas de doute, utilisez l'outil de développeur du navigateur pour vérifier les éléments et déterminer leur nom de classe correspondant. Les modèles pour les liens ci-dessus devraient couvrir la plupart des éléments.

Affichage d'effet

Tout d'abord, jetons un coup d'œil à l'éditeur WordPress sans feuille de style personnalisée:

Ensuite, comparez mon site Web de test front-end:

La différence entre les deux est significative, non? Mon site de test utilise de nombreux gradients, des polices personnalisées, des styles de bouton et des blocs de référence, et le conteneur n'est pas un simple carré.

Qu'on le veuille ou non, vous conviendrez que c'est une grande différence par rapport à l'interface utilisateur de l'éditeur Gutenberg par défaut. C'est pourquoi j'ai besoin d'ouvrir une page d'onglet séparément pour prévisualiser l'article.

Maintenant, chargeons le style personnalisé et voyons l'effet:

Regarder! L'interface utilisateur de l'éditeur ressemble maintenant à la même chose que l'avant de mon site Web. La largeur du contenu, la police, la couleur et divers éléments sont cohérents avec l'extrémité avant. J'ai même le même beau fond que le titre de l'article!

Cela signifie - il n'est plus nécessaire de prévisualiser dans un autre onglet. N'est-ce pas cool?

Garder WordPress Editor cohérent avec l'apparence frontale peut améliorer considérablement l'efficacité. Pour moi, changer fréquemment des onglets pour afficher les effets frontaux lorsque les articles de modification interrompent ma réflexion, donc je préfère éviter cela.

J'espère que les étapes ci-dessus peuvent vous aider à atteindre le même effet!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!