TOC+のショートコードをエスケープして表示しようとするとHTMLコメントタグ扱いにされ、うまく表示されなかった。

2021-03-14

目次プラグインについて執筆中に詰まったので備忘録と報告です。

ショートコードをページ内にそのまま表示したい場合、[[toc]]のように角カッコを二つ重ねて使うことでエスケープ処理されて表示されるはず…

が、実際にページを確認すると<--TOC-->のようにHTMLのコメントタグのような扱いになってしまってうまく表示できなかった時の話です。

有料テーマ「AFFINGER5」で目次プラグインTOC+を使用しているときに起こりました。

直接的な原因は不明ですが、テーマやプラグインの組み合わせによりショートコードのエスケープ表示がHTMLコメント扱いにされてしまうことがあるかもしれません。

ショートコードのエスケープ表示がHTMLコメントタグ化する

ContactForm7のショートコードなどは二連角カッコでうまくエスケープ表示できたので今のところTOC+だけがダメです。

問題の内容

目次プラグインTOC+では[toc]というショートコードを設置した場所に目次を表示することができるのですが、このコードをエスケープ表示したい時におかしくなります。

ショートコードエスケープがコメント扱い1そのままではショートコードは表示できないので、[[toc]]のようにテキストエディタで入力する。

ショートコードエスケープがコメント扱い2プレビューで確認するがなぜかショートコードも目次自体も表示されていない。

ショートコードエスケープがコメント扱い3狙った動作イメージはこちら。

何が起こっているのか?
いつも通りChromeの開発者ツールで要素を確認してみます。

ショートコードエスケープがコメント扱い4

[[toc]]がコメント扱いにされている。

[[toc]]と記入したところを確認すると<!--TOC-->になっている。

この書き方はHTMLで使用するコメントタグです。
ソースコード内に使用するメモのようなもので、このタグに囲まれている内容はページに表示されません。

記事内で使うことはないと思いますが、Wordpressの投稿にも使えるようです。

ここでWordpressのショートコードをエスケープ処理してそのまま表示する方法を勉強しなおしましたが、似た例は出てきませんでした…

角カッコを3つ使えば解決した

その記事では特殊文字を使用し、問題はなかったのですがずっと気になっていたところ先日解決しました。

正解の書き方は[[[toc]]]でした。

おそらくテーマかプラグインでこのような挙動になっているのかと。。。

ショートコードエスケープがコメント扱い7[[[toc]]]とテキストエディタで入力すると画像のようにうまくいきました。

ショートコードエスケープがコメント扱い8要素を調査してみるとこちらもPタグの中に[toc]と入っておりOKでした。

まとめ

う~ん。
解決はしたもののハッキリとした原因が分からないだけにモヤモヤします。

もしWordpressでエスケープ処理をし、コードを記事内に表示したときに問題がある場合、角カッコを増やしてみるとうまくいくかもしれません。

-Wordpress
-

© 2021 ソロ学