Como adicionar uma classe a ul tags criadas pelo editor do WordPress Tinymce?

3

Eu quero definir um estilo especial para as tags ul criadas apenas por Tinymce, o que significa apenas para posts e páginas, eu só encontrei este filtro tiny_mce_before_init com um exemplo sobre como adicionar opções de estilo personalizadas a um menu suspenso de estilo existente.

Então, há uma maneira de adicionar uma classe às tags ul criadas pelo editor do WordPress?

    
por Pierre 08.02.2013 / 11:55

2 respostas

12

É sempre uma boa ideia consultar o Wordpress Codex antes de perguntar. Estilos personalizados do TinyMCE

<?php
// Insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Use 'mce_buttons' for button row #1, mce_buttons_3' for button row #3
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function my_mce_before_init_insert_formats( $init_array ) {
    $style_formats = array(
        array(
            'title' => 'Custom UL class', // Title to show in dropdown
            'selector' => 'ul', // Element to add class to
            'classes' => 'custom-ul-class' // CSS class to add
        )
    );
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

No editor: primeiro crie uma lista não numerada e aplique o estilo.

Atualização após aceitação .

Se você quiser acrescentar uma classe a todos os elementos <ul> adicionados através do TinyMCE, você pode fazer isso antes de inserir ou atualizar o banco de dados:

<?php
add_filter('wp_insert_post_data', 'my_add_ul_class_on_insert');
function my_add_ul_class_on_insert( $postarr ) {
    $postarr['post_content'] = str_replace('<ul>', '<ul class="my-custom-class">', $postarr['post_content'] );
    return $postarr;
}

Ajuste str_replace() function needle if <ul> elements já tem algum atributo. Ou use preg_replace() .

    
por Max Yudin 08.02.2013 / 13:55
3

Isso é realmente necessário? Tente modificar o page.php e single.php do seu tema de uma forma que seja o the_content (); template tag com um div da classe ou id especificado. Desta forma:

...
<div id="post_content_from_tinymce">
<?php the_content(); ?>
</div>
...

E use esse id na sua folha de estilo:

#post_content_from_tinymces ul{ ... }

Isso pode ser ensinado na maioria dos casos. Adicionar a posibilidade de adicionar classe personalizada ao UL exigiria a gravação de um plug-in tinyMCE e, ainda assim, você teria que clicar no botão extra para definir o estilo toda vez que estiver criando um post / página.

    
por david.binda 08.02.2013 / 12:04