KYO

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

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をぶち込んでおきます。
最後にフィルターフックで登録します。

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

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

 

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


関連記事

ワードプレスのフィルターフックの基本を理解する

2018年5月25日

ワードプレスでテーマを作っているとフックという言葉を見かけます。 私はよくわからずにスルーしていましたが、勉強したので備忘録的にまとめます。     ワードプレスで自作テーマを作っていると、この機能のこれが邪魔だな!と思うことがあったりして、知らず知らずのうちにフィルターフックを使っていることがあります。 例えば、記事...

ワードプレスの設定画面に項目を追加し独自の値を保存する

2018年5月27日

ワードプレスのバージョン 4.6.1です   前回アクションフックについて触れました ワードプレスのアクションフックの基本   アクションフックはワードプレスのコアのコアな部分の設定に手を入れることができる機能でした。 設定画面に項目を追加するにも、アクションフックというものが必須でした     今...

ワードプレスの管理画面に設定項目を追加する

2018年7月16日

今、新しいテーマを作っているのですが、管理画面に値を設定させるフィールドを用意しています。そんなわけで管理画面で独自の値を設定する方法を本投稿で書いていきます。これができると、カスタマイズの幅が広がります。ここはクライアントが入力した値を使いたい!という場面で役に立ちます。 以前も似たような記事を書いたのですが ワードプレスの設定画面に項...

ジンプルで見やすいワードプレスのブログ用テーマを作りました

2018年7月2日

ブログを運営する時にワードプレスが非常に強いです。運営管理の面で見ても、SEO対策の面でも見てもワードプレスでブログを作るのは今の時代の最善手です。 このテーマはシンプルで見やすく扱いやすく、必要な機能が揃っているのですぐに仲良くなれます。 ワードプレスでブログを作りたい人にオススメできるテーマです。 テーマ名 KYO 料金 FREE 用...

ワードプレスのアクションフックの基本

2018年5月26日

先日、フィルターフックについて書きましたが、今回はアクションフックについて書きます。 ワードプレスのフィルターフックの基本を理解する   アクションフックを使いこなすと、高度なプラグインとかが作成できるようになりそうですね。 ワードプレスのアクションに関連して関数を呼び出せるようになります。   具体的には、記事を投稿...

ワードプレス関連の記事

2018年5月14日

関連記事に表示されます。