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

tags

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

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

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

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

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

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

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

スポンサーリンク

クイックタグとは

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

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

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

quick_tags_default

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

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

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

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

スポンサーリンク

クイックタグの使い方

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

パラメータ

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

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

引数 概要
id 【必須】ボタンのid名(他とかぶらないようにします)
display 【必須】テキストエディタに実際に表示されるボタンの名前
arg1 【必須】挿入するタグの開始タグや内容
arg2 終了タグ
access_key ボタンのショートカットアクセスキーの割り当て
title ボタンのタイトルの値
priority ボタンの表示順番の指定
instance Quicktagsの特定のインスタンスにあるボタンを制限し、 存在しない場合はすべてのインスタンスに追加

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

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

基本的な使い方

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

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

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

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

quick_tags_h2_h3_1

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

quick_tags_h2_h3_2

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

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

quick_tags_h2_h3_3

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

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

スタイルシートで調整

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

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

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

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

quick_tags_css

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

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

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

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

以下のようになります。

quick_tags_start_end

注意すること

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

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

quick_tags_default_tags

Simplicityの拡張クラスの登録

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

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

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

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

quick_tags_simplicity

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

さいごに

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

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

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

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