WEBTODESIGN

【WordPress】aタグが勝手に閉じられちゃう問題【工夫】

aタグが勝手に閉じられてしまう

WordPressでループをしようとしたところ、なぜか<a>タグが勝手に閉じられてしまい、予期しないhtml構造に…。

原因はaタグの中にdivタグを入れたこと

HTML5の仕様では、<a>タグの中にブロックレベル要素（例：<div>）を入れることは許可されています。しかし、一部のブラウザやHTMLパーサーがこれを正しく解釈しない場合があるため、予期しない動作や表示の問題が発生することがあるようです。

構造が単純であれば、<div>タグを<span>タグに置き換えればOKです！

結構複雑な構造で、<ul>なども入っている…
そんなときは、<a>タグは諦めていっそJavaScriptで飛ばしちゃいましょう。

要素をクリック可能にする

<a>タグを使用せずに、要素自体をクリック可能にするために、JavaScriptを使用します。要素全体をクリックしたときに指定されたURLにリダイレクトすることができます。

手順

  • 要素に、リダイレクト先のURLをデータ属性として保存します。
  • JavaScriptを使用して、クリックイベントリスナーを追加。
  • そして、クリックされた要素のデータ属性からURLを取得し、そのURLへリダイレクトします。

実装

WordPressのループ内で使用しているという前提です。

<!-- ループ内 -->
<div data-url="<?php the_permalink(); ?>">内容</div>
<!-- ループ内 -->

まず、クリックしたい要素にdata-urlを付与。data-urlにはパーマリンクを入れておきます。
そして、JavaScriptでは以下のような処理をします。

document.addEventListener('DOMContentLoaded', function() {
    var liElements = document.querySelectorAll('div[data-url]');

    liElements.forEach(function(li) {
        li.addEventListener('click', function() {
            window.location.href = li.getAttribute('data-url');
        });
    });
});

上記の方法で、要素をクリックすることで指定されたURLにリダイレクトできるようになります。

カーソルをポインターにしておく

<a>タグではなくなったため、カーソルは矢印のままです。

なので、CSSでカーソルをポインターにしておくと完璧です。

cursor: pointer;

RECOMMENDATION

NEWEST