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 dans le fichier functions.php de votre thème ou dans un plugin spécifique à votre 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' );
Note : Si c’est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez vous référer à 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, n’hésitez pas à consulter nos autres articles sur le site comme : 46 plus grandes marques du monde utilisant activement WordPress et comment créer un formulaire d’inscription personnalisé sur WordPress.
Does not seem to work anymore. I just added this, nothing happened in my MCE. Perhaps a conflict with my theme/page builder? (Madrigal/WPBakery)
Sorry to dig up an ancient post, but is there any way to do this and create 2 separate ‘Format’ drop downs? I’d like one containing P options and one containing colour options if possible.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Perfect glad to hear this TinyMCE snippet was able to help you out!
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Great post Kevin, thanks. Is there anyway we can remove the styles in the editor, much the same way the user can click on the remove formatting button?
Thanks Kevin,
This is exactly the solution i was looking for.
Perfect glad to see you like the snippet 🙂
brilliant! THANK YOU!!! this is exactly the solution i was looking for… even with the right styles all ready to go!
@twitter-17003417:disqus Cool glad that you find this wordpress snippet useful. The right styles wow it’s like I can read your mind 😉 cheers enjoy…
Thanks Kevin,
I have found some solution as working with line-breaks with the More Tag (split content).
Its also very easy to add.
Dont wanna drop urls here but this helped me a lot.
http://digwp.com/2010/03/wordpress-post-content-multiple-columns/
Kevin, sorry but i’ve got one last question.
The code is all working correct there is only a little problem with WordPress wrapping each Paragraph into a single Left or Right column.
This is my function, nothing fancy.
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' );
And when i start typing a story,
Lets say it’s a story with 3 paragraphs, and when i’m done typing i select all content (3 paragraphs) together and hit the style > Left column button from the TinyCME editor but it wraps each paragraph into a single …
This is very frustrated to see and for some reason i can’t get it to work.
I want my 3 paragraphs to be wrapped into P-tags and all 3 P-tags together need to be wrapped into one div with a class left-column.
Hi B.J. Yes I can see what you mean, that would get frustrating however at the point that things are inserted that would be TinyMCE and not part of my snippet so I don’t think anything can be done. The snippet just adds news settings,
However have you tried to add a line break after it merges the three paragraphs into one? does that fix things. Ill fool around with things and see if I can do something about it for you.
Thank you so much Kevin,
No problem glad that I could help.
Could you make columns with those drop down styles?
Like in the drop down menu:
Add column 1 (this will add this code)
Cursor should be here for typing content in PAfter that pick from the drop down menu Add column 2
For adding a second column of text next to the first one.
I think it’s very difficult to split text into 2 columns at the content entry div if you don’t know how html works.
I would like to know this for a client of mine who can only work with a WYSIWYG editor but would like to have an option to have two columns at the entry div.
Sorry for my Poor English 🙁
Hi B.J. yes you could add a div with the class class=”rgt-column” and another with class=”lft-column” then its just up to you when setting up the CSS to make this work as columns. If you want to have the CSS to create the columns used within the editor you can add this little code and create a new style sheet with the columns code.
function wps_add_editor_style() {
add_editor_style( ‘editor-style-columns.css’ );
}
add_action( ‘after_setup_theme’, ‘wps_add_editor_style’ );This way they can see the content in multiple columns, you may need to fool around with this a bit to get it working the way you would like.