こんにちは。KAZです。
wordpressを使用していると、ビジュアルエディタ上で編集できないようなカスタマイズをしたいことがあります。通常は、ページ独自のcssを設定したり、jsを設置したりなどです。その場合、テキストエディタで編集をするのが一般的だと思います。問題は、テキストエディタからビジュアルエディタに切り替えた際に発生します。切り替えた際に書いたはずの内容が消えてしまうことが起こってしまうのです。現行のwordpressは大抵の属性値に対応しているので、このトラブルは少なくなっていると思われますが、独自の属性値を設定した場合などはこの限りではありません。今回はそうした場合の対処方法についてご紹介していきます。
症状
テキストエディタからビジュアルエディタに切り替えたタイミングでタグや属性値が消えてしまう現象。
検証
例えば、テキストエディタで下記を記載してみてください。
<span>TEST</span>
これをビジュアルエディタに切り替え、再度テキストエディタにすると
TEST
のみが表示され<span></span>が消えてしまっています。
ここで使用される<span>は、属性値も持っていないため、意味を持たないタグとして認識されてしまっているのでビジュアルエディタに切り替わった際に自動で消去されてしまいます。しかし、実運用上では、この<span>にCSSが設定されているケースもあり、消えてしまうと困るといったことが発生します。class名をつければいいという話にもなるのですが、何もこうしたspanに限らずこうして消えるケースは発生します。
特に問題となるケース
特に問題となるのが、javascriptで独自の属性値を作成した場合は、当然のように消えてしまいます。テキストエディタだけで作業すれば良いのですが、それではwordoressを使う意味がありません。独自の設定をした上でビジュアルエディタを使えるようにしてみましょう。
解決策
google先生に聞いて下記の記事の内容をそのまま使わせて頂きました。古い記事なのでdata-roleなどの属性値が消えてしまうと記載がありますが、現行のwordpressはdata-roleなど幅広い属性値に対応しています。ただ、上記のようなケースや、独自の属性値を使用したい場合などにはこの設定は現在も有効のようなので、是非お試し下さい。
結論から言えば、function.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', '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', '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 );
}
これを導入することによって解決しました。
詳細は引用記事にて説明がありますので、そちらを参考にしてください。
