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

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

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

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

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

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

&lt;
&gt;
&amp;

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

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

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

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

ビジュアルエディタとテキストエディタ

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

  • ビジュアルエディタ
  • テキストエディタ(コードエディタ)

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

ビジュアルエディタ

WordPress のビジュアルエディタ

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

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

テキストエディタ

テキストエディタの画面

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

ビジュアルエディタを使うとHTMLタグがそのまま表示される問題が起こる

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

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

< &lt;
> &gt;
& &amp;

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

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

入力モードの変更方法(対処法)

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

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

WordPress v5

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

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

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

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

コードエディタに変更

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

WordPress v4 または v5 + Classic Editorプラグイン利用時

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

テキストエディタに変更

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

HTMLタグが勝手に書き換えられるのまとめ

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

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

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

WordPressのメニュー機能を使って、リンクを整理してみよう

WordPressのパーマリンク設定のおすすめは?その理由とは?

WordPressにプラグインをインストールする、もっとも簡単な方法

WordPressやテーマの設定で悩む人は、HTMLを学ぼう

固定ページのパーマリンクにも拡張子(.htmlなど) を付けたい

投稿(記事)と固定ページは、何が違うの?どう活用するの?