WordPressに関して、the_contentで出力した内容にcssを反映させたいです。

Question

WordPressに関して、the_contentで出力した内容にcssを適用させたいです。

自動で出力される改行や<p>タグが邪魔でcssが適用されていません。
これらの邪魔な<p>タグを消すにはどうすればいいでしょうか？？

発生している問題・エラーメッセージ

<?php the_content(); ?>を「contact＿＿text」というclass指定の「pタグ」で囲んでいるのですが、 <?php the_content(); ?>で出力したコードを、googleの「ページのソースを表示」で確認すると、

「contact__text」の「pタグ」はきちんと存在しているものの、その中に「pタグ」で囲まれた内容が出力されていました。
以下「ページのソースを表示」で表示される結果のコードです。

<section class="contact">
  <div class="contact__wrapper">
    <p class="contact__text">
<p>弊社に興味を持って頂きありがとうございます。商談やサービスのご利用、資料請求について下記のフォームよりお問い合わせください。</p>
</p>

    <form action="">
      <label class="contact__inputLabel" for="company">会社名</label>
.
.
.

該当のソースコード

<?php 
/*
Template Name: コンタクトページ用
*/
get_header();
?>
<?php
 if(have_posts()) :
   while(have_posts()) :the_post();
?>
<main class="contactMV">
  <h1 class="contactMV__title"><?php the_title(); ?></h1>
</main>
<div class="breacCranp">
  <a class="breacCranp__text"><span class="border--bottom">ホーム</span> >　お問い合わせ</a>
</div>


<section class="contact">
  <div class="contact__wrapper">
    <p class="contact__text"><?php the_content(); ?></p>

    <form action="">
      <label class="contact__inputLabel" for="company">会社名</label>
      <input class="input" type="text" id="company" placeholder="Engress">

      <label class="contact__inputLabel" for="name">氏名</label>
      <input class="input" type="text" id="name" placeholder="田中　太郎">
    
      <label class="contact__inputLabel" for="mail">メールアドレス</label>
      <input class="input" type="email" id="mail" placeholder="[e-mail]">
    
      <label class="contact__inputLabel" for="tel">電話番号</label>
      <input class="input--tel" type="text" id="tel" placeholder="01-2345-6789">
    
      <p class="contact__radioText">お問い合わせの種類を選択してください<span class="fwb">（資料請求の方は資料請求を選択ください）</span></p>

      <input id="talk" class="contact__radioBtn" type="radio" name="種類" checked>
      <label for="talk" class="contact__kindsLabel">商談のご相談</label>
      <br>
      <input id="service" class="contact__radioBtn" type="radio" name="種類">
      <label for="service" class="contact__kindsLabel">サービスに関するお問い合わせ</label>
      <br>
      <input id="document" class="contact__radioBtn" type="radio" name="種類">
      <label for="document" class="contact__kindsLabel">資料請求</label>
      <br>
      <input id="other" class="contact__radioBtn" type="radio" name="種類">
      <label for="other" class="contact__kindsLabel">その他</label>
      <br>

      <label class="contact__textareaLabel" for="text">お問い合わせ内容</label>
      <textarea id="text" placeholder="入力して下さい"></textarea>

      <p class="contact__pribacy"><a href="" class="text--yellow">プライバシーポリシー</a>に同意の上、送信ください。</p>

      <input id="check" class="contact__checkbox" type="checkbox" name="プライバシーポリシー">
      <label for="check" class="contact__checkboxLabel">プライバシーポリシーに同意する</label>


      <input class="button--submit" type="submit" value="送信する">
    </form>
  </div>
</section>
<?php
   endwhile;
  endif;
?>
<?php get_footer(); ?>

試したこと

1.<?php the_content(); ?>の前に、

<?php remove_filter('the_content', 'wpautop'); ?>

というコードを加える

2.「function.php」に
remove_filter('the_content', 'wpautop');
remove_filter( 'the_excerpt', 'wpautop' );
を記述する

3.googleのキャッシュをクリアする

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

こちらdivタグに変更

<p class="contact__text">

して

<div class="contact__wrapper">
 <div class="contact__text">
  <?php the_content(); ?>
 </div>
省略
</div>

とする

対応するCSSファイルに以下を記載

.contact__text p {
対応させたいcss
}

これでいかがでしょうか

Comments

[Cyawanmushi]

ありがとうございます！！期待通りのスタイルを適用することができました！
<p>タグを消さずに利用する手段は目から鱗で、大変勉強になりました。
改めて本当にありがとうございました。。