articleタグ全体をaタグで囲ってもaタグがずれる場合

articleタグ全体をaタグで囲ったのですが、aタグがずれる場合の対処法をお伝えします。

解決法

<?php the_category(); ?>

は、aタグのリンクを生成してしまいます。

その記事に紐づくカテゴリーの取得方法を調べるとこうなりました。

<article class="blog_article">
              <figure class="blog_article-img-box">
                <?php if (has_post_thumbnail()) :
                  the_post_thumbnail('thumbnail');
                else :
                ?>
                  <img src="<?php echo get_template_directory_uri(); ?>/../img/noimage.png" alt="">
                <?php endif; ?>
          </a>
          <a href="<?php the_permalink(); ?>">
            <small class="blog_category">
              <?php
              $categories = get_the_category();
              if ($categories) {
                echo $categories[0]->name;
              }
              ?>
            </small>
            </figure>
            <div class="blog_article-text-box">
              <p class="blog_article-title"><?php the_title(); ?></p><small class="blog_article-date"><?php the_time('Y-m-d'); ?></small>
            </div>
            </article>
          </a>

また、aタグは通常インライン要素なので、大枠のaタグは、display:block;をかけてblock要素にする必要があります。

誤りなどございましたらご指摘いただけると幸いです。

参考サイト

投稿記事に属するカテゴリーを表示する色々な方法