WordPressで表を出力する際に横幅や縦幅が自動で設定されて、思わぬ表示崩れを起こしてしまう事があります。
表示崩れはユーザーの離脱に繋がってしまうため、後回しにせず早めに修正しましょう。
今回はそのような表示崩れを起こしてしまう原因と対処法を解説していきます。
- 表の表示崩れの原因がわかる
- 表の表示崩れの対処法がわかる
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
表が崩れてしまう原因
まずは表が崩れてしまう原因を解説していきます。
原因は「Advanced Editor Tools (旧名 TinyMCE Advanced)」にあります。
Advanced Editor Tools (旧名 TinyMCE Advanced)とはエディタ内でより高度な設定をできるようにツールバーを拡張するプラグインです。
Advanced Editor Toolsは200万回以上インストールされているとても便利なプラグインです。
このプラグインがどのような悪影響を及ぼしてしまっているのか説明していきます。
投稿一覧 > 新規追加より投稿ページに移動します。ビジュアルエディターで表を出力します。
表のセルとセルの間にマウスを移動させます。
すると下記画像のようにカーソルが変化します。
これを1回でもクリックしたり、スライドをしてしまうと各セルの幅に合わせてwidthとheightが自動で設定されてしまいます。
試しに表のセルををスライドしてみます。
するとこのようにwidthとheightが設定されてしまいす。
原因がわかったところで対応を考えていきます。
表が崩れてしまう際の対応
表が崩れてしまう時の対策は3つあります。
- プラグインの設定を変更する
- ビジュアルエディタを使用しない
- functions.phpを修正する
どれでも対応することはできるのですが、1番簡単なプラグインの設定から解説していきます。
1.プラグインの設定を変更する
設定 > Advanced Editor Toolsをクリックします。
Advanced Editor Toolsの設定画面へと進みます。
マウスのドラッグでのテーブル、行、列のサイズ変更を可能にするのチェックを外します。
これで設定は終わりになります。
Advanced Editor Toolsのバージョンによっては設定画面から変更できない場合もあります。
その方はこれ以降に紹介する方法で解決することができます。
2.ビジュアルエディタを使用しない
2つ目の対応方法ですが、ビジュアルエディタを使用しないことです。
テキストエディタを使用することにより、表をドラッグできなくなるため綺麗な表を出力できます。
3.functions.phpを編集する
最後にfunctions.phpを編集することによって、プラグインの設定を変更する事ができます。
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);
こちらのコードをfunctions.phpに記述し更新することにより表の表示を整える事ができます。
まとめ
今回は表の表示が崩れてしまう原因と対応を解説しました。
表にwidthとheightがつかないようにするためには下記3つの対応方法があります。
- プラグインの設定を変更する
- ビジュアルエディタを使用しない
- functions.phpを修正する
1番やりやすい方法で対応し、素敵なサイトを制作していきましょう。
WordPressを学習中の方へ
WordPressを学習していて、このように思ったことはありませんか？
- フリーランスとして「現場で使える」知識やスキルを身につけたい
- 仲間と一緒に「楽しく」学びたい
- 周りと差をつけられるように「効率的に」学びたい
- WordPressだけでなくデザインも勉強して「ハイレベル」なWebサイトを作りたい
プログラミングスクールZeroPlusでは講師が全員フリーランスとしての活動経験があり、ハイレベルな内容をわかりやすく学ぶことができます。
また、ZeroPlusは生徒同士のコミュニケーションが盛んで、仲間とともにやり切ることができるスクールです。アットホームな雰囲気で、入塾後の挫折率は極めて低くなっております。
実際に生徒さんがコミュニケーションを取られている様子はTwitterで確認いただけます。ぜひこちらから覗いてみてくださいね…！
ここまででZeroPlusに興味を持ってくださった方は、ぜひオンラインの無料相談にお申し込みください。皆様のプログラミング学習やキャリアに関するお悩みを、一緒に解消する時間になればと思います。
また、1ヶ月完結型のプログラミングキャンプ「ZeroPlus Gate」では1日10分の学習でWeb制作の基礎を本格的に学ぶことができます。
リリースを記念して期間限定で無料キャンペーンを行っています。
こちらのZeroPlus Gate公式サイトより皆様のお申し込みをお待ちしております。
サイト内問い合わせフォームより、簡単に受講することができます。
また、公式LINEではZeroPlus Gateに関する最新情報やWeb制作に役立つ知識を配信しています。下記QRよりご登録ください。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
