ショートコードのソースをそのままテキスト文字列として表示したい

WordPressの使い方

WordPressのショートコードをテキストのまま文字列として表示したい

WordPressのショートコードは記事内に埋め込んで表示を出力させるためにとても便利なものですが、使い方の記事などを書く際にはショートコードを実行せずにそのままソースコードとして表示したい場合もあると思います。

ちょっと状況に応じてややこしいルールがありますので、そのやり方を簡単に解説します。

以下の場合などで対応方法を切り分けてください。

  • ショートコードが登録されている場合
  • 通常のショートコードか囲み型か
  • エスケープ文字をそのまま表示する場所(ブロック、タグ、CSS)か

ショートコードを文字列として出力する大原則

原則がありますので覚えておいてください。

それは『変換するショートコードのかたまりを一番外側を[]で囲む』ということです。

これをふまえた上でそれぞれの場合分けを解説していきます。

WordPressにショートコードが登録されている場合

ショートコードがfunctions.phpなどに登録されている場合、そのまま記述すると実行されてしまいます。

通常のショートコード (登録あり)

[と]を囲みの一番外側にそれぞれ1か所ずつ、合計2か所に追加します。

[save_cookie]

	→× 実行され変換される
[[save_cookie]] 

	→〇 実行されずそのまま[save_cookie]と表示される

囲み型のショートコード (登録あり)

同様に[と]を囲みの一番外側にそれぞれ1か所ずつ、合計2か所に追加します。前と後ろにそれぞれ4か所の追加ではないので注意してください。

[if_cookie] あいうえお [/if_cookie] 

	→× 実行され変換される
[[if_cookie] あいうえお [/if_cookie]] 
	
	→〇 実行されずそのまま[if_cookie] あいうえお [/if_cookie] と表示

WordPressにショートコードが登録されていない場合

ショートコードがfunctions.phpなどに登録されていない場合は、そのままの文字列が表示されるので何もする必要はありません。

通常のショートコード (登録なし)

[abc]

	→〇実行されずそのまま[abc]と表示
[[abc]]
	
	→× そのまま[[abc]]になってしまう

囲み型のショートコード (登録なし)

[abc][/abc]

	→〇実行されずそのまま[abc][/abc]と表示
[[abc][/abc]]

	→×そのまま[[abc][/abc]] 表示されてしまう

ショートコードが入れ子になっている場合

ショートコードの中にショートコードが入れ子になっているパターンも紹介しておきます。
これも大原則一番外側を[]で囲むのはかわりません。内側は何もせずに外側だけに[]を追加します。

[[abc]
	[def]
	[/def]
[/abc]]

	→〇実行されずそのまま[abc][/abc]と表示

HTMLエスケープする方法

HTMLエスケープといって[]という記号をエスケープ文字列で表現することもできます。

[ ⇒ [
] ⇒ ]

ただ、これだと使うブロックの種類やCSSによって正確に表示されたりされなかったりであまりお勧めはできないです。

以上です。お読みいただきありがとうございました!

コメント

タイトルとURLをコピーしました