Wordpressでショートコード内に発生する意図しない<p>タグの無効化

Wordpressで自動生成される<p>タグ!

wpautopを取り除いたり

function.php

remove_filter('the_content', 'wpautop'); 

CSSで<p>を非表示にするのは有名ですが、

style.css

p:empty {
	display: none;
}

ショートコードで記述したhtmlには効果がない！！

原因1

優先度

調べたところ、「自動整形」と「ショートコードの実行」の優先度が関係しているらしい。

順番
①　wpautop
↓
②　do_shortcode

どおりで自動整形の無効化が効かないわけです。

原因2

'the_content'の本文とは

さらに、remove_filter('the_content', 'wpautop'); の
'the_contentには、ショートコードが、そもそも含まれていない。

get_the_contentすると、「本文」には、ショートコードはコードとしてしか表示されていないのが、わかります。

下記のようにショートコードを展開すれば、本文の中に、含むことができるようです。

function.php

    $content = do_shortcode( get_the_content() );

原因3

p:emptyは、スペースや改行、コメントアウトが含まれてると「empty」と認識しない

解決策

HTMLからスペース・改行・コメントアウトを削除して、自動生成された<p>タグをすべて空っぽにする。
そうすれば<p>が発生しても、cssで非表示にできる。

function.php

remove_filter( 'the_content', 'wpautop'); 

function noautop( $content ){
    global $post;
    if(!$post -> post_content){
        return $content;
    }
    $before_content = do_shortcode($post -> post_content);//本文内にショートコードを展開させる
    $kaigyo = trim($before_content);//改行を削除
    $str = preg_replace('<<!--.*?-->>','',$kaigyo);//<!--で始まり-->で終わる部分の削除（なぜか削除後に<>ができてしまうので、それも追加）
    $str = str_replace(array("\r\n", "\r", "\n"), '', $str);//これでも、できてしまう改行を削除
	return $str;
}
add_filter( 'the_content', 'noautop', 1 );

style.css

p:empty {
	display: none;
}

参考サイト
https://qiita.com/kawamurayuto/items/2ba902834977874d47bc