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

スポンサーリンク

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

 

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

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

 

しかしながら…

まだ足りない!

 

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

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

 

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

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

スポンサーリンク

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

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

 

完成イメージ

 

今回は、押すたびに

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

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

 

完成イメージ

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

 

JSファイルを作成する

 

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

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

 

(function() {
    tinymce.create( 'tinymce.plugins.original_tinymce_button', {
      init: function( ed, url ) {
        ed.addButton( 'recommended', {
          title: 'おすすめ', // ボタンの名前
          image: url + '/icon.png', // ボタンのアイコン画像のパス
          cmd: 'recommended_cmd'
        });

        ed.addCommand( 'recommended_cmd', function() {
          var return_text = '<span class="recommend">おすすめ</span>'; // ここを書き換えて好きなボタンを作りましょう
          ed.execCommand( 'mceInsertContent', 0, return_text );
        });
      },
      createControl : function( n, cm ) {
        return null;
      },
    });
    tinymce.PluginManager.add( 'original_tinymce_button_plugin', tinymce.plugins.original_tinymce_button );
})();

 

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

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

 

var return_text =”ここ

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

 

必要なファイル

↑必要なファイル

 

functions.php

 

add_filter( 'mce_external_plugins', 'add_original_tinymce_button_plugin' );
function add_original_tinymce_button_plugin( $plugin_array ) {
    $plugin_array[ 'original_tinymce_button_plugin' ] = get_template_directory_uri() . '/tinymce.js'; // 先ほど作成したJSファイルまでのパス
    return $plugin_array;
}

add_filter( 'mce_buttons', 'add_original_tinymce_button' );
function add_original_tinymce_button( $buttons ) {
    $buttons[] = 'recommended';  // recommendedの部分は任意で書き換え
    return $buttons;
}

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

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

 

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

CSSを変更したのにサイトデザインが変わらない時の対処方法
サイトデザインを変更したくて「CSS」を変更したのにデザインが変わらない…。そんなときの対処方法をご紹介します。とりあえず「スーパーリロード」してみましょう。

 

まとめ

 

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

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

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

コメント

タイトルとURLをコピーしました