ワードプレスのテキストエディタにプラグイン無しでボタンを追加

ワードプレスのテキストエディタに任意のボタンを追加することができます。よく使うタグをあらかじめ設定しておけば、記事作成の手間を軽減することができます。プラグインでも可能ですが、 functions.phpに記述するだけで、独自のタグを出力するボタンを追加することが可能になります。

ワードプレスには、ボタン追加するためのクイックタグ「Quicktags API」が用意されているので、初心者の方でも簡単に作成することができますよ。

Quicktags APIの使い方

QTags.addButtonのパラメータを設定していきましょう。

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

id必須ボタンのhtmlのidに入れる値。display必須ボタンのhtmlのvalueに入れる値。arg1必須開始タグ、もしくはボタンをクリックしたときに実行されるコールバック。arg2オプション終了タグ。終了タグが不要な場合は空にします。access_keyオプションボタンのショートカットアクセスキー。titleオプションボタンのhtmlのtitleに入れる値。priorityオプションツールバー内にボタンを置きたい位置を表す数値。1-9=1行目,11-19=2行目,21-29=3行目,など。instanceオプション指定するとQuicktagsの特定のインスタンスだけにボタンを追加する。省略するとすべてのインスタンスに追加する。

例1 QTags.addButton( 'eg_paragraph', 'p', '

', '

', 'p', '段落タグ', 1 );

タグをボタンで追加する事ができます。

例2 QTags.addButton( 'custom-button', '赤マーカー', '', '', '', '赤マーカー', 1 ); classを付け任意のCSSで装飾がする事ができます。

function.phpへの記述例

例では特殊文字を使用するボタンを追加しています。記事作成はテキストエディタのみでやっているので、「<」やスペースを利用したい時に使っています。

// add more buttons to the html editor

add_action('admin_print_footer_scripts', function () {

	//QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

	if (wp_script_is('quicktags')){

		echo <<<EOF
<script type="text/javascript">
	QTags.addButton('custom-button-1', '<>', '&lt;', '&gt;', '', '<>特殊文字', 1);
	QTags.addButton('custom-button-2', 'SPACE', '&nbsp;', '', '', 'スペース特殊文字', 2);
</script>

EOF;

	}

},100);

プラグインを導入したけど自分が使いたいボタンが無い、毎回タグをコピペするのは面倒。HTMLタグだけではなくアフィリエイトのタグなど登録しておくのも良いかもですね。ご自身に必要な便利な機能だけを追加して記事作成に励んでください。

参考ページ：WordPress Codex 日本語版 https://wpdocs.osdn.jp/クイックタグAPI