記事の詳細
【WordPress】tableにwidthとheightが勝手に入る現象と修正する方法
つい先日のことですが、弊社にこんなご相談がありました。
「記事を書いたらあちこちに余白ができてるんだけど、なんで?」と。
どうやら記事を書いていたお客様が、記事をアップしたらなぜだかたくさんの余白ができてて困ってしまった、とのこと。
実際にサイトを見て、検証モードでチェックしていると・・・
なぜかtableに余白がついている。
- グーテンベルクに変わって自動的にtableに余白がつく機能がついたのか?
- WordPressのアップデートでtableに余白でも自動的についたのか?
- 何かしらのプラグインが干渉している?
はて。。原因はいったいなんだ??
原因と改善方法について今回ご紹介していきます!
今回のブログの見出しはコチラです!
TinyMCE Advancedのテーブル機能が原因(カーソルをいじってしまう)
あらゆるエラーや可能性を加味して検証していましたが、原因は「TinyMCE Advanced」プラグインのテーブル機能でした。
TinyMCEといえば、WordPressのビジュアルエディタの機能を拡張することができるプラグインです。
htmlやcssの知識がなくても無料ブログと同じような感覚で記事が書けるので、多くの方が利用されていると思います。
ですが、tableにおいてはちょっとでも表をずらしてしまうと勝手にwidth(横幅)とheightが(高さ)が設定されてしまうという・・・
これこれ。
テーブルの枠にマウスをあてると、カーソルが表示され、これを少しでもずらしてしまうと、自動的に横幅や高さの調整が入ってしまいます。
しかも、ビジュアルエディタでは見た目の変化はあまりないのですが、
テキストエディタに変えてみると・・・
このように勝手にwidthとheightの調整が入っているのです・・・!
この機能、必要なんでしょうか?と疑問に思ってしまいますが、原因はわかったのでこれを修正する方法と、カーソルをいじっても自動的にwidthとheightが入らないように設定変更したいと思います。
まずは修正の仕方をレクチャー
とてもめんどくさいのですが、これを修正するにはひとつひとつの記事でテキストエディタに変えて修正するしかありません。
※ほかに方法があったら教えてほしいです^^;
カーソルをなんとか微調整してもwidthとheightを消すことはできません。
例えばですが、置換できるエディタ(メモ帳、サクラエディタ、テラパッドなど)を使い一気に置換作業をする方法もあります。
ただ、記述がバラバラな場合が多いので置換作業も結構大変ではあります^^;
素直にテキストエディタモードで一つ一つ手直ししたほうが早いかもしれません。※ビジュアルエディターで修正するのはおすすめしません!^^;
テーブルの横幅を勝手にwidthやheightが調整されないようにする方法
本題はこちらです。
ビジュアルエディターでテーブルのカーソルをいじっても勝手にwidthやheightが入らないように設定する方法があります。
一度設定してしまえばもう安心!
早速やり方をご紹介します。
functions.phpにコードを追記する
functions.phpに以下のコードを追記します。
※functions.phpは事前に必ずバックアップを取ってください。(エラーで真っ白になります)
※下記のコードをそのまま貼るとエラーを起こすので、記載には注意してくださいね。(関数はまとめて記載)
1 2 3 4 5 6 |
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); |
これでアップロードすれば、ビジュアルエディタでテーブルの枠線をいじってしまってもwidthやheightが自動的に入ってしまうことはなくなります。
安心してテーブル操作できます^^!
ぜひ試してみてくださいね。