TinyMCE Advancedでtableにサイズが指定されてしまう問題

こんにちは。ニクです。

「TinyMCE Advanced」はテーブルの挿入やフォントを指定したり、ビジュアルエディタを使いやすくするWordPress定番のプラグインです。

ニクはフォントサイズを変えたり、表を良く使うので「TinyMCE Advanced」なしには記事が書けないほど頼っています。ただ、今回はプラグインのインストールの話ではありません。

tableにサイズが指定されてしまう問題
- 理想のtable
- デフォルトのtable
tableにサイズが指定されないように設定を変更

tableにサイズが指定されてしまう問題

「TinyMCE Advanced」は非常に便利なプラグインですが、テーブルにおいては下記のような問題があります。

テーブル挿入時にwidthが指定される
列や行挿入時にwidthやheight指定がされる
テーブルの境界線を触るとwidthやheight指定がされる

理想のtable

本来は下記のようにwidthやheight指定のないテーブルが作りたいのですが…

ソースコード

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

デフォルトのtable

テーブルの境界線を触ったり、列を追加したりなどの変更を行うと、table、tdなどに勝手にwidth指定がなされてしまいます。これではレスポンシブデザインにできません(^^;)

ソースコード

<table style="width: 628px;">
<tbody>
<tr>
<td style="width: 156.667px;"></td>
<td style="width: 156.667px;"></td>
<td style="width: 156.667px;"></td>
<td style="width: 157.333px;"></td>
</tr>
<tr>
<td style="width: 156.667px;"></td>
<td style="width: 156.667px;"></td>
<td style="width: 156.667px;"></td>
<td style="width: 157.333px;"></td>
</tr>
</tbody>
</table>

レスポンシブデザインとは、PC・スマホ・タブレットどの環境にも適用したデザインのことです。

ニク

tableにサイズが指定されないように設定を変更

「外観」→「テーマエディター」→「テーマのための関数（function.php）」を開きます。
「テーマのための関数（function.php）」以下に下記のソースコードを貼り付けます。

ソースコード

//START テーブルのサイズ変更停止
function tinymce_custom($settings) {
    $invalid_style = array(
        'table' => 'width height',
        'th' => 'width height',
        'td' => 'width height'
    );
    $settings['invalid_styles'] = json_encode($invalid_style);
    $settings['table_resize_bars'] = false;
    $settings['object_resizing'] = "img";
    return $settings;
}
add_filter('tiny_mce_before_init', 'tinymce_custom', 0);
//END テーブルのサイズ変更停止

これでテーブルを編集した時に、勝手にサイズが変更されることはなくなりました(^^)/

▼良かったらクリックお願いしますm(__)m