かわたま.net

Enjoy Creative! かわたまのwebメモ

【wordpress】時間短縮!投稿画面にクイックタグをプラグインなしで追加する方法

2014 August 25

Tag:

ブログを書くときに、いつも’hn’タグや、’class名’など毎回記述していましたが、時間のムダということに気が付き・・・調べてみました。
wordpress投稿画面にある「タグを追加するボタン」は「クイックタグ」と呼ぶようです。ボタンひとつで任意のタグを挿入できたら便利ですよね。さっそく実装してみたら簡単にできたのでメモします。

functions.phpに記述

functions.phpに下記を記述します。

<?php
// Add Quick tag
function add_my_quicktag() { ?>
<script type="text/javascript">
QTags.addButton('任意のID名', '投稿画面で表示される名前', '選択範囲の始まりに入るタグ', '選択範囲の終わりに入るタグ');
QTags.addButton('ed_h2', 'h2', '<h2>', '</h2>');
QTags.addButton('ed_note', 'note', '<div class="note">', '</div>');
</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
// Add Quick tag ここまで
?>

これだけ!これで任意のクイックタグが追加できます。
QTags.addButton〜を追加していくことで複数のクイックタグを追加できます。

応用:追加したクイックタグボタンにstyleを追加する

よく使うクイックタグボタンの色を変えたり、他のボタンと装飾を変えることもできます。
クライアントに使ってもらいたいときなどは、使いやすくなって親切かもしれませんね!

<?php
// Add Quick tag
function add_my_quicktag() { ?>
<script type="text/javascript">
QTags.addButton('ed_h2', 'h2', '<h2>', '</h2>');
</script>
// style追加
<style>
#qt_content_ed_h2 {
background: #afeeee;
}
</style>
// styleここまで
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
// Add Quick tag ここまで
?>

指定したID名は、「qt_content_hoge」の形では入ります。
そこにstyleを追加することで任意の装飾ができます。

【関連記事】
htmlやphpをワンクリックで文字実体参照に置換できるブックマークレットも作ってみました!
「wordpressの記事に書くHTMLコードをワンクリックで文字実体参照に置換するブックマークレット」

他にも効率良くブログを書く、良い方法があれば教えてください☆