(Wordpress) <a href="https://～></a>が繰り返されます。

Question

こんにちは、質問をさせてください。
WordPress （バージョン：5.2.5）
テーマはストーク（バージョン: 1.3.0）を使用中です。
https://open-cage.com/stork/
よろしくお願いします。

固定ページでコードエディタ編集をしているのですが、<a href="https://～></a>がテキストを括らずに繰り返されて記載されてしまいます。
削除をして更新をしてもまた現れます。
更新した時によって、<a href="https://～></a>の繰り返される数が変わりとても多い時もあります。
実装的には問題ないのですが、とても見難く編集がしにくいです。
エラー？か分かりませんが、調べても同じような事例が見つからずどう対策すれば良いか分かりません。

少しうろ覚えですが、約1年位前にWordpressのアップデートをしてからこのようなことが起きたのではないかと自分では思っております。

回答を何卒よろしくお願いいたします。

class名、テキスト、URLは書き換えてますが、このコードで繰り返し記載されています。

<div class="thank-you0"><a href="https://sample.com/abc/1234/"> <div class="thank-you1> </div> </a><!--ここから勝手に記載されてしまいます。-><a href="https://sample.com/abc/1234/"></a><a href="https://sample.com/abc/1234"></a><a href="https://sample.com/abc/1234"></a><a href="https://sample.com/abc/1234"></a><a href="https://sample.com/abc/1234/"></a><a href="https://sample.com/abc/1234"></a><a href="https://sample.com/abc/1234"></a><a href="https://sample.com/abc/1234"></a><!--ここまで勝手に記載されてしまいます。-> <span class="thank-you2"> いつもありがとうございます。</span> <span class="thank-you3"> いつもありがとうございます。</span> <span class=thank-you4">いつもありがとうございます。</span> <span class="thank-you5">いつもありがとうございます。</span> <p class="thank-you6"><a href="https://sample.com/abc/1234/">回答よろしくお願いします。</a></p> </div> <div class="thank-you6"></div>

Answer 1

WPのエディタのRichTextとかって、DOMの構造を保存してるんじゃなくて
文字をオブジェクトとしてそれにパラメータを持たせてタグとか属性値を与えているのですよね
なので文字がないとか空白文字に対してタグを付与するとおかしな挙動をすることがあります

ってことで、<div class="thank-you1></div>のところに何か文字を入れてみても再現するか確認

Comments

[rosecolored]

ご回答してくださりありがとうございました。
<div class="thank-you1></div>の間に文字を入れても変わりませんでした。
<div class="thank-you1></div>はstyle.cssで画像を設定しているのですが、html側で<div class="thank-you1></div>の箇所に<img src="http://～.jpg">と入れても症状は変わりませんでした。
文字や画像を入れたりしていると、なぜか分かりませんが、</a>の位置が変わり関係ない文字までリンクされるようなことも起きました。
解決策はありませんでしょうか？何卒よろしくお願いします。

[KazuhiroHatano]

あとは、<a><div></div></a>という不正な構造がブラウザで補正されて逆輸入されてる、とかですかね
divではなくspanに変更

[rosecolored]

ご回答ありがとうございました。
お教えいただきました対策を試しましたが、症状は変わりませんでした。
リンクの設定をstyle.css側で設定して、html側の<a href="https://～></a>の表記を全て除くと解決しました。
色々試して、仰る通り<a href="https://～>～</a>の間に<div>～</div>や<span>～</span>を括ることが良くないのかなと感じました。
このコードは、リンク先を変えてよく使い回すこともあり、style.css側で都度追記するのは効率が悪いので、もう少し対策を考えてみようと思います。

[rosecolored]

もし他に解決策がありましたら、ご教示いただければ幸いです。
もしどうしようもない場合はベストアンサーにさせていただきます。

[KazuhiroHatano]

問題の原因究明は諦めてとりあえずの解決ということなら、ショートコードにするというのが確実ですかね
エディタの補正が邪魔だったり、意図せず構造を崩すと復元が面倒なものとかは、ショートコードにしてしまった方が面倒がないです

[rosecolored]

ご回答ありがとうございました。
ショートコードでも試させていただいてとても良かったのですが、別の方法も見つかり解決しました。

【style.css】

.thank-you1{
position:relative;
background:url('/images/5678.jpg');
width:auto;
height:200px;
background-repeat:no-repeat;
}

.thank-you1 .Link{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

【html】
<div class="thank-you0">
<div class="thank-you1><a class="Link" href="https://sample.com/abc/1234"></a>
</div>

<span class="thank-you2">
いつもありがとうございます。</span>
<span class="thank-you3">
いつもありがとうございます。</span>
<span class=thank-you4">いつもありがとうございます。</span>
<span class="thank-you5">いつもありがとうございます。</span>

<p class="thank-you6"><a href="https://sample.com/abc/1234/">回答よろしくお願いします。</a></p>

</div>
<div class="thank-you6"></div>

<div>～</div>にリンクをhtml側での設定の仕方を調べて、
こちらのサイトを参考にさせていただきました。
https://www.ipentec.com/document/html-css-link-entire-div-frame

親切にお教えいただいてありがとうございました。
教えていただいたことを試すことで、気付いた点も色々あり勉強になりました。