【WordPressテーマ開発】CSSが突然効かなくなった ! の解決策

こんにちは ! Webデザイナー目指して勉強中のかいもちです🐣
最近は、ワードプレスのテーマ開発に勤しんでおりまして、まもなくポートフォリオが完成する予定です ! 🤗

ということで、最近のツイッターでは、ワードプレスやってみてのあれやこれやを垂れ流しているのですが...

これをつぶやいたとき、「自分も全く同じところでつまずいた ! 」というフォロワーさんがいらっしゃいまして、、、
もしかして、初心者あるある ?
このことについてまとめたら誰かの役に立つかも ? 
という気持ちで、細かく書いていこうと思います ! 

お困りごと : 
「HTMLでは問題なく実装されていたCSSが、WP化したら効かなくなった(もしくは崩れた)

WP化する前は、こんな感じのコードでした。

HTMLだよーーー。

<ul>
  <li>
    <a></a>
  </li>
  <li>
    <a></a>
  </li>
　...
<ul>

CSSだよーーー。

ul {
display: flex;
}

よくある、リンクが貼られたリストを横書きにしたかったコードです。

これをWP化した際のコードはこんな感じでした。

phpだよーーー。

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <ul>
      <li>
        <a></a>
      </li>
      ...
    </ul>
  <?php endwhile; ?>
<?php endif; ?>

こちら↑、ワードプレスを使ってる方にはお馴染み「ループ処理」なんですが、簡単に言うと「投稿の内容がもしあれば、別の投稿がある間は以下の処理を繰り返してね〜」というものです。
今回の場合は、<li>がある限り、<li>に対してこの処理をしてねーという指定をするためにループを書いてます。

で、こちらを実際読み込ませてみると・・・
なんと、CSSをさわっていない(今回はそもそも省略してますが、クラス名も変更していない)のに、なぜか display: flex; が効かないという悲しい結果になったのです。。。ええ。。。😱

--------------------

解決策:
ループ処理の始点/終点を変える

先にコードを書いちゃいますが、このように書き換えたら問題なくdisplay: flex; が効きました。

phpだよーーー。

<ul>
  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
      <li class="works__catch--link">
        <a></a>
      </li>
      ...
    <?php endwhile; ?>
  <?php endif; ?>
 </ul>

・・・なんだか間違い探しみたいですが、変わったところは <ul>と <?php から始まるphpの順番です。
要するに、ループ処理の範囲を<ul>からではなく、<li>の始まりから終わりまでにしたということです。

--------------------

補足:
ワードプレス化では、どこに何のタグを読ませるのか、注意深く考える必要がある

わたしはこれまでHTMLをマークアップする上で、<ul>と<li>の役割の違いを明確に考えたことなんてありませんでした。
親要素と子要素だねーくらいの認識です。🤣

<li>を横並びにしたければ<ul>にflexをかける、というのも、バカの1つ覚えみたいな感じでするするっと書いていまして・・・。
なので今回、なんの迷いもなく<ul>からまるっとループをかけてしまったのですが・・・
ループさせたい場所って、<ul>じゃなくて<li>、ですよね。という ! 笑

--------------------

どこになんのタグを読ませるか注意深く考える必要がある・・・なんて、書いてみれば至極当たり前のことなんですが🤣、それをとても強く感じた出来事(事件 ? )でした。笑

読んでくださってありがとうございました ! ✨