[wordpress]テキストエディタをカスタマイズして記事投稿を楽にする方法

WEB制作, wordpress, ブログ運営

wordpressのテキストエディタにボタンを追加して、簡単に任意のタグやショートコードを挿入できるようにする方法です。
使う頻度の高いタグ、例えば見出しタグや装飾の為のタグなどがある場合、劇的に記事の投稿が楽になりますので是非お試しあれ。

また、挿入する可能な文字数の制限はありません。
かなりの長文でも挿入する事ができます。

自分で使う分にもいいですが、クライアント向けとしてカスタマイズしてあげるのもいいと思います。

スポンサーリンク

どのように楽になるのか?

テキストエディタにボタンを追加した時の画像

テキストエディタにボタンを追加した時の画像

記事投稿画面に、任意のボタンが表示されます。
この例では、ショートコードを挿入しています。

追加されたボタンをクリックすると、任意のコードが挿入されます。
もう一度押すと閉じタグが挿入されます。

テキストエディタの動作

テキストエディタの動作

また文字列を選択してボタンを押すと、任意のタグで囲んでくれます。

テキストエディタの動作

テキストエディタの動作

追加方法

functions.phpにコードを記述していきます。

function add_my_quicktag() { ?>
<script type="text/javascript">
QTags.addButton('ed_yukuri', 'ゆっくり1', '[chat]', '[/chat]');
</script>
<?php
}

add_action('admin_print_footer_scripts',  'add_my_quicktag');

上記の例ではいらないパラメーターを指定しないで、記述しています。

引数 概要
id 【必須項目】管理画面のボタンのHTMLのID名
display 【必須項目】ボタンに表示される名前
arg1 【必須項目】挿入するタグの内容
arg1 挿入するタグの終了タグ、必須ではない。
access_key ショートカットキーの割り当て、使い方がよくわからん
title ボタンのtitleタグの中身、表示名をアイコンなんかにしてtitleをtootltipで表示させるとすっきりして使いやすい。
priority ボタンの表示順番の指定
instance 用途不明、直訳→Quicktagsの特定のインスタンスにあるボタンを制限存在しない場合は、すべてのインスタンスに追加します。

各種パラメータの詳しい解説は、Quicktags API « WordPress Codexに載っています。
サンプルコードもあるので、わかりやすいかも?

ボタンを更に追加した場合は、以下の様に増やしていけばいい。

function add_my_quicktag() { ?>
<script type="text/javascript">
QTags.addButton('ed_yukuri', 'ゆっくり1', '[chat]', '[/chat]','p','タイトルの中身', 1);
QTags.addButton('ed_yukuri2', 'ゆっくり2', '[chat face="2"]', '[/chat]', '', '', 2);
QTags.addButton('ed_yukarin', 'ゆかりん1', '[chat type="yukarin"]', '[/chat]','', '', 3);
QTags.addButton('ed_yukarin2', 'ゆかりん2', '[chat type="yukarin" face="2"]', '[/chat]','', '', 4);
QTags.addButton('ed_table', 'table', '<table>', '</table>','', '', 5);
QTags.addButton('ed_tr', 'tr', '<tr>', '</tr>','', '', 6);
QTags.addButton('ed_td', 'td', '<td>', '</td>','', '', 7);
</script>
<?php
}

add_action('admin_print_footer_scripts',  'add_my_quicktag');

上記コードの実行例が以下になります。

テキストエディタのカスタマイズ

テキストエディタのカスタマイズ

備忘録

ちなみにこの例で登場したショートコードですが、最近お気に入りでよく使っています。
今は顔のパターンを追加してゆっくり霊夢と結月ゆかり5パターンずつあります。

どんな感じで表示させてるかと言うと、【CSS】レスポンシブ対応のチャット風吹き出しのサンプルコード にソースを載せています。

編集画面はこんな感じです。
このように短い記述で、あのチャット風表示をさせています。ショートコードめちゃ便利!

編集画面

編集画面

質問者の写真

ゆっくりだよ


質問者の写真

ゆっくりしていってね!!!


質問者の写真

ここまで読んでくれてありがとうございます


質問者の写真

私の顔に免じて許してやるっ!


解答者の写真

なにをだよっ!?


質問者の写真

とりあえず寒いわー、すごくさむいわー

こんな感じでブログを書くのが楽になりました。
functions.phpを直接触るのがコワイ方は、wordpressのpluginで便利なものがあるので、そちらをオススメします。

WordPress › AddQuicktag « WordPress Plugins

この記事が気に入ったら
『いいね』しよう!