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


Wordpress

Shortcode escape is treated as a comment_eyecatch

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

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

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

AFFINGER5で目次プラグインTOC+を使用している時に問題が起きました。

ショートコードがHTMLコメントタグ化する

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

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

問題の内容

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

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

ショートコードエスケープがコメント扱い2
ショートコードの記述後、プレビューで確認してもなぜかショートコードも目次も表示されておりません…

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

イメージとしてはこんな感じにショートコードが表示されると思ったのですが…

何が起こっているのか?になりました...
そこでChromeのデベロッパーツールで要素を確認してみます。

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

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

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

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

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

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

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

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

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

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

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

[[[toc]]]とテキストエディタで入力すると画像のようにうまくいきました。

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

要素を調査してみるとこちらもPタグの中に[toc]と入っておりOKでした。

まとめ

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

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

-Wordpress
-

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学