ワードプレス>ワードプレスの記事投稿画面のエディタにボタンを追加する

ワードプレスの記事投稿画面のエディタにボタンを追加する

2018年7月15日

ワードプレスのテーマを作っていると、記事投稿画面で便利な機能を追加したいと思う時があります。プラグインを追加すれば簡単にできるのでしょうが、今回は自作で作っていきます。ちなみにこのブログテーマは自作テーマ(KYO)なのですが、数種類のボタンを自作しています。

ビジュアルエディタにボタンを追加する

functions.phpに以下のように書いていきます

ボタンを押した時の処理内容はjsファイルに記載していきます。
今回は「custom_editor_button.js」というファイルをjsフォルダ内作っていきます。

このコメントの通りです。
決まり文句のようなものがあります。
tinymce.plugins.CustomEditorという名前にしていますが、ここはtinymce.plugins.nandemookeという名前でも構いません。
image: url + ‘/grid.png’,//ボタンの画像ファイルというのもはボタンアイコンのファイル名を指定しています。urlというのがこのjsファイルのあるフォルダを指しますので、ここではjsフォルダ内にgrid.pngという画像を設置しておきましょう。次にボタンを登録します。

functions.php

さきほど作ったボタンの名前はbtn1だったのでbutton配列にbtn1をぶち込んでおきます。
最後にフィルターフックで登録します。

ここまでできると、ボタンが追加されています

ホバーした時にボタンのタイトルが表示されます。

 

簡単ではありますが、これでエディタに独自のボタンが追加されました!