【PHP】要素がspanを抜けてしまう

Question

こちら↓の記事を参考に、カテゴリーの色分けをしようとしています。
https://smileworks.biz/tips/wp_php/2431

実際にやってみると、

<!-- カテゴリ-->直下のspanタグの中に、画像内ハイライトのaタグが入るはずなのですが、なぜか抜け出してしまいます。

他の方が解説しているコードも試してみましたが、結局同じ結果になってしまったのでご質問させてください。
以下、PHPのコードです。

            <div class="img-wrap">
            <!--画像を追加-->
            <?php if( has_post_thumbnail() ): ?>
              <?php the_post_thumbnail('full'); ?>
            <?php else: ?>
              <img src="<?php echo get_template_directory_uri(); ?>/img/no-image.gif" alt="no-img"/>
            <?php endif; ?>
            <!--カテゴリ-->
            <?php if (!is_category() && has_category()): ?>
              <?php $cat = get_the_category(); $cat = $cat[0]; {
              echo '<span class="' . $cat->category_nicename . '" />';
              } ?>
              <?php the_category(','); ?>
              </span>
            <?php endif; ?>
            </div><!--end img-warp-->

ご回答よろしくお願い致します！

Answer 1

aタグは入れ子にできません
またブロック要素を含めることもできません
（ブロック要素を囲むのはhtml5でできるようになるっぽいですが）

要素詳細を見た感じ
.img-wrapの祖先要素にaタグがいるのではないですか？

Comments

[shuto_fujiwara]

仰るとおりです！
aタグの知識が抜け落ちていました・・・
おかげでなんとか解決できそうです！
ありがとうございました！

Answer 2

aタグは入れ子にすると勝手に抜け出します。

例えば

<div>
<a>外側ここから<a>内側</a>外側ここまで</a>
</div>

と書いても、ブラウザは次のように勝手にaタグを閉じて入れ子にさせません。

<div>
<a>外側ここから</a><a>内側</a>外側ここまで
</div>

さてどう解決するかですが、ご提示のPHPには外側のaタグがありませんし、the_post_thumbnailはaタグを出力しないはずなので、ご提示のPHPは何かお間違えではないでしょうか？

<div class="img-wrap">の次にaタグを出力するコードがどこかにあるはずなのでそれを取り除かないといけません。

それかひょっとしてJSで入れているのかもしれませんね。

そうして外側のaタグを取り除かないと正しいHTMLにはなってくれませんが、正しさに目をつぶりひとまず力技で解決するとすれば、<object>で囲むという方法があります。

例えば

<div>
<a>外側ここから<object><a>内側</a></object>外側ここまで</a>
</div>

という風に<object>で囲むと、ブラウザは次のようにその通りにしてくれます。

<div>
<a>外側ここから<object><a>内側</a></object>外側ここまで</a>
</div>

この方法ですと、ご提示のPHPならこうなるでしょうか

<object><?php the_category(','); ?></object>

ただ繰り返しますが、これは正しいHTMLではないので、外側のaタグを取り除くのが理想です。

Answer 3

あ解決してましたね…笑

Comments

[shuto_fujiwara]

せっかく詳しく書いていただいたのにすみません・・・。
ikatakoさんの説明と解決策とても勉強になりました！
私もikatakoさんのように解説できるように努力していきます！
本当にありがとうございました！