子テーマを利用してHTMLエディターにタグや定型文のボタンを追加する方法

by ブログ工房　「 WordPress 」記事で、今日一番読まれているページ TOP 5
ウィジェットの作り方：新着・更新記事のウィジェット化と子テーマ運用初心者でも簡単にできる WordPress のインストール方法 WordPress データベーステーブルの接頭辞を変更する方法 WordPress ウィジェットのタグクラウドのカスタマイズ方法 WordPress のリビジョン・自動保存機能を停止する方法

興味のある所からお読み下さい

1 クイックタグとは
2 コードの記述形式とパラメータの説明
3 「functions.php」にコードを追加する
4 追加後のボタン一覧

クイックタグとは

WordPressで原稿を作成する時に、HTMLエディターに記事内でよく使う見出しなどのタグをボタン（クイックタグ）として登録しておけば、作業の効率もあがります。

HTMLエディターのボタンの追加には、プラグイン「AddQuickTag」を利用するのが一般的ですが、プラグインなしでボタンを追加する方法もあります。この方法では、単純にタグをボタンとして登録するだけではなく、定型文もボタンとして登録することができます。

コードの記述形式とパラメータの説明

ボタンを追加するには「functions.php」にコードを追加していきます。記述ミスや文法ミスを犯すと最悪の場合、WordPressが動かなくなることもありますので、「functions.php」を修正する場合は、必ず事前にファイルのバックアップを取り（別名で保存）、不具合が発生したら元に戻せるようにしてください。

コードの記述形式は、追加したいボタン１つに対して次の１行を記述します。

QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');

1	QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');

ID:ボタンの識別記号です。ダブらないようにIDをつけます。
ボタンのラベル：ボタンに表示される名前です。
開始タグ：開始タグを記述します。定型文を作る時はここに記述します。
終了タグ：終了タグを記述します。終了タグのないタグは「’ ‘」にします。タグの後ろのバックスラッシュn は改行です。

以下のコードは、当サイトで使用しているものです。最後の２行は、リスト文とテーブル文を定型文にしたものです。

//WordPress投稿画面クイックタグの追加
function add_my_quicktag() { 
?>
  <script type="text/javascript">
//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
  QTags.addButton('p','p','<p>','</p>\n');
  QTags.addButton('h2','h2','<h2>','</h2>\n');
  QTags.addButton('h3','h3','<h3>','</h3>\n');
  QTags.addButton('h4','h4','<h4>','</h4>\n');
  QTags.addButton('red','赤','<span style="color:red;">','</span>');
  QTags.addButton('blue','青','<span style="color:blue;">','</span>');
  QTags.addButton('href=#','href=#','<a href="#anchor">','</a>');
  QTags.addButton('id=','id=','<p id="anchor"></p>','');
  QTags.addButton('ul_b','ul_b','<ul>\n<li></li>\n<li></li>\n<li></li>\n<li></li>\n<li></li>\n</ul>','');
  QTags.addButton('table','table','<table style="border-collapse:collapse;"><tr style="background-color:#eee;">\n<td></td><td></td><td></td>\n</tr><tr>\n<td></td><td></td><td></td>\n</tr></table>','');
  </script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');

//WordPress投稿画面クイックタグの追加

function add_my_quicktag() {

//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');

QTags.addButton('p','p','<p>','</p>\n');

QTags.addButton('h2','h2','<h2>','</h2>\n');

QTags.addButton('h3','h3','<h3>','</h3>\n');

QTags.addButton('h4','h4','<h4>','</h4>\n');

QTags.addButton('red','赤','<span style="color:red;">','</span>');

QTags.addButton('blue','青','<span style="color:blue;">','</span>');

QTags.addButton('href=#','href=#','<a href="#anchor">','</a>');

QTags.addButton('id=','id=','<p id="anchor"></p>','');

QTags.addButton('ul_b','ul_b','<ul>\n<li></li>\n<li></li>\n<li></li>\n<li></li>\n<li></li>\n</ul>','');

QTags.addButton('table','table','<table style="border-collapse:collapse;"><tr style="background-color:#eee;">\n<td></td><td></td><td></td>\n</tr><tr>\n<td></td><td></td><td></td>\n</tr></table>','');

</script>

<?php

}

add_action('admin_print_footer_scripts','add_my_quicktag');