WordPressのpタグspanタグbrタグが消える原因と解決方法(一時対応有)

WordPressのpタグspanタグbrタグが消える原因と解決方法のメモ

原因

ワードプレスにおけるタグの消失はタグの種類によって原因が異なります。

エディタをテキスト→ビジュアル変更時に修正
エディタを保存時に修正
HTMLの文法に誤りがあり自動修正
1. <a>タグの誤り
2.  タグの誤り
3. タグの誤り

１エディタをテキスト→ビジュアル変更時に修正される

テキストエディタからビジュアルエディタに変更することでpタグ、spanタグ、brタグなどの不要なタグが消去されます。

これはワードプレスの機能であるwpautopが作用しています。ワードプレスのウィジットブロックのテキストも同様に消去される場合があります。解決策は下に記載しました。

<br>が消える	<p>タグで囲まれていなかったりWPの機能で消える
<span>が消える	<p>タグで囲まれていなかったりセレクタがない場合で消える
<i>が消える	セレクタがない場合で消える

２エディタを保存時に修正

エディタに保存時に消去されたり、コードを編集される場合があります。こちらの主な原因はコードの記述にあります。解決策は下に記載しました。

<br>が消える	<p>タグで囲まれていなかったりWPの機能で消える
<span>が消える	<p>タグで囲まれていなかったりセレクタがない場合で消える
<i>が消える	セレクタがない場合で消える

HTMLの文法に誤りがあり自動修正

HTMLに誤りがあると自動修正されます。この場合、TinyMCE AdvancedなどでWordPressの機能を停止していても起こります。

<br>が消える	<p>タグで囲まれていなかったりWPの機能で消える
<span>が消える	<p>タグで囲まれていなかったりセレクタがない場合で消える
<a>が消える	ブロック要素を囲んでいる場合で移動する
<`input`>が消える	何らかの理由で消えたり移動する

タグの文法が誤っている時には<a>タグの位置が移動したりします。（aは基本ブロック要素であるdivを囲めないため）cssのセレクタの指定によってはデザインが崩れます。ワードプレスのエディタ上のこの挙動は、プラグインなどではどうにもできない問題のためタグを編集し直す必要があります。

詳しくはこちらのサイトに記載されています。

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

複数ブロック要素を<a>タグで囲みたい場合

要素を<a>タグで囲む方法の一つに<a>タグをpodision:abusoluteでリンク要素を浮かせて全体にリンクをかける方法があります。

aタグが入っている親要素 {
    position: relative; 
}

a {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

cssのセレクタ指定や追加方法がよくわからない方は要素に直接記述方法もあります。

<aの親要素 style="position: relative;">

<a href="/#" style="position: absolute; top: 0; bottom: 0; right: 0; left: 0;">

解決策

TinyMCE Advancedをインストール

プラグインの「TinyMCE Advanced」をインストールすることでワードプレスに標準機能である

改行をHTMLの へ置き換える
2連続の改行を～へ書き換える

を停止します。

functionに記載する

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::
** エディタのビジュアル・テキスト切替でコード消滅を防止
::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
function my_tiny_mce_before_init( $init_array ) {
    $init_array['valid_elements']          = '*[*]';
    $init_array['extended_valid_elements'] = '*[*]';
    return $init_array;
}
add_filter( 'tiny_mce_before_init' , 'my_tiny_mce_before_init' );

またクラスの付与されていないiタグやspanタグはビジュアルエディタの切り替えで消えてしまうことがある、そういった場合は下記

/**
 * ビジュアルエディタに切り替えで、空の span タグや i タグが消されるのを防止
 */
if ( ! function_exists('tinymce_init') ) {
    function tinymce_init( $init ) {
        $init['verify_html'] = false; // 空タグや属性なしのタグを消させない
        $initArray['valid_children'] = '+body[style], +div[div|span|a], +span[span]'; // 指定の子要素を消させない
        return $init;
    }
    add_filter( 'tiny_mce_before_init', 'tinymce_init', 100 );
}

functionに記述できない場合（一時的な対処法）

タグにクラスを付与することで消去をキャンセルすることができます。functionの編集権限などがない場合などの応急処置として対応する場合。

<span class="">あああ</span>
<p class="">あああ</p>
<br class="">

こちらはウィジットのテキストブロックなどにも有効です。

ウィジットテキストエディタ挙動確認

<span>あああ<br>
あああ<br class="test">
</span>

※セレクタなしspan消える
※セレクタがあってもbr消える

<p><span>あああ<br>
あああ<br class="test">
</span></p>

※セレクタなしp消える
※セレクタなしspan消える
※セレクタがあってもbr消える

<p class=""><span class="">あああ<br>
あああ<br class="test">
</span></p>

※セレクタありp消えない
※セレクタありspan消えない
※セレクタなくてもbr消えない

参考：WordPress4.8以降のテキストウィジェットでpやbrタグの余計な余白が入るのを除去する方法

参考：エディタ切替でタグ・コードが消えるのを防ぐテクニック

原因