WordPressにExcelから表を張り付け時にスタイルを削除する

WordPressで表を組むときはtableタグを使います。一昔前ならまだしも、今どきタグを直書きする人も少ないのではないかと思います。

といのも、TinyMCE Advancedなどのエディター拡張プラグインを使えば、ビジュアルエディター上で表を作ることができるからです。

しかし、それすらも面倒なので、ちょっとした表を作るときはExcelで表を作って、Wordpressに貼り付けて終わりにします。

この機能はとても便利なのですが、困ったことにテーブルタグにstyleが付いていて、widthやheightなどの数値が埋め込まれてしまいます。

テーブルタグに余計なstyleを付加させない方法

『TinyMCE Advancedを使ったときに、テーブルタグに余計なstyleが付加されてしまう』という問題は検索すると沢山ヒットします。

ググると出てくる対策

検索上位で表示される対策はほぼ同じです。

しかし、自分が抱えている問題と少しずれているようでした。

つまり、紹介されている方法では解決しませんでした。

よくある解決策

WordPressの表でwidthとheightが勝手に追加されるのを防ぐ方法
WordPressの表を作成しているとき。どうにも困ったことがあります。「width」や「height」が勝手に追加される現象です。(´・ω・`) なんなんですかね、この仕様・・・例えば、下図の赤枠が、勝手に追加されてしまっている箇所です。

functions.phpにコードを記述する

PHPのコードを貼り付けるために「functions.php」を開きます。
それでは具体的な手順です。

  1. WordPressにログインし、管理画面を呼び出します。
  2. メニューの[外観]→[テーマの編集]とたどります。
  3. PHPのコードを挿入するために「functions.php」を選択します。
  4. functions.phpの中に、下記のコードを挿入します。
function customize_tinymce_settings($mceInit) {
$mceInit['table_resize_bars'] = false;
$mceInit['object_resizing'] = "img";
return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'customize_tinymce_settings' ,0);

この対策が効果があるのは、Wordpress上で一から作成したテーブルに対してのみです。外部(Excel)から張り付けた時に付加されるstyleについては相変わらず付加されます。

つまり効果がありません。

真の解決策

そんな時に見つけたのが次の記事です。

ドンピシャでした。

WordPress エディターに Excel の表を貼り付け
WordPress のエディタ (TinyMCE) に、Excel の表をクリップボード経由でコピー&ペーストすると、表形式のまま貼り付けされま...
function.phpに記述します。
function my_tiny_mce_before_init( $init ) {
$init['paste_preprocess'] = <<<SCRIPT
function(plugin, args) {
var content = jQuery('<div>' + args.content + '</div>');
content.find('table,td').removeAttr('width');
args.content = content.html();
}
SCRIPT;
return $init;
}
add_filter( 'tiny_mce_before_init','my_tiny_mce_before_init' );

既存のテーブルのstyle属性を削除したい場合は、一度Excelにコピーしてから再度コピペすればきれいにstyleが削除されます。

まとめ

WordPressで表を作りたいときって結構多いです。Excelからコピペすると変なstyleが付くのでしかたなく、Wordpressのビジュアルエディタで直接編集してしまったりします。今回ご紹介した記事の通りにやればつねにExcelからのコピペですみますから大変捗ります。

 

タイトルとURLをコピーしました