Wordpressコメント0件

[WordPress] 投稿画面テキストエディタにクイックタグボタンを追加する方法

目次 []

投稿画面テキストエディタのクイックタグボタン

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

以上。

参考URL