WordPress:エディタにショートコードを挿入するボタンを追加する方法

WordPress:エディタにショートコードを挿入するボタンを追加する方法

ショートコードを利用することでテンプレートやちょっとした機能を簡単に呼び出すことができるようになりますが、それをより簡単に扱えるようにするためにエディタにショートコードを挿入するボタンを追加する方法を紹介します。

ショートコードを作成

まずは使用するショートコードを作成していきます。
ここでは例として<div class="example"></div>を出力するというもので、functions.phpに下記を記述します。

functions.php

function example_shortcode( $atts, $content = null ) {
  return '<div class="example">' . $content . '</div>';
}
add_shortcode( 'example', 'example_shortcode' );

上記ショートコードを登録すると、例えば[example]lorem ipsum[/example]といった形でショートコードを使用するとフロントでは<div class="example">lorem ipsum</div>のように出力されます。

ショートコードの作成についての詳細は以下で確認できます。

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

ビジュアルエディタにクリックすると上で作成したショートコードが挿入されるボタンを追加します。
まず、ボタン押下時の動きなどを指定するJSとしてeditor-button.js(ファイル名は任意のもので可)を作成して下記のように記述します。

editor-button.js

(function() {
  tinymce.create( 'tinymce.plugins.example_shortcode_button', {
    init: function( ed, url ) {
      ed.addButton( 'example', {
        title: 'example shortcode',
        icon: 'code',
        cmd: 'example_cmd'
      });

      ed.addCommand( 'example_cmd', function() {
        var selected_text = ed.selection.getContent(),
            return_text = '[example]' + selected_text + '[/example]';
        ed.execCommand( 'mceInsertContent', 0, return_text );
      });
    },
    createControl : function( n, cm ) {
      return null;
    },
  });
  tinymce.PluginManager.add( 'example_shortcode_button_plugin', tinymce.plugins.example_shortcode_button );
})();

特に変更する必要があるのはreturn_textの部分で、ここでボタンをクリックした際に呼び出したいショートコードを指定しておきます。
その他の部分は「example」となっている箇所を中心に任意のものに変更してください。

次に作成したJS(editor-button.js)の読み込みとショートコードを呼び出すためのボタンをエディタに追加するために下記をfunctions.phpに記述します。
この場合はeditor-button.jsfunctions.phpと同階層にある想定なので、別階層にある場合はパスを任意のものに変更してください。

functions.php

add_filter( 'mce_external_plugins', 'add_add_shortcode_button_plugin' );
function add_add_shortcode_button_plugin( $plugin_array ) {
  $plugin_array[ 'example_shortcode_button_plugin' ] = get_template_directory_uri() . '/editor-button.js';
  return $plugin_array;
}

add_filter( 'mce_buttons', 'add_shortcode_button' );
function add_shortcode_button( $buttons ) {
  $buttons[] = 'example';
  return $buttons;
}
ビジュアルエディタにボタンを追加した実装イメージ

実装後はこのイメージのようになり、ボタンをクリックするとエディタ内に[example][/example]というショートコードが挿入されるのを確認できます。

TinyMCEにボタンを追加する方法についての詳細は以下で確認できます。

テキストエディタにボタンを追加する

次にテキストエディタに同じくクリックするとショートコードが挿入されるボタンを追加します。
実装にはクイックタグを利用するのでfunctions.phpに下記のように記述し、QTags.addButton()の第3・第4パラメータに挿入したいショートコードを指定します。

functions.php

add_action( 'admin_print_footer_scripts', 'add_shortcode_quicktags' );
function add_shortcode_quicktags() {
  if ( wp_script_is('quicktags') ) {
?>
  <script>
    QTags.addButton( 'example_shortcode', '[example]', '[example]', '[/example]' );
  </script>
<?php
  }
}
テキストエディタにボタンを追加した実装イメージ

実装後はこのイメージのようになり、ビジュアルエディタのときと同様でボタンをクリックするとエディタ内に[example][/example]というショートコードが挿入されるのを確認できます。

クイックタグについての詳細は以下で確認できます。

Close the search window,
please press close button or esc key.