LQDB Liberty Questの技術メモサイト。

What do you need?

テキストエディタにボタンを追加する

WordPress管理画面のビジュアルエディタではなく、テキストエディタにクイックタグのボタンを追加する方法です。
クイックタグを追加する事で、よく使うタグを簡単に引き出せるようになります。

クイックタグの追加はとても簡単で、WordPressの管理画面に以下のようなJavaScriptを追加するだけで実装する事が出来ます。

QTags.addButton( 'test-button', 'ボタンの名前', '<span>', '</span>' );

上記のコードを利用すると、WordPress投稿編集画面のテキストエディタに <span> タグを追加出来るボタンを追加する事が出来ます。
挿入するコードは、上記のコードの3,4番目のパラメータを使用して変更する事が可能です。
例えば、<span>タグではなく、<strong>タグを挿入したい場合は以下のように変更します。

QTags.addButton( 'test-button', 'ボタンの名前', '<strong>', '</strong>' );

また、タグと閉じタグを同時に入力してしまいたい場合は、以下のように記述する事で可能になります。

QTags.addButton( 'test-button', 'ボタンの名前', '<strong></strong>', '' );

ボタンをアクセスキーを利用してすぐに入力出来るようにしたい場合は、
5番目のパラメータにキーを設定する事で可能になります。
以下の設定ですと Shift+Alt+k でショートカットが可能になります。(何故か私の環境ですと出来たり出来なかったりします)

QTags.addButton( 'test-button', 'ボタンの名前', '<strong></strong>', '', 'k' );

6番目のパラメータはボタンのtitle属性を設定するのに利用されます。
これはボタンをマウスオーバーした時に、どのような説明を表示するのかを設定する事が出来ます。

QTags.addButton( 'test-button', 'ボタンの名前', '<strong></strong>', '', 'k', 'ボタンの説明' );

7番目のパラメータはボタンの優先度を設定します。
ここに設定した数値が大きい程、ボタンが左側に表示されるようになります。

QTags.addButton( 'test-button', 'ボタンの名前', '<strong></strong>', '', 'k', 'ボタンの説明', 10 );

上記で紹介したパラメータの他にも1つパラメータが存在しますが、用途が上手く掴めない為に割愛させていただきます。
また、手っ取り早くボタンの追加をテストしたい方は、以下のコードをご利用のテーマファイルのfunctions.phpの中に記述してみて下さい。
テキストエディタに <span> のタグを挿入するボタンが追加されます。

// 管理画面にスクリプトを追加
function wpx_add_admin_header_script() {
    echo "<script>jQuery(document).ready(function(){QTags.addButton( 'test-button', 'ボタンのテスト', '<span>', '</span>' );});</script>" . "\n";
}
add_action( 'admin_head', 'wpx_add_admin_header_script' );

(0) Comments

コメントを残す

コメント内容の項目は必須入力です。
コメントは承認後に公開されますので反映に時間がかかる場合がございます。また、メールアドレスは公開されません。

返信先: