こんにちは。ニクです。
「TinyMCE Advanced」はテーブルの挿入やフォントを指定したり、ビジュアルエディタを使いやすくするWordPress定番のプラグインです。
ニクはフォントサイズを変えたり、表を良く使うので「TinyMCE Advanced」なしには記事が書けないほど頼っています。ただ、今回はプラグインのインストールの話ではありません。
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