2022/02/17 (更新日: 2022/02/20)

WordPress【初心者】自作テーマでthe_content()のcssが当たらない

Web制作

the_content()で記事を出力したらスタイルが崩れる

こんにちはふるぽんです。今日は上のタイトルのあるように、ループ内で記事を出力したら、
スタイルが崩れた時の対処法です。

そもそもthe_content()で出力される記事には自動でhタグやpタグがついてきます。
そのため、HTMLをwordpress化する時は、そのままでは元々のスタイルは当たってない状態になります。

前回のカスタムメニューと一緒ですね。

最初は頭を抱えてしまいましたので、今頭を抱えている人のお役に立てれば幸いです。
かなり簡単です笑

まずはこちらが元々のHTMLになります。

 <div class="p-category">
<h3 class=“p-category__title”>タイトル</h3>
<p class=“p-category__text”>
ここにテキストここにテキストここにテキストここにテキスト ここにテキストここにテキストここにテキストここにテキスト </p>
</div>

上記のdivタグ内にthe_contentを記述して管理画面の投稿ページで作成される記事を出力します。

<div class="p-category">
<?php the_content();?>
</div>

としてブラウザを更新すると,下の画像のようにスタイルが当たってない！
まぁ当たり前なんですが笑

クリックすると見やすくなります

デベロッパーツールで確認すると、、、
idは自動生成されていますが、classは空っぽですね。

この生成されたpタグやhタグに直接CSSを当てれば済む話なんですが、せっかくHTMLで作ったクラスに当てているスタイルを反映させたいという方もいらっしゃるでしょう。

get_the_content()でクラスを付与

では指定したclass名を付与していきます
get_the_content()は記事の値を取得するので、それを利用します。
PHPのstr_replace()を使って文字列を書き換えていきます。
以下のコードを先ほどのthe_content()の代わりにdivタグ内に記述します。

ちなみにstr_replace()パラメータは以下の通り。
str_replace( $検索の文字列 , $置換後の文字列 , $検索対象の文字列 [, int &$カウント ] )

<div class="p-category">
$content = get_the_content();

$content = str_replace('<p','<p class=abc ',$content);
$content = str_replace('<h2','<h2 class=def ',$content);
$content = str_replace('<h3','<h3 class=ghi ',$content;

echo $content;
</div>

そしてブラウザを更新すると
テキストにCSSが反映されている

指定したクラスも反映されています。
デベロッパーツール

注意！！

クラスを指定する時にダブルクォーテーション（” ”）も自動で出力されるので” ”はなしで記述してください。
$content=str_replace('<p','<p class=abc ',$content);

自作テーマは難しいですよね。
僕も学びながら、発信しながら勉強しています。
頑張りましょう！

Web制作の学習でつまずきそうなら、DM頂けましたら僕にできることはお手伝い&助言いたします。
とは言え、まだまだ未熟者ですので、一緒に頑張りましょう。
以下は40代の僕が学習してきたことです。
何を勉強したら良いかわからない方はどうぞ。

ゲームで仮想通貨の不労所得を稼ぐ【オンラインカジノBetfuryのやり方】