web-dev-qa-db-ja.com

スニペット：テキストの配置にインラインスタイルの代わりにクラスを使う

WordPressのTinyMCE（WYSIWYG）エディタは、テキストの配置を変更するとマークアップにインラインスタイルを追加します。この動作はwp-includes/class-wp-editor.phpでハードコードされています。

インラインスタイルを代わりにクラスに変更できますか？

theme-developmenttinymcevisual-editorwysiwyghtml
3
bitstarr

注この回答はもともと上記の @ bitstarr の質問に含まれていましたが、ここではWPSEのQ&Aモデルに準拠するための別の回答として含まれていました。

たぶん他の誰かがこの問題を抱えているので、私はあなたと私の解決策をここで共有します。

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' );

最初に設定をPHPで簡単に使えるようにエンコードする必要があります。それから、クラス名（text--XXX）を追加して、インラインスタイルの原因となる部分を削除します。最後に配列は変換されます。

おまけ：この行を追加することでエディタをいっそう素晴らしいものにすることができます。

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

これはユーザーが<h1>ヘッドラインを使うことを妨げるでしょう - SEOの悪夢…

これが誰かに役立つことを願っています。改善は大歓迎です！

https://wordpress.stackexchange.com/a/141539 も参照してください。

5
cjbj