Voulez-vous créer votre propre menu déroulant de styles personnalisés ? Bien qu'il existe probablement un plugin pour cela, nous avons créé un extrait de code rapide que vous pouvez utiliser pour créer un menu déroulant de styles personnalisés dans l'éditeur visuel TinyMCE.
Instructions :
Tout ce que vous avez à faire est d'ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique au site :
function themeit_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );
function themeit_tiny_mce_before_init( $settings ) {
$settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,';
$style_formats = array(
array( 'title' => 'Button', 'inline' => 'span', 'classes' => 'button' ),
array( 'title' => 'Green Button', 'inline' => 'span', 'classes' => 'button button-green' ),
array( 'title' => 'Rounded Button', 'inline' => 'span', 'classes' => 'button button-rounded' ),
array( 'title' => 'Other Options' ),
array( 'title' => '½ Col.', 'block' => 'div', 'classes' => 'one-half' ),
array( 'title' => '½ Col. Last', 'block' => 'div', 'classes' => 'one-half last' ),
array( 'title' => 'Callout Box', 'block' => 'div', 'classes' => 'callout-box' ),
array( 'title' => 'Highlight', 'inline' => 'span', 'classes' => 'highlight' )
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Remarque : Si c'est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur comment copier / coller correctement des extraits de code dans WordPress, afin de ne pas casser accidentellement votre site.
Si vous avez aimé cet extrait de code, veuillez envisager de consulter nos autres articles sur le site comme : 46 des plus grandes marques au monde utilisant activement WordPress et comment créer un formulaire d'inscription d'utilisateur personnalisé dans WordPress.
Ne semble plus fonctionner. Je viens d'ajouter ceci, rien ne s'est passé dans mon MCE. Peut-être un conflit avec mon thème/constructeur de page ? (Madrigal/WPBakery)
Désolé de déterrer un vieux post, mais y a-t-il un moyen de faire cela et de créer 2 menus déroulants 'Format' séparés ? J'aimerais un contenant des options P et un contenant des options de couleur si possible.
Merci BEAUCOUP pour cela. J'utilisais un autre extrait de code pour le même effet, mais après la mise à niveau vers WP avec le nouveau plugin TinyMCE, ce code ne fonctionnait plus. J'ai essayé ceci, et ça fonctionne toujours.
J'apprécie.
Parfait, heureux d'apprendre que cet extrait TinyMCE a pu vous aider !
Merci BEAUCOUP pour cela. J'utilisais un autre extrait de code pour le même effet, mais après la mise à niveau vers WP avec le nouveau plugin TinyMCE, ce code ne fonctionnait plus. J'ai essayé ceci, et ça fonctionne toujours.
J'apprécie.
Merci BEAUCOUP pour cela. J'utilisais un autre extrait de code pour le même effet, mais après la mise à niveau vers WP avec le nouveau plugin TinyMCE, ce code ne fonctionnait plus. J'ai essayé ceci, et ça fonctionne toujours.
J'apprécie.
Merci BEAUCOUP pour cela. J'utilisais un autre extrait de code pour le même effet, mais après la mise à niveau vers WP avec le nouveau plugin TinyMCE, ce code ne fonctionnait plus. J'ai essayé ceci, et ça fonctionne toujours.
J'apprécie.
Merci BEAUCOUP pour cela. J'utilisais un autre extrait de code pour le même effet, mais après la mise à niveau vers WP avec le nouveau plugin TinyMCE, ce code ne fonctionnait plus. J'ai essayé ceci, et ça fonctionne toujours.
J'apprécie.
Merci BEAUCOUP pour cela. J'utilisais un autre extrait de code pour le même effet, mais après la mise à niveau vers WP avec le nouveau plugin TinyMCE, ce code ne fonctionnait plus. J'ai essayé ceci, et ça fonctionne toujours.
J'apprécie.
Excellent post Kevin, merci. Y a-t-il un moyen de supprimer les styles dans l'éditeur, un peu comme l'utilisateur peut cliquer sur le bouton supprimer la mise en forme ?
Merci Kevin,
C'est exactement la solution que je cherchais.
Parfait, heureux de voir que vous aimez l'extrait 🙂
brillant ! MERCI !!! c'est exactement la solution que je cherchais... même avec les bons styles déjà prêts !
@twitter-17003417:disqus Cool, heureux que vous trouviez cet extrait WordPress utile. Les bons styles, wow, c'est comme si je pouvais lire dans vos pensées 😉 cheers, profitez-en...
Merci Kevin,
J'ai trouvé une solution en travaillant avec des sauts de ligne avec la balise More (contenu divisé).
C'est aussi très facile à ajouter.
Je ne veux pas laisser tomber d'URL ici, mais cela m'a beaucoup aidé.
http://digwp.com/2010/03/wordpress-post-content-multiple-columns/
Kevin, désolé mais j'ai une dernière question.
Le code fonctionne correctement, il y a juste un petit problème avec WordPress qui encapsule chaque paragraphe dans une seule colonne gauche ou droite.
C'est ma fonction, rien d'extraordinaire.
function themeit_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons;}add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );function themeit_tiny_mce_before_init( $settings ) { $settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,'; $style_formats = array( array( 'title' => 'Add Columns' ), array( 'title' => '← Column', 'block' => 'div', 'classes' => 'content-col-left' ), array( 'title' => 'Column →', 'block' => 'div', 'classes' => 'content-col-right' ) ); $settings['style_formats'] = json_encode( $style_formats ); return $settings;}add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Et quand je commence à écrire une histoire,
Disons que c'est une histoire avec 3 paragraphes, et quand j'ai fini d'écrire, je sélectionne tout le contenu (3 paragraphes) ensemble et j'appuie sur le bouton style > Colonne gauche de l'éditeur TinyCME, mais il encapsule chaque paragraphe dans un seul...
C'est très frustrant à voir et pour une raison quelconque, je n'arrive pas à le faire fonctionner.
Je veux que mes 3 paragraphes soient encapsulés dans des balises P et que les 3 balises P ensemble soient encapsulées dans une seule div avec une classe left-column.
Salut B.J. Oui, je vois ce que tu veux dire, ce serait frustrant, cependant, au moment où les choses sont insérées, ce serait TinyMCE et non une partie de mon extrait, donc je ne pense pas que l'on puisse faire quoi que ce soit. L'extrait ajoute simplement de nouveaux paramètres,
Cependant, as-tu essayé d'ajouter un saut de ligne après avoir fusionné les trois paragraphes en un seul ? Est-ce que cela résout les choses ? Je vais expérimenter et voir si je peux faire quelque chose pour toi.
Merci beaucoup Kevin,
Pas de problème, content d'avoir pu aider.
Pourrais-tu créer des colonnes avec ces styles de menu déroulant ?
Comme dans le menu déroulant :
Ajouter la colonne 1 (cela ajoutera ce code)
Le curseur doit être ici pour taper du contenu dans PAprès cela, choisis dans le menu déroulant Ajouter colonne 2
Pour ajouter une deuxième colonne de texte à côté de la première.
Je pense qu'il est très difficile de diviser le texte en 2 colonnes dans la div de saisie de contenu si vous ne savez pas comment fonctionne le HTML.
Je voudrais savoir cela pour un de mes clients qui ne peut travailler qu'avec un éditeur WYSIWYG mais qui aimerait avoir une option pour avoir deux colonnes dans la div d'entrée.
Désolé pour mon mauvais anglais 🙁
Salut B.J. oui, vous pourriez ajouter une div avec la classe class=\"rgt-column\" et une autre avec la classe class=\"lft-column\" puis il vous appartient de configurer le CSS pour que cela fonctionne comme des colonnes. Si vous voulez avoir le CSS pour créer les colonnes utilisées dans l'éditeur, vous pouvez ajouter ce petit code et créer une nouvelle feuille de style avec le code des colonnes.
function wps_add_editor_style() { add_editor_style( ‘editor-style-columns.css’ ); } add_action( ‘after_setup_theme’, ‘wps_add_editor_style’ );De cette façon, ils peuvent voir le contenu en plusieurs colonnes, vous devrez peut-être expérimenter un peu pour que cela fonctionne comme vous le souhaitez.