コンテンツ編集を楽にするクイックタグボタンの追加・編集方法

著者 Nora

日付 2016/01/19

カテゴリーカスタマイズ

タグ TinyMCE,コンテンツ編集,編集ボタン,追加

ワードプレスには「メディアを追加」ボタンが標準で備わっていますが、この横にボタンを追加する方法です。メディアボタンの横に追加すれば、HTMLエディターとビジュアルエディターの両方で使うことができますから非常に便利ですよね。

そのボタンでどのような処理をするかが重要で、実はボタンを設置すること自体は非常に簡単です。つまり、PHPで書くことは殆どありません。JavaScriptがメインです。

プラグイン「Magic Template Holder」用に作成したPHPクラスですが、他でも使い回せるクラスを簡易作成しましたので、ボタンを設置したい方は是非ご参照ください。

基本は「media_button」にフックさせる

ワードプレスに標準的に用意されているアクションフック「media_button」は、「メディアを追加」ボタンの出力後に呼び出されるフックですので、ここにHTMLタグを出力するように書きます。

<?php
add_action( 'media_buttons', 'your_editor_button' );
function your_editor_button( $content_id ) { ?>
  <a id="your-editor-button" class="button" href="javascript:void(0);">編集ボタン</a>
<?php }
?>

これだけでボタンを出力できます。

編集ボタン

こんな感じです。

別にaタグでなくても自由なデザインのボタンを出力して大丈夫です。

処理は全てJavaScriptで書きます。

テキストなどを挿入するには？

JavaScriptでボタンの処理を書くんですが、重要なのは次のコードのみです。

wp.media.editor.insert( 'テキスト' );

これはワードプレスの編集用コードで、テキストエリア内の指定した位置に「テキスト」を挿入する関数ですので、jQueryなどでボタンをトリガーにして呼び出せるようにしておけば、あらゆるテキストを挿入することが可能になります。

使用するアクションフック

あとはJavaScriptファイルは「admin_print_scripts」にフックさせて呼び出すようにするだけです。

<?php
add_action( 'admin_print_scripts', 'admin_print_scripts' );
function admin_print_scripts() {
  $args = array(
    'someData' => 'something',
  );
  wp_register_script(
    'your_scripts_js',
   'path-to/your-scripts.js',
    array( 'jquery' )
  );
  wp_localize_script( 'your_scripts_js', 'localizedData', $args );
  wp_enqueue_script( 'your_scripts_js' );
}
?>

編集ページに出力するCSSファイルは「admin_print_styles」にフックさせるようにするだけでOKです。

add_action( 'admin_print_styles', 'admin_print_styles' );
function admin_print_styles() {
  wp_enqueue_style( 
    'your_style_css',
    'path-to/your-style.css'
  );
}