【ワードプレス】クイックタグで複数行ある複雑なボタンを作る

ワードプレスのエディターにオリジナル機能のボタンを追加したい時に使うのがクイックタグ（QTags.addButton）ですよね。

functions.phpに「QTags.addButton」を追加すればそのボタンが追加できます。それかもしくはプラグインの「AddQuicktag」を使ってオリジナルボタンを作っているかもしれません。

で、プラグインの方は複雑な複数行のHTMLを出力するボタンも作れるみたいなんですが、functions.phpに自分で書く方法だと複数行のHTMLを出力するボタンを作るのに躓いてしまいました。

解決したので、ここではワードプレスのクイックタグで複数行のボタンを追加する方法を紹介します。

1. 解決方法
2. 原因
3. ちなみに
4. まとめ

解決方法

いきなり解決方法からなんですが、「\n」ではなく「\\n」で改行すればOK。ようはエスケープしよう!って話ですね。

QTags.addButton('qt-ori', 'オリジナル', '<div class="ori">\n</div>', '', '', '', 100000);

QTags.addButton('qt-ori', 'オリジナル', '<div class="ori">\\n</div>', '', '', '', 100000);

上の例だとこのボタンを押せば、

<div class="ori">
</div>

っていうHTMLがエディタに出力されます。

また、インデントも同じように「\t」ではなく「\\t」にしてくださいね。

今回のように複数行を出力するのってひな形をぽんっと出力して、後からその中を埋めていく、みたいな使い方をするはず。んじゃインデントでコードを見やすくしたい人も多いと思いますので、参考にしてみてください。

原因

ここから下は気になる方だけ読んでみてくださいね。

今回クイックタグに複数行分のボタンを追加する、っていうのをしたんですが、そもそもクイックタグの「QTags.addButton」はエディタのHTMLソースの下の方にそのままjavascriptを出力する形になっています。つまりphpじゃなくてjavascriptでボタンを追加してるんですね。

たぶんみなさんもfuncitions.php内で「QTags.addButton」をヒアドキュメントにしてecho()とかしてるんじゃないかなと思います。

で、「\n」で普通に改行してると、functions.phpでechoして実際にHTML上のjavascriptになるときにそこで改行されちゃうんです。

javascriptって文字列を途中で改行できないんでそこでエラーになってしまってクイックタグとして表示されなかった、というのがねっこの原因。

そこで改行コード自体をエスケープ（\\n）することでjavascriptになる際の改行を防いでいるんです。

ちなみに

ちなみに上の「QTags.addButton」は第4引数が省略されています。

本来この第4引数には終了タグを指定するんですが、ここは省略OKな部分。

今回のようにひな形チックな、複数行あるHTMLを1クリックで出力するボタンを作る場合、終了タグっていうのが特にないと思うので省略しています。

まとめ

今回はワードプレスのクイックタグで複数行ある複雑なHTMLを出力する方法を紹介しました。

まとめると「\n」とか「\t」じゃなくて「\\n」や「\\t」という風にエスケープしてやればOK！という感じ。

参考にしてみてくださいね。