• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

クイックタグAPI

提供: WordPress Codex 日本語版
移動先: 案内検索

この項目「クイックタグAPI」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。

説明

Quicktags API を使用すると、WordPress のエディタのテキスト(HTML)モードへ新しいボタンを増やすことができます。

このページは Make WordPress Core で提案されました。 関連 Trac チケット: 16695 

WordPress Text editor buttons

使い方

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

パラメータ

id
文字列) (必須) ボタンの html の id に入れる値。
初期値: なし
display
文字列) (必須) ボタン の html の value に入れる値。
初期値: なし
arg1
文字列) (必須"<span>" のような開始タグ、もしくはボタンをクリックしたときに実行されるコールバック。
初期値: なし
arg2
文字列) (オプション"</span>" のような終了タグ。終了タグが不要な場合は空にします。(例えば開始タグが "<hr />")。
初期値: なし
access_key
文字列) (オプション) ボタンのショートカットアクセスキー。
初期値: なし
title
文字列) (オプション) ボタンの html の title に入れる値。
初期値: なし
priority
整数) (オプション) ツールバー内にボタンを置きたい位置を表す数値。1 - 9 = 1行目, 11 - 19 = 2行目, 21 - 29 = 3行目, など。
初期値: なし
instance
文字列) (オプション) 指定すると Quicktags の特定のインスタンスだけにボタンを追加する。省略するとすべてのインスタンスに追加する。
初期値: なし

戻り値

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

用例

// add more buttons to the html editor
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', '段落タグ', 1 );
    QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', '横線', 201 );
    QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', '整形済テキストタグ', 111 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

(参考: 参照エラーを避けるために 'quicktags' スクリプトが使用中かどうかチェックします。)

上の例はテキストエディターのデフォルトの Quicktags へ HTML ボタンを追加します。例えば "p" ボタンの HTML は次のようになります:

<input type="button" id="qt_content_eg_paragraph" accesskey="p" class="ed_button" title="段落タグ" value="p">

(各ボタンの ID の値は、頭に文字列 'qt_content_' が自動的に補われます。)

下記は quicktags.js の docblock の内容です。とても役に立ちます。

/**
 * 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 />' );
 */

デフォルトのクイックタグ

これはテキストエディターへ WordPress が追加するデフォルトの Quicktags の値です(アクセスキーの値の順)。アクセスキーと ID は一意でなければなりません。独自のボタンを追加する場合は、これらの値を使用しないでください:

アクセスキー ID 開始タグ 終了タグ
a link link <a href="' + URL + '"> </a>
b strong b <strong> </strong>
c code code <code> </code>
d del del <del datetime="' + _datetime + '"> </del>
f fullscreen fullscreen
i em i <em> </em>
l li li \t<li> </li>\n
m img img <img src="' + src + '" alt="' + alt + '" />
o ol ol <ol>\n </ol>\n\n
q block b-quote \n\n<blockquote> </blockquote>\n\n
s ins ins <ins datetime="' + _datetime + '"> </ins>
t more more <!--more-->
u ul ul <ul>\n </ul>\n\n
spell lookup
close close

(一部のタグは URL_datetime などの変数を使います。これは関数から渡されます。)

変更履歴

  • 新規導入: 3.3

ソースファイル

qt.addButton()wp-includes/js/quicktags.jswp-includes/js/quicktags.min.js にあります。

外部資料

最新英語版: WordPress Codex » Quicktags_API最新版との差分