ワードプレスで直接HTMLタグを表示させる方法

ワードプレスでHTMLタグを文字として表示させたい場合があります。

本記事のようにタグに関する内容を書きたいというときに必要になってきますね。

今回は文字としてそのままHTMLタグを表示する方法について解説していきます。

ビジュアルエディターで入力

ビジュアルエディタで入力すると、タグがそのまま表示されます。

例えば<table>と入力してみましょう。

プレビュー画面を表示すると、タグがそのまま表示されています。


テキストエディタで入力する場合

先ほどビジュアルエディタから<table>と入力しましたが、テキストエディタに切り替えてみましょう。

※「クラシックエディタ」プラグインを導入している場合

そうすると&lt;table&gt;と表示されています。

「<」が「&lt;」を表示、「>」が「&gt;」を表示するための記述方法となります。

本来タグとして扱われるようなものを特殊な文字に置き換えてやることでそのまま文字として表示することが可能になります。

オリジナルタグを登録しておくと便利

ビジュアルエディタ、テキストエディタで「<」「>」を文字として表示する方法を説明しましたが、毎回「&lt;」「&gt;」という風に記載していくのは、面倒かと思います。

そういう場合は「AddQuicktag」プラグインを使うと良いと思います。

「AddQuicktag」オリジナルタグを登録することができるプラグインとなっています。

「table」の文字を選択して「タグ表示」のショートカットキーを押すと「&lt;」「&gt;」で「table」という文字を囲ってくれます。


まとめ

HTMLタグをそのまま表示させる方法についてまとめるとこんな感じです。

<ビジュアルエディタの場合>
・そのまま入力すれば文字としてHTMLタグが表示される
<テキストエディタの場合>
・「<」「>」をそれぞれ「&lt;」「&gt;」に置き換えて入力すると、文字として表示される

「AddQuicktag」プラグインを使えば、ショートカットキーとして自由にタグや定型文を登録できるので便利です。

「AddQuicktag」プラグインは「&lt;」「&gt;」の置き換えだけでなく、様々なことで利用できますので、導入することをおすすめします。

コメント

タイトルとURLをコピーしました