WordPress テキストエディタにオリジナルのクイックタグを追加

コンテンツ

テキストエディタにオリジナルのクイックタグを追加

テキストエディタを利用して記事を書いている場合、
よく使用するタグやCSSを簡単に追加できるようにしておけば便利ですよね。

そんな場合、
テキストエディタにオリジナルのクイックタグを追加しておけば便利です。

クイックタグとは、これです↓
WordPress クイックタグ

で、クイックタグの追加には、
■functions.phpにQTags.addButton()を追加する
■プラグイン「AddQuicktag」を使って追加する
の2通りの方法があります。

functions.phpにQTags.addButton()を追加する

functions.phpでクイックタグを追加する場合には、
QTags.addButton()を使います。

基本的な使い方は、
QTags.addButton("ID", "ボタンに表示する文字", "開始タグ", "終了タグ");
です。
※IDは被らないようにして下さい。

他にもパラメータはありますが、使用するのは、基本的にこの4つのパラメータだけです。
※他のパラメータは、こちらにまとめてあります　=>　クイックタグ

例えば、アンダーラインを書くCSSを追加できるようにする場合には、
functions.phpに以下のように追記します。

function add_org_quick_tag() {

print <<QTags.addButton("line_blue", "下ライン（青）", "", "");//ポイント QTags.addButton("line_red", "下ライン（赤）", "", "");//ポイント QTags.addButton("line_yellow", "下ライン（黄）", "", "");//ポイント
EOF;

}

add_action("admin_print_footer_scripts", "add_org_quick_tag");

そうすると、
以下の様にクイックタグが追加されていると思います。
WP オリジナルのクイックタグ

↓

「下ライン（青）」をクリックしてみて下さい。
<span class="blueline"></span>
が挿入されればOKです。

あとは、以下の様なCSSを追加して下さい。

.blueline{background:linear-gradient(transparent 70%, #a7d6ff 70%);}
.redline{background:linear-gradient(transparent 70%, #FF6666 70%);}
.yellowline{background:linear-gradient(transparent 70%, #ff0 70%);}

そうすれば、
簡単にアンダーラインを追加できるようになります。