WordPressのテキストエディタにボタンを簡単に追加できるプラグイン「AddQuickTag」がありますが、このプラグインが無くても出来る Quicktags API を使ったボタンの実装方法をご紹介いたします。
Quicktags API の追加
function.phpに下記を追加します。
※編集する際は、テスト用の環境でご確認下さい。
※編集する際は、テスト用の環境でご確認下さい。
function appthemes_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
パラメータ値
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
| id | ボタンのID |
|---|---|
| display | ボタンの表示名 |
| arg1 | 開始タグ |
| arg2 | 終了タグ |
| access_key | ショートカットアクセスキー |
| title | タイトル |
| priority | 登録したボタンの表示順 |
| instance | ※使い方が分からなかったので保留 |
出力結果
ソースでみるとこんな感じになります。
指定したパラメータが如何使われているか解りますね。
<input type="button" id="qt_content_eg_paragraph" accesskey="p" class="ed_button" title="Paragraph tag" value="p">
以上
ご紹介した方法では追加出来るのは テキストエディタ限定になります。ビジュアルエディタに追加したい場合は、下記サイト様の記事が参考になります。
Divタグを出力するアイコンを追加してみました。
こんな感じでオリジナルのボタンを追加できます。
テキストエディタ・ビジュアルエディタにボタンの追加が必要な場合に是非お試しください。