Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

wordpress

WordPressのプラグインを使わないでクイックタグを追加させる方法

投稿日:

WordPressのプラグインを使わないでクイックタグを追加させる方法

ブログを書くときは「ビジュアルエディタ」「テキストエディタ」どちらで書きますか?
私はテキストエディタで書いて、そのときに必要タグも手打ちで書いています。

クイックタグ

見出しタグ、太文字、色変えたりするときでもタグ打ちです。仕事柄タグを打つことに抵抗は無いですがたまに入力ミスしたりすることもあります。

効率よくブログを書くために良く使うタグをテキストエディタに登録する方法をご紹介します。

photo credit: Kris Krug via photopin cc

function.phpに書き込む

function add_orignal_quicktags() { ?>
<script type="text/javascript">
QTags.addButton('ed_h2', 'h2', '<h2>', '</h2>');
QTags.addButton('ed_h3', 'h3', '<h3>', '</h3>');
QTags.addButton('ed_h4', 'h4', '<h4>', '</h4>');

QTags.addButton('ed_red', '赤文字', '<span class="red">', '</span>');
QTags.addButton('ed_huto_red', '太赤文字', '<span class="huto_red">', '</span>');

QTags.addButton('ed_blue', '青文字', '<span class="blue">', '</span>');
QTags.addButton('ed_huto_blue', '太青文字', '<span class="huto_blue">', '</span>');

QTags.addButton('ed_url', 'URL', '<span class="url">', '</span>');
QTags.addButton('ed_tabletag', 'table', "<table width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class=\"tableA\">\n<tr><th> </th><td> </td></tr>\n</table>", '');

</script>

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

いきなりコードを書いてしまいましたが

QTags.addButton('(1)ed_h2', '(2)h2', '(3)<h2>', '(4)</h2>');

  • (1)はID
  • (2)はテキストエディタに表示されるボタンラベル
  • (3)はタグの開始タグ
  • (4)はタグの終了タグ

私の場合は見出しタグ、文字の色、テーブル、URLの際に使うタグを入れました。
あとはお好みで自分が良く使うタグを登録して、CSSもあわせてつければタグを直接打つ必要もなくなります。

テキストエディタ

こんな感じになります。

ボタンを分かりやすくさせます

ボタンが追加されたのでそのまま使ってもいいですが、今度はボタンが増えてくるとどこに何があるのかちょっと見つけにくくなるかもしれません。

なのでこのボタンを分かりやすくします。

テキストエディタ

webディベロッパーツールなのでボタンを調査します。
するとボタンにIDが振られているのがわかります。

例:qt_content_ed_blue

このIDを使って色をつけますのでfunction.phpに追記します。

#qt_content_ed_blue {
	background: #09F;
}

CSSはこう感じで作って

function add_orignal_quicktags() { ?>
<script type="text/javascript">
QTags.addButton('ed_h2', 'h2', '<h2>', '</h2>');
QTags.addButton('ed_h3', 'h3', '<h3>', '</h3>');
QTags.addButton('ed_h4', 'h4', '<h4>', '</h4>');

QTags.addButton('ed_red', '赤文字', '<span class="red">', '</span>');
QTags.addButton('ed_huto_red', '太赤文字', '<span class="huto_red">', '</span>');

QTags.addButton('ed_blue', '青文字', '<span class="blue">', '</span>');
QTags.addButton('ed_huto_blue', '太青文字', '<span class="huto_blue">', '</span>');

QTags.addButton('ed_url', 'URL', '<span class="url">', '</span>');
QTags.addButton('ed_tabletag', 'table', "<table width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class=\"tableA\">\n<tr><th> </th><td> </td></tr>\n</table>", '');

</script>

<style>
#qt_content_ed_red {
	background: #FF8686;
}

#qt_content_ed_huto_red {
	background: #FF8686;
}

#qt_content_ed_blue {
	background: #C8E3FF;
}

#qt_content_ed_huto_blue {
	background: #C8E3FF;
}

</style>

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

テキストエディタ

ボタンに色がつきました。
これで他のボタンと差別化すれば迷わずに使えますね。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-wordpress

Copyright© Sedori Plan , 2019 All Rights Reserved.