
投稿画面テキストエディタのクイックタグボタン
WordPressの投稿画面には、「ビジュアルエディタ(リッチテキスト)」と「テキストエディタ(HTML)」のいずれかで記事本文の入力を行います。
テキストエディタではHTMLタグを直に書くことができます。テキストエディタ上部のツールバーには クイックタグボタン があり、これを押すことでタグ入力を簡単に行えます。
例えば “h2” ボタンを押すと <h2>
タグが入力され、閉じタグ(</h2>
)のボタンが表示されます。
このクイックタグボタンに新しくボタンを追加するためのカスタマイズ方法をまとめます。
クイックタグAPI
クイックタグボタンの追加には、クイックタグAPIを使用します。PHPではなく、JavascriptのAPIです。
使い方
使い方は次の通りです。
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
// 最低限の引数
QTags.addButton('[id]', '[ボタンのテキスト]', '[開始タグ]', '[終了タグ]');
サンプル
functions.php 次のコードを追加します。アクションイベント(admin_print_footer_scripts
)を服してJavascriptを出力します。
最低限の4つの引数のみで使うことができます。サンプルとしてspanタグのクイックタグボタンを作成します。
また、クイックタグボタンは単純にタグを出力するだけでなく、コールバック関数を登録して実行させることも可能です。サンプルではアラートメッセージを表示するコールバック関数を登録しています。コールバック処理を登録する場合は、文字列ではなく関数として登録します。
add_action( 'admin_print_footer_scripts', function() {
?>
<script type="text/javascript">
// QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
QTags.addButton('red','span','<span style="color: red;">','</span>');
QTags.addButton('hr','hr','<hr />','');
// コールバック関数登録
QTags.addButton('Hello',
'hello',
function() {
alert("Hello World !!");
},
'',
'h',
'クリックしたらアラートを表示します。',
1);
</script>
<?php
} );
ボタンが表示されてクリック時の処理が登録されていればOKです。
“Hello”ボタンは access_key
を1に設定しているので先頭に表示されるはずです。また、ホバー時にテキストが表示され、押下時にはアラートが表示されます。
引数の説明
引数 | 説明 | その他 |
---|---|---|
id | ボタンのid | 必須 |
display | ボタンに表示されるテキスト | 必須 |
arg1 | 開始タグ(例: <span> )もしくは、ボタンがクリックされたときに実行されるコールバック関数。 |
必須 |
arg2 | 終了タグ(例: </span> )終了タグが不要な場合は空文字(例: <br /> ) |
必須 |
access_key | ボタンのショートカットのアクセスキー | |
title | ボタンホバー時に表示されるテキスト | |
priority | ボタンの表示順序 | |
instance | Quicktagsの特定のインスタンスにあるボタンを制限し 存在しない場合はすべてのインスタンスに追加 |
id
と access_key
はそれぞれ一意の値で設定する必要があります。Wordpressではデフォルトで以下のクイックタグボタンが設定されているので、同じ値で登録しないようにします。
アクセスキー | 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 |
以上。