WordPressのビジュアルエディタに新しいボタンを追加する方法

シェアする

こんにちは、イナフクカズヤ(@Inafuku_Kazuya)です。

ブログにGoogleマップを貼り付けるので、レスポンシブのクラスを追加できるビジュアルエディタのボタンを実装してほしいという依頼がありました。

ビジュアルエディタにはないボタン(機能)を実装したいケースは、結構あるので、今回はビジュアルエディタに新しいボタンを追加する方法を紹介します。

こちらの記事を参考にさせていただきました。
ビジュアルエディタに独自ボタンを追加する

まずは、ボタンを追加するコードとスクリプトを読み込むコードをfunctions.phpに記述します。僕はjsフォルダはassetsに入れてるので、そちらに保存するようにします。

上記のコードでtinymce.jsを読み込む記述を書きました。なので、jsフォルダの中にtinymce.jsを作って保存します。

ファイルの中には下記のように記述します。
ビジュアルエディタ内で選択したものをgmapクラスで囲みます。

gmapのCSSをcssファイルに記述します。

ファイルの置き場所については、map-icon.pngをtinymce.jsと同じ階層に置くように記述してあるので、同じところに作って置いてください。

32×32くらいのサイズで画像を作った方が綺麗に見えます。

以上です。