web-dev-qa-db-fra.com

Extrait: utilisez des classes au lieu de styles en ligne pour l'alignement du texte

L'éditeur TinyMCE (WYSIWYG) de WordPress ajoute des éléments en ligne au balisage lorsque vous modifiez l'alignement du texte. Ce comportement est codé en dur dans wp-includes/class-wp-editor.php.

Les styles en ligne peuvent-ils être modifiés en classes?

theme-developmenttinymcevisual-editorwysiwyghtml
3
bitstarr

NoteCette réponse figurait à l'origine dans la question ci-dessus de @bitstarr et a été incluse ici en tant que réponse distincte pour respecter le modèle de questions-réponses de WPSE.

Peut-être que quelqu'un d'autre aura ce problème et je partagerai donc ici ma solution avec vous.

function make_mce_awesome( $init ) {
    /*
        There are easier things than make 'left/center/right align text' to use classes instead of inline styles
     */

    // decode
    $formats = preg_replace( '/(\w+)\s{0,1}:/', '"\1":', str_replace(array("\r\n", "\r", "\n", "\t"), "", $init['formats'] ));
    $formats = json_decode( $formats, true );

    // set correct values
    $formats['alignleft'][0]['classes'] = 'text--left';
    $formats['aligncenter'][0]['classes'] = 'text--center';
    $formats['alignright'][0]['classes'] = 'text--right';

    // remove inline styles
    unset( $formats['alignleft'][0]['styles'] );
    unset( $formats['aligncenter'][0]['styles'] );
    unset( $formats['alignright'][0]['styles'] );

    // encode and replace
    $init['formats'] = json_encode( $formats );

    return $init;
}
add_filter( 'tiny_mce_before_init', 'mkae_mce_awesome' );

Premièrement, les paramètres doivent être encodés pour pouvoir être facilement utilisés en PHP. Ensuite, nous ajoutons les noms de classe (text--XXX) et retirons les pièces à l'origine du style en ligne. A la fin, le tableau sera reconverti.

Bonus:Vous pouvez rendre l'éditeur encore plus génial en ajoutant cette ligne.

    $init['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4';

Cela empêchera les utilisateurs d'utiliser les titres <h1> - le cauchemar du référencement…

J'espère que cela sera utile à quelqu'un. Les améliorations sont les bienvenues!

Voir aussi https://wordpress.stackexchange.com/a/141539

5
cjbj