WordPress 3.2以降のフルスクリーンモードにボタンを追加する

WordPress 3.2以降のフルスクリーンモードにボタンを追加する私は、WordPressの標準のビジュアルエディター「TinyMCE」に独自の機能を持ったボタンを追加するプラグインを作っている。

SyntaxHighlighter TinyMCE Button

しかし、WordPress 3.2以降では、フルスクリーンモードの仕様が変わり、今まで通りのやり方ではノーマルモードでしか追加したボタンが表示されなくなってしまった。

試行錯誤の結果、WordPress 3.2以降で、フルスクリーンモードにボタンを追加する方法が分かったのでまとめておく。

既に「TinyMCE」にボタンを追加する「TinyMCE」用のプラグインを作成し、有効化済みであることを前提とするので、「TinyMCE」へのボタンの追加自体の説明は省略する。

ボタンを追加する手順自体は、過去のバージョンと同じである。フルスクリーンモードへの追加には、これとは別に次のような処理が必要となる。

まずは、「wp_fullscreen_buttons」フックを使ってフルスクリーンモードにボタンを追加する。

以下は、「my_button」の場合の例である。

function my_fullscreen_button($buttons) {
	$buttons[] = 'separator'; // 必要ならボタンの前に区切りを追加
	$buttons['my_button'] = array(
	'title' => __('My button'), // マウスオーバーで表示されるテキストラベル
	'onclick' => "tinyMCE.execCommand('my_button_cmd');", // 実行するコマンド
	'both' => false); // trueならHTMLエディターでも表示
	return $buttons;
}

add_filter('wp_fullscreen_buttons', 'my_fullscreen_button');

「onclick」で実行しているコマンドは、

ed.addCommand('my_button_cmd', function() {

のような形で、既に「TinyMCE」用プラグイン内のJavaスクリプトとして記述しているはずなので、それを実行させる。

ここまでの作業で、既にフルスクリーンモードにボタンが追加され、ボタンも機能しているはずだ。

しかし、ボタンラベルのアイコンが表示されていない。

フルスクリーンモードでのボタン表示 アイコンなし

続いて、ボタン上にアイコンを表示させるための処理を追加する。

アイコンは、CSSを使ってボタンの背景として表示させる。

まず、次のように背景の画像を定義したCSSファイルを準備する。

.wp_themeSkin span.mce_my_button {
	background: url("my_icon.png") no-repeat 20px 20px;
	background-position:0 0
}

ボタンを表示させる箇所のclass属性は「mce_ボタンの登録名」となるので、この場合は「mce_my_button」となる。

今度は、このCSSを、エディター画面で読み込ませる処理を書く。

function my_editor_style() {
	wp_enqueue_style('my-editor-style', 'http://www.near-mint.com/blog/my_editor_style.css', false, '1.0');
}

add_action('admin_print_styles-post.php', 'my_editor_style');
add_action('admin_print_styles-post-new.php', 'my_editor_style');
add_action('admin_print_styles-page.php', 'my_editor_style');
add_action('admin_print_styles-page-new.php', 'my_editor_style');

以上で、ボタンのアイコンも表示され、無事、フルスクリーンモードへのボタンの追加が完了する。

フルスクリーンモードでのボタン表示



PHP, WordPress, ネット・PC, , Permalink