Deseja criar seu próprio menu suspenso de estilos personalizados? Embora provavelmente exista um plug-in para isso, criamos um trecho de código rápido que você pode usar para criar estilos personalizados no menu suspenso do editor visual TinyMCE.
Instruções:
Tudo o que você precisa fazer é adicionar esse código ao arquivo functions.php do seu tema ou em um plugin específico do 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' );
Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como copiar/colar corretamente trechos de código no WordPress para não danificar seu site acidentalmente.
Se você gostou desse snippet de código, considere dar uma olhada em nossos outros artigos no site, como: 46 maiores marcas do mundo usando ativamente o WordPress e como criar um formulário de registro de usuário personalizado no 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.