HTMLタグがそのまま表示される。勝手に書き換えられるとき

どうも、スマコマのコマ太郎です。

初心者の方からの質問に、記事にアフィリエイトタグ（HTMLタグ）を埋め込もうとしても、そのまま表示されてしまって上手く機能しないというものがあります。

または、アフィリタグ以外にYouTube、ツイッター、インスタなどもHTMLタグを使ってウェブページに埋め込むことができますが、埋め込んだつもりがページを見ると ↓ 以下のようなHTMLタグがそのまま表示されてしまいます。

このとき編集画面を開き、テキストモードで表示させると

<
>
&

などの文字が混じった状態になっています。これは WordPress の投稿画面でビジュアルエディタを使用したために起こる問題です。

ビジュアルエディタでは、HTMLタグで使用される＜＞の文字が使えないのです。

そこで今回はモードの使い分けと、HTMLタグの埋め込み方について解説しようと思います。

そのまま表示されるトラブルを避けるために２つのモードについて理解しよう

WordPress の記事投稿には以下の２つのモードがあります。

ビジュアルエディタは、HTMLタグがわからない人でも簡単にウェブページが作れるようなっているエディタです。

ビジュアルエディタ

マイクロソフトのワードのように、簡単に文字装飾などが行えるモードです。

そしてもう１つがテキストエディタ（コードエディタ）と呼ばれるモードで、こちらは HTMLタグを直接入力するためのモードです。

テキストエディタ

改行とパラグラフタグは自動で挿入されるものの、ほかの HTMLタグはすべて自分で入力する必要があります。アフィリタグやYouTube、ツイッター、インスタなどのコードは、このテキストエディタに切り替えてから貼りつける必要があるのです。

便利なビジュアルエディタですが、HTMLタグがわからない人でもウェブページが作れるように工夫されている関係で、実はタグを直接使うことができません。

このモードでHTMLタグを使用すると、以下のような一部の文字が変換されてしまうのです。

これがHTMLタグがおかしくなる原因なんですね。

ということでビジュアルエディタでは HTMLタグが使えないということを覚えておいてください。HTMLタグを使うなら、テキストエディタ（コードエディタ）にモードを変更して使ってくださいね。

HTMLタグがそのまま表示されてしまう問題に対処するには、入力モードを変更する必要があります。

なおモードの変更方法は、WordPress のバージョンと使っているプラグインによって違います。

最新バージョン(v5)の WordPress では Gutenbergエディタが採用され、より直感的に操作ができるようになっています。

このエディタには、テキストエディタに変わるエディタとしてコードエディタが内蔵されています。

モードの切り替えですが、エディタの右上にある[・]が縦に３つ並んだアイコンをクリックします。表示されたメニューにある [コードエディター] をクリックしてください。

これで HTMLタグを貼り付けても化けない状態になります。

ビジュアルエディタに戻すには、エディタの右上にある[・]が縦に３つ並んだアイコンをクリックします。表示されたメニューにある [ビジュアルエディター] をクリックしてください。

以前のバージョン、または Classic Editorプラグインを使っている場合の操作ですが、エディタ画面の右上にある [テキスト]タブをクリックしてください。

これで HTMLタグが入力できる状態になります。エディタを戻すには、右上にある [ビジュアル]タブをクリックしてください。

わかってしまえば、ちょっとしたことですが、初めてこの現象に出くわすと困ってしまいますよね。

HTMLタグはテキストエディタモードで入力する必要があることだけ、覚えておいてくださいね。