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

by ブログ工房　「 WordPress 」記事で、今日一番読まれているページ TOP 5
phpMyAdminを使ってMySQLのデータをバックアップ・復元する方法 WordPress にYouTube動画やGoogleマップなどのメディアを表示する自動目次生成プラグインTable of Contents Plusの設定と使い方 WordPress のバージョンアップと自動更新 WordPress Popular Posts ショートコードで人気ランキングを表示する

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

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');

「functions.php」にコードを追加する

Simplicityの場合、子テーマの「functions.php」にコードを追加できますので、親テーマのバージョンアップなどの影響を受けずに管理ができ、便利です。このコードを、子テーマの「functions.php」に追加します。

追加後のボタン一覧

HTMLエディターのボタンです。赤枠が追加ボタンになります。

タグを付けたい箇所をマウスでドラッグしてからボタンを押すと、ドラッグした部分の前後にタグが挿入されます。
ドラッグしないでボタンを押すと、マウスカーソルの位置に開始タグが挿入され、ボタンの名前が終了タグに変わります。

（参考）子テーマを利用したカスタマイズは以下も参考にしてください。

style.cssのサンプル

子テーマを利用してサイトデザインをカスタマイズする方法

子テーマによるテーマの編集方法 WoedPressのテーマは、配置するコンテンツを設定したり、テーマの機能を設定するためのphpフ...

wp.kikuchisan.net

2015-04-13 03:57

header-insert.phpのサンプル

子テーマを利用してXREAのバナー広告を簡単に設置する方法

XREA無料サーバーの自動挿入広告の問題 XREAの無料ウェブサービスの自動挿入広告は、HTML の＜BODY＞タグの直後に自動挿入さ...

wp.kikuchisan.net

2016-04-17 14:17

footer-insert.phpのサンプル

子テーマを利用してフッターに最新の新着・更新記事を表示する

過去記事を追加・変更しても・・ WordPressの投稿記事は「投稿日時」順に記事が表示されますが、過去に書いた記事の内容を補強したり、新...

wp.kikuchisan.net

2015-05-21 08:25

本日　昨日	Since 2015.2.15
© 2015- ブログ工房 All rights reserved.

クイックタグとは

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

「functions.php」にコードを追加する

追加後のボタン一覧

style.cssのサンプル

header-insert.phpのサンプル

footer-insert.phpのサンプル

メタ情報