なんで?WordPressエディタの不具合?

WordPress エディタ 不具合

本日はWordPressで起こる「謎」について語っていきます。

以下はWordPressの「謎」について実際にやりとりを行った仲間内のチャットの内容です。

※回答はHP用に加工しました。

2014年3月17日 13:30
平野

>WordPressの別のテーマでもこの不具合起こること多々あるんです。
>私の中で、色々あるんです。WordPressの謎。tableの中のtd内にテキスト入れると、変なインデントが>入っちゃうとか。。改行されないとか、小さいことなんですけど

2014年3月17日 13:37
前島

>あー、わかります。謎ありますよね。
>HTMLを直接貼り付けたいのに、なぜかspanが全部消えちゃうとか私もあります。
>細かいことですけど、気になりますよねえ。

2014年3月17日 18:24
家富回答

それは改行をbrタグとpタグに自動変換している、wpautopという関数が悪さをしている可能性が高いです。

WordPressには記事の改行を<p>タグと<br />タグに変換する関数や、制御記号などを害の無い表現に変換する関数など、いろいろな関数が自動的に動作するようになっています。

これはCSRF攻撃などの被害に遭わないように対策をしていたり、不正なタグを除去したりと、いろいろなセキュリティの面を考えての対策となっています。

しかしながら、この自動変換の機能が悪い方向に作用することがあります。
その主な代表となるのが、冒頭でも紹介した「wpautop」という機能です。

この機能は、エディターで入力した改行を自動的にpタグとbrタグに自動変換し、レイアウトを調整してくれる機能なのですが、その自動的に挿入されるpタグが問題となります。

このpタグは改行が2連続している場合に、該当のエリアをpタグで囲むという機能なのですが、改行が2つ無くとも、インラインタグ(spanタグやaタグ、imgタグ)が単独で存在している箇所は、すべてpタグで囲ってくれるという厄介な機能になっています。

pタグは汎用的なタグなので、デザイン上もスタイルを割り当てている場合が多く、
それが全く意図していない箇所に突然挿入されてしまうため、画像がずれてしまったり、改行がおかしくなるなどレイアウト上の問題が発生します。

よくある例としては、imgタグをpタグで囲われてしまったために回り込みが聞かなくなってしまったり、tableタグのtdタグの中にまでtdタグの中にもpタグを挿入してくれるので、テーブルの中に余計な空白が生まれてしまうなど、枚挙に暇がありません。

以上のように結構苦しめられるこの機能ですが、簡単な解決方法があります。
PS Disable Auto Formattingというプラグインで、こちらのプラグインを利用することで、上記の機能を一括で無効にすることができます。

https://wordpress.org/plugins/ps-disable-auto-formatting/

お客様に納品する際など、ナイーブなエディタにお困りの際はこちらのプラグインなどを導入して対策してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ABOUTこの記事をかいた人

インスパイアデザインの取締役兼、エンジニア。WordPressのテーマ・プラグイン開発を年間100件以上、独自のフレームワークを用いて開発をしています。