【WordPress】エディターに自作ボタンを追加する方法

スポンサーリンク

【WordPress】エディターに自作ボタンを追加する方法

 

WordPressのエディターには、デフォルトで複数の機能が備わったボタンがありますが、正直そこまで使い勝手のいいものではありません

そこで、大半の人が使っているプラグイン「TinyMCE Advanced」を利用すると便利なボタンを追加することができます。

 

しかしながら…

まだ足りない!

 

プラグインを使うことである程度機能を増やすことができますが、まだまだ物足りません。

ということで、自作ボタンを作ってしまいましょう。

 

自作ボタンを追加することで、好きな定型文を挿入したり、HTML・CSSのコードを挿入することができるようになります。

他にも、使い方次第では記事作成にとても有効です。

スポンサーリンク

自作ボタンを追加する方法

自作ボタンを追加する方法

 

完成イメージ

 

今回は、押すたびに

<span class=”c-order__recommend”>おすすめ</span>

と入力されるボタンを作ってみます。

 

完成イメージ

アイコンは自由に設定できます。

 

JSファイルを作成する

 

任意の名前のJavaScriptファイルを作成します。

作成する場所は任意で大丈夫ですが、今回はテーマフォルダ直下に作成します。

 

 

上記のコードを記入したJSファイルを作成します。

今回は、「tinymce.js」という名前で作成しました。

 

var return_text =”ここ

上記の部分を自由に変更して自分の好きな機能を作りましょう。

 

必要なファイル

↑必要なファイル

 

functions.php

 

 

上記のコードを「functions.php」に追記してください。

 

先ほど作成した「tinymce.js」のパスを指定するために「get_template_directory_uri()」を利用しています。

このコードは、テーマディレクトリまでのパスを出力してくれます。

 

※子テーマを利用している場合は、「get_stylesheet_directory_uri()」を利用してください。(親テーマのディレクトリパスを出力してしまいます。)

 

子テーマの場合は「get_stylesheet_directory_uri()」を利用する。

 

以上で、自作ボタンの完成です。

 

アイコン画像が変わらない場合の対処方法

アイコン画像が変わらない場合の対処方法

 

自作ボタンは好きな画像を設定することができますが、画像が変わらないことがあります。

原因はブラウザの「キャッシュ」のせいです。

 

以下の記事を参考に、キャッシュクリアを行ってください。

CSSを変更したのにサイトデザインが変わらない時の対処方法
サイトのデザインを変更したい! そんな時は、どうしますか? WordPressであれば、「テーマ」を変更すればデザインを簡単に変えることができます。 しかしながら、なかなか自分の思い通りのデ...

 

まとめ

 

WordPressで自作ボタンを作成する方法をご紹介しました。

プラグインで似たような機能を持ったものはあるのですが、「MW WP Form」というフォームを作成するプラグインに使用できなかったので、今回は自作ボタンを作成しました。

この方法であれば、プラグインでも問題なく使用することができます

コメント