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

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

「クイックタグAPI」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(外部リソース: リンク修正)
(残りを和訳。)
 
(他の1人の利用者による、間の3版が非表示)
1行目: 1行目:
== 説明 ==
+
{{CheckTrans}}
  
Quicktags APIを使用すると、WordPressのエディタのテキスト(HTML)モードで追加のボタンを含めることができます。
+
== 説明<span id="Description"></span> ==
  
このページは [http://wpdevel.wordpress.com/2011/12/07/whats-new-javascript-in-3-3/ Make WordPress Core]で提案されました。
+
Quicktags API を使用すると、WordPress のエディタのテキスト(HTML)モードへ新しいボタンを増やすことができます。
関連Tracチケット: [http://core.trac.wordpress.org/ticket/16695 16695] 
+
 
 +
このページは [http://wpdevel.wordpress.com/2011/12/07/whats-new-javascript-in-3-3/ Make WordPress Core] で提案されました。
 +
関連 Trac チケット: [http://core.trac.wordpress.org/ticket/16695 16695] 
  
 
[[Image:quicktags-editor.png‎‎|full|center|WordPress Text editor buttons]]
 
[[Image:quicktags-editor.png‎‎|full|center|WordPress Text editor buttons]]
  
== 使い方 ==
+
== 使い方<span id="Usage"></span> ==
 +
 
 
<pre>
 
<pre>
 
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
 
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
 
</pre>
 
</pre>
  
== パラメータ ==
+
== パラメータ<span id="Parameters"></span> ==
  
{{Parameter|id|string|The html id for the button.}}
+
{{Parameter|id|文字列|ボタンの html id に入れる値。}}
{{Parameter|display|string|The html value for the button.}}
+
{{Parameter|display|文字列|ボタン の html value に入れる値。}}
{{Parameter|arg1|string|Either a starting tag to be inserted like "&lt;span&gt;" or a callback that is executed when the button is clicked.}}
+
{{Parameter|arg1|文字列|<code>"&lt;span&gt;"</code> のような開始タグ、もしくはボタンをクリックしたときに実行されるコールバック。}}
{{Parameter|arg2|string|Ending tag like "&lt;/span&gt;". Leave empty if tag doesn't need to be closed (i.e. "&lt;hr /&gt;").|optional}}
+
{{Parameter|arg2|文字列|<code>"&lt;/span&gt;"</code> のような終了タグ。終了タグが不要な場合は空にします。(例えば開始タグが <code>"&lt;hr /&gt;"</code>)|オプション}}
{{Parameter|access_key|string|Shortcut access key for the button.|optional}}
+
{{Parameter|access_key|文字列|ボタンのショートカットアクセスキー。|オプション}}
{{Parameter|title|string|The html title value for the button.|optional}}
+
{{Parameter|title|文字列|ボタンの html title に入れる値。|オプション}}
{{Parameter|priority|int|A number representing the desired position of the button in the toolbar. 1 - 9 &#61; first, 11 - 19 &#61; second, 21 - 29 &#61; third, etc.|optional}}
+
{{Parameter|priority|整数|ツールバー内にボタンを置きたい位置を表す数値。1 - 9 &#61; 1行目, 11 - 19 &#61; 2行目, 21 - 29 &#61; 3行目, など。|オプション}}
{{Parameter|instance|string|Limit the button to a specific instance of Quicktags, add to all instances if not present.|optional}}
+
{{Parameter|instance|文字列|指定すると Quicktags の特定のインスタンスだけにボタンを追加する。省略するとすべてのインスタンスに追加する。|オプション}}
  
== 戻り値 ==
+
== 戻り値<span id="Return Values"></span> ==
  
{{Return||mixed|Null または後方互換のために必要とされるボタンオブジェクト。}}
+
{{Return||mixed|Null または後方互換のために必要なボタンオブジェクト。}}
  
== ==
+
== 用例<span id="Examples"></span> ==
  
 
<pre>
 
<pre>
36行目: 39行目:
 
?>
 
?>
 
     <script type="text/javascript">
 
     <script type="text/javascript">
     QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1 );
+
     QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', '段落タグ', 1 );
     QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201 );
+
     QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', '横線', 201 );
     QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '&lt;/pre>', 'q', 'Preformatted text tag', 111 );
+
     QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '&lt;/pre>', 'q', '整形済テキストタグ', 111 );
 
     </script>
 
     </script>
 
<?php
 
<?php
46行目: 49行目:
 
</pre>
 
</pre>
  
(Note: to avoid a Reference Error we check to see whether or not the 'quicktags' script is in use.)
+
(参考: 参照エラーを避けるために 'quicktags' スクリプトが使用中かどうかチェックします。)
  
The above would add HTML buttons to the default Quicktags in the Text editor. For example, the "p" button HTML would be:
+
上の例はテキストエディターのデフォルトの Quicktags へ HTML ボタンを追加します。例えば "p" ボタンの HTML は次のようになります:
 
<pre>
 
<pre>
<input type="button" id="qt_content_eg_paragraph" accesskey="p" class="ed_button" title="Paragraph tag" value="p">
+
<input type="button" id="qt_content_eg_paragraph" accesskey="p" class="ed_button" title="段落タグ" value="p">
 
</pre>
 
</pre>
  
(The ID value for each button is automatically prepended with the string 'qt_content_'.)
+
(各ボタンの ID の値は、頭に文字列 'qt_content_' が自動的に補われます。)
  
Here is a dump of the docblock from quicktags.js, it's pretty useful on it's own.
+
下記は quicktags.js の docblock の内容です。とても役に立ちます。
 
<pre>
 
<pre>
 
/**
 
/**
75行目: 78行目:
 
</pre>
 
</pre>
  
== デフォルトのクイックタグ ==
+
== デフォルトのクイックタグ<span id="Default Quicktags"></span> ==
  
ここにテキストエディタ(アクセスキーの値によってソートされたテーブル)にWordPressで追加されたデフォルトQuicktagsの値です。アクセスキーとIDは一意でなければなりません。独自のボタンを追加する場合は、これらの値を使用しないでください。:
+
これはテキストエディターへ WordPress が追加するデフォルトの Quicktags の値です(アクセスキーの値の順)。アクセスキーと ID は一意でなければなりません。独自のボタンを追加する場合は、これらの値を使用しないでください:
  
 
{| class="widefat"
 
{| class="widefat"
 
|- style="background:#464646; color:#d7d7d7;"
 
|- style="background:#464646; color:#d7d7d7;"
! '''アクセスキー''' !! '''ID''' !! '''Value''' !! '''Tag Start''' !! '''Tag End'''
+
! '''アクセスキー''' !! '''ID''' !! '''''' !! '''開始タグ''' !! '''終了タグ'''
 
|-
 
|-
 
| a || link || link || <tt>&lt;a href="' + URL + '"&gt;</tt> || <tt>&lt;/a&gt;</tt>
 
| a || link || link || <tt>&lt;a href="' + URL + '"&gt;</tt> || <tt>&lt;/a&gt;</tt>
114行目: 117行目:
 
|}
 
|}
  
(Some tag values above use variables, such as <tt>URL</tt> and <tt>_datetime</tt>, passed from functions.)
+
(一部のタグは <tt>URL</tt> <tt>_datetime</tt> などの変数を使います。これは関数から渡されます。)
  
== 変更履歴 ==
+
== 変更履歴<span id="Change Log"></span> ==
  
* Since: [[Version 3.3|3.3]]
+
* 新規導入: [[Version 3.3|3.3]]
  
== ソースファイル ==
+
== ソースファイル<span id="Source File"></span> ==
  
<tt>qt.addButton()</tt> is located in {{Trac|wp-includes/js/quicktags.js}} and {{Trac|wp-includes/js/quicktags.min.js}}.
+
<tt>qt.addButton()</tt> {{Trac|wp-includes/js/quicktags.js}} {{Trac|wp-includes/js/quicktags.min.js}} にあります。
  
==外部リソース==
+
== 外部資料<span id="Resources"></span> ==
* [http://generatewp.com/quicktags/ WordPress Quicktags Generator]
+
 
 +
* [https://generatewp.com/quicktags/ WordPress Quicktags Generator]
 +
 
 +
* [https://www.nimbusthemes.com/add-quicktags-wordpress-snippet-generator/ Add Quicktags Code Generator]
  
 
* [http://wp-kappa.com/quicktags_api-in-wordpress/ http://wp-kappa.com/quicktags_api-in-wordpress/] かっぱのWordPress入門ブログ -【Quicktags API】WordPress の新規投稿画面にクイックタグのボタンを作成してみた
 
* [http://wp-kappa.com/quicktags_api-in-wordpress/ http://wp-kappa.com/quicktags_api-in-wordpress/] かっぱのWordPress入門ブログ -【Quicktags API】WordPress の新規投稿画面にクイックタグのボタンを作成してみた
  
{{原文|Quicktags_API|141729}}<!-- 22:50, 8 March 2014‎ Ramiy 版 -->
+
{{原文|Quicktags_API|160431}} <!-- 18:42, 11 April 2017 NimbusThemes 版 -->
  
[[カテゴリ:Advanced Topics]]
+
[[カテゴリ:上級トピック]]
[[カテゴリ:WordPress Development]]
+
[[Category:WordPress_の開発]]
 
[[カテゴリ:API]]
 
[[カテゴリ:API]]
 +
 +
[[en:Quicktags API]]
 +
[[id:Quicktags API]]
 +
[[it:API dei Quicktag]]

2018年4月1日 (日) 21:46時点における最新版

この項目「クイックタグ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最新版との差分