気ままに綴る独学メモ帳
TinyMCEにショートコードを挿入するカスタムボタンを追加したはいいが、
見た目がイケてないのでビジュアルエディタではHTMLタグに変換してスタイリングしたいなあと思いましてね、その方法をぐぐってたら自分が昔書いた記事にたどり着くっていう…
[wp] 自作したショートコードをビジュアルエディタ内で置換する
そりゃ9年も経ってたら書いたことすら忘れますわ。
TinyMCE自体も記事を書いた当時多分バージョン3だったのが今はバージョン5になってて記事のソースじゃ動かないんで、こちらに現行のWordpress(5.x系)で動くものを載せておきます。
WordPressに標準搭載されているGalleryショートコードでは、
HTMLエディタの時は［gallery］なんだけど、ビジュアルエディタにした時には画像が表示されるようになっている。
ギャラリーに限らずとも、この置換が再現出来れば自作したショートコードの見やすさが段違い。
で、実際やってみたら今まで記事に書いた事の範囲でさっくり出来てしまったので、
アクティブテーマディレクトリ下にあるイメージディレクトリのURLを出力するショートコードを例にして、方法を書いてみます。
2019年時点ではこのコード動かないので、TinyMCE(v5)バージョンも書きました
WordPressのビジュアルエディタに自作したボタンを追加する方法についてのメモです。
TinyMCEのプラグイン作成手順メモにもなっています。
ver2.5以下は確認してないのでどうだか分かりません。多分TinyMCEのバージョンが違うので動かないと思います。
ver2.7は動きました。
ver2.9も動きました。
サンプルとして▼こういうテーブルをボタン１発で追加出来るようにします。
| Name | |
|---|---|
| Address | |
| TEL | |
| FAX | |
| URL |
プラグインとかで記事のテンプレートを作っておくという手もあるけど、ボタン挿入の方が汎用的に使えるので楽です。
エディタへのテキスト挿入以外にもいろいろな事がやれます。
結構面倒くさいので初心者向きではありません。
あとついでにエディタ内のスタイル変更についても解説しています。
なお、この方法はTinyMCE Advancedの影響を受けません。
セレクトメニューについて追記
