Quicktags

説明

Quicktags APIを使用すると、WordPress Classicエディタのテキスト（HTML）モードに追加のボタンを含めることができます。

履歴

このAPIはWordPress 3.3で導入されました。

使用法

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance, object );

説明

Quicktags APIを使用すると、WordPress Classicエディタのテキスト（HTML）モードに追加のボタンを含めることができます。

戻り値

(mixed)Nullまたは互換性のために必要なボタンオブジェクト。

例

以下の例は、テキストエディタのデフォルトQuicktagsにHTMLボタンを追加します。

モダンな例

この例では、Quicktagsがキューに追加されるときにJavaScriptを追加するためにインラインJS APIを使用します。

/**
 * Add a paragraph tag button to the quicktags toolbar
 *
 * @return void
 */
function wporg_add_quicktag_paragraph() {
    wp_add_inline_script(
        'quicktags',
        "QTags.addButton( 'eg_paragraph_v2', 'p_v2', '<p>', '</p>', '', 'Paragraph tag v2', 2, '', { ariaLabel: 'Paragraph', ariaLabelClose: 'Close Paragraph tag' });"
    );
}
add_action( 'admin_enqueue_scripts', 'wporg_add_quicktag_paragraph' );

別のモダンな例

この例では、

• 1. 適切なWordPress関数を使用してスクリプトをキューに追加しますwp_enqueue_script。
• 2. QuickTagがクリックされたときまたはその後に実行したいJavaScriptを呼び出します。

スクリプトをキューに追加

以下のコードをアクティブテーマのfunctions.phpに追加します。

function enqueue_quicktag_script(){
    wp_enqueue_script( 'your-handle', get_template_directory_uri() . '/editor-script.js', array( 'jquery', 'quicktags' ), '1.0.0', true );
}
add_action( 'admin_enqueue_scripts', 'enqueue_quicktag_script' );

JavaScript自体

新しいファイルeditor-scriptを作成し、アクティブテーマディレクトリの下に保存します。

QTags.addButton( 'eg_paragraph_v3', 'p_v3', my_callback, '', '', 'Prompted Paragraph tag', 3, '', { ariaLabel: 'Prompted Paragraph' } );
function my_callback(){
  var my_stuff = prompt( 'Enter Some Stuff:', '' );
  if ( my_stuff ) {
   QTags.insertContent( '<p>' + my_stuff + '</p>' );
  }
}

従来の例

この例では、管理フッターフックのwp_script_isにハードコーディングされたJavaScriptを手動で追加します。モダンな例を使用することを検討してください。上記を参照してください。

/**
 * Add more buttons to the quicktags HTML editor
 *
 * @return void
 */
function wporg_traditional_add_quicktags() {
    if ( ! wp_script_is( 'quicktags' ) ) {
        return;
    }
    ?>
    <script type="text/javascript">
        QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', '', 'Paragraph tag', 1, '', { ariaLabel: 'Paragraph', ariaLabelClose: 'Close Paragraph tag' } );
        QTags.addButton( 'eg_hr', 'hr', '<hr />', '', '', 'Horizontal rule line', 201, '', { ariaLabel: 'Horizontal' } );
        QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', '', 'Preformatted text tag', 111, '', { ariaLabel: 'Pre', ariaLabelClose: 'Close Pre tag' } );
    </script>
    <?php
}
add_action( 'admin_print_footer_scripts', 'wporg_traditional_add_quicktags', 11 );

注意:

• 参照エラーを避けるために、「quicktags」スクリプトが使用されているかどうかを確認します。
• WordPress 6.0以降、スクリプトの読み込み順序が変更され、「QTags is not defined」というエラーがadd_action()の3番目のパラメータなしで発生します。また、10より大きい数値を指定する必要があります（例: 11）。

「p」ボタンのHTMLは次のようになります:

<input type="button" id="qt_content_eg_paragraph" class="ed_button button button-small" title="Paragraph tag" aria-label="Paragraph" value="p">

各ボタンのID値は自動的に文字列qtcontentで前置きされます。

以下はquicktags.jsからのドキュメントブロックのダンプであり、それ自体で非常に便利です。

/**
 * Main API function for adding a button to Quicktags
 *
 * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
 * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
 * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
 * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
 *
 * Minimum required to add a button that calls an external function:
 *     QTags.addButton( 'my_id', 'my button', my_callback );
 *     function my_callback() { alert('yeah!'); }
 *
 * Minimum required to add a button that inserts a tag:
 *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
 *     QTags.addButton( 'my_id2', 'my button', '<br />' );
 */

説明

Quicktags APIを使用すると、WordPress Classicエディタのテキスト（HTML）モードに追加のボタンを含めることができます。

ソースファイル

qt.addButton()のソースはjs/_enqueues/lib/quicktags.jsにあり、ビルド中にwp-incudes/js/quicktags.jsおよびwp-includes/js/quicktags.min.jsに出力されます。