WEBサイト制作

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

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

[jin_icon_pen color=”#e9546b” size=”18px”][挿入される文字列]
<span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span>

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

この記事で解消できる不具合

投稿の編集画面のテキストエディタで<span data-mce-type=”bookmark”…という予期せぬ文字列が挿入される不具合

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

まず、私がこの不具合が起こった実例をご紹介します。WordPressのver5.4で起こった現象で、同環境ならば再現可能です。

Googleのリッチスニペットを表示させるために、記事ごとに以上の構造化データを記載しようとしました。

これを記事の編集画面で「テキスト」タブから挿入し、「ビジュアル」タブに切り替えた時scriptの表示がおかしくなり、「テキスト」タブに戻ってみると、以下のタグが挿入されていました。

[jin_icon_pen color=”#e9546b” size=”18px”][挿入される文字列]
<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の想定しない使い方をしている方が悪いと言えばそうなのかもしれませんが、どちらにせよバグです。

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

ビジュアルエディタで表示できないものがテキストエディタで挿入された時、そのテキスト部分にカーソルが合っているままビジュアルエディタに変更すると、カーソルの位置にカーソル位置情報の<span>が挿入されてしまう

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

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

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

要点のみ

かみ砕いて言うと、WordPressのカーソルの位置情報を伝えるコードがバグった、ということです。

※ここでいうカーソルは、文字入力の起点を指す、点滅する縦棒マークのこと

問題の解消法

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

例えば、以下のコードを挿入したい場合。

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

要点のみ

つまり、カーソルを問題のコード以外に合わせてからビジュアルエディタに変更すれば、問題は起こりません。

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

最も良き方法は、問題のあるコードを記載せず他の方法で代用することですが、他の方法が見つからないときや、「気を付けるから大丈夫」という自信のある方は、この方法で対処してみてください。