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年6月23日

ワードプレスのテーマを作りました。 テーマの名前はゲールです。   ゲール紹介ページ デモページ   主に飲食店や美容系のお店をターゲットにしています。 普通のブログには向いていないのですが、ビジネスサイトを作るならば、とてもオススメのテーマになっています。   今のところは飲食店や美容系などのお店のホームペ...

ワードプレスでソースコード書くなら Crayon Syntax Highlighter一択

2018年5月30日

プログラム系のブログを書いていると、プログラムのソースコードを表示させたい場面があります。 しかし綺麗にソースコードを書くのは困難です。   ワードプレスでは記事編集モードで、ソースコードを入力しようとすると様々なトラブルが起こります(笑) 例えば、変な位置で改行されたりされなかったり、空白が消えたり、特殊文字に変換されたりと、...

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

2018年7月2日

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

テーマカスタマイザでカラーコントロールを使って色を指定する

2018年7月27日

ワードプレスの自作テーマを作ってたんですが、テーマカスタマイザというのを最近知りました。 テーマカスタマイザとはヘッダー画像とか設定する「外観」→「カスタマイズ」の部分です。プレビュー見ながらテーマの設定を変更する画面のことです。 これは視覚的にテーマをカスタマイズできるので、初心者でもテーマカスタマイズをしやすくなるというメリットがあり...

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

2018年5月27日

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

アフィリエイトに使えるワードプレスのテーマ

2018年5月13日

アフィリエイトに強く自由度の高い、ワードプレスのテーマを作りました。 ダウンロード   修正履歴 2018/05/25 記事本文がはみ出す現象を修正しました   テーマの名前はメリーラです。意味は特にありません。 アフィリエイトサイトに特化したテーマになっています。稼げるサイト作りに役立てて頂ければと思います。 &nb...