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

原因

テキストエディタからビジュアルエディタに変更することでpタグ、spanタグ、brタグなどの不要なタグが消去されます。これはワードプレスの機能であるwpautopが作用しています。ワードプレスのウィジットブロックのテキストも同様に消去される場合があります。

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

複数ブロック要素を<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の <br />へ置き換える
  • 2連続の改行を<p>~</p>へ書き換える

を停止します。

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タグの余計な余白が入るのを除去する方法

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