Tutoriel pour créer des styles personnalisés exclusifs pour les blocs WordPress Gutenberg

introduire

WordPress Gutenberg Block est une fonctionnalité d'éditeur introduite à partir de WordPress version 5.0 pour rendre l'édition de contenu modulaire et efficace. Pour les développeurs, le bloc Gutenberg est non seulement facile à utiliser, mais prend également en charge l'ajustement des effets d'apparence et d'interaction du bloc à travers des styles et des scripts personnalisés. Cet article vous guidera étape par étape comment créer des styles personnalisés pour les blocs Gutenberg pour améliorer le professionnalisme et l'expérience utilisateur du site Web.

étape

Étape 1: Préparation

Avant de commencer, assurez-vous d'utiliser WordPress 5.0 ou plus, et avoir des connaissances de base CSS et JavaScript, qui vous aideront à mieux comprendre et appliquer des styles personnalisés.

Étape 2: Créez un style personnalisé

La clé des styles personnalisés est de modifier le fichier Functions.PHP du thème et de charger le nouveau fichier CSS dans l'éditeur. Ouvrir des fonctions.php et ajouter le code suivant à la fin du fichier:

 function my_custom_block_style() {
  wp_enqueue_style(
    'my-custom-block-style', // Nom de style
    get_stylesheet_directory_uri() . '/css/my-block-style.css', // Chemin de fichier de style
    array( 'wp-blocks' ),
    filemtime( get_stylesheet_directory() . '/css/my-block-style.css' ) // Actualiser automatiquement le cache
  );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_style' );

Parmi eux, «style-joueur de jet-pied» se trouve le nom du logo du style, que vous pouvez modifier au besoin. Le fichier de style suppose qu'il est placé dans le dossier CSS sous le répertoire de thème, et le nom de fichier est my-block-syle.css. La fonction FileMtime garantit que le navigateur charge automatiquement la dernière version chaque fois que le fichier de style est mis à jour pour éviter les problèmes de cache.

Ensuite, créez "My-Block-Style.css" dans le dossier CSS du thème, et tous les styles personnalisés sont écrits dans le fichier.

Étape 3: sélectionnez le bloc et ajoutez le style

Une fois le fichier de style prêt, ouvrez l'éditeur WordPress et ajoutez ou sélectionnez le bloc que vous souhaitez personnaliser. Trouvez la fonction Ajouter un style personnalisé dans les paramètres de bloc et entrez le sélecteur CSS pour le bloc correspondant.

Par exemple, pour modifier la couleur du texte d'un bloc de paragraphe, vous pouvez écrire:

 .wp-block-paragraph {
  color: red;
}

".wp-block-paragraph" est le nom de classe CSS par défaut pour les blocs de paragraphe. Pour styliser plusieurs blocs, entrez plusieurs sélecteurs en même temps dans la zone de sélecteur, et le style sera appliqué à tous les blocs correspondants.

Étape 4: Enregistrer les modifications

Après avoir terminé l'entrée de style, cliquez sur le bouton "Ajouter le style" pour enregistrer. Actualisez l'éditeur et vous verrez que le bloc sélectionné a un style personnalisé appliqué à l'apparence du site Web.

Résumer

La personnalisation des blocs WordPress Gutenberg devient flexible et puissante en introduisant CSS personnalisé dans des fichiers de thème et en style pour des blocs spécifiques. En maîtrisant les compétences ci-dessus, vous pouvez facilement créer des modules de contenu uniques pour améliorer le professionnalisme et l'expérience utilisateur du site Web. J'espère que cet article vous sera utile dans la conception du style des blocs de Gutenberg.