Vous avez toujours souhaité pouvoir créer vos propres boutons de mise en forme dans WordPress, comme un style de note spécial ou un format de citation de marque ? C'est exactement ce que font les styles personnalisés.
J'ai passé beaucoup de temps à tester différentes approches pour les styles personnalisés dans WordPress, des simples ajouts CSS aux solutions plus avancées.
Cette expérience m'a aidé à identifier les moyens les plus pratiques d'améliorer votre éditeur avec des options de mise en forme personnalisées que toute personne de votre équipe peut utiliser.
Aujourd'hui, je vais vous expliquer comment ajouter des styles personnalisés à votre éditeur visuel WordPress. Vous apprendrez ce que sont les styles personnalisés, pourquoi ils sont utiles, et des instructions étape par étape pour les ajouter à votre site, le tout basé sur mon expérience de test réelle.✨
💡 Résumé rapide : La meilleure façon d'ajouter des styles personnalisés
La manière la plus efficace d'ajouter des styles personnalisés à l'éditeur de blocs WordPress est d'ajouter un extrait de code PHP à votre site. Cela vous permet d'enregistrer de nouvelles variations de style pour des blocs tels que les boutons, les titres et les citations.
Pour la méthode la plus sûre et la plus simple, je recommande d'utiliser le plugin WPCode pour insérer le code. Cela évite le risque de modifier directement le fichier functions.php de votre thème.
Voici un bref aperçu de ce que je vais couvrir dans cet article :
- Que sont les styles personnalisés et comment ils peuvent changer votre façon d'utiliser WordPress
- Comment ajouter des styles personnalisés à l'éditeur visuel WordPress (éditeur de blocs)
- Bonus : Comment ajouter des styles personnalisés aux widgets WordPress
- Questions fréquemment posées sur les styles personnalisés
Plongeons maintenant dans le vif du sujet !
Que sont les styles personnalisés et comment ils peuvent changer votre façon d'utiliser WordPress
En termes simples, un style personnalisé est un raccourci de mise en forme prédéfini dans l'éditeur WordPress.
Il résout le problème de l'ajustement manuel des polices, des couleurs et des mises en page chaque fois que vous créez du contenu, ce qui peut prendre du temps et entraîner des incohérences.
Par exemple, vous pouvez créer une police personnalisée pour les titres, choisir une couleur d'arrière-plan pour les blocs d'appel à l'action, ou appliquer un style cohérent pour les témoignages.
Considérez cela comme un modèle pour les éléments de design. Au lieu d'ajuster manuellement le rembourrage, les polices ou les couleurs à chaque fois, vous choisissez votre style personnalisé et il applique instantanément votre design préféré.
Par exemple, disons que vous gérez un blog d'entreprise et que vous incluez toujours une recommandation de produit ou un avertissement à la fin de vos articles. Au lieu de le styliser à chaque fois, vous pourriez créer un style personnalisé appelé « Conseil Produit » ou « Note Importante » et l'appliquer instantanément.
Cela vous fait gagner du temps et garantit que tout reste soigné, surtout si vous travaillez en équipe ou publiez beaucoup de contenu.
Cela dit, examinons comment ajouter facilement des styles personnalisés à l'éditeur visuel de WordPress.
Comment ajouter des styles personnalisés à l'éditeur visuel WordPress (éditeur de blocs)
Si vous souhaitez ajouter des styles personnalisés dans l'éditeur de blocs, la méthode la plus efficace consiste à utiliser du code PHP. Mais gardez à l'esprit que cette approche convient mieux aux utilisateurs intermédiaires de WordPress.
C'est parce que vous devrez modifier le fichier functions.php de votre thème, et même la plus petite erreur peut casser votre site. Cela dit, vous pouvez utiliser un plugin convivial pour simplifier le processus.
Je recommande toujours WPCode pour ce type de personnalisation. À mon avis, c'est le meilleur plugin d'extraits de code WordPress sur le marché. Je l'ai testé minutieusement et j'ai trouvé que c'était le moyen le plus simple et le plus sûr d'ajouter du code personnalisé sans risque d'erreurs.
Pour en savoir plus, consultez la critique complète de WPCode de mon équipe.
📌 Note importante : Quel que soit votre niveau de compétence, je vous recommande toujours de créer une sauvegarde complète de votre site avant de modifier un code important. Consultez notre guide sur comment sauvegarder votre site WordPress pour savoir comment procéder.
Gardez à l'esprit que l'extrait de code que j'utiliserai est configuré par défaut pour ajouter des styles personnalisés au bloc Bouton. Mais avec quelques ajustements mineurs, vous pouvez facilement l'utiliser pour prendre en charge d'autres blocs comme :
- 🔷 Titres avec des styles fantaisistes ou contournés
- 💬 Blocs de citation, de citation en retrait et de vers
- 🗂️ Blocs d'archives ou de catégories
- ➕ Et plus
Cela vous donne beaucoup de flexibilité pour concevoir des styles réutilisables sur l'ensemble de votre site.
Tout d'abord, vous devez installer et activer le plugin WPCode. Si vous avez besoin d'aide, consultez notre guide pour débutants sur comment installer un plugin WordPress.
📌 Note : WPCode propose également un plan gratuit que vous pouvez utiliser. Cependant, passer à la version pro vous donne accès à des fonctionnalités telles qu'une bibliothèque cloud de snippets de code, une fonctionnalité de snippet de bloc, une logique conditionnelle intelligente, et plus encore.
Une fois le plugin activé, rendez-vous sur la page Snippets de code » +Ajouter un snippet depuis le tableau de bord. Ici, cliquez sur le bouton « Utiliser un snippet » sous l'option « Ajouter votre code personnalisé (Nouveau snippet) ».
Cela vous dirigera vers la page « Créer un snippet personnalisé », où vous devrez nommer votre snippet de code. Ce nom servira uniquement à votre identification et ne sera visible par aucun utilisateur.
Ensuite, choisissez Snippet PHP dans l'invite qui apparaît après avoir cliqué sur l'option « Type de code » dans le coin droit.
Après cela, si vous souhaitez créer un style personnalisé pour un bouton, ajoutez le code personnalisé suivant dans la boîte « Aperçu du code ».
// Function to enqueue and register styles for both frontend and editor
function my_custom_button_styles() {
// Register the style only once
wp_register_style(
'my-custom-button-styles',
false
);
// Add inline styles
wp_add_inline_style(
'my-custom-button-styles',
<<<CSS
.is-style-fancy-button .wp-block-button__link {
background-color: #f0c040;
color: #fff;
border: none;
border-radius: 15px;
padding: 10px 20px;
}
.is-style-outline-button .wp-block-button__link {
background-color: transparent;
color: #333;
border: 2px solid #333;
border-radius: 5px;
padding: 10px 20px;
}
CSS
);
// Enqueue the style for both frontend and editor
wp_enqueue_style('my-custom-button-styles');
}
// Function to add custom styles for Gutenberg editor
function my_custom_gutenberg_button_styles() {
// Call the general styles function for the editor
my_custom_button_styles();
// Enqueue inline script for the editor to register block styles
wp_add_inline_script(
'wp-blocks',
<<<JS
wp.domReady(function() {
wp.blocks.registerBlockStyle('core/button', {
name: 'fancy-button',
label: 'Fancy Button'
});
wp.blocks.registerBlockStyle('core/button', {
name: 'outline-button',
label: 'Outline Button'
});
});
JS
);
}
// Hook the styles function to frontend
add_action('wp_enqueue_scripts', 'my_custom_button_styles');
// Hook the custom block style registration
add_action('enqueue_block_editor_assets', 'my_custom_gutenberg_button_styles');
Ce snippet de code ajoute deux styles personnalisés au bloc Boutons dans WordPress.
L'avantage est que vous pouvez adapter ce code pour créer des styles pour d'autres blocs également. Cependant, cela demande un peu plus que de simplement remplacer le mot « bouton ». Pour que cela fonctionne correctement, vous devez mettre à jour deux parties clés du code :
- Le nom du bloc (slug) : Dans la partie JavaScript du code, vous trouverez
'core/button'. C'est le nom officiel du bloc Bouton de WordPress. Vous devez le remplacer par le slug du bloc que vous souhaitez styliser (par exemple,'core/heading'). - Les sélecteurs CSS : Le code CSS (comme
.is-style-fancy-button .wp-block-button__link) est spécifiquement écrit pour le HTML du bloc Bouton. D'autres blocs ont une structure différente, vous devrez donc écrire de nouvelles règles CSS pour les cibler correctement.
Vous pouvez également ajuster le CSS pour changer la couleur d'arrière-plan, modifier le rayon des bordures et apporter d'autres modifications de style pour répondre à vos besoins.
💡 Astuce d'expert : Si vous hésitez à personnaliser le code vous-même, un assistant IA comme ChatGPT peut être un bon point de départ. Cependant, pour obtenir le code correct, il faut lui donner une instruction très claire et détaillée.
Par exemple, au lieu d'une demande simple, vous pourriez fournir une instruction comme celle-ci :
Here is a PHP, CSS, and JS snippet that adds custom styles to the 'core/button' block in WordPress. Please adapt it to target the 'core/heading' block instead. The new style should be named 'Green Highlight' and it should add a light green background color.
Cependant, je recommande de toujours tester le code généré par l'IA sur un site de staging avant de l'ajouter à votre site web en direct. Cela vous permet de détecter toute erreur potentielle sans risque.
Maintenant, allez-y et basculez le commutateur « Inactif » sur « Actif ».
Enfin, cliquez sur le bouton « Enregistrer le snippet » pour enregistrer vos modifications.
Ensuite, ouvrez un article dans l'éditeur de blocs et ajoutez le bloc pour lequel vous avez ajouté des styles personnalisés.
Par exemple, si vous avez ajouté des styles personnalisés pour le bloc Boutons, allez-y et insérez-le dans votre article.
Une fois que vous avez fait cela, vous verrez les styles personnalisés disponibles dans la section « Styles » du panneau de bloc.
Après cela, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos modifications.
Ensuite, visitez votre site Web WordPress pour voir les styles personnalisés en action.
Bonus : Comment ajouter des styles personnalisés aux widgets WordPress
Maintenant que vous avez appris à ajouter des styles personnalisés à l'éditeur visuel de WordPress, examinons une autre personnalisation utile : l'ajout de styles personnalisés aux widgets WordPress.
La personnalisation des widgets avec des couleurs, des polices ou des mises en page uniques permet de s'assurer qu'ils correspondent à la conception globale de votre site, améliorant ainsi l'expérience utilisateur.
La manière la plus simple d'ajouter des styles personnalisés aux widgets WordPress est d'utiliser un extrait de code CSS, que vous pouvez ajouter avec un plugin comme WPCode.
Vous pouvez simplement ajouter du CSS personnalisé qui cible des widgets spécifiques et ajuster des éléments tels que la taille des polices, les couleurs d'arrière-plan, le rembourrage, et même les bordures.
C'est parfait pour vous assurer que vos widgets correspondent à votre design général sans avoir à devenir trop technique.
Pour commencer, consultez notre tutoriel sur comment ajouter des styles personnalisés aux widgets WordPress.
Questions fréquemment posées sur les styles personnalisés
Voici quelques questions fréquemment posées par nos lecteurs concernant l'ajout de styles personnalisés à l'éditeur visuel de WordPress :
Puis-je ajouter des styles personnalisés sans utiliser de plugin ?
Oui, il est possible d'ajouter le code directement dans le fichier functions.php de votre thème. Cependant, je déconseille fortement cette méthode pour les débutants.
Une petite erreur dans ce fichier peut faire planter votre site, et vos personnalisations seront perdues lors de la mise à jour de votre thème. L'utilisation de WPCode est l'approche la plus sûre et la plus fiable.
Ces styles personnalisés fonctionneront-ils avec n'importe quel thème WordPress ?
Généralement, oui. Le code utilisé dans ce tutoriel enregistre les styles auprès de l'éditeur principal de WordPress, il devrait donc être compatible avec n'importe quel thème moderne et bien codé.
Dans de rares cas, un thème avec un CSS très agressif ou mal écrit pourrait remplacer vos styles personnalisés, mais ce n'est pas courant.
Comment trouver le nom (slug) correct pour d'autres blocs que je souhaite styliser ?
Un moyen simple de trouver le slug d'un bloc est d'aller dans l'éditeur WordPress, de sélectionner le bloc qui vous intéresse, puis de cliquer sur le menu à trois points dans la barre d'outils du bloc.
Tout en bas de ce menu, cliquez sur « Copier le type de bloc ». Cela copiera le slug du bloc (par exemple, core/image, core/quote) dans votre presse-papiers, que vous pourrez ensuite coller dans l'extrait de code.
Puis-je créer plus de deux styles personnalisés pour le même bloc ?
Absolument. Dans la partie JavaScript de l'extrait de code, vous pouvez simplement dupliquer la fonction wp.blocks.registerBlockStyle(...) pour chaque nouveau style que vous souhaitez ajouter.
Assurez-vous simplement de donner à chacun un nom et une étiquette uniques. Vous devrez également ajouter des règles CSS correspondantes pour chaque nouveau style que vous enregistrez.
J'espère que cet article vous a aidé à apprendre comment ajouter des styles personnalisés dans l'éditeur visuel de WordPress. Vous voudrez peut-être aussi consulter notre guide pour débutants sur comment créer un bloc WordPress personnalisé et notre comparaison entre le padding et la marge dans WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Toufic Ahemmed
Ces gars sont géniaux. ils m'aident la plupart du temps. merci beaucoup.
Support WPBeginner
Glad we could help
Admin
Aslan French
Cet article devrait être mis à jour en tenant compte de Gutenberg, car ce type de fonctionnalité a été récemment ajouté à l'API Rich Text.
Support WPBeginner
Salut Aslan,
Merci pour la suggestion. Nous examinerons certainement les anciens articles une fois que Gutenberg sera disponible.
Admin
Mehrdad
Merci beaucoup.
Cet article m'a vraiment aidé.
sabbi
Cela ajoute des classes à une balise p, n'est-ce pas ?
Existe-t-il un moyen de créer ses propres balises ?
Ou une autre chose : un Format personnalisé choisi écrasera-t-il une balise h précédemment choisie par un p ? Il serait nécessaire d'éviter qu'un client ne se retrouve en difficulté lorsqu'il clique sur les styles par défaut ET personnalisés.
Britany
Malheureusement, cela ne m'a pas du tout aidé. Existe-t-il un article qui explique ce que signifient chacun des champs que vous devez remplir ?
Tout ce dont j'ai besoin, c'est d'un moyen d'appliquer le même formatage aux citations sur les pages de notes de mon podcast. Chaque citation a la même police (que j'ai configurée comme style de titre), en gras et centrée.
Je me lasse d'appliquer manuellement chaque partie du format à chaque citation et je voudrais juste un moyen de cliquer sur un bouton et d'avoir terminé.
Syams
S'il vous plaît, dites-moi comment ajouter une nouvelle police à l'éditeur visuel de WP.
Moya Nicholson
Merci. Vraiment utile.
stanley
Je dois modifier mon thème WP
Aidez-moi s'il vous plaît
Sandy Connolly
MERCI POUR CECI !!! OMG !!!! Tellement utile lors de la remise d'un site à un client qui souhaite pouvoir ajouter son propre contenu basé sur notre conception !
Marcin
Bonjour, je développe des WordPress tous les jours et je fais tout avec WP, mais ce morceau de code est l'un des plus utiles que j'ai vus depuis longtemps… C'est exactement ce qui manquait au WYSIWYG par défaut (maintenant je peux dire : manquait) ! Il permet de faire des choses étonnantes dans le champ de contenu. Merci de partager !
Foxglove
J'utilise ce plugin depuis un moment, mais il n'est plus disponible sur wordpress.org — apparemment, il n'est plus mis à jour ni pris en charge. Quelqu'un est-il au courant d'alternatives autres que la méthode manuelle que vous décrivez ?
Lisa McMahon
Voici une version mise à jour/forkée du plugin original mentionné dans l'article : TinyMCE Custom Styles
Support WPBeginner
Salut Lisa, merci de l'avoir signalé. Nous avons mis à jour l'article avec la version mise à jour/forkée.
Admin
Shubha Das
Je veux ajouter p au lieu de span. Mais quand je change le nom du bloc span en p, ça ne fonctionne pas.
‘title’ => ‘Note’, ‘block’ => ‘p’, ‘classes’ => ‘note’, ‘wrapper’ => true,
MacKenzie
J'ai trouvé cela vraiment utile et j'ai l'impression d'y être presque, mais ça ne fonctionne pas encore tout à fait. Mon texte est correctement balisé avec les balises span et class dans l'éditeur lorsqu'il est sélectionné – mais aucun des styles que j'ai mis dans la feuille de style ne s'applique à la note publiée.
Frank
Je deviens toujours nerveux et j'ai l'impression de vomir si un client a besoin de retouches WordPress. Cool, cette liste déroulante de styles MAIS, comme quelqu'un l'a dit auparavant, complètement inutile si les styles ne peuvent pas être retirés par la suite et s'ajoutent, s'ajoutent, s'ajoutent…
J'ai l'habitude de ces solutions à moitié cuites dans WordPress – normalement, il y a aussi une solution complémentaire à moitié cuite pour réparer la première. Mais ici ?
Comment suggéreriez-vous DE SUPPRIMER LES STYLES PERSONNALISÉS ajoutés via le menu déroulant des styles. La vue de code n'est en aucun cas acceptable pour mon client ?
Je serais incroyablement chanceux si quelqu'un avait trouvé un moyen de faire cela et partageait cette connaissance (et pour avoir mis la catastrophe appelée WordPress hors de ma portée pour (j'espère) très longtemps).
Merci beaucoup d'avance !
Frank
Chris
Cliquez à nouveau sur le style dans le menu déroulant. Fait.
Shafi ken
Merci pour ce tutoriel utile. Merci
K Shazzad
Whole tutorial worked flawlessly for me. Thanks a bunch
Stef
J'ai essayé ce plugin mais j'ai réalisé que lorsque vous modifiez un style personnalisé, il ne met pas à jour ceux que vous avez déjà insérés. Vous devez revenir en arrière et les réinsérer, car la fonctionnalité ajoute le style en ligne et non via une feuille de style.
Phil
Merci pour le tutoriel utile. Y a-t-il une pénalité de performance à utiliser le plugin plutôt qu'à le coder à la main ? Merci,
Support WPBeginner
Non, mais pour réutiliser des éléments, cette méthode est très pratique. Elle est également utile si vous construisez un site pour un client et que vous souhaitez qu'il puisse ajouter des éléments depuis l'éditeur visuel.
Admin
Sei
Merci pour le tutoriel !
Y a-t-il un moyen d'ajouter deux balises à la fois ? Par exemple, obtenir quelque chose comme du texte
Sei
D'accord, vos commentaires convertissent le HTML. Je veux dire, j'aimerais obtenir les balises 'h1' et 'span' autour de mon texte en cliquant sur un seul style.
Lily
J'ai réussi à créer les classes personnalisées et les éléments s'affichent avec les bonnes classes dans l'éditeur de texte et sur la page, mais la classe n'est pas appliquée dans l'éditeur visuel, ce qui rend très peu clair si cela a fonctionné ou non pour l'utilisateur. Y a-t-il un moyen de résoudre ce problème ?
Bonnie Dasher-Andersen
J'ai ajouté deux styles personnalisés. Lorsque je vais modifier une page, j'ai deux menus Format, chacun avec les mêmes entrées (les deux styles que j'ai créés). Lorsque j'essaie d'appliquer ces styles, rien ne se passe. Je peux voir la balise dans la vue Texte, mais lorsque je visualise la page, le style n'a pas été appliqué.
Des suggestions ? J'ai besoin de résoudre ce problème pour un client qui mettra à jour ce site WP et qui n'est pas très doué.
Marcello
J'ai eu le même problème, où les balises n'étaient pas appliquées au code. Je l'ai résolu en réglant 'wrapper' sur 'false'. Je ne connais pas les raisons techniques, j'ai juste testé et ça a fonctionné. J'espère que ça aidera !
hugotom
J'ai eu le même problème que la feuille de style n'est pas enregistrée.
Solution
Si vous avez déjà ces feuilles de style d'enregistrement dans le fichier functions.php, vous devriez ajouter directement là la feuille de style custom-editor-style.css
Exemple :
function styles_theme(){ wp_enqueue_style(‘bootstrap_css’, get_template_directory_uri() . ‘/sources/bootstrap/bootstrap.min.css’); wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘/style.css’); wp_enqueue_style(‘theme_css’, get_template_directory_uri() . ‘/custom/css/theme.css’); wp_enqueue_style(‘editor_css’, get_template_directory_uri() . ‘/custom-editor-style.css’); // ICI };
Raphael Landau
Je l'ai utilisé et j'ai également eu le problème où le style/la classe est appliqué à l'ensemble du paragraphe. C'est parce que vous avez défini le format de style comme « bloc ». (‘block’ => ‘span’,).
En consultant rapidement le codex officiel de Wordpress, on découvre beaucoup plus d'options pour le formatage des styles.
http://codex.wordpress.org/TinyMCE_Custom_Styles
Comme span est un style en ligne par défaut, vous devriez remplacer « block » par « inline », et voilà ! Votre style devrait fonctionner comme prévu.
donc en bref :
array(
‘title’ => ‘Votre titre’,
‘inline’ => ‘span’,
‘classes’ => ‘votre-classe’,
‘wrapper’ => true,
),
nemaha
Salut,
super tutoriel, merci pour ça ! J'ai aussi le problème que le style (un span) est appliqué à tout le paragraphe. Ce que j'ai l'intention de faire : écrire un titre et le formater comme un titre 1, puis marquer un seul mot spécifique dans ce titre pour ajouter un style personnalisé. Des nouvelles sur la façon de résoudre ce problème ? Merci !
bekee
j'ai aussi le problème où le style s'applique à tout le paragraphe, pas seulement à l'élément sélectionné. une mise à jour à ce sujet ? merci !
Debbie
J'ai le même problème. Je sélectionne un mot, mais l'effet s'applique à tout le paragraphe.
James
Je rencontre quelques problèmes. Cela semble fonctionner, mais pas comme prévu. Ne conviendra pas à quelqu'un qui ne connaît pas le code.
1. Mettez en surbrillance un seul mot dans un paragraphe pour ajouter un mais le est ajouté à l'intégralité du paragraphe, pas seulement au mot mis en surbrillance.
2. Aucun moyen de supprimer le css sans modifier le code. Mon client ne fait pas de code ! J'ai même essayé de créer une classe .rien mais la nouvelle classe n'est ajoutée qu'à d'autres, elle ne remplace pas la classe existante.
L'équipe de WPBeginner
Consultez notre guide sur la façon de résoudre les problèmes d'image courants dans WordPress.
Sheikh Zuhaib Siddiqui
Salut, j'ai une erreur dans l'ajout de médias. Lorsque j'essaie de télécharger un média, il continue de charger et aucun média ne s'affiche et je ne peux pas télécharger de médias... Dites-moi quelle est l'erreur ???
Mais cela fonctionne bien... juste une erreur dans l'outil de téléchargement de médias. s'il vous plaît, donnez-moi cette solution.
Marlice
Salut. Merci pour ce super tutoriel. J'ai un problème avec le contenu qui est déjà dans l'éditeur. Si je marque un mot ou une partie de texte et que je choisis un style (par exemple "bouton bleu" – de votre code), il n'enveloppe pas seulement le mot ou la partie de texte marquée. Au lieu de cela, il marque tout le contenu et y place un span avec la classe .bouton bleu. Je l'ai essayé plusieurs fois avec d'autres pages et publications – toujours la même chose : si le contenu était déjà là et que je le marquais, alors tout le contenu recevait la classe span. Cela n'arrive pas si j'enveloppe un nouveau texte édité dans la page/publication – alors tout fonctionne bien. Est-ce que quelqu'un d'autre a ce phénomène ?
Merci,
Ute
John-Henry Ross
Bonjour. J'ai essayé cette méthode et elle fonctionne à merveille, exactement ce que je cherchais, merci. Je veux juste savoir s'il existe un moyen d'ajouter des styles à un sous-dossier au lieu de simplement les ajouter sous un bouton de format. Par exemple, ajouter un sous-dossier d'en-têtes avec tous les styles d'en-têtes, ajouter un sous-menu div avec les styles div, etc.
dave
Merci !
C'est super de montrer 2 méthodes aussi... mes clients se recroquevillent de peur à l'idée de manipuler du code.
I will sometimes use custom fields to “force” safe additional styles, but the TinyMCE can be handled by some people, so I’ll kee that in mind.
Ciao, Dave
L'équipe de WPBeginner
vous n'avez pas besoin d'ajouter le point
classes’ => ‘.alert-blue’,
Il devrait être
classes’ => ‘alert-blue’,
Jeff Gaudette
Malheureusement, cela n'a pas fonctionné. J'ai supprimé le point, mais rien ne s'applique toujours dans l'éditeur. Je sais que vous n'êtes pas un service d'assistance, mais voici une capture d'écran si vous êtes intéressé : http://screencast.com/t/JI0zMvcH
Merci pour tout ce que vous publiez !
L'équipe de WPBeginner
Pouvez-vous coller le code que vous avez ajouté dans votre fichier functions.php. Collez également le CSS que vous utilisez pour ces boutons.
Jeff Gaudette
Bien sûr. Fonctions :
/*
* Fonction de rappel pour filtrer les paramètres MCE
*/
function my_mce_before_init_insert_formats( $init_array ) {
// Définir le tableau style_formats
$style_formats = array(
// Chaque enfant de tableau est un format avec ses propres paramètres
array(
‘title’ => ‘Alerte’,
‘block’ => ‘span’,
‘classes’ => ‘entry p.alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Alerte Bleue’,
‘block’ => ‘p’,
‘classes’ => ‘alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Bouton Bleu’,
‘block’ => ‘span’,
‘classes’ => ‘alert-blue-button’,
‘wrapper’ => true,
),
);
// Insérer le tableau, ENCODÉ EN JSON, dans ‘style_formats’
$init_array[‘style_formats’] = json_encode( $style_formats );
return $init_array;
}
// Attacher la fonction de rappel à ‘tiny_mce_before_init’
add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );
CSS
.alert-blue { background: none repeat scroll 0 0 #E7F4FD; border: 1px solid #C5D7E3; color: #3A5971; font-size: 18px; line-height: 24px; text-align: center; margin: 0 0 15px !important; padding: 15px 25px; width: auto; }
L'équipe de WPBeginner
Avez-vous ajouté le CSS dans votre feuille de style ?
Assurez-vous que les règles de style que vous ajoutez dans votre CSS correspondent aux classes que vous ajoutez dans la fonction de rappel pour filtrer les paramètres MCE.
Kemi O
TinyMCE Advanced Professsional Formats and Styles n'est pris en charge que jusqu'à la version WP 3.6.1
Keely Worth
J'évite l'éditeur visuel comme la peste ! Je ne l'utilise que si je dois passer à un autre pour utiliser un bouton de shortcode intégré au thème. Sinon – je ne l'utilise jamais.
Blair2004
J'ai essayé la première méthode, de nouveaux styles sont disponibles mais, lorsque j'en sélectionne un, rien ne se passe...
Jeff Gaudette
J'essaie de faire cela avec un bloc et je n'ai pas de succès. Le code est :
array(
‘title’ => ‘Alerte Bleue’,
‘block’ => ‘p’,
‘classes’ => ‘.alert-blue’,
‘wrapper’ => true,
),
Cela fonctionne lorsque j'utilise span, mais cela nécessite une classe span, que je ne peux pas utiliser.
Lorsque j'utilise le code ci-dessus, rien ne se passe dans l'éditeur wp. Je sélectionne le texte, je clique sur l'option de formatage Alert Blue et rien ne se passe : http://screencast.com/t/dijujZ2ZdqBy
Des conseils ?