TinyMCE Advancedで作ったテーブルがページからはみ出すのを防ぐ

TinyMCE Advancedのテーブル作成機能とは

「TinyMCE Advanced」はWordPress のビジュアルエディター TinyMCE の高度な機能を有効化するプラグイン。その機能の一つ、テーブル(表組み)作成機能についてbivoroする。(以下バージョン 4.6.7にての情報)

テーブルの作例
テスト1 テスト2 テスト3 テスト4
ああああああああああああ いいいいいいいいいいいい ううううううううううう えええええええええええ
おおおおおおおおおおおお かかかかかかかかかかかか ききききききききききき くくくくくくくくくくく

テーブルのサイズを手動で変更するとページからはみ出すことがある

各セルに文字を入力すれば簡単にテーブルが作ることができる。テーブル全体や列、行のサイズも手動で調節が可能。

ただし、一旦テーブルまたはの幅や高さを手動で変更すると、その数値が以下のように自動的にstyle属性に記述される。(レシポンシブではなくなってしまう)

<table style="height: 262px; width: 787.890625px;">
<tbody>
<tr style="height: 64px;">
<td style="width: 169px; height: 64px;">テスト1</td>
<td style="width: 233px; height: 64px;">テスト2</td>
<td style="width: 123px; height: 64px;">テスト3</td>
<td style="width: 200.890625px; height: 64px;">テスト4</td>
</tr>
</tbody>

従って、ブラウザのウィンドウの幅が狭くなるとテーブルが外へはみ出すことに。

jQueryを使ってテーブルがはみ出さないように設定する

やり方その①:cssを用いて制御する

テーブルを選択した状態で「TinyMCE Advanced」のテーブルボタンをクリックし、「表のプロパティ」「詳細」を表示させ、任意のクラスを指定する。

ただし、style属性はcssに優先されるので「!important」で最優先にする。

style.cssに記述
.table01{
	width: 100% !important;
}

やり方その②:jQueryでstyle属性を書き換える

使用中のテーマのフォルダにjQueryファイル「tmatable.js」を設置

WordPressにもともと組み込まれているjQueryとのコンフリクトを避ける為にカプセル化を施す。(そのままでは$エイリアスは使えない)
jQueryの内容次第では、様々にカスタマイズが出来そう。

jQuery(function($) {
	$('table').css({'width': '100%','height': 'auto'});
	$('td').css({'width': 'auto','height': 'auto'});
});
関数「wp_enqueue_script」で「tmatable.js」を適切に組み込む

wp_enqueue_script」の第5引数をtrueにすることで、</body>終了タグの直前でスクリプトを実行させる。

add_action( 'wp_enqueue_scripts', 'TinyMCEAdvanced_table_js' );

function TinyMCEAdvanced_table_js() {
	wp_enqueue_script( 'tmatable', get_bloginfo( 'stylesheet_directory' ) . '/tmatable.js', array(), false, true );
}