WordPressの記事に文字としてHTMLタグを表示させる方法

WordPress

WordPressの記事に文字としてHTMLタグを表示させる方法

WordPressの記事内でHTMLタグをそのまま表示させたいときってありますよね。

例えば、「<p>は段落を表すタグです」という感じに。

でも、こういう文をそのまま入力しても、実際は「は段落を表すタグです」と表示されて、<>で囲まれた部分が消えてしまいます。

今回は、HTMLタグをタグとしてではなく、文字として表示させる方法をご紹介します。

方法1 ビジュアルエディタで入力する

WordPressダッシュボードの記事投稿画面

ビジュアルエディタで「<p>」と入力してみてください。プレビューで確認すると、入力したタグがそのまま文字として表示されているのがわかります。

方法2 「<」と「>」を別の文字に置き換えて入力する

WordPressダッシュボードの記事投稿画面

方法1で入力したあとテキストエディタに切り替えると、「<p>」と入力した部分が「&lt;p&gt;」となっているのがわかります。

タグの「<」が「&lt;」に、「>」が「&gt;」に、それぞれ変換されているんですね。

つまり、テキストエディタで入力するときは、「<」と「>」を別の文字で入力すれば良いのです。

このように、タグを構成する特殊文字を別の文字に置き換えて、タグとして扱われないようにすることを「実体参照」「エンティティコード」などといいます。

……といっても、いちいち「&lt;」「&gt;」を手打ちするのは面倒くさいですよね。

そういうときは、プラグイン「AddQuicktag」を使って文字を登録するか、PCの単語辞書に文字を登録してしまいましょう。

AddQuicktagは、タグや定型文を登録しておくとボタンひとつで記事内に挿入できるという、とても便利で汎用性の高いプラグインです。WordPressユーザーであれば利用している方は多いのではないでしょうか。

プラグインを有効化したあと、左メニューの「設定」にカーソルを合わせ、「AddQuicktag」をクリックします。以下の画像のように登録すると、投稿画面に「タグ囲み」ボタンが表示されます。囲みたい文字列を選択したあと「タグ囲み」ボタンを押すと、「&lt;文字列&gt;」と表示されます。

AddQuicktagの設定画面

スポンサーリンク

単語辞書は、お使いのPCのタスクトレイにあるIMEを右クリック⇒「単語登録」から行えます(Google日本語入力の場合で説明していますが、ほかのIMEを利用している場合でも大体同じだと思います)。

Google日本語入力の単語登録画面

上の画像と同様に、「&gt;」も「>」で登録しましょう。「&lt;&gt;」とまとめて登録しても良いかもしれませんね。

方法3 プラグインを使う

WordPressダッシュボードのプラグイン新規追加画面

複数行に渡るHTMLタグを記事内でそのまま表示させたいときは、「Crayon Syntax Highlighter」というプラグインを使いましょう。

短いHTMLタグを表示させるには方法1か2で十分だと思いますが、Web系のブログを運営していて、タグについての記事を書くことが多い場合は導入しておくと重宝します。

追記:「Crayon Syntax Highlighter」の使い方についてまとめました。詳しくは以下の記事を参照してください。

おわりに

今回はWordPressの記事に文字としてHTMLタグを表示させる方法をご紹介しました。

文中でタグを表示させたい場合は、ビジュアルエディタでタグを入力するか、テキストエディタでタグの「<」「>」を「&lt;」「&gt;」に置き換えて入力するのが手っ取り早いです。長いタグを表示させたい場合は、プラグイン「Crayon Syntax Highlighter」を使いましょう。

それでは!

スポンサーリンク

関連記事

  1. 超簡単!WordpressのURLから「category」を消す方法

    WordPress

    超簡単!WordPressのURLから「category」を消す方法

    WordPressのカテゴリーページは、URLが「http://ドメイ…

  2. Wordpress カテゴリーの順番を並び替えるプラグイン「Category Order and Taxonomy Terms Order」の使い方

    WordPress

    WordPress カテゴリーの順番を並び替えるプラグイン「Category Order and T…

    WordPressにはカテゴリーの並べ替え機能が付いていないので、思っ…

  3. WordPressの「未分類」カテゴリーを非表示にする方法

    WordPress

    WordPressの「未分類」カテゴリーを非表示にする方法

    今回は、WordpPressの「未分類」カテゴリーを非表示にする方法に…

  4. Wordpressのプラグインをインストールする3つの方法

    WordPress

    WordPressのプラグインをインストールする3つの方法

    WordPressにはさまざまなプラグインがあります。「記事に目次を表…

  5. WordPress ウィジェットを条件分岐で表示・非表示にするプラグイン「Widget Logic」の使い方

    WordPress

    WordPress ウィジェットを条件分岐で表示・非表示にするプラグイン「Widget Logic」…

    WordPressのウィジェットを、「スマホから見たときだけ表示させた…

  6. Wordpressのローカル環境(テスト環境)を 構築する

    WordPress

    WordPressのローカル環境(テスト環境)を 構築する

    WordPressのテーマをカスタマイズしたいなと思ったり、新しいプラ…

PAGE TOP