Mantisのプラグインを作ってみる。(コメントへの画像貼り付け機能) その4 CSS読み込み

今までは画像の枠をソースべた書きのスタイルシートで入れていましたが、classを設定して
プラグイン独自のCSSを読むことによって変更とかに耐えられるようにしました。

<img alt="" style="border: solid 3px #000 ;{$p_image_rate}" src="file_download.php?file_id=${p_image_id}&type=b
</a> <br>



このように、「style=”border: solid 3px #000 ;{$p_image_rate}”」となっているborderの部分です。

hooks()の追加

一度は見送った、「EVENT_LAYOUT_RESOURCES」のイベントで引っ掛けるところで復活です。

   function hooks() {
     return array(
(他イベントは略)
       'EVENT_LAYOUT_RESOURCES'        => 'css',                       # CSS
     );



このように、リソースを描画するイベントでは、cssというメソッドを呼んでくれっていう書き方をします。
※ほかのメソッドと名前重複しないように、名前空間を使っているかどうかは調べていません。

cssという名前のメソッド追加

お手本にしたbbcodeのプラグインはresourcesという名前のメソッドでしたが、生来の面倒くさがり屋のためcssという名前に…

  /**                                                                                                              
   * Include css                                                                                                   
   * @param int $p_event                                                                                           
   * @return string                                                                                                
   */                                                                                                              
  function css( $p_event){                                                                                         
    return '<link href="' . plugin_file( 'ImagePasteOnComment.css' ) . '" media="all" rel="stylesheet" type="text/c
  } // f css                                                                                                       
 
 }



(すみません、2文字インテンド派)
ImagePasteOnComment.cssを呼び出すことにします。


ImagePasteOnComment.cssファイルの追加

どこにファイルを置けばよいのやら?と思ったのですが、プラグインのディレクトリのfilesに置けば、
先ほど記述したplugin_file()のメソッドが補完してくれるというようです。

ここだけgit のdiffを持ってきていますが、まあ、内容はimgタグのImagePasteOnCommentクラスは枠線入れるという内容です。

diff --git a/files/ImagePasteOnComment.css b/files/ImagePasteOnComment.css                                          
new file mode 100644                                                                                                
index 0000000..5d2c40f                                                                                              
--- /dev/null                                                                                                       
+++ b/files/ImagePasteOnComment.css                                                                                 
@@ -0,0 +1,3 @@                                                                                                     
+img.ImagePasteOnComment{                                                                                           
+  border: solid 3px #000 ;                                                                                         
+}



出力されたcssのlinkタグ


<link href="/mantis/plugin_file.php?file=ImagePasteOnComment/ImagePasteOnComment.css" media="all" rel="stylesheet" type="text/css">



これを見ると…plugin_file.phpで呼び出しているってことかと。勉強になります。