Edit Button Template
以前から投稿画面のクイックタグに自分のよく使うタグを追加したいと思っていました。ただ上書きしてしまう危険性もあったりで、オリジナルのquicklinks.jsに手を入れたくなかったんですね。そんなときに、IImage Browser用のボタンとしてEdit Button Template(Red Alt)が使われているのを知り、これをベースにいじっていくことにしました。
使ってみると、ボタンが増えていくにつれてコードに冗長な部分がでてきたり、HTMLのソースを見たときにスマートじゃなかったり(これはただのこだわりですが)。この辺を何とかしようと改造してみました。
参考にしたのは、LiveCommentPreview。外部jsファイルとして呼び出す方法をそのまま取り入れました。ソースはこちら。
使い方はいつものようにpluginsフォルダにアップロード。そして管理画面からアクティブにするだけです。
ボタンの追加
具体的にボタンを追加してみます。使い方としてはいくつかパターンがあると思うので、パターン別に解説していきます。
開始タグと終了タグのあるタイプ
第３レベルの見出しである<h3>を追加してみることにします。ソ－スのものはサンプルなので、適宜変更するなりしてください。
まず20行目付近を
<?php//ここを編集//insert_button("表示されるボタン名","関数名","ボタンのタイトル");insert_button("H3", "h3", "H3");//ここまで?>
とします。ボタン名を日本語にすることはもちろん可能です。この時WPで使用している文字コードとプラグインのファイルの文字コードを揃えてください。
次にボタンをクリックしたときに呼び出される関数を記述します。この例ではソースの部分のsampleとなっているところを次のように変えればOKです。
/* 見出し(H3) */var state_my_h3 = true;function h3(){if(state_my_h3){edInsertContent(edCanvas, '<'+'h3'+'>');}else{edInsertContent(edCanvas, '<'+'/h3'+'>');}state_my_h3 = !state_my_h3;}
終了タグがないタイプ
<br />のような終了タグが必要ないものの場合です。例えばfloat: によるテキストの回り込み解除用のタグはこのような感じになります。
まずinsert_button("ClearLeft", "clearleft", "ClearLeft");を追加して、関数部分は以下のようにします。
/* ViewCode */function viewcode(){var myValue = prompt('ソースコードのURLを入力してください', '');myValue = '<viewcode src="'+ myValue+ '" link="' + prompt('ソースコードへのリンクを表示しますか？(yesもしくはno)', '')+ '" />';edInsertContent(edCanvas, myValue);}
入力ダイアログを出すタイプ
例として、プラグインのCode Viewer用のボタンを作成します。
まずは20行目付近にinsert_button("VIewCode", "viewcode", "ViewCode");と追加します。
次に関数を以下のように記述します。
/* clearleft */function clearleft(){edInsertContent(edCanvas, '<'+'br style="clear:left;" '+'/>');}
これでボタンをクリックすると、コードのURLとリンクするか否かを入力するプロンプトが出てきます。
ウィンドウを開くタイプ
IImage Browserのような新たにウィンドウを開くタイプです。例としてIImage Browserをそのまま使用します。
function iimagebrowser(){window.open("../wp-admin/iimage-browser.php", "IImageBrowser", "width=700,height=600,scrollbars=yes");}
こんな感じに簡単にクイックタグを追加できます。プラグイン形式なのでアップグレード時の上書きの心配もないですし、どうぞお試しを。
#週末のWP弄りが習慣になってきましたね…
はじめまして、こんばんは。
現在、WordPress ME 1.5.1.3でこの日本語化されたプラグインを導入しようと試みているのですが、うまくいきません。サーバはさくらサーバです。
PHPのコードをコピペして使いたいタグに書き換えて文字コードをUTF-8で保存してアップすると以下のようなエラーが出ます。
Warning: Cannot modify header information – headers already sent by (output started at /home/ot-drop/www/wp-content/plugins/mod_edit_button.php:1) in /home/ot-drop/www/wp-admin/admin.php on line 10
Warning: Cannot modify header information – headers already sent by (output started at /home/ot-drop/www/wp-content/plugins/mod_edit_button.php:1) in /home/ot-drop/www/wp-admin/admin.php on line 11
Warning: Cannot modify header information – headers already sent by (output started at /home/ot-drop/www/wp-content/plugins/mod_edit_button.php:1) in /home/ot-drop/www/wp-admin/admin.php on line 12
Warning: Cannot modify header information – headers already sent by (output started at /home/ot-drop/www/wp-content/plugins/mod_edit_button.php:1) in /home/ot-drop/www/wp-admin/admin.php on line 13
EUCで保存してみると、エラーは出ないのですが、ボタンが出ません。
最近文字コードをEUCからUTF-8に変えたのが原因なのでしょうか？
ちなみに、SOMYさんのSpamBlock JapaneseプラグインはUTF-8だと同じようなエラーが出るのですが、EUCだと問題なく動いています。
何が原因なのかさっぱり分からない状態です。
お手数おかけしますが、よろしくお願いします。
＞きゃわら さん
返答が遅くなり申し訳ありません。
一応EUC→UTF-8の変換も含めて、手元の環境で試したのですが、再現できませんでした。
表示されたエラーメッセージから推測すると、プラグインとadmin.phpの出力するheader情報は重なっていないはずです。それに文字コードに起因するような処理も行っていないのですけれど…
一つ確認していただきたいこととして、何も編集していない場合のmod_edit_button.phpを入れた場合でもエラーは出るでしょうか？
他のプラグインもEUCだと動くというのは何かおかしいですねぇ。
いったんプラグインをすべて無効にしてから、順に有効化していくと原因が分かるかもしれません。
何も編集していないmod_edit_button.phpをアップしてもダメでした。
WordPress ME 1.2.3で文字コードがEUCのブログで試したところうまくいったので、EUC→UTF-8の変換でどこかミスをした可能性が濃厚な気がします。
あと、SOMYさんのプラグインはUTF-8用とEUC用があることを忘れて文字コードを変えて保存してアップしたせいかもしれません。早とちりでした。
原因がよく分からないので、もう一度構築しなおしてみたいと思います。
ではでは、また後日結果を報告いたします。ありがとうございました。
こんばんは。
先ほどwpを構築しなおして、プラグインをアップしてみたのですが、UTF-8で保存したものは同じようなエラーで出来なかったのですが、UTF-8Nというもので保存してみたところうまくいきました。
原因はよく分からないままなのですが、設置できました！！
このプラグインのおかげでエントリを書くのがだいぶ楽になります。
ありがとうございましたごm( . _ .)m
＞きゃわら さん
再構築お疲れさまでした。
ひとまずきちんと動いたようでよかったです。
いろいろと見てみると、UTF-8Nの方がベターという方が多いみたいですね。