Warning: count(): Parameter must be an array or an object that implements Countable in /home/kaz-i/www/kaz-labo.com/wp/wp-includes/post-template.php on line 284

wordpressのタグや属性値がビジュアルエディタで消えるのを防ぐ方法

こんにちは。KAZです。

エディター紹介:
Warning: Use of undefined constant first_name - assumed 'first_name' (this will throw an Error in a future version of PHP) in /home/kaz-i/www/kaz-labo.com/wp/wp-content/themes/BRAND_5.0.0/lib/functions/sc_author.php on line 3
KAZ 
Warning: Use of undefined constant last_name - assumed 'last_name' (this will throw an Error in a future version of PHP) in /home/kaz-i/www/kaz-labo.com/wp/wp-content/themes/BRAND_5.0.0/lib/functions/sc_author.php on line 3
アバター


Warning: Use of undefined constant user_description - assumed 'user_description' (this will throw an Error in a future version of PHP) in /home/kaz-i/www/kaz-labo.com/wp/wp-content/themes/BRAND_5.0.0/lib/functions/sc_author.php on line 9
本業ではWEBマーケティングに従事。サイト管理から構築、SEO対策、コンテンツマーケティングを1人で担当する。転職後1ヶ月でサイトリニューアルし、1年半でUUを4.5倍に。年間売上を約7,000万円伸ばす。 が、しかし、給料が全く伸びない悲しきダブルワーカー。フリーランスでの受託や輸入販売業での収入は300万くらい。本業の収入はヒミツ。

wordpressを使用していると、ビジュアルエディタ上で編集できないようなカスタマイズをしたいことがあります。通常は、ページ独自のcssを設定したり、jsを設置したりなどです。その場合、テキストエディタで編集をするのが一般的だと思います。問題は、テキストエディタからビジュアルエディタに切り替えた際に発生します。切り替えた際に書いたはずの内容が消えてしまうことが起こってしまうのです。現行のwordpressは大抵の属性値に対応しているので、このトラブルは少なくなっていると思われますが、独自の属性値を設定した場合などはこの限りではありません。今回はそうした場合の対処方法についてご紹介していきます。

症状

テキストエディタからビジュアルエディタに切り替えたタイミングでタグや属性値が消えてしまう現象。

検証

例えば、テキストエディタで下記を記載してみてください。

<span>TEST</span>

これをビジュアルエディタに切り替え、再度テキストエディタにすると

TEST

のみが表示され<span></span>が消えてしまっています。

ここで使用される<span>は、属性値も持っていないため、意味を持たないタグとして認識されてしまっているのでビジュアルエディタに切り替わった際に自動で消去されてしまいます。しかし、実運用上では、この<span>にCSSが設定されているケースもあり、消えてしまうと困るといったことが発生します。class名をつければいいという話にもなるのですが、何もこうしたspanに限らずこうして消えるケースは発生します。

特に問題となるケース

特に問題となるのが、javascriptで独自の属性値を作成した場合は、当然のように消えてしまいます。テキストエディタだけで作業すれば良いのですが、それではwordoressを使う意味がありません。独自の設定をした上でビジュアルエディタを使えるようにしてみましょう。

解決策

google先生に聞いて下記の記事の内容をそのまま使わせて頂きました。古い記事なのでdata-roleなどの属性値が消えてしまうと記載がありますが、現行のwordpressはdata-roleなど幅広い属性値に対応しています。ただ、上記のようなケースや、独自の属性値を使用したい場合などにはこの設定は現在も有効のようなので、是非お試し下さい。

WordPressのエディタが独自拡張の属性値を消してしまう問題への対処

結論から言えば、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 );
}

これを導入することによって解決しました。

詳細は引用記事にて説明がありますので、そちらを参考にしてください。

引用:WordPressのエディタが独自拡張の属性値を消してしまう問題への対処

  • この記事を書いた人
page top

CONTACT

MENU