Daily Archives: 2011年8月7日

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’); 以上で、ボタンのアイコンも表示され、無事、フルスクリーンモードへのボタンの追加が完了する。

Posted in PHP, WordPress, ネット・PC | Tagged , , | Leave a comment