HTMLエディタによる自動整形の影響 2016年版(デフォルト編)

管理画面の本文エリアで、HTMLエディタ(テキストタブ)でコーディングをしたとき。
保存したとたんにタグがとんだりして困ったことはありませんか?

honbun_area

2012年頃は、自動整形の影響でタグが消えたりid属性が消えてしまい調整に苦心しましたが、あれから4年たった今、自動整形事情はどうなっているのでしょう。

調整して自動整形の影響を消す前に、そもそもWordPressのデフォルトとしてはどうなっているのか?をまず確認してみました。

検証環境

  • WordPress:ver.4.6.1(テーマ:Twenty Sixteen)
  • OS:Mac OSX 10.9.5
  • 使用ブラウザ:FireFox 48.0.1
  1. HTMLエディタに検証コードを流し込む
  2. ビジュアルエディタに切り替えて更新
  3. プレビューし、ソースを表示させたものを検証

検証項目

  1. 全プラグイン停止(これをデフォルトとする)
  2. functions.php への書き込みなど一切なし

※上記に関して「管理者」「編集者」「投稿者」それぞれで検証手順にそって検証コードを編集しソースを取得。

検証コード

 

[検証結果]

WordPress ver.3.4.2と比べ、基本は変わっていない状態。

■管理者

ver.4.6.1 ver.3.4.2  er.4.6.1についての備考
pタグ 消えない 消えない ※管理画面内では非表示だが、htmlソース上には存在する。
行頭一字空け 不可 不可  ※全角スペースが消失
改行タグ  消えない 消えない ※管理画面内では非表示だが、htmlソース上には存在する。
※XHTML用の改行タグに置き換わる
連続改行  不可 不可  ※連続して改行タグを入れても1つ分しか有効にならない
空タグ(p)  消失 消失
空タグ(div)  消えない 消えない
id属性  消えない 消えない
class属性  消えない 消えない
rel属性  消失 消失
clear属性  消失 消失 brタグはpタグに代わり、 をはさんだ状態
clear属性(ul内)  消失ほか 消失ほか brタグは消失、ulタグがさらにulタグで囲まれ、最下行にp空タグ出現
スタイル直書き  消えない 消えない
スタイル直書き
(th内)
 消えない 消えない
コメントアウト
(タグ外)
 見える 見える ※pタグで囲まれるため、コメントアウトが表示されてしまう
コメントアウト
(タグ内)
 OK OK
テーブル  消えない 消えない ※<tbody>を強制的に入れられる
iframeタグ  消えない 消えない ※pタグで囲まれる※widthやstyleなどの属性値の位置が変わる
HTML5タグ  消えない 消えない
imgタグ  消えない 消えない ※消えないが<p>タグに囲まれてしまう

■編集者

管理者との差分なし。
※ver 3.4.2では「id属性」「スタイル直書き (th内)」「iframe」が消失していた

■投稿者

管理者との差分のみ記載。

ver.4.6.1 ver.3.4.2 ver.4.6.1についての備考
id属性 消えない 消失
スタイル直書き
(th内)
消えない 消失  ※スタイル記述中、不要な末尾の「;」が消失
iframe 消失 消失 ※iframeタグが消失

 

【まとめ】

権限の違いによる自動整形の影響については、編集者が格上げ(?)されて管理者と同じ挙動となりました。が、投稿者ではまだ消失するものがありますし、全権限ではコメントアウトが消失します。

  • コメントアウトは消失するので注意
  • iframeタグは、投稿者権限では消失するので注意

しかし、編集者、投稿者でもid属性が消えなくなったのは大きな進歩です!
これで、
制作会社が「管理者」権限で制作 →  納品後、お客様が「投稿者」権限で更新しようとして管理画面をひらき編集  →  idが消失して表示崩れ……の悪夢のパターンがなくなりました。
(納品前に投稿者権限で検証しなかったのも問題ではありますが)

本文エリアでコーディングをするのは個人的には反対なのですが、お客様の要望として
「少しくらいの修正なら自分たちでやれればいいな…」
というのは心情としてもよくわかります。

できること・できなことをよく把握して、無理のない範囲で要望に応えていけるのが良いのかなと思っています。