HTML編集モードに定型文ボタンを追加する

HTML編集モードに定型文ボタンを追加する - HTML編集モードを拡張する

説明

投稿編集ページにはビジュアル編集モードとHTML編集モードがあり、それらを拡張するプラグインも多数存在している。そういったプラグインを利用するのもいいのだが、仕組みを理解するのも悪くないはず。というわけで、ここではHTML編集モードのボタンの仕組みと定型文を挿入するボタンを追加する方法を紹介する。 投稿編集ページのHTML編集モードには、「b」から「タグを閉じる」までのボタンがある。この部分をHTMLソースで確認してみると次のようになっている。
<div id="quicktags"><script type='text/javascript'>
/* <![CDATA[ */
var quicktagsL10n = {
	quickLinks: "(クイックリンク)",
	wordLookup: "調べる単語を入力:",
	dictionaryLookup: "辞書を参照",
	lookup: "検索",
	closeAllOpenTags: "開いているすべてのタグを閉じる",
	closeTags: "タグを閉じる",
	enterURL: "URL を入力してください",
	enterImageURL: "画像の URL を入力してください",
	enterImageDescription: "画像の説明を入力してください"
};
try{convertEntities(quicktagsL10n);}catch(e){};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/wp-includes/js/quicktags.js?ver=20090307'></script>
<script type="text/javascript">edToolbar()</script>
<div id="ed_toolbar">
<input type="button" id="ed_strong" accesskey="b" class="ed_button" onclick="edInsertTag(edCanvas, 0);" value="b">
<input type="button" id="ed_em" accesskey="i" class="ed_button" onclick="edInsertTag(edCanvas, 1);" value="i">
<input type="button" id="ed_link" accesskey="a" class="ed_button" onclick="edInsertLink(edCanvas, 2);" value="link">
<input type="button" id="ed_block" accesskey="q" class="ed_button" onclick="edInsertTag(edCanvas, 3);" value="b-quote">
<input type="button" id="ed_del" accesskey="d" class="ed_button" onclick="edInsertTag(edCanvas, 4);" value="del">
<input type="button" id="ed_ins" accesskey="s" class="ed_button" onclick="edInsertTag(edCanvas, 5);" value="ins">
<input type="button" id="ed_img" accesskey="m" class="ed_button" onclick="edInsertImage(edCanvas);" value="img">
<input type="button" id="ed_ul" accesskey="u" class="ed_button" onclick="edInsertTag(edCanvas, 7);" value="ul">
<input type="button" id="ed_ol" accesskey="o" class="ed_button" onclick="edInsertTag(edCanvas, 8);" value="ol">
<input type="button" id="ed_li" accesskey="l" class="ed_button" onclick="edInsertTag(edCanvas, 9);" value="li">
<input type="button" id="ed_code" accesskey="c" class="ed_button" onclick="edInsertTag(edCanvas, 10);" value="code">
<input type="button" id="ed_more" accesskey="t" class="ed_button" onclick="edInsertTag(edCanvas, 11);" value="more">
<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="辞書を参照" value="検索">
<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="開いているすべてのタグを閉じる" value="タグを閉じる">
</div>
</div>
赤字は表示されているボタンの部分で、ボタンの仕組みを理解するには/wp-includes/js/quicktags.jsファイルを読めばいいようだ。実際にテキストエディタでquicktags.jsファイルを開いてみると、余分な改行や空白文字が取り除かれているため、そのままでは内容を確認するのは難しい(テキストエディタによっては開けない)。WordPressのJavaScriptファイルやCSSファイルの内容を確認する場合は、目的のファイルと対になっている○○.dev.js(CSSの場合は、○○.dev.css)というファイル(ここではquicktags.dev.js)を開けばいい。
quicktags.dev.jsファイルをテキストエディタで開き、まずはedToolbar関数を見てみる。edToolbar関数では上記の赤字のボタン部分をHTMLコードを追加しており、ほとんどのボタンは、edButtons配列の情報をもとにedShowButton関数で行っているようだ。また各ボタンは、次のようなHTMLコードで、エディタ内にテキストを挿入するのは、edInsertTag関数で実現していることがわかる。
<input type="button" id="ed_strong" accesskey="b" class="ed_button" onclick="edInsertTag(edCanvas, 0);" value="b">
この投稿の目的である定型文を挿入するところは、edInsertTag関数を利用するのがよさそうだ。
さて定型文を挿入するボタンの拡張方法ですが、quicktags.jsを編集するのでは少し芸がないので、自身のテーマで追加することにする(プラグインでもいいのだが)。具体的には、テーマ内のfunctions.phpに次のようなコードを記載してみた。
<?php
if ( strpos( $_SERVER['REQUEST_URI'], 'post.php' ) ||
	strpos( $_SERVER['REQUEST_URI'], 'post-new.php' ) ||
	strpos( $_SERVER['REQUEST_URI'], 'page.php' ) ||
	strpos( $_SERVER['REQUEST_URI'], 'page-new.php' ) ) {
	add_action( 'admin_footer', 'my_html_addbuttons' );

	function my_html_addbuttons() {
?>
<script type="text/javascript">
//<![CDATA[
if ( htmlEditorToolbar = document.getElementById( 'ed_toolbar' ) ) {
	var snippet = {
		1: { title:'定型1', prefix:"これは定型文サンプル\n改行も可能です。", suffix:'', akey:'' },
		2: { title:'定型2', prefix:"<div id=\"test\">\nここにテキスト\n</div>\n", suffix:'', akey:'m' },
		3: { title:'cap', prefix:"<p class=\"footnote\">※", suffix:"</p>\n", akey:'c' } };

	for ( key in snippet ) {
		var label = 'ed_snippet'+key;
		var buttonID = edButtons.length;
		edButtons[buttonID] = new edButton( label, snippet[key]['title'], snippet[key]['prefix'], snippet[key]['suffix'], snippet[key]['akey'] );
		var buttonElm = document.createElement( 'input' );
		buttonElm.type = 'button';
		buttonElm.className = 'ed_button';
		buttonElm.id = label;
		buttonElm._idx = buttonID;
		buttonElm.value = snippet[key]['title'];
		buttonElm.title = snippet[key]['title']+'を挿入';
		if ( snippet[key]['akey'] != '' ) buttonElm.accessKey = snippet[key]['akey'];
		buttonElm.onclick = function() { edInsertTag( edCanvas, this._idx ); return false; };
		htmlEditorToolbar.appendChild( buttonElm );
	}
}
//]]>
</script>
<?php
	}
}
?>

このソースを簡単に説明すると、まず定型文挿入ボタンを追加しなければならないのは、投稿記事の編集ページ、「投稿」-「新規追加」、固定ページ記事の編集ページ、「固定ページ」-「新規追加」なので、$_SERVER['REQUEST_URI']に'post.php'、'post-new.php'、'page.php'、'page-new.php'の何れかが含まれている場合のみ処理するようにしている。 次に実際にJava Scriptでボタンを追加する処理は、add_action関数を使い、'admin_footer'のアクションとして登録している。これは、標準のボタンを追加するedToolbar関数がページ途中に記述されているためで、それより後にボタンを追加する処理を行わなければならないためだ。 実際にボタンを追加するアクション処理内では、idが'ed_toolbar'のdivタグを取得。続いて、snippet配列に定型文の情報をセットし、ループ処理にてsnippet配列からボタン要素作成し、divタグ内に追加していく。
次の図は、実際に「投稿」-「新規追加」を表示し、「定型文1」ボタンをクリックしたときの状態である。
「定型文1」を挿入したところ

さて、今回はテーマ内のfunctions.phpを拡張して定型文の挿入ボタンを実現したわけだが、この方法でボタンを追加できるのはHTMLモードのみで、ビジュアルモードには適用されない。こちらは別の拡張が必要になるので、機会があれば紹介したい。また、今回の定型文を挿入するボタンの実現方法としては、プラグインもいくつか存在しているようなので、手間をかけたくない方はプラグインを活用するのもいいだろう。

関連

  • add_action - アクション関数を追加する

お勧めコンテンツ

the_post_thumbnail(2010年7月13日 登録)

void the_post_thumbnail( [ mixed $size = 'post-thumbnail' [ , mixed $attr = '' ] ] )
アイキャッチ画像(サムネイル)を表示する。

is_tax(2011年8月31日 登録)

bool is_tax( [ mixed $taxonomy = '' [ , mixed $term = '' ] ] )
カテゴリーおよび投稿タグ以外のタクソノミーアーカイブページか調べる。

wp_list_sort(2016年12月13日 登録)

array wp_list_sort( array $list [ , mixed $orderby = array() [ , string $order = 'ASC' [ , bool $preserve_keys = false ] ] ] )
スラッグの配列をサニタイズする。

wp_get_password_hint(2014年12月26日 登録)

string wp_get_password_hint()
パスワード生成時のヒントテキストを取得する。

the_title_attribute(2009年11月12日 登録)

string the_title_attribute ( [ mixed $args = '' ] )
投稿情報のタイトルをパラメータ$argsのecho要素がtrue(デフォルト)ならば表示する。echo要素がfalseの場合は表示せず、取得する。なお、タイトルおよびパラメータ$argsのbefore、after要素にHTMLタグが含まれる場合はそれらを除去される。

最終更新日時 : 2011-06-01 14:19