テキストエディタにオリジナルボタンを設置する方法
テキストエディタをデフォルトで使用していると、頻繁に利用するコードを呼び出せるオリジナルボタンを設置したいと思ったことがあるかと思います。
プラグインを使用して設置する方法もあるのですが、個人的にプラグインは少ないほど良いと考えるタイプなので、今回はプラグインを使用せずにオリジナルボタンを設置する方法をご紹介することにしました。
オリジナルボタンを設置する方法
テキストエディタにオリジナルボタンを設置したい場合、functions.phpに以下のコードを記述しましょう。
function quicktags_text_editor() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'h2', 'h2', '<h2>', '</h2>'); /* h2ボタン */
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'quicktags_text_editor' );このコードは、h2タグを呼び出すオリジナルボタンを設置するためのものです。
QTags.addButton( 'h2', 'h2', '<h2>', '</h2>'); /* h2ボタン */この部分でボタンの名前や呼び出すコードをして指定しています。
最初の【h2】は、そのボタンの定義名です。
定義名は自由に決められますが、他ボタンの定義名と被ってはいけません。
次の【h2】は、ボタンの表示内容です。
この場合は【h2】と書かれたボタンが生成されます。
この部分も自由に決めることができます。
3番目にある【<h2>】は、最初にボタンを押したときに挿入されるコードです。
あるいは、選択範囲を指定してボタンを押したとき選択範囲の前に挿入されるコードです。
ボタンで挿入したいコードを記述しましょう。
4番目にある【</h2>】は、2回目にボタンを押したときに挿入されるコードです。
あるいは、選択範囲を指定してボタンを押したとき選択範囲の後に挿入されるコードです。
ボタンで挿入したいコードを記述しましょう。
この4箇所だけを修正すれば、ご紹介したコードをコピペするだけで、テキストエディタにオリジナルボタンを設置することができます。
オリジナルボタンを複数設置する場合
オリジナルボタンを複数設置したい場合は、functions.phpに以下のコードを記述します。
function quicktags_text_editor() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'h2', 'h2', '<h2>', '</h2>');
QTags.addButton( 'h3', 'h3', '<h3>', '</h3>');
</script>
上記のコードは、【h2】と【h3】の2つのオリジナルボタンを設置するコードです。
QTags.addButton( 'h2', 'h2', '<h2>', '</h2>');
QTags.addButton( 'h3', 'h3', '<h3>', '</h3>');先ほど解説した部分の下に、同じ形式で別内容のコードが加えられています。
複数のオリジナルボタンを設置する場合は、上記の要領で好きなだけオリジナルボタンを設置することができます。
まとめ
WordPressのテキストエディタにプラグインを使わずオリジナルボタンを設置する方法をご紹介いたしました。
私の周りでは、ビジュアルエディタをメインに利用している人が多いのですが、テキストエディタをメインで使っている方もいると信じて、WordPressのテキストエディタにプラグインを使わずオリジナルボタンを設置する方法をご紹介いたしました。
ぜひ、ご活用ください。
WordPressに新しくテーマをインストールする2つの方法
不要なデフォルトのウィジェットを非表示にしてスッキリさせる方法
コメントを残す