WordPress ショートコードをエスケープする方法

ショートコードを使っているプラグインは結構あります。Table of Contents PlusやPz-LinkCardなどがそうです。さて、これらのショートコードを投稿に載せるときにどうしていますか？[toc]を文字として打ち出そうとすると目次に変換されてしまって困ったりしていませんか？エスケープするのにはどうすればよいのでしょうか？

知ってる人にとっては本当にくだらない内容と思います。しかし、知らない人もいるのです。

ショートコードとは？

半角のカッコで括られた命令のようなものです。編集している間はただの文字ですが、公開する際に準備されたコードによって意味のある文字列に変換されます。

例えば、Table of Contents Plusでは以下のようなショートコードを用いています。

何が問題なのか？

文字列として”[”と”]”で括られているものをショートコードと認識します。もちろん括弧の中の文字は定められている文字列です。それらは置換されてしまうので、[toc]のように文字として打ち出す際にエスケープしてあげる必要があります。

前述しているような  [toc] は当たり前のように表示されていますが、普通に[toc]と書いてしまうと、目次に変換されます。従って、

”ショートコードは[toc]のように書くのです！”

のような文章を書くのが難しいのです。

もちろん最初は私もわからなくて、超悩みました。

あるサイトではきちんと[toc]のように表示されていたり、よくよく見るとそれは画像だったりしていました。

もちろん、私の投稿はきちんと文字になっています。よければご覧ください。

はまとりねっと

WordPress 目次作成プラグイン Table of Contents Plusを使いこなす

https://hamatori.net/2017/07/wordpress-table-of-contents-plus

WordPressでブログを開設してから、いろいろなブログを見学していますが、目次がついている方がかっこいいと思いました。私も付けたいと思い、Table of Contents Plusをインストールしました。少々悩ましいところもあったので、私の実践した設定も含めて書き残しておきたいと思います。↓これがTable of Contents Plusで作った目次です↓↑これがTable of Contents Plusで作った目次です↑1. Table of Contents Plusとは？Table of Contents Plusは投稿のヘッダー（H1~H6）を持ってきて、目次化してくれる機能を持つWordPressのプラグイン...

<code></code>でエスケープできるんじゃないのか？

できないんですね。

私も最初は深く考えずにこんな感じにやってみました。

見事にエスケープされず、目次になりました。しかし、これが正解なのではないかと思って、これで結構粘りましたね。（苦）

＆とか付ければいいんじゃないの？

さすがにこれが正解だとは思いませんでしたが・・・

一応、やってみました。

もちろんできませんでした。（汗）

エスケープの正解はこれだ

正解はこれです。

きちんと調べれば書いてあるんです。

WordPress Codex日本語版 ショートコード

中段ぐらいに以下の記載があります。

投稿の中でふつうはショートコードを表す文字列をただの文字列として使いたい場合があります。そうするには1組ではなく2組のかぎかっこを使ってショートコードをエスケープする必要があります。例えば次のように投稿内に表示するには：

[gallery]

次のように書きます：

[[gallery]]

開始タグと終了タグを持つショートコードの場合は、一番最初と一番最後のかぎかっこをエスケープする必要があります：

[[shortcode] … [/shortcode]]

引用元：WordPress Codex 日本語版 ショートコードより

もちろん、上記の引用もそのままコピー＆ペーストすると括弧が足りない（gallery で変換されてしまう）ので、括弧[]を足してあげています。

まとめ

最初はわからないのは当たり前なので恥ずかしいことではないのです。

しかし、意外にこのような常識がわからなかったりもするのです。この投稿見て”ハッ！”とする人もいるんじゃないかと思っています。

そして、こういうニッチな話はネットで見つけにくかったりします。実際に私はこの情報に中々当たりませんでした。

お役に立てば嬉しいです。