WordPressブログ記事内にHTMLタグをそのまま表示させたい時は?

html-tag
ブログ記事を書いてる時に、リンクタグを下線つきのリンク文字に変換させずにそのまま表示したい時ってありますよね。

でもWordPressの投稿画面で普通にリンクタグを入れると、有無を言わさず自動変換されてちゃう。一体どうしたら・・・?

今回ひょんなことからこの問題の対策を見つけたので、備忘録を兼ねてシェアします♪

きっかけはCrayon Syntax Highlighterとの出会い(?)

ひとつ前の記事にも書いた通り、ワードプレスの投稿ページに書いた簡単なコードの表示がわかりにくくて困っていたワタシ。

その後「Crayon Syntax Highlighter」をというプラグインを見つけ、早速使ってみたら無事解決しました。

これはなんて便利なツール!と興味をひかれて更にいろいろ検索していくと・・・

普通のリンクタグ程度なら、わざわざこんな立派な?プラグインを使わなくても下線つきのリンク文字に変換されずそのまま表示できる方法を発見した次第です。

方法(1)タグをビジュアルエディタに書く

「<p>」などのタグをビジュアルエディタで入力するテキストエディタじゃなく!!)→結果、そのまま文字として表示される。

HTMLタグっていうと「まずはテキストエディタに入力→ビジュアルモードで確認」がアタリマエだと思ってたので、このアタマはなかった!

方法(2)「<」「>」をそれぞれ「&lt;」「&gt;」に置き換える

こうやってタグを構成する特殊文字を違う文字に置き換えてやることで、タグとして認識されない→ただの文字として表示される、という仕組みだそうです。

でも見ての通り置き換え用の文字列がいちいち複雑で、手打ち入力ではゼッタイ間違えること間違いなし(笑)で代わりのオススメとして、以下3つの方法が見つかりました。

(2-1)「AddQuicktag」に置換用文字列を事前登録

AddQuicktag」といえばWordPressの鉄板プラグイン(とアチコチで紹介されている)なので、インストール済の場合が多いハズ。

であれば上の置換用文字列を事前登録しておき、必要に応じて入力中に呼び出して使えば入力ミスもなくバッチリ!ってワケですね。

(2-2)オンライン変換ツールを使う

文字のまま表示させたいタグがより複雑で長い、複数行で構成されているという場合は、「<」「>」以外の特殊文字も使われてるハズ。

そうなると「AddQuicktag」で事前登録したとしても変換作業自体が大変だし、それにつれてエラーの可能性も高まりますよね。

そんな時にはこのオンラインツールで自動変換→コピペでブログ投稿画面に貼り付けるのが1番カンタン確実な方法になるかと↓

HTML実体参照変換 : akiyan.com

(2-3)WordPressプラグイン「Crayon Syntax Highlighter」を使う

繰り返しになりますが、またもや「Crayon Syntax Highlighter」さんの御登場です(笑)

追加でプラグインを入れても構わない、っていうことであれば、上のオンラインツールで変換→コピペの手間もなく、投稿画面ですべて完結するのでよりお手軽。

まとめ(と感想)

上記の通り、HTMLタグをタグとして認識させない方法は複数あるので、あとはタグの長さ・複雑さによってどれにするかを決めればいい、ってことですね。

いや~それにしても「まずビジュアルエディタにタグを書く」方法は、まさに目からウロコっていうか逆転の発想?で面白かったー!これ考えた「中の人」、ホント遊び心あるわ^^

以下、参考にさせていただいたサイトです。いつもながら感謝をこめて。↓

WordPressの記事に文字としてHTMLタグを表示させる方法
ブログ記事にHTMLタグをそのまま表示させる方法 | ライフハック.net

スポンサーリンク