Você quer criar seu próprio menu suspenso de estilos personalizados? Embora provavelmente exista um plugin para isso, criamos um trecho de código rápido que você pode usar para criar um menu suspenso de estilos personalizados no editor visual TinyMCE.
Instruções:
Tudo o que você precisa fazer é adicionar este código ao arquivo functions.php do seu tema ou a 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 trechos de código corretamente no WordPress, para não quebrar acidentalmente seu site.
Se você gostou deste trecho de código, considere conferir nossos outros artigos no site, como: 46 maiores marcas do mundo usando WordPress ativamente e como criar um formulário de registro de usuário personalizado no WordPress.
Parece que não funciona mais. Acabei de adicionar isso, nada aconteceu no meu MCE. Talvez um conflito com meu tema/construtor de páginas? (Madrigal/WPBakery)
Desculpe desenterrar um post antigo, mas há alguma maneira de fazer isso e criar 2 menus suspensos de 'Formato' separados? Eu gostaria de um contendo opções de P e um contendo opções de cor, se possível.
Muito obrigado por isso. Eu estava usando outro trecho de código para o mesmo efeito, mas depois de atualizar para o WP com o novo plugin TinyMCE, esse código não funcionou mais. Eu tentei este, e ele ainda funciona.
Agradeço.
Perfeito, fico feliz em saber que este trecho do TinyMCE pôde te ajudar!
Muito obrigado por isso. Eu estava usando outro trecho de código para o mesmo efeito, mas depois de atualizar para o WP com o novo plugin TinyMCE, esse código não funcionou mais. Eu tentei este, e ele ainda funciona.
Agradeço.
Muito obrigado por isso. Eu estava usando outro trecho de código para o mesmo efeito, mas depois de atualizar para o WP com o novo plugin TinyMCE, esse código não funcionou mais. Eu tentei este, e ele ainda funciona.
Agradeço.
Muito obrigado por isso. Eu estava usando outro trecho de código para o mesmo efeito, mas depois de atualizar para o WP com o novo plugin TinyMCE, esse código não funcionou mais. Eu tentei este, e ele ainda funciona.
Agradeço.
Muito obrigado por isso. Eu estava usando outro trecho de código para o mesmo efeito, mas depois de atualizar para o WP com o novo plugin TinyMCE, esse código não funcionou mais. Eu tentei este, e ele ainda funciona.
Agradeço.
Muito obrigado por isso. Eu estava usando outro trecho de código para o mesmo efeito, mas depois de atualizar para o WP com o novo plugin TinyMCE, esse código não funcionou mais. Eu tentei este, e ele ainda funciona.
Agradeço.
Ótimo post Kevin, obrigado. Existe alguma maneira de remover os estilos no editor, da mesma forma que o usuário pode clicar no botão remover formatação?
Obrigado Kevin,
Esta é exatamente a solução que eu estava procurando.
Perfeito, fico feliz em ver que você gostou do trecho 🙂
brilhante! OBRIGADO!!! esta é exatamente a solução que eu estava procurando… até com os estilos certos prontos para usar!
@twitter-17003417:disqus Legal, fico feliz que você ache este trecho do WordPress útil. Os estilos certos, uau, é como se eu pudesse ler sua mente 😉 Saúde, aproveite…
Obrigado Kevin,
Eu encontrei uma solução trabalhando com quebras de linha usando a More Tag (dividir conteúdo).
Também é muito fácil de adicionar.
Não quero postar URLs aqui, mas isso me ajudou muito.
http://digwp.com/2010/03/wordpress-post-content-multiple-columns/
Kevin, desculpe, mas tenho uma última pergunta.
O código está funcionando corretamente, há apenas um pequeno problema com o WordPress envolvendo cada Parágrafo em uma única coluna Esquerda ou Direita.
Esta é minha função, nada de especial.
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' => 'Adicionar Colunas' ), array( 'title' => '← Coluna', 'block' => 'div', 'classes' => 'content-col-left' ), array( 'title' => 'Coluna →', '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' );
E quando começo a digitar uma história,
Digamos que seja uma história com 3 parágrafos, e quando termino de digitar, seleciono todo o conteúdo (3 parágrafos) juntos e clico no botão estilo > Coluna da esquerda do editor TinyCME, mas ele envolve cada parágrafo em um único...
Isso é muito frustrante de ver e, por algum motivo, não consigo fazer funcionar.
Quero que meus 3 parágrafos sejam envolvidos em tags P e todas as 3 tags P juntas precisam ser envolvidas em uma div com a classe left-column.
Olá B.J. Sim, eu entendo o que você quer dizer, isso seria frustrante, mas no ponto em que as coisas são inseridas, seria o TinyMCE e não faria parte do meu snippet, então acho que nada pode ser feito. O snippet apenas adiciona novas configurações,
No entanto, você tentou adicionar uma quebra de linha depois que ele mescla os três parágrafos em um? isso resolve as coisas. Vou mexer nas coisas e ver se consigo fazer algo a respeito para você.
Muito obrigado Kevin,
Sem problemas, fico feliz em poder ajudar.
Você poderia criar colunas com esses estilos de menu suspenso?
Como no menu suspenso:
Adicionar coluna 1 (isso adicionará este código)
O cursor deve estar aqui para digitar o conteúdo em PDepois, escolha no menu suspenso Adicionar coluna 2
Para adicionar uma segunda coluna de texto ao lado da primeira.
Eu acho que é muito difícil dividir o texto em 2 colunas na div de entrada de conteúdo se você não souber como o HTML funciona.
Gostaria de saber isso para um cliente meu que só pode trabalhar com um editor WYSIWYG, mas gostaria de ter uma opção para ter duas colunas na div de entrada.
Desculpe pelo meu inglês ruim 🙁
Olá B.J. sim, você poderia adicionar uma div com a classe class=\"rgt-column\" e outra com a classe class=\"lft-column\", então cabe a você, ao configurar o CSS, fazer isso funcionar como colunas. Se você quiser ter o CSS para criar as colunas usadas dentro do editor, você pode adicionar este pequeno código e criar uma nova folha de estilo com o código das colunas.
function wps_add_editor_style() { add_editor_style( ‘editor-style-columns.css’ ); } add_action( ‘after_setup_theme’, ‘wps_add_editor_style’ );Dessa forma, eles podem ver o conteúdo em várias colunas, talvez você precise mexer um pouco nisso para que funcione da maneira que você gostaria.