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

編集ボタン 追加方法

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

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

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

  • Table of Contents

基本は「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'
  );
}

さいごに

クイックタグなどの各エディターに出力されるボタンは、それぞれに出力するコードが必要ですが、こちらの編集ボタンの場合は1つ追加するだけでいいので編集が楽なんです。

プラグインで追加する場合は、TinyMCEのボタンを追加するよりもこちらを使ってみるのも良いんじゃないでしょうか?

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください