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のデータを初期化するプラグイン「WordPress Database Reset」の使い方

    WordPress

    WordPressのデータを初期化するプラグイン「WordPress Database Reset」…

    WordPressのデータをリセットしたいと思っても、記事や画像をひと…

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

    WordPress

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

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

  3. 確実&簡単!初心者でもできるWordPressのバックアップ方法

    WordPress

    確実&簡単!初心者でもできるWordPressのバックアップ方法

    WordPressのバックアップには、「BackWPup」などのプラグ…

  4. 日本国内のWordPress無料テーマまとめ12選

    WordPress

    日本国内のWordPress無料テーマまとめ12選

    Wordpressテーマを自分で作成するには、さまざまな知識が必要です…

  5. Wordpressの記事にアドセンスを表示するプラグイン「WP QUADS」の使い方

    WordPress

    WordPressの記事にアドセンスを表示するプラグイン「WP QUADS」の使い方

    今回は、WordPressの記事にアドセンスを表示するプラグイン「WP…

  6. WordPress 記事内でコードを綺麗に表示するプラグイン「Crayon Syntax Highlighter」の使い方

    WordPress

    WordPress 記事内でコードを綺麗に表示するプラグイン「Crayon Syntax Highl…

    記事内でソースコードを書きたいとき、WordPressプラグイン「Cr…

PAGE TOP