このサイトのテンプレート作成の事もあり、私なりにテンプレート作成記録を書いていこうかと思う。

まず、第一回（って続くのか？）
よくあるサイト下部の 「|」で分割されたメニューをモジュールの出力をそのまま使って、作ってみる。できあがりの出力結果は、画像の通り。

ちなみに解説すると、tableタグを使わずセンターに持ってきて、しかも文字で「|」をセパレータとして使い、センターに持ってきて且つ、横幅は臨機応変、柔軟に対応したい。（こんなことしなくたって・・・と言う方は、さっさとよそへ行った方が時間がもったいないです。）

で、モジュールから出力されるメニューは、モジュール（mod_mainmenu)の設定をどうしようが、メニューリンクは、必ず「ul」なり、「table」タグで囲まれて出力されます。私のような、CSS下手な人間にとってこれは、非常に面倒です。・・・私には無理です。

そこで、こんなオーバーライドをしてみました。

少し改造してみた。

http://demo.joomler.net/

各記事上のPDFアイコンとE-Mailアイコンをクリックしてみてください。

GreyBoxを使って表示するようにしてみました。

変更は以下

Root/libraries/joomla/html/html.php

Line:110

return '<a href="'.$url.'" '.$attribs.'>'.$text.'</a>';

を

$base = substr(JURI::base(), 0, strlen(JURI::base()) - 1);
  $regex = '/<img[^>]*alt="pdf"[^>]*\/>/i';
  if(preg_match($regex, $text)){
   $attribs = ' rel="gb_page_fs[]"';
   $url = $base. $url;
  }
  $regex = '/<img[^>]*alt="E-mail"[^>]*\/>/i';
  if(preg_match($regex, $text)){
   $attribs = $attribs. ' rel="gb_page_center[480, 320]"';
   $url = $base. $url;
  }
  return '<a href="'.$url.'" '.$attribs.'>'.$text.'</a>';

へ変更した。

これだけでは、常時GreyBoxのJavascriptは読み込まれない（プラグインには関係ない）のでテンプレートのheadセクションに以下を追加

<script type="text/javascript">var GB_ROOT_DIR = "<?brush:php; echo $this->baseurl ?>/plugins/content/greybox/"</script>
<script type="text/javascript" src="/<?brush:php; echo $this->baseurl ?>/plugins/content/greybox/AJS.js"></script>
<script type="text/javascript" src="/<?brush:php; echo $this->baseurl ?>/plugins/content/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/<?brush:php; echo $this->baseurl ?>/plugins/content/greybox/gb_scripts.js"></script>
<link href="/<?brush:php; echo $this->baseurl ?>/plugins/content/greybox/gb_styles.css" rel="stylesheet" type="text/css" />

これは、デフォルトのrhuk_milkywayテンプレートの場合です。

これによって常時GreyBoxのJavascriptがロードされるのでGreyBoxプラグインをインストールしている場合は、Output GreyBox.jsをNoに変更してください。

参考にGreyBoxを使ってみましたが、同様にLightBox、ThickBox、LightWindowなど他の画像表示のJavascriptにも応用できるでしょう。

HTMLが表示できるJavascriptライブラリでないと無理でしたね。