【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>、ですよね。という ! 笑
--------------------
どこになんのタグを読ませるか注意深く考える必要がある・・・なんて、書いてみれば至極当たり前のことなんですが🤣、それをとても強く感じた出来事(事件 ? )でした。笑
読んでくださってありがとうございました ! ✨