【WordPress】『span data-mce-type=”bookmark”』の対処法

WordPressで投稿の編集をしている際、ごくまれに『span data-mce-type=”bookmark”…』というよくわからない文字列が挿入され、意図したとおりに記事が反映されないという原因不明の現象が起こることがあります。

これは、テキストエディタからビジュアルエディタへとタブを変更した際に挿入されるもので、<script>タグを入れた際や、プラグインや自分で設定した<Ads>などの独自タグを入れた際など、つまりWordPressが想定していないものを挙動・表示しようとする際に起こりうるものです。
なぜこの現象が起きるのか、また、『span data-mce-type=”bookmark”』と挿入されるのを防ぐための対処法をご紹介します。

<span data-mce-type=”bookmark”…が起こる実例

まず、私がこの不具合が起こった実例をご紹介します。WordPressのver5.4で起こった現象で、同環境ならば再現可能です。
<script type=”application/ld+json”>
{
“@context” : “https://schema.org/”,
“@type”: “EmployerAggregateRating”,
“itemReviewed”: {
“@type”: “Organization”,
“name” : “xxx”,
“sameAs” : “zzzz.yyy”
},
“ratingValue”: “91”,
“bestRating”: “100”,
“worstRating”: “1”,
“ratingCount” : “25”
}
</script>

これを記事の編集画面で「テキスト」タブから挿入し、「ビジュアル」タブに切り替えた時scriptの表示がおかしくなり、「テキスト」タブに戻ってみると、以下のタグが挿入されていました。
<span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span>

しかも、挿入される場所が毎回違ったり、挿入されない時もあるなど、ちぐはぐな結果になりました。

<span data-mce-type=”bookmark”…の原因

なぜこのような文字列が挿入されているのか。

原因は、プラグインにはありません。一言で言ってしまえば、WordPressのバグ・欠陥です。WordPressの想定しない使い方をしている方が悪いと言えばそうなのかもしれませんが、どちらにせよバグです。

ではどういったバグなのかというと、

といったものです。わかりづらいのでもう少し詳しく説明していきます。

WordPressには、カーソルの位置を保存してくれるシステムがあります。
このシステムのおかげで、ビジュアルエディタとテキストエディタのタブを切り替えたとき、同じ場所にカーソルが移動された状態になっています。

しかし、上で私が記載したscriptや、タグで広告のショートコードを挿入した際など、WordPressの想定しない動作をするコードをテキストエディタで記述した場合、この「カーソルの位置」情報がバグります。
具体的には、ビジュアルエディタへと変更する時にカーソルの位置情報を伝えるメドッドが不具合をきたし、<span data-mce-type=”bookmark”…というカーソルの位置情報を伝えるコードが、テキストエディタのカーソル部分に挿入されてしまうのです。
ビジュアルエディタは実際に見える形で表示してくれるので、その表示をした際にscriptや独自のショートコード、タグが動いてしまって、カーソルの位置情報が予期せぬ動作をしたというわけです。

問題の解消法

原因はわかりましたが、どうやって<span data-mce-type=”bookmark”…という文字列が挿入されないようにすればいいのか。問題の解消法をご紹介します。

例えば、以下のコードを挿入したい場合。
<script type=”application/ld+json”>
{
“@context” : “https://schema.org/”,
“@type”: “EmployerAggregateRating”,
“itemReviewed”: {
“@type”: “Organization”,
“name” : “xxx”,
“sameAs” : “zzzz.yyy”
},
“ratingValue”: “91”,
“bestRating”: “100”,
“worstRating”: “1”,
“ratingCount” : “25”
}
</script>

このコード内にカーソルがある状態でビジュアルエディタに変更すると、不具合が起こります。

バグが生じるのはカーソルの位置情報なので、カーソルの位置情報がバグらないように、コード以外に合わせてあげれば問題は解消します。
しかし、これはヒューマンエラーの起こりやすい対処法であり、忘れたころにまたカーソルを移動してしまったり、気づかぬうちに不具合が……なんてことも起こりうるものです。