この記事は最後に更新してから1年以上経過しています。

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

最終更新 : 2011年06月01日 14:19


お勧め

get_next_comments_link(2024年12月18日 更新)

string get_next_comments_link( [ string $label = '' [ , int $max_page = 0 [ , int $page = null ] ] ] )
次のコメントリンクを取得する。

add_dashboard_page(2022年6月27日 更新)

mixed add_dashboard_page( string $page_title, string $menu_title, mixed string $capability, string $menu_slug [ , mixed $function = '' ] )
ダッシュボードメニューにサブメニューを登録する。

use_block_editor_for_post(2023年4月24日 更新)

bool use_block_editor_for_post( int | WP_Post $post )
投稿がブロックエディターに対応しているか調べる。

wp_image_editor_supports(2012年12月20日 更新)

bool wp_image_editor_supports( [ mixed $args = array() ] )
イメージエディタがサポートしているか調べる。

wp_check_filetype_and_ext(2019年2月23日 更新)

array wp_check_filetype_and_ext( string $file, string $filename [ , array $mimes = null ] )
ファイルタイプと拡張子を調べる。