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

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

クイックタグAPI

提供: WordPress Codex 日本語版
2015年6月7日 (日) 14:57時点におけるMiccweb (トーク | 投稿記録)による版

移動先: 案内検索

このページ「クイックタグAPI」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

説明

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
string) (必須) html ボタンのid
初期値: なし
display
string) (必須) html ボタンの値
初期値: なし
arg1
文字列) (必須) Either a starting tag to be inserted like "<span>" もしくは、ボタンがクリックされたときに実行されるコールバック。
初期値: なし
arg2
文字列) (オプション) "</span>"などの最後のタグ、閉じタグが不要な場合は空にします。 (つまり "<hr />").
初期値: なし
access_key
文字列) (オプション) ボタンのショートカットアクセスキー
初期値: なし
title
文字列) (オプション) html ボタンのタイトルの値
初期値: なし
priority
int) (オプション) ツールバーのボタンの希望する順番を表す数値。. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, など。
初期値: なし
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', 'Paragraph tag', 1 );
    QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201 );
    QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Preformatted text tag', 111 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

(Note: to avoid a Reference Error we check to see whether or not the 'quicktags' script is in use.)

The above would add HTML buttons to the default Quicktags in the Text editor. For example, the "p" button HTML would be:

<input type="button" id="qt_content_eg_paragraph" accesskey="p" class="ed_button" title="Paragraph tag" value="p">

(The ID value for each button is automatically prepended with the string 'qt_content_'.)

Here is a dump of the docblock from quicktags.js, it's pretty useful on it's own.

/**
 * 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 Value Tag Start Tag End
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

(Some tag values above use variables, such as URL and _datetime, passed from functions.)

変更履歴

  • 新規導入: 3.3

ソースファイル

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

外部リソース

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