プラグインを使わずに好きなタグをボタン1つで本文に貼りつける方法

カスタム

wpphp_codebutton

WordPressにはビジュアルエディターとテキストエディターが標準で装備されています。
それぞれ本文の上部にボタンがいくつかあり、ワンクリックでコードを貼付けることができますが
自分の求めているコードはなかったりします。。
よく使うコードは手打ちではなく、できるならボタン一つで貼りつけたいです。

今回は、WordPressのバージョン3.3から使える
テキストエディター上部のボタンを好きに追加できる方法を紹介します。

テーマファイル内の functions.php を作成、編集する

現在使っているテーマファイルの中に functions.php がなければ作成します。

テキストエディター上部にボタンを追加する

<?php
 
function add_my_quicktag()
{ ?>
	<script type="text/javascript">
	// QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ', access_key, title, priority, instance);
	QTags.addButton('ed_docimgtag', 'imgdiv', '<div class="img">', '</div>');
	QTags.addButton('ed_imgbordertag', 'imgborder', ' border', '');
	QTags.addButton('ed_h2tag', 'h2', '<h2>', '</h2>');
	QTags.addButton('ed_h3tag', 'h3', '<h3>', '</h3>');
	QTags.addButton('ed_h4tag', 'h4', '<h4>', '</h4>');
	QTags.addButton('ed_redtag', 'red', '<span class="red">', '</span>');
	QTags.addButton('ed_blocktag', 'block', '<div class="block">', '</div>');
	QTags.addButton('ed_tabletag', 'table', "<table>\n<tr><th> </th><td> </td></tr>\n</table>", '');
	</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
?>

上のソースを functions.php に貼りつけます。
これでOK。
改行をさせたい場所では \n を使いましょう。

wpphp_codebutton_sample01

求めていたコードボタンが追加されています!

タグやCSSを使った装飾を多用する方は、よく使うコードのボタンを追加することで
さくさく記事が書けるようになりますね。
ぜひご活用ください。

カスタム

関連記事