WordPress 3.3のHTMLエディターにクイックタグを追加する

WordPress 3.3のHTMLエディターにクイックタグを追加するこの記事は、「WordPress 3.3 ベータ 3」に基づいて書かれており、不確定な要素を含んでいる。

WordPressは、記事の作成、編集のために「ビジュアルエディター」と「HTMLエディター」の2つのエディターを備えており、操作を簡略化するために、それぞれ独自のボタンを配している。

「ビジュアルエディター」で表示されるボタンは、ビジュアルエディターのベースとなってるライブラリ、「TinyMCE」が標準で搭載してるボタンか、「TinyMCE」のプラグインとして導入されているものである。

また、「HTMLエディター」に表示されるボタンは「クイックタグ(Quicktag)」と呼ばれ、「ビジュアルエディター」のボタンとは異なるものである。

HTMLエディターのクイックタグ

(現時点では、未だリリースされていないが)「WordPress 3.3」では、この「クイックタグ」の処理が変更されており、従来方法ではクイックタグを「HTMLエディター」に追加出来なくなってしまっている。

そのため、独自のクイックタグを追加するようなプラグインは、WordPress 3.3に合わせて修正しない限り、WordPress 3.3では、クイックタグが表示されないと言った問題が発生することが予想される。

この記事では、WordPress 3.3のHTMLエディターに独自のクイックタグを追加する方法を説明する。

下記は、<pre>タグ(および終了タグ</pre>)を入力するためのクイックタグを追加する場合の例である。

プラグインやfunctions.phpで記述すれば良い。

<?php

function add_my_quicktag() {
?>
	<script type="text/javascript">
	//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
	QTags.addButton('ed_pretag', 'pre', '<pre>', '</pre>');
	</script>
<?php
}

add_action('admin_print_footer_scripts',  'add_my_quicktag');

?>

「ID」は任意のもの、「ボタンのラベル」には、ボタン上に表示したい文字を設定する。

「開始タグ」には、ボタンをクリックした時に、選択範囲の前に挿入されるタグを入力する。

「終了タグ」は、不要であれば省略することも出来る。

その他に、タイトル(title属性)、アクセスキー、プライオリティと言ったパラメーターを指定することも出来る。

詳しくは、

/wp-includes/js/quicktags.dev.js

のコメントを参照のこと。

上記の例は、単にタグを挿入するだけの処理であるが、より高度な処理を行うために、指定したJavaスクリプトの関数を実行させることもでき、この場合も、シンプルに記述することが出来る。

<?php

function add_my_quicktag() {
?>
	<script type="text/javascript">
	//QTags.addButton('ID', 'ボタンのラベル', 関数名);
	QTags.addButton('ed_saywordpress', 'Say WordPress', say_wordpress);
	function say_wordpress() {
		alert('WordPress');
	}
	</script>
<?php
}

add_action('admin_print_footer_scripts',  'add_my_quicktag');

?>

「関数名」は、クォーテーションで囲んではいけない。

また、「WordPress 3.3」では、「quicktags_settings」と言うフィルターフックが新しく追加されており、このフックを使えば、デフォルトで表示させるクイックタグを制御することが出来る。

標準では、デフォルトで表示されるクイックタグは、strong(b)、em(i)、link、block(b-quote)、del、ins、img、ul、ol、li、code、more、spell(lookup)、close(close tags)、fullscreenであるが、下記のように記述することで、これを変更することが出来る。

function default_quicktags($qtInit) {
	$qtInit['buttons'] = 'strong,em,link';
	return $qtInit;
}

add_filter('quicktags_settings', 'default_quicktags', 10, 1);

上記の例では、strong(b)、em(i)、linkがデフォルトで表示されるクイックタグとなる。

なお、デフォルトのクリックタグの指定は、最初に説明した方法で追加したクイックタグには影響を与えないので、デフォルトのボタンとして指定しなくとも表示される。

詳しくは、

/wp-includes/class-wp-editor.php

のeditor_settings()関数を参照のこと。



PHP, WordPress, ネット・PC, Permalink
  • Pingback: 道道つれづれ線

  • Timothy

    Gmt replica is with cheap price and good quality. why not come to have a look.numeral varieties rolex replica for your selection. hublot replicagets the good reputation, just because of its traditional and classical, fashionable and noble features but not having much fancy design.it will show you more information about cheap patek philippe replica.piaget replica