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

HTMLタグがそのまま表示される

どうも、KoMAです。

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

または、HTMLタグを埋め込んだつもりが、エディタで見ると
<
>
&
などの文字が混じった状態になっているということがあります。

これは WordPress のエディタには2つのモードがあることが原因で起こります。

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

2つのモードについて理解しよう

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

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

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

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

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

改行とパラグラフタグは自動で挿入されるものの、ほかの HTMLタグはすべて自分で入力する必要があります。

ビジュアルエディタを使うと問題が起こる

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

このモードでHTMLタグを使用すると、< は &lt; に、> は &gt; に、& は &amp; に変換されてしまうのです。

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

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

モードの変更方法

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

WordPress v5

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

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

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

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

コードエディタに変更

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

WordPress v4 または Classic Editor利用時

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

テキストエディタに変更

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

まとめ

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

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

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

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

関連記事

WordPress のトップページを変更するには?投稿ページって、なんだ?

WordPress で記事を投稿するとコメントが付いてしまう現象

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

カテゴリーとタグの上手な使い分け。重複のない分け方とは?

リビジョン画面の右と左、どっちが現在の記事?

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