WordPress TinyMCEのテーブルのwidth等を削除

WordPress TinyMCE Advancedのテーブル作成時に自動でセットされるcssのwidth等を削除するサンプルです。(確認環境:WordPress 5.7)

サンプル	目的
	自動でセットさせないコード

目的

投稿入力画面でテーブルのアイコンからテーブルを作成するとデフォルトでwidth:50%等がセットされます。

<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
<tr>
<td style="width: 50%;"></td>
<td style="width: 50%;"></td>
</tr>
</tbody>
</table>

これを以下のようにセットされないようにします。

<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

自動でセットさせないコード

functions.phpに以下を貼り付けます。

１．table_default_stylesに指定するやり方

/*---------------------------------------------------------
 * TinyMCE Advanced width等の初期設定を消す
 *---------------------------------------------------------*/
function tinymce_custom($settings) {
    $invalid_style = array(
        'table' => 'width height',
        'th' => 'width height',
        'td' => 'width height'
    );
    $settings['table_default_styles'] = json_encode($invalid_style);
    return $settings;
}
add_filter('tiny_mce_before_init', 'tinymce_custom', 0);

6-8行目は、table,th,tdにwidthとheightを指定し、
10行目は、「table_default_styles」テーブルデフォルトに指定しています。

※列を追加するとwidthが入ってしまいます。
どうしてもwidthが入ってしまう場合は、自分で<td></td>を追加していきます。

２．invalid_stylesに指定するやり方

/*---------------------------------------------------------
 * TinyMCE Advanced width等の初期設定を消す
 *---------------------------------------------------------*/
function tinymce_custom($settings) {
    $invalid_style = array(
        'table' => 'width height border-collapse',
        'th' => 'width height',
        'td' => 'width height'
    );
    $settings['invalid_styles'] = json_encode($invalid_style);
    return $settings;
}
add_filter('tiny_mce_before_init', 'tinymce_custom', 0);

6-8行目は、tableにborder-collapseとwidthとheight、th,tdにwidthとheightを指定し、
10行目は、「invalid_styles」(無効化)にしています。

※列を追加してもwidthは入りません。ただし自分でstyle="width:20%;"等指定してもビジュアルとテキストを切り替えるとstyleは消えてしまいます。