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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(説明)
(残りを和訳。)
 
(2人の利用者による、間の9版が非表示)
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 or the button object that is needed for back-compat.}}
+
{{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> ==
  
Here are the values of the default Quicktags added by WordPress to the Text editor (table sorted by access key value). Access key and ID must be unique. When adding your own buttons, do not use these values:
+
これはテキストエディターへ WordPress が追加するデフォルトの Quicktags の値です(アクセスキーの値の順)。アクセスキーと ID は一意でなければなりません。独自のボタンを追加する場合は、これらの値を使用しないでください:
  
 
{| class="widefat"
 
{| class="widefat"
 
|- style="background:#464646; color:#d7d7d7;"
 
|- style="background:#464646; color:#d7d7d7;"
! '''Accesskey''' !! '''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]
+
  
{{原文|Conditional Tags|141729}}<!-- 22:50, 8 March 2014‎ Ramiy 版 -->
+
* [https://generatewp.com/quicktags/ WordPress Quicktags Generator]
  
[[カテゴリ:Advanced Topics]]
+
* [https://www.nimbusthemes.com/add-quicktags-wordpress-snippet-generator/ Add Quicktags Code Generator]
[[カテゴリ:WordPress Development]]
+
 
 +
* [http://wp-kappa.com/quicktags_api-in-wordpress/ http://wp-kappa.com/quicktags_api-in-wordpress/] かっぱのWordPress入門ブログ -【Quicktags API】WordPress の新規投稿画面にクイックタグのボタンを作成してみた
 +
 
 +
{{原文|Quicktags_API|160431}} <!-- 18:42, 11 April 2017 NimbusThemes 版 -->
 +
 
 +
[[カテゴリ:上級トピック]]
 +
[[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最新版との差分