クイックタグを使用してテキストエディタでタグを効率よく入力する方法（Simplicityでは拡張クラスを設定すると更に便利に）

こんにちは。ノッツです(^o^)/

前回、Simplicityに拡張クラスのタグについて説明しました。

Simplicityのデフォルト装飾タグの使い方とそのレイアウト見本のまとめ

こんにちは。ノッツです(^o^)/ ブログを書くとき文章に強弱を付けるために、文字の色や太さなどの装飾を意識することがあると思います。 当サイトで使っているテーマであるSimplici...

ichigoichielab.com

2015.07.08

この拡張クラスを利用するには、タグをコピペするか入力しなければなりません。

そうすればいい話かもしれませんが、毎回入力するのは効率が悪いです。

そこで、クイックタグボタンを使用してタグを効率よく入力する方法をご紹介します。

そして、Simplicityの拡張クラスをクイックタグボタンとして登録する方法も紹介します。

クイックタグとは

WordPressで記事を入力する際、テキストエディタを使う場合があると思います。

そのテキストエディタに記事内でよく使う見出しなどのタグをクイックタグボタンとして新たに登録することができます。

クイックタグボタンは以下の画像の赤で囲ってあるところです。

このクイックボタンを利用することで、記事を入力する作業効率があがります。

テキストエディタのクイックタグボタンの追加には、「AddQuickTag」などのプラグインを利用するのが一般的です。

また、Windowsでは「Windows Live Writer」、Macでは「MarsEdit」といった専用エディタのアプリケーションを使って、タグをアプリケーションに新たに登録して入力する方法もあります。

しかし、プラグインやアプリを使わなくても、このクイックタグを新たに登録して使う方法がありますので、以下で詳しく説明します。

クイックタグの使い方

クイックタグの使い方です。

パラメータ

QTags.addButtonという関数を用います。

パラメータは以下のようになっています。

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

詳しい仕様は「クイックタグAPI – WordPress Codex 日本語版」で確認をお願いします。

基本的には以下のように理解し、使えばいいと思います。

QTags.addButton('ダブらないID', 'ボタンのラベル名', '開始タグ', '終了タグ');

基本的な使い方

QTags.addButtonという関数を用いて、functions.phpにコードを記述していきます（子テーマのfunctions.phpを推奨）。

※以降のコードの入力を間違えると管理画面とサイトが真っ白になってしまうので必ずバックアップをとった上で自己責任にてご使用ください。

例えば、<h2>と<h3>タグのクイックタグボタンを作るには以下のように入力します。

// テキストエディタにクイックタグボタンの追加
function appthemes_add_quicktags() {
  if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
  QTags.addButton( 'h2', 'h2', '<h2>', '</h2>' );
  QTags.addButton( 'h3', 'h3', '<h3>', '</h3>' );
</script>
<?php
 }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

以下のようにボタンが追加されます。

使い方は、タグで囲みたいところを選択し、挿入したいタグをクリックします。

クリックするとタグで囲まれます。

このようにワンクリックでタグを挿入することができます。

タグで囲みたいところを選択せずに、クイックタグボタンをクリックすると開始タグが、もう一度クリックすると終了タグが挿入され、別々に挿入することも可能です。

また、クイックタグボタンを更に追加した場合は、QTags.addButton( )を増やします。

スタイルシートで調整

スタイルシートで調整して、ボタンの色を変えることも可能です。

<style></style>タグを追加し、その中にスタイルを書きます。

“qt_content_”というIDが、引数displayで設定した頭に追加されるので、これらを使います。

// テキストエディタにクイックタグの追加
function appthemes_add_quicktags() {
  if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
  QTags.addButton( 'h2', 'h2', '<h2>', '</h2>' );
  QTags.addButton( 'h3', 'h3', '<h3>', '</h3>' );
</script>

<style>
#qt_content_h2 {
  background: #E24242;
}
#qt_content_h3 {
  background: #45B1F9;
}
</style>

<?php
 }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

以下のようにボタンの色が変わります。

赤色にするタグは赤色に、青色にするタグは青色になどと設定しておくことで、直感的に分かるようになると思います。

定義文やショートコードの登録

クイックタグに登録できるのはタグのみではなく、定義文やショートコードを登録して使うこともできます。

よく使うような定義文は以下のように登録できます。

// テキストエディタにクイックタグの追加
function appthemes_add_quicktags() {
  if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
  QTags.addButton( 'start', 'はじまり', 'どうもノッツです。こんにちは。本日は◯◯について書いていこうと思います。' );
  QTags.addButton( 'end', 'おわり', '当記事を最後まで読んでいただきありがとうございました。大変嬉しいです^^' );
</script>
<?php
 }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

以下のようになります。

注意すること

デフォルトで備わっているQuicktagsの一覧です。

新しく独自に作るときには「クイックタグAPI – WordPress Codex 日本語版」を参照して、同じにならないように注意する必要があります。

Simplicityの拡張クラスの登録

前回紹介した「Simplicityのデフォルト装飾タグの使い方とそのレイアウト見本のまとめ」のSimplicityの拡張クラスを登録して、効率よく入力できるようにしてみます。

以下のように入力します。

id名、ラベル名などは自由に変更していただけたらと思います。

// テキストエディタにクイックタグの追加
function appthemes_add_quicktags() {
  if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
  /*参考*/
  QTags.addButton( 'sankou', '参考', '<span class="sankou">', '</span>' );
  /*文字の装飾*/
  QTags.addButton( 'bold', '太字', '<span class="bold">', '</span>' );
  QTags.addButton( 'red', '赤字', '<span class="red">', '</span>' );
  QTags.addButton( 'bold-red', '太字赤色', '<span class="bold-red">', '</span>' );
  QTags.addButton( 'marker', 'マーカー', '<span class="marker">', '</span>' );
  QTags.addButton( 'strike', '打ち消し線', '<span class="strike">', '</span>' );
  /*キーボード*/
  QTags.addButton( 'keyboard-key', 'キーボード', '<span class="keyboard-key">', '</span>' );
  /*Bootstrap風*/
  QTags.addButton( 'sp-primary', 'Bootstrap青', '<p class="sp-primary">', '</p>' );
  QTags.addButton( 'sp-success', 'Bootstrap緑', '<p class="sp-success">', '</p>' );
  QTags.addButton( 'sp-info', 'Bootstrap水', '<p class="sp-info">', '</p>' );
  QTags.addButton( 'sp-warning', 'Bootstrap黄', '<p class="sp-warning">', '</p>' );
  QTags.addButton( 'sp-danger', 'Bootstrap赤', '<p class="sp-danger">', '</p>' );
  /*LINE風*/
  QTags.addButton( 'left-balloon', 'LINE左', '<p class="left-balloon">', '</p>' );
  QTags.addButton( 'right-balloon', 'LINE右', '<p class="right-balloon">', '</p>' );
  QTags.addButton( 'clear-balloon', 'LINEクリア', '<div class="clear-balloon">', '</div>' );
  QTags.addButton( 'line-back', 'LINE背景', '<div class="line-back">', '</div>' );
</script>
<?php
 }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

以下のようにSimplicityの拡張クラス専用のボタンが追加されました。

これを追加しておくだけで、Simplicityを更に便利に使うことができると思います。

さいごに

クイックタグのボタンをfunctions.phpから追加する方法を説明しました。

WordPressのテキストエディタを使う場合は、使用したいタグを入力する際に毎回タグを入力していましたが、この設定をしておくことでワンクリックでタグを入力することができます。

これによって、WordPressのテキストエディタを利用する際の入力作業効率があがると思います。

是非、試してみてくださいね。