WordPressのテキストエディタに自作のタグ挿入ボタンを追加する最新の方法

WordPress

WordPressのテキストエディタに自作のタグ挿入ボタンを追加する方法

今回はテキストエディタのカスタマイズについて。
内容は「テキストエディタに独自の自作ボタンを追加作成する方法」についてお話します。

WordPressにおいて記事を書く際にブロックエディタが標準になっている現在でも、htmlをまとめて書く場合などはクラシックエディタのテキストエディタを使った方が便利ことも多いですよね。

そんなテキストエディタで書く際によくある悩みがなんども同じコードを使用するそのたびに他の記事からコピペするのがとっても手間・・・

ボタン一発でタグがテンプレート挿入されたりしたらとっても楽ですよね?

「エディタに独自のタグを出力する自作ボタンを追加作成」する、そんなカスタマイズの方法を紹介します。

複雑なタグや改行やインデントを含むコードも簡単に設定できますよ!
とっても簡単です。ぜひやってみてください。

functions.phpでクイックタグAPIを設定する

テキストエディタの自作ボタンをカスタマイズで追加作成するにはWordPressのクイックタグAPI(JavaScript)というAPIを使います。

仕組みは簡単、管理画面上でQTags.addButtonというAPIをパラメータ指定して呼び出すだけでボタンが設置されます。

設定するファイルの場所はfunctions.phpです。

シンプルなタグを挿入する自作ボタンを追加作成するサンプルソース

まずは実際のコードをみてみましょう。
このようなタグを出力するボタンを追加作成します。

functions.phpに以下のコードを追記します。

/****************************************************************
 * シンプルなコードを出力するボタンを入れる場合
****************************************************************/
function add_my_quicktag() {
		
	// 押したときに↓このクイックタグAPI(JavaScript)が呼ばれるようにするボタンを作成する
	// QTags.addButton('①ボタンのhtmlのid', 'エディタのボタンに表示する名前', '開始タグ', '終了タグ', '', 'ボタンの説明', ボタン表示順);
	
	if (wp_script_is('quicktags')){
		
		//設定した値でQTags.addButton(JavaScript)を出力		
		echo <<<EOF
<script type="text/javascript">
	QTags.addButton('sample-button-1', '追加したボタン①', '<div class="my-class">', '</div>', '', 'ボタン①の説明', 1);
	QTags.addButton('sample-button-2', '追加したボタン②', '<div class="my-class">', '</div>', '', 'ボタン②の説明', 2);
	QTags.addButton('sample-button-3', '追加したボタン③', '<div class="my-class">', '</div>', '', 'ボタン③の説明', 3);
	QTags.addButton('sample-button-4', '追加したボタン④', '<div class="my-class">', '</div>', '', 'ボタン④の説明', 4);
	QTags.addButton('sample-button-5', '追加したボタン⑤', '<div class="my-class">', '</div>', '', 'ボタン⑤の説明', 5000000000 - 1);
	QTags.addButton('sample-button-6', '追加したボタン⑥', '<div class="my-class">', '</div>', '', 'ボタン⑥の説明', 5000000000);
</script>

EOF;
		
	}
	
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');//作った関数を管理画面で実行する

QTags.addButtonの構文

サンプルの中で出てきたQTags.addButtonについて

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

QTags.addButtonのパラメータ

1 id 文字列 必須 ボタンのhtmlのidに入れる値
2 display 文字列 必須 ボタンのhtmlのvalueに入れる値
3 arg1 文字列 必須 開始タグ、もしくは実行されるコールバック。
4 arg2 文字列 オプション 終了タグ。不要な場合は空
5 access_key 文字列 オプション ボタンのショートカットアクセスキー
6 title 文字列 オプション マウスホバーで表示される説明
7 priority 整数 オプション ツールバー内にボタンを置きたい位置を表す数値
8 instance 文字列 オプション Quicktagsの特定のインスタンスだけにボタン追加。省略するとすべて

複雑なタグを挿入する自作ボタンを追加作成するサンプルソース

単純なタグではなく、改行を含んだりインデントされたすっきりとした見た目のコードを挿入することもできます。

functions.phpに以下のコードを追記します。


/***************************************************************************************
 * 改行やインデントなど見やすい複雑なコードを出力するボタンを入れる場合
***************************************************************************************/
function add_my_quicktag_long() {
	
	
	// 押したときに↓このクイックタグAPI(JavaScript)が呼ばれるようにするボタンを作成する
	// QTags.addButton('①ボタンのhtmlのid', 'エディタのボタンに表示する名前', '開始タグ', '終了タグ', '', 'ボタンの説明', ボタン表示順);
	
	/* ############################################################ */
	/* オリジナルボタンの設定 ここから→ */

	//★①ボタンのhtmlのid(他と重複不可)
	$button_id = "sample-button-a";

	//★②ボタンの表示名
	$button_label = "追加したボタンA";
	
	//★③入力する開始タグのコード(htmlの囲みは"を使う)
	$tag_start =<<<EOF
<div
	class="my-class"
	onClick="alert(\'クリックされました\');"
>

EOF;
	
	//★④入力する終了タグのコード(htmlの囲みは"を使う)
	$tag_end =<<<EOF

</div>
EOF;
			
	//★⑤マウスオーバー時にボタンに表示する説明文
	$title = "表示する説明文";
	
	$priority = 1;
	
	/* オリジナルボタンの設定 →ここまで */
	/* ############################################################ */
		
	$tag_start = preg_replace('/\r*\n/', '\\r\\n', $tag_start); //改行の処理
	$tag_end = preg_replace('/\r*\n/', '\\r\\n', $tag_end); //改行の処理
	
	if (wp_script_is('quicktags')){
		
		//設定した値でQTags.addButton(JavaScript)を出力
		echo <<<EOF
<script type="text/javascript">
	QTags.addButton('{$button_id}', '{$button_label}', '{$tag_start}', '{$tag_end}', '', '{$title}', {$priority});
</script>

EOF;
		
	}
}
 
add_action('admin_print_footer_scripts', 'add_my_quicktag_long');

コメント

タイトルとURLをコピーしました