投稿画面のテキストエディタにボタンを増やすには【WordPress】

2016-05-12

…まず、WordPressの投稿画面のテキストエディタのボタンってどれのこと？

そうです、これのことです。

例として、標準状態でついている「b-quote」のボタンは、
投稿本文の文字を選択してからボタンを押すと、blockquoteタグで選択した文字を囲ってくれます。

「記事をいろいろ装飾したいけど、いちいちタグ打ちするのめんどい」

…という人(私みたいな)は、テキストエディタにあらかじめオリジナルのボタンを作ってしまいましょう。

どんなボタンをつくる？

たとえば、↑のような見出し部分。
記事を書くときに使うことって多いですよね。

今回は、見出しが簡単に装飾されちゃう！というボタンを作成してみます。

1.「functions.php」にコードを追加

テーマ内の「function.php」に、ボタンを追加するための記述をしていきます。

・function.php【ボタンについての記述】

//ボタン追加関数 add_my_btn
function add_my_btn() { 
?>
<script type="text/javascript">
//QTags.addButton('ID', 'ボタンのラベル[エディタ部分に表示されます]', '開始タグ', '終了タグ');
QTags.addButton('heading','heading','<h3 class="heading">','</h3>');
</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_btn');

2.ボタンにしたタグの装飾をする

次に、今回ボタンにしたh3タグの装飾を、テーマ内のcssに追加します。

・style.css【見出し部分の装飾】

.heading {
     //このサイトで使われている見出しの装飾
     border-left:12px solid #c12748;
     padding:.8em .9em;
     font-size:1.2em;
     line-height:1.4em;
     background: #f2f2f2;
     margin: 55px 0 15px 0;
     border-radius: 5px;
}

これでボタンの完成です！