質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

3回答

526閲覧

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

shuto_fujiwara

総合スコア26

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/11/13 06:55

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

実際にやってみると、
デベロッパーツール

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

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

PHP

1 <div class="img-wrap"> 2 <!--画像を追加--> 3 <?php if( has_post_thumbnail() ): ?> 4 <?php the_post_thumbnail('full'); ?> 5 <?php else: ?> 6 <img src="<?php echo get_template_directory_uri(); ?>/img/no-image.gif" alt="no-img"/> 7 <?php endif; ?> 8 <!--カテゴリ--> 9 <?php if (!is_category() && has_category()): ?> 10 <?php $cat = get_the_category(); $cat = $cat[0]; { 11 echo '<span class="' . $cat->category_nicename . '" />'; 12 } ?> 13 <?php the_category(','); ?> 14 </span> 15 <?php endif; ?> 16 </div><!--end img-warp-->

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

投稿2020/11/13 07:22

編集2020/11/13 07:23
KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shuto_fujiwara

2020/11/13 07:33

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

0

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

例えば

php

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

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

html

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

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

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

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

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

例えば

php

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

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

html

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

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

php

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

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

投稿2020/11/13 07:33

ikatako

総合スコア270

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

あ解決してましたね…笑

投稿2020/11/13 07:34

ikatako

総合スコア270

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shuto_fujiwara

2020/11/13 07:39

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問