【WordPress】<?php the_content(); ?>にCSSが効かない？！【解決済】

とっちゃん@nyanco! です。

今回は、【Wordpress】<?php the_content(); ?>にCSSが効かない？！【解決済】というお話です。

WordPressの「投稿」ページのコンテンツ部分をオリジナルテーマで表示させようとしたら少しつまづいたので備忘録メモ。

▼「投稿」ページのコンテンツ部分とはこの部分のことです

こんな感じで記述しました。

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
　　<p class="hoge"><?php the_content(); ?></p>
<?php endwhile; endif; ?>

1・3行目はphpのループ命令です。
2行目の<?php the_content(); ?>が、記事のコンテンツを呼び出すphpのテンプレートタグで、ループの中でしか機能しないのでループ処理で挟んでいます。

で、その<?php the_content(); ?>を「hoge」というclass指定の「pタグ」で囲んでいるのですが、記事のコンテンツ内容は表示はされるものの、class「hoge」が反映されないという結果でした。

Chromeの開発者ツールでコードがどうなってるのか調べてみると、「hoge」の「pタグ」はちゃんと存在しているものの中味は空っぽ、さらにその下に別の空っぽの「pタグ」が存在していました。

これはどういうことか？と思いGoogle先生に聞いてみると即解決。

▼参考にさせていただいたページ

なんと、WordPressにはpタグが自動挿入されるデフォルト機能があるとのこと。

…確かに、今まで投稿ページで記事を作成する時に「思うようにいかないなぁ」ということが度々ありましたが、これが原因だったのかぁ。

解決方法(1)

とっても簡単です。
<?php the_content(); ?>の前に、
<?php remove_filter('the_content', 'wpautop'); ?>
というコードを加えるだけでOK！

直後のテンプレートタグのデフォルト機能を無効にする、という意味のようです。

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
　　<p class="hoge"><?php remove_filter('the_content', 'wpautop'); ?><?php the_content(); ?></p>
<?php endwhile; endif; ?>

上記コードですと、無事に「hoge」のスタイルが反映させるようになりました！

解決方法(2)

「function.php」に下記コードを追記するとこのデフォルト機能を無効にできるとのこと。

remove_filter('the_content', 'wpautop');
remove_filter( 'the_excerpt', 'wpautop' );

ただこの方法だと、すでに作成した全記事にも影響が及ぶので今まで作った記事が崩れてしまう恐れがあります。
なので、新規で立ち上げるサイト以外は、個別対応ができる解決方法(1)の方が良い感じですね♪

とっても勉強になりました！

今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧