WordPress the_category();のタグを挿入するとスタイルが当たらなくなります。

Question

                <article>
                  <a href="_single">
                    <span class="program--cate">地上波</span>
                    <h2 class="program--text">テキストが入ります。</h2>
                  </a>
                </article>

article {
    border-bottom: 1px solid #707070;
    margin-bottom: 45px;
}
 article a {
    display: flex;
    text-decoration: none;
    color: inherit;
    align-items: center;
    justify-content: flex-start;
    padding: 1.1em 0 1.1em 0;
    position: relative;
    position: relative;
}

 .program--cate {
    width: 97px;
    background: none;
    color: #40464b;
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
    border: 1px solid #707070;
    line-height: 1.3;
    padding: 2px 0;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
}

.program--text {
    font-size: 100%;
    line-height: 1.4;
    margin-left: 45px;
    max-width: calc(100% - 240px);
    letter-spacing: 1px;
}

上記画像のhtmlコードをwp化しようと、以下のように書きました。

                <article>
                <a href="<?php get_permalink(); ?>">
                    <span class="program--cate"><?php the_category(' '); ?></span>
                    <h2 class="program--text"><?php the_title(); ?></h2>
                  </a>
                </article>

すると下記画像のレイアウトになります。

<span>タグ<h2>タグが<a>タグからはずれ、
<a href="<?php get_permalink(); ?>"></a>となり、

<?php the_category(' '); ?>を囲う<span>タグのスタイルが効かなくなります。 <?php the_category(' '); ?>の記述を<span class="program--cate">地上波</span>に戻すと、意図したレイアウトになるのですが、「地上波」の部分はブログ記事のカテゴリーとして表示したいです。

<a href="<?php get_permalink(); ?>">の閉じタグを</h2>の後ろに持って行き。

<?php the_category(' '); ?>に,<span>タグのスタイルが当たればいいのではないかと思うのですが、、、

どう解決したらいいのかわかりません。
アドバイスお願いします。

Answer 1

aタグの中で、aタグを出力するthe_categoryを使っているからです。（aタグの中にaタグはHTMLの文法上できません）

【【WordPress】the_category()のリンクなしバージョン | Bamboo Works（バンブーワークス）】
https://bambooworks.co/wordpress-category-no-link/

Comments

[Fukusuke0604]

回答ありがとうございます。
頂いたリンクを参照に無事に解決しました。 夜中に返答ありがとうございます。

（aタグの中にaタグはHTMLの文法上できません）知りませんでした。
今回のケースだと、「地上波」をクリックするとカテゴリー「地上波」一覧へ移動する。というのは（aタグの中にaタグが入るため実現できない。 HTMLのソースコードを変更する必要がある。という事だったのでしょうか?

[kei344]

何を聞きたいのかがコメント文から読み取れませんでした。

[Fukusuke0604]

伝え方が下手ですみません。
頂いた回答とリンクの記事を読み、自分なりに考えて理解できました。

ありがとうございました。