エスケープ処理

WordPress

ワードプレスの記事中にブラケット[]をエスケープ処理する方法



ぺんです。

先日公開したこの記事の中で、オリジナルプラグインを呼び出すショートコード( 例:[itemlink] )を紹介しようと思ったのですが、そのまま[itemlink]と記事内で書いても、ワードプレスがショートコードとして認識してしまうため、表示されなかったのです!

調べたところ、エスケープ処理という方法を使えば、ブラケット([])をワードプレスの記事内に正しく表示(エスケープ処理)できることがわかりました。今回は、そのエスケープ処理の手順をご紹介します。

エスケープ処理とは?

エスケープ処理とは、エスケープ(Escape:逃げる)の言葉通り、「逃げる」の意味です。つまり、通常のワードプレスの挙動とは異なる動作をさせるための特別な記法なのです。

たとえば、ブラケット([])の場合は、そのままテキストモードでワードプレスの記事内に記載しても、プラグインのショートコードとして処理されてしまうと、意図した形で表示されません。HTMLのタグで使われている<>などのキャラクターも同様です。

これらの文字を、意図した通りに表示する為には、エスケープ文字(例:[)を使用して、それらがショートコードやHTMLのタグではないことをワードプレスに明示的に指示する必要があります。

ショートコードとは?

ショートコードとは、ワードプレスの記事内に記載することで、プラグイン等の機能を記事文中から呼び出すためのコードです。この記事でもいくつかのショートコードを使っています。

 [clink url=”https://affiliate-biz.jp/itemlink-plugin”]

このコードを記載すると、記事文中にブログカード(他の記事への画像付きリンク)が表示されます。

 [table id=1 /]

こちらは、TablePressというプラグインのショートコードで、プラグインで作成した表が表示されます。

 [toc]

こちらは、Table of Contents Plusという超メジャーな目次を表示するプラグインのショートコードですね。

ブラケット[]をワードプレスの記事内で表示するには?

では具体的にブラケット([])を記事内に正しく表示させる方法を見てみましょう。

実はとても簡単なのです!
下記のコードをワードプレスの記事編集画面で使うと、ブラケット([])として表示されます。(必ずテキストモードで記載してください

[ = [
] = ]

エスケープ文字を利用

イメージをみてください。上はテキストモードの記載イメージで、下は実際に閲覧される画面になります。

入力した文字と表示された文字が置き換わっていることがわかりますね。

ワードプレスにショートコードとして取り扱わせないために、わざわざ”[”ではなく、”[”という書き方をしているわけです。

この書き方であれば、ワードプレスはこれらの文字列をショートコードと解釈しないため、その文字コード(数字)に対応した文字がそのまま表示されるのです。

ワードプレスでよく使うエスケープ文字

この文字コードの数字を変えると、ブラケット([])以外の他の文字もエスケープ表示させることができます。
ワードプレスの記事でよく使うエスケープ文字を示します。

表示される文字ワードプレス記事に記載するエスケープコード文字コード(番号)
< &#60;60
> &#62;62
[ &#91;91
\ &#92;92
] &#93;93

全ての文字には、固有の番号(文字コード)が付与されています。上の図の、「文字コード」と、「ワードプレス記事に記載するエスケープコード」の番号は同じです。エスケープコードは文字コードの前に&#を付けただけなのです。

ビジュアルモードと、テキストモードを切り替えるタイミングで、勝手にエスケープ文字が解除される事があるので注意!

この記事を書いている間にも、ビジュアルモードとテキストモードを行き来していると、”&#91;”と記載した部分が勝手に”[”に変換されてしまいました。

これはワードプレスの仕様なのですが、お節介なことをしてくれますね。おかげで、記事文中のエスケープ表示箇所を3回も手動で直す羽目になりました。皆様、ご注意くださいw。




関連記事

  1. WordPress

    TDC MAGのGoogleカスタム検索ウイジェットをHTTPS化する方法

    ぺんです。 Google Chromeを使っていると、突然このような表…

  2. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズがおかしくなる

    ぺんです。商品紹介のリンクを貼るときに、サムネイルのサイズ…

  3. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法

    ぺんです。本サイト「あふぃぶ」で使っているワードプレステーマは…

  4. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ver.4.7.0)のW…

    ぺんです。立ち上げ途中のサイトで、Font Awesomeのア…

  5. 日付の書式がNG

    WordPress

    WordPressの親テーマのウイジットを子テーマで書き換える方法

    ぺんです。今回は、ワードプレスの親テーマのウイジットを子テーマで書…

  6. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」を選んだ3つの理由

    ぺんです。前回のエントリーからずいぶんと間が空いてしまいました…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。




最近の記事

  1. ウイジェットエリア
  2. 日付の書式がNG
  3. エスケープ処理
  4. Jetpack
  5. WP Responsive Menu
  1. ツール

    サムネイル画像を作成してくれるサービス
  2. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズ…
  3. Server

    アフィリエイト収益ブログの始め方(2)- 利用サービスの選定における3つのポイン…
  4. 読み込みが遅いWebサイト

    Server

    mod_pagespeed設定で、ウェブのパフォーマンスを大幅に向上する方法
  5. エスケープ処理

    WordPress

    ワードプレスの記事中にブラケット[]をエスケープ処理する方法
PAGE TOP