Monthly Archives: August 2011

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

SyntaxHighlighterとWordPress用プラグイン

私も「SyntaxHighlighter」ライブラリを使って、ソースコードの強調表示を行うのプラグインを作成しているが、今回は「SyntaxHighlighter」ライブラリについての技術情報の簡単なまとめとライバル?との機能比較を兼ねた「SyntaxHighlighter」ベースのWordPress用プラグインの比較をしてみる。 参考:ソースコードを綺麗に表示するプラグイン 「SyntaxHighlighter」という言葉は、単にソースコードの強調表示を行う機能やアプリを指す場合も多いが、この記事で言うところの「SyntaxHighlighter」とは、Alex Gorbatchev氏がJavaスクリプトで記述して公開している強調表示用のライブラリを指す。 Alex Gorbatchev氏のSyntaxHighlighter 「SyntaxHighlighter」ライブラリの利点は、Javaスクリプトで記述されている点にある。 そのため多少のカスタマイズが可能なサイトであれば、比較的、簡単に導入できる。 しかし、Javaスクリプトであるが故にブラウザの種類、バージョン、設定によっては、上手く強調表示されない可能性がある。 また、サーバーから送信されるソース自体が強調表示されているわけではなく、ソースを受け取ったブラウザがJavaスクリプトで処理し、強調表示に変える仕組みであるため、ブラウザ上で強調表示になるまでにタイムラグが生まれる場合もある。 WordPress用のプラグインでは、「GeSHi」ライブラリをベースとしたプラグインも人気が高いが、こちらはPHPで記述されているため、(CSSの解釈は別として)ブラウザによる違いやタイムラグは起こり得ない。 「GeSHi」の場合は、PHPで記述されたサイトでなければ導入できないが、そのような制限がない「SyntaxHighlighter」の利点は大きい。 しかしながら、PHPで記述されたWordPressの場合、むしろ「GeSHi」の利点の恩恵の方が大きいと言えるかもしれない。 ちなみに私は、ソースコードの強調表示用プラグインを色々と試した結果、既存のプラグインで気に入ったものが見つからなかったため自作する道を選んだが、「GeSHi」ではなく「SyntaxHighlighter」をベースにした理由は、CSSにある。 「SyntaxHighlighter」に同梱されているCSSは、十分に使い物になると思われたが、「GeSHi」の場合は、CSSを自分で作り込む必要があり、その手間を敬遠したためである。 1.SyntaxHighlighterの導入 「SyntaxHighlighter」の導入は比較的簡単である。 「3.0.x」の場合は、ダウンロードファイル内の「scripts」と「styles」フォルダをサーバーにアップロードし、<head>・・・</head>の間に、以下のような記述を追加すれば良い。 <link href="styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" /> <link href="styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script> <script type="text/javascript" src="scripts/shAutoloader.js"></script> <script type="text/javascript">//<![CDATA[ SyntaxHighlighter.autoloader( "applescript scripts/shBrushAppleScript.js" ,"as3 actionscript3 scripts/shBrushAS3.js" ,"bash shell scripts/shBrushBash.js" ,"cf coldfusion scripts/shBrushColdFusion.js" ,"cpp c scripts/shBrushCpp.js" ,"c# c-sharp csharp scripts/shBrushCSharp.js" ,"css scripts/shBrushCss.js" ,"delphi pas pascal scripts/shBrushDelphi.js" ,"diff patch scripts/shBrushDiff.js" ,"erl erlang scripts/shBrushErlang.js" ,"groovy scripts/shBrushGroovy.js" ,"java scripts/shBrushJava.js" ,"jfx javafx scripts/shBrushJavaFX.js" ,"js jscript javascript scripts/shBrushJScript.js" ,"perl pl scripts/shBrushPerl.js" ,"php scripts/shBrushPhp.js" ,"plain text scripts/shBrushPlain.js" ,"ps powershell scripts/shBrushPowerShell.js" ,"py python scripts/shBrushPython.js" ,"rails ror ruby rb scripts/shBrushRuby.js" ,"sass scss scripts/shBrushSass.js" ,"scala scripts/shBrushScala.js" … 続きを読む →

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