「文字実体参照」を使い、記事の中にショートコードをテキスト表示する方法

WordPressでプラグインの紹介などをするときに、ショートコードをそのまま表示して紹介する機会があると思いますが、2重に[]を付けてもちゃんとエスケープされずにショートコードが動いてしまうときの対処方法です。

よく紹介されている2重括弧のエスケープ方法はプラグインのコードの記述やテーマの記述、ワードプレスそのもののエラー回避などの要素によって、環境やバージョンによってはエスケープされない(ちゃんとショートコードが機能してしまう)ことがあります。これを確実にエスケープしてショートコードを表示通りにする方法をテストを含めて紹介します。

スポンサーリンク



実際にテストしてみた結果

環境
Wordpressのバージョン:4.4
テーマ:Simplicity

テストしたプラグイン:ユーチューブのプレイリストを表示する「Youtube Playlist Thumbs」プラグイン

通常通りショートコードを記述すると
[ypt playlist_id=PLTm0aIjoYz7czwMgySSqZ3Qm_BE2Ew_CT] とショートコードが動作しています(当然ですが)

そして、よく紹介されている[]を2重に設置した場合、[[ショートコード]]
[[ypt playlist_id=PLTm0aIjoYz7czwMgySSqZ3Qm_BE2Ew_CT]] とすると通常はエスケープされてショートコードがプログラム変換されて動作するのを防ぐため、ショートコードそのものが表示されるのですが、環境によってはショートコードが動作してしまうことがあります。
※記事作成段階では使用しているプラグインを例に挙げて動作確認を紹介していますが、閲覧される際にはプラグインを使っていないためうまく表現ができていない場合がありますがご容赦ください

もう一つテストしたプラグイン:テーブルを表示する「Tablepress」プラグイン

通常通りショートコードを記述すると

プラグイン名プラグインの種類解説日本語DL
Google Analytics Dashboard for WP管理画面表示見るダウンロード
Wp User Frontendフロントエンド投稿見るダウンロード
advanced excerpt記事一覧ダウンロード
frontier postフロントエンド投稿ダウンロード
archivistカテゴリー記事一覧見るダウンロード
advanced random posts widgetランダム記事表示見るダウンロード
AdRotate広告のランダム表示ダウンロード
Add Post URL記事の前後に定型文挿入ダウンロード
WP-Optimize不要データ削除&DB最適化ダウンロード
Email Encoder Bundleメールアドレス保護ダウンロード
Revive Old Post古い記事をツイートダウンロード
post-viewsリアルタイムアクセス解析見るダウンロード
Multi Feed Reader複数のRSSフィードを表示見るダウンロード
Multi RSS Reader複数のRSSフィードをウィジェットに表示見るダウンロード
SpectrOM Database Cleanup定期的にデータベースを最適化見るダウンロード
content views query and display post page記事一覧をグリッド表示にする見るダウンロード
bbp style packbbpress掲示板を簡単に設置できる追加機能見るダウンロード
bbPress Antispambbpress掲示板のスパム対策見るダウンロード
GD bbPress attachmentsbbpress掲示板で添付ファイルを使用する見るダウンロード
Plugin Cards公式プラグインページをカード表示する見るダウンロード
Code Snippetsfunctions.phpに挿入するコードを管理見るダウンロード
Twitter mentions as commentsTwitterのツイートをコメントに挿入見るダウンロード
Custom Post Type UIカスタム投稿タイプとカスタム分類作成見るダウンロード
Requirements Checklist公開前のチェック機能見るダウンロード
Media Library Assistantメディア機能の強化見るダウンロード
Wp Pollsアンケートダウンロード
DW Question AnswerQ&A作成ダウンロード
とショートコードが動作しています(当然ですが)

そして、よく紹介されている[]を2重に設置した場合、[[ショートコード]]
[table id=3 /] とすると通常はエスケープされてショートコードがプログラム変換されて動作するのを防ぐため、ショートコードそのものが表示されるのですが、環境によってはショートコードが動作してしまうことがあります。
※記事作成段階では使用しているプラグインを例に挙げて動作確認を紹介していますが、閲覧される際にはプラグインを使っていないためうまく表現ができていない場合がありますがご容赦ください

コードの知識がほとんどないので想像ですが、使っている環境やテーマなどによっては記述を間違えて[]が多くても対応できるようにしているものと思われます。これだと、上手に表示できているはずの記事なども、実際に訪問者が見たら間違った情報ととらえられてしまうかもしれません。ショートコードは「これ」と案内するのですから、確実にショートコードが見た目に表示されなければ意味がありません。そこで次の方法を使って確実にショートコードをショートコードとして表示させます。これで環境に左右されることなくショートコードの紹介ができるようになりますね。

「文字実体参照」を使うのが一番確実な方法

結論としては、「文字実体参照」を使うのが一番無難だと思われます。
[は[を示すための文字実体参照です。(使うときは半角で入力してください)
これを[の代わりに使うことで、ショートコードがそのまま表示されます。
[ショートコード]
※[を実際に使用するため半角にすると
[table id=3 /]
ときちんとショートコードが平文表示されました。

本来は両方の括弧に文字実体参照を使うのが普通ですが、どちらかの括弧さえ文字として認識されれば「ショートコードではないよ」と認識されるので、先頭のみ変更してやればいいのです。

※記事作成段階では使用しているプラグインを例に挙げて動作確認を紹介していますが、閲覧される際にはプラグインを使っていないためうまく表現ができていない場合がありますがご容赦ください

よく使う文字実体参照については

のサイトに詳しく書かれていました

ショートコードなどを表示して紹介するのに役立つプラグイン

上記で文字実体参照があることは紹介しましたが、記事を書く度にこのコードを入力したり、メモ帳などに保存しておいていちいち引用するのは面倒なので、「Add Quick Tag」プラグインを使ってボタン化してしまうと便利です

定型HTMLタグや定型文をボタン1つで挿入できる、Wordpressプラグイン「Add quick tag」は昔からある定番のプラグインですが、本当に便利でどんどんボタンを増やしたくなってしまうほどシンプルかつ高機能な無料追加プラグインなので、あえてご紹介
トップへ戻る