その他

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

• id属性が消えてしまい、cssで設定していた背景画像がきえたり、アンカーリンクが動かない
• 全角スペースで体裁を整えていたが、スペースが消えてしまった
• コメントアウトが表示されてしまった
• <img>のrel属性が消え、javascriptが動かない
• <iframe>が消えた…
• 改行が消えた…

などなど…。

WordPressのエディタには自動整形機能があります。 なので、この自動整形機能によってタグが意図しない状態になることがあるのです。

そして、さらに。

ユーザーの権限によって、この自動整形機能に差があることに最近気がつきました。
例えば、「特権管理者」で編集した記事を「編集者」が編集すると、特定の属性・タグが消える…といったようなことです。
（通常の範囲内の操作と思いますので、ほとんどバグでは!?と個人的には思います）

幸い、自動整形対策のプラグインや関数は公開されていますので有り難く使わせていただき、自動整形を一番良い形で防ぐのはどのやりかたが良いか？検証をしてみました。

とても長いので、お急ぎの方はこちらへどうぞ。

検証環境

• WordPress：ver.3.4.2
• OS：Mac OSX 10.7.5
• 使用ブラウザ：FireFox 15.0.1

使用プラグイン・関数

TinyMCE Advanced →詳細へ

ver.3.4.9
言わずと知れたビジュアルエディタを使い易くするプラグイン。
今回は、このプラグインの「Stop removing the <p> and <br /> tags when saving and show them in the HTML editor」という機能だけを使います。

PS Disable Autoformatting →詳細へ

ver.1.0.8
自動整形&タグ除去回避プラグイン。
今回は最終的にこちらを採用させていただきました。感謝感謝です。

Unfiltered MU →詳細へ

ver.1.3.1
権限による差異をなくしてくれるプラグイン。
Automattic製です。もうだいぶん古いプラグインですが、ちゃんと動きます。
願わくばプラグインじゃなくてWordPress本体に手をいれてほしいところ。

属性値消失を防ぐ関数 →参考サイト様

※参考サイト様のソースにrel属性を追加しています。

<?php
if ( !function_exists('pnd_allow_all_attr') ) {
function pnd_allow_all_attr ($init) {
$ext_elements = '';

$target_elements = array(
'a', 'b', 'base', 'big', 'blockquote', 'body', 'br', 'caption', 'clear', 'dd', 'div', 'dl',
'dt', 'em', 'embed', 'font', 'form', 'h', 'head',  'hr', 'html', 'i', 'img', 'input',
'li', 'link', 'meta', 'nobr', 'noembed', 'object', 'ol', 'option', 'p', 'pre', 'rel','s',
'script', 'select', 'small',  'span', 'strike', 'strong', 'sub', 'sup', 'table',
'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'title', 'tr', 'tt', 'u', 'ul',
'iframe'
);
$target_attr = array(
'*'
);

foreach ($target_elements as $target_element) {
$ext_elements .= ",".$target_element."[".implode('|',$target_attr)."]";
}

if ( !empty($ext_elements) ) {
if ( !empty($init['extended_valid_elements']) )
$init['extended_valid_elements'] .= $ext_elements;
else
$init['extended_valid_elements'] = trim($ext_elements, ',');
}

return $init;
}
add_filter( 'tiny_mce_before_init', 'pnd_allow_all_attr', 100 );
}
?>

 

検証手順

1. HTMLエディタに検証コードを流し込む
2. ビジュアルエディタに切り替えて更新
3. プレビューし、ソースを表示させたものを検証

検証項目

1. 全プラグイン停止（これをデフォルトとする）
2. TinyMCE（Stop removing the <p> and <br /> tags when saving and show them in the HTML editorにチェック）
3. Unfiltered MU
4. PS Disable Autoformatting

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

検証コード

<h1>自動整形検証コード</h1>

<h2>pタグ</h2>
<p>pタグが消えないかどうか</p>

<h2>行頭一字空け</h2>
<p>　行頭一字空けを全角アキで確保できるか</p>

<h2>改行タグ</h2>
<p>XHTMLの改行タグ<br />が消えないかどうか</p>
<p>HTML5の改行タグ<br>が消えないかどうか</p>

<h2>連続改行</h2>
<p>XHTMLの改行タグによる<br /><br /><br />3連続改行</p>

<h2>空タグ</h2>
<p id="test_id02"></p>
<div id="test_id01"></div>

<h2>id属性とclass属性</h2>
<div id="test_id">
<p>id属性とclass属性が消えないかどうか</p>
</div>

<h2>rel属性</h2>
<img src="example.jp" rel="example" alt="example" />

<h2>clear属性</h2>
<br clear="all">

<h2>ul中にclear属性</h2>
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<br clear="all">
</ul>

<h2>スタイル直書き</h2>
<p style="margin-top:30px;padding-bottom:20px;">直書きしたスタイル属性が消えないかどうか</p>

<h2>コメントアウト</h2>
<p>段落中の<!--コメントアウト-->が消えないかどうか</p>
<!--段落外のコメントアウトが消えないかどうか-->

<h2>テーブル</h2>
<table>
<tr>
<th style="width: 120px;" scope="row">テキスト</th>
<td>テキストテキスト</td>
</tr>
</table>

<h2>imgタグ</h2>
<img src="example.jp" alt="example" />

<h2>iframe</h2>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?f=q&amp;source=s_q&amp;hl=ja&amp;geocode=&amp;q=%E6%9C%AD%E5%B9%8C%E9%A7%85&amp;aq=&amp;sll=43.437574,142.851354&amp;sspn=4.155917,7.734375&amp;brcurrent=3,0x5f0b29a33b13e82f:0xb96643d25f25d813,0&amp;ie=UTF8&amp;hq=&amp;hnear=%E6%9C%AD%E5%B9%8C%E9%A7%85%EF%BC%88%E5%8C%97%E6%B5%B7%E9%81%93%EF%BC%89&amp;t=m&amp;z=14&amp;ll=43.068625,141.350801&amp;output=embed">インラインフレーム非対応ブラウザへのメッセージ</iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&amp;source=embed&amp;hl=ja&amp;geocode=&amp;q=%E6%9C%AD%E5%B9%8C%E9%A7%85&amp;aq=&amp;sll=43.437574,142.851354&amp;sspn=4.155917,7.734375&amp;brcurrent=3,0x5f0b29a33b13e82f:0xb96643d25f25d813,0&amp;ie=UTF8&amp;hq=&amp;hnear=%E6%9C%AD%E5%B9%8C%E9%A7%85%EF%BC%88%E5%8C%97%E6%B5%B7%E9%81%93%EF%BC%89&amp;t=m&amp;z=14&amp;ll=43.068625,141.350801" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

<h2>HTML5のタグ</h2>
<section>セクション</section>
<nav>ナビゲーション</nav>
<article>アーティクル</article>
<aside>アサイド</aside>
<header>ヘッダー</header>
<footer>フッター</footer>
<address>アドレス</address>

[検証結果] デフォルト

特権管理者

pタグ	◯	消えない	※HTMLエディタでは非表示
行頭一字空け	×	不可
改行タグ	◯	消えない	※HTMLエディタでは非表示※XHTMLタグに置き換わる
連続改行	×	不可
空タグ（p）	×	消失
空タグ（div）	◯	消えない
id属性	◯	消えない
class属性	◯	消えない
rel属性	×	消失
clear属性	×	消失	brタグはpタグに代わり、 をはさんだ状態
clear属性(ul内)	×	消失ほか	brタグは消失、ulタグがさらにulタグで囲まれ、最下行にp空タグ出現
スタイル直書き	◯	消えない
スタイル直書き （th内）	◯	消えない
コメントアウト （タグ外）	×	見える	※pタグで囲まれるため、コメントアウトが表示されてしまう
コメントアウト （タグ内）	◯	OK
テーブル	◯	消えない	※<tbody>を強制的に入れられる
iframeタグ	△	消えない	※pタグで囲まれる※iframeタグが空タグにされる ※widthやstyleなどの属性値の位置が変わる
HTML5タグ	◯	消えない
imgタグ	△	消えない	※消えないが<p>タグに囲まれてしまう

管理者・編集者・投稿者

特権管理者との差分のみ表記。

id属性	×	消失
スタイル直書き （th内）	×	消失
iframe	×	消失	※iframeタグが消失

 

[検証結果] TinyMCE Advanced

特権管理者

pタグ	◯	消えない	※HTMLエディタでは非表示
行頭一字空け	◯	可能
改行タグ	◯	消えない	※HTMLエディタで表示される※XHTMLタグに置き換わる
連続改行	×	不可
空タグ（p）	◯	消えない	※半角スペースが挿入され、空タグではなくなる
空タグ（div）	◯	消えない	※半角スペースが挿入され、空タグではなくなる
id属性	◯	消えない
class属性	◯	消えない
rel属性	×	消失
clear属性	×	消失	※brタグはpタグに代わり、 をはさんだ状態
スタイル直書き	◯	消えない
スタイル直書き （th内）	◯	消えない
コメントアウト （タグ外）	×	見える	※pタグで囲まれるため、コメントアウトが表示されてしまう
コメントアウト （タグ内）	◯	OK
テーブル	◯	消えない	※<tbody>を強制的に入れられる
iframeタグ	△	若干問題あり	※pタグで囲まれる※iframeタグが空タグにされる ※widthやstyleなどの属性値の位置が変わる
HTML5タグ	◯	消えない
imgタグ	△	消えない	※消えないが<p>タグに囲まれてしまう

管理者・編集者・投稿者

特権管理者との差分のみ表記。

id属性	×	消失
スタイル直書き	×	消失	※pタグは消えないが、thタグでは消失
スタイル直書き （th内）	×	消失
iframe	×	消失	※iframeタグが消失

 

[検証結果] Unfiltered MU

特権管理者・管理者・編集者

デフォルト[特権管理者]と同じ結果

投稿者

id属性	×	消失	※id属性が消失
スタイル直書き （th内）	×	消失
iframe	×	消失	※iframeタグが消失

 

[検証結果] PS Disable Autoformatting

特権管理者

pタグ	◯	消えない
行頭一字空け	◯	可能
改行タグ	◯	消えない	※HTMLエディタでは非表示※XHTMLタグに置き換わる
連続改行	◯	可能
空タグ（p）	◯	消えない
空タグ（div）	◯	消えない
id属性	◯	消えない
class属性	◯	消えない
rel属性	×	消失
clear属性	×	消失	※brタグはpタグに代わり、 をはさんだ状態
スタイル直書き	◯	消えない
スタイル直書き （th内）	◯	消えない
コメントアウト （タグ外）	◯	OK
コメントアウト （タグ内）	◯	OK
テーブル	◯	消えない	※<tbody>を強制的に入れられる
iframeタグ	△	若干問題あり	※pタグで囲まれる※iframeタグが空タグにされる ※widthやstyleなどの属性値の位置が変わる
HTML5タグ	△	消えない	※ソース上の改行がなくなる
imgタグ	△	消えない	※消えないが<p>タグに囲まれてしまう

管理者・編集者・投稿者

id属性	×	消失
スタイル直書き （th内）	×	消失
iframe	×	消失	※先頭に改行が入り、かつiframeタグが消失

…以上の検証結果から、自動整形防止に関するプラグインは「PS Disable Autoformatting」を採用。
決め手は「連続改行」「タグ外コメントアウト」が使用可能だったこと。
連続改行は文法違反ですが（改行タグは体裁をととのえるためのものではない）、コーディングの現場ではどうしても使われてしまいます。。。

そして、権限による差異をなくすべく「Unfiltered MU」も同時採用。
さらにfunctions.phpには「属性値消失を防ぐ関数」を追記しておきます。
これで同様に検証すると…。
ちなみに権限は「編集者」です。

 

[検証結果] PS Disable Autoformatting ＋ Unfiltered MU ＋ 属性値消失を防ぐ関数

pタグ	◯	消えない
行頭一字空け	◯	可能
改行タグ	◯	消えない	※XHTMLタグに置き換わる
連続改行	◯	可能
空タグ（p）	◯	消えない
空タグ（div）	◯	消えない
id属性	◯	消えない
class属性	◯	消えない
rel属性	◯	消えない
clear属性	×	消失	※brタグはpタグに代わり、 をはさんだ状態
スタイル直書き	◯	消えない
スタイル直書き （th内）	◯	消えない
コメントアウト （タグ外）	◯	OK NG	※場合によってOKな場合もあるが、<p>で囲まれる場合もあり法則不明。
コメントアウト （タグ内）	◯	OK
テーブル	◯	消えない	※<tbody>を強制的に入れられる
iframeタグ	△	若干問題あり	※pタグで囲まれる※iframeタグが空タグにされる ※widthやstyleなどの属性値の位置が変わる
HTML5タグ	△	消えない	※ソース上の改行がなくなる
imgタグ	△	消えない	※消えないが<p>タグに囲まれてしまう

 

かなりいい感じになりました。
しかし、ここまでしてもいくつか実現不可能なものがありますね。
注意が必要な部分は残ります。
特に、消えたタグの残骸（？）がソースのしたのほうに突如出現して、ソースを汚す現象も確認されました。
ということで、以下まとめです。

 

【まとめ】HTMLエディタで、自動整形の影響を最小限に抑えるには

• プラグイン「PS Disable Autoformatting 」＋「 Unfiltered MU 」を使用
• 「属性値消失を防ぐ関数」をfunctions.phpに追記（今回はrel属性について確認をしました）
• コーディング済みソースを編集する権限で「投稿者」は使わない
• <br clear=”all”>など、廃止属性の使用禁止
• 文法違反に注意（<ul>〜</ul>の中に<li>以外をいれる等）
• <iframe>は「空タグになること」「<p>で囲まれてしまうこと」を念頭においておく
• <img>は「<p>で囲まれてしまうこと」を念頭においておく
• <table>は<tbody>が入ることを念頭においておく
• コメントアウトは使わない [11月6日追記]

こんな感じでしょうか。
…それにしても、権限によって自動整形の挙動が違うこと、本当に驚きました。
結構知られていることなのでしょうか？？皆さん困っていないのでしょうか…。
それとも、コーディング済みのソースを流し込むことが一般的ではないのでしょうか。
（個人的には嫌いですが）

長い間、おかしいおかしいと思っていたこと、まとめることは出来てちょっとスッキリしました。

 

よし！法則つかんだぞ！と思ったのもつかの間、検証では大丈夫だったコメントアウトにNGパターンが発生してしまいました。どうやら使わない方が安全のようです。
自動整形は本当に手強いです。私は、管理画面内にコーディング済みのソースを流し込んだあとは必ず目視確認をしているのですが、今回はそれで救われました。コメントアウトがおかしくなった影響で、その部分以下がごっそり抜け落ちるという現象になっていたので、気付かずにリリースしていたら危ないところでした…。また気付いたことがあればアップしたいと思います。 [11月6日追記]