| 5-4：index.phpの制作 |
|
|
| 2006/04/30 日曜日 20:21:04 JST | |
|
出来上がったHTMLにJoomla!のPHPコードを埋め込んで index.php を作ります。これが完成すれば、工程の2/3は終わる事に。後はCSS設定と動作チェックだけ。（これがまた悩ましい事ばかりで気が重くなりますが、まぁ、やりかかった事なのでがんばりましょう。。）
まず、Joomla!ディレクトリ直下で[templates]ディレクトリを探して、その中に[madeyourweb]というディレクトリを探します。その中に[index.php]というファイルがあるので、これを作業ディレクトリに別名保存(例えばmadeyourweb.php)しておきます。 先ほど完成したHTMLファイルも同じ作業ディレクトリに保存してあるとして、このHTMLファイルを[index.php]として別名保存します。
さて、この[ index.php ]と別名保存した[ madeyourweb.php ]をエディタ等で２つとも開きます。何も考えず、[ madeyourweb.php ]の先頭から２８行目の</head>までを選択しコピーします。それを[ index.php ]の先頭にペーストします。 このペーストした部分で27行目を１行全て削除します。２６行目の【madeyourweb】を自分の好みの名前にします。これがこのテンプレートの名前になります。 私は一応、net-mon-star_PPとしました。 ついでに、この下に１行書き込んでおります。Javascriptをあえて使う必要もないのですが、こんなのもあっていいかも。と。 <script type="text/javascript"src="<?php echo $mosConfig_live_site; ?>/templates/net-mon-star_PP/setimg.js"></script> それと、21、22行目ですが、CSSを設定しているときに間違いやすいので、間違えにくいユニークな名前に変えます。
ここは、通常「新着情報」「人気記事」が並んで表示されているところが、どちらか１つの時に使用するCSSのID名を指定しています。 $usera ='user-one'; $userb ='user-one'; 上記は、useraという変数にuser-oneという値を代入し、またuserbという変数にuser-oneという値を代入するといった意味になってます。 ここまでで、【head】部は終わりましたので、元のHTMlファイルにあったヘッド部は削除します。次に【body】部の作業に入ります。 下記のようなイメージタグは、 <img src="images/Sgreen_3.png" alt="" height="41" width="723" border="0"> | |
| すべて、 | |
<img src="<?php echo $mosConfig_live_site; ?>/templates/net-mon-star_PP/images/Sgreen_3.png" alt="" height="41" width="723" border="0" /> …の形に書き換えます。
エディタの置換機能で一斉置換すると、簡単です。 同じように、 <td background="images/back_db.gif">
のような記述も
<td background="<?php echo $mosConfig_live_site; ?>/templates/net-mon-star_PP/images/back_db.gif">
のように全て書き換えます。
理解している範囲で説明してみます。 $mosConfig_live_site は、変数名です。configuration.php をエディタで開いて41行目を見れば、格納されている値がわかります。phpが実行されれば、<?php echo $mosConfig_live_site; ?>は、格納している値を表示してくれます。たとえば。http://testsite.com とか。 次に、モジュールポジションを表示させるコードを予定している位置に書き入れます。 【user6】ポジションを指定します。 ■元HTML <table width="100%" border="0" cellspacing="0" cellpadding="0" summary="layout table 1-7L1R"> <tr> <td background="images/back_db.gif"></td> </tr> 下記のようにしました。
■index.php
<table width="100%" border="0" cellspacing="0" cellpadding="0" summary="layout table 1-7L1R"> <tr> <td background="<?php echo $mosConfig_live_site; ?>/templates/net-mon-star_PP/images/back_db.gif"> <?php if (mosCountModules( "user6" )) { ?> <div class="ad-vertise"> <?php mosLoadModules ( 'user6',-1); ?> </div> <?php } ?> </td> </tr> つづいて、【sitename】と【banner】を指定。
■元HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0" summary="head2 layout table 3-1L3R"> <tr> <td width="13" height="81" background="images/Sgreen_7.png"><img src="images/Sgreen_7.png" alt="" height="81" width="13" border="0"></td> <td valign="bottom" width="100%" height="81" background="images/bcolor.png"> <table width="735" border="0" cellspacing="0" cellpadding="0" summary="title layout table 4-1L2R"> <tr> <td width="300"></td> <td align="right" width="435"></td> </tr> </table> <table width="735" border="0" cellspacing="0" cellpadding="0" summary="topmenu layout table 5-1L1R"> <tr> <td align="right"></td> </tr> </table> $mosConfig_sitenameに格納されている変数値は、【サイト名】です。ここではこれを表示させています。表示に際しては、site-titleというCSSクラス名が参照されるようにしています。
その下は、【banner】を指定しています。 ■index.php
<table width="100%" border="0" cellspacing="0" cellpadding="0" summary="head2 layout table 3-1L3R"> <tr> <td width="13" height="81" background="<?php echo $mosConfig_live_site; ?>/templates/net-mon-star_PP/images/Sgreen_7.png"><img src="<?php echo $mosConfig_live_site; ?>/templates/net-mon-star_PP/images/Sgreen_7.png" alt="" height="81" width="13" border="0" /></td> <td width="100%" height="81" background="<?php echo $mosConfig_live_site; ?>/templates/net-mon-star_PP/images/bcolor.png"> <table width="735" border="0" cellspacing="0" cellpadding="0" summary="title layout table 4-1L2R"> <tr> <td><p class="site-title"><?php echo $mosConfig_sitename; ?></p></td> <td align="right"> <?php if (mosCountModules( "banner" )) { ?> <div id="banner"> <?php mosLoadModules ( 'banner',-1); ?> </div> <?php } ?> </td> </tr> </table> 【user3】を指定。トップメニューとわかりやすいclass名を指定してます。（そのまんま）
■元HTML
<table width="735" border="0" cellspacing="0" cellpadding="0" summary="topmenu layout table 5-1L1R"> <tr> <td align="right"></td> </tr> </table> ■index.php
<table width="735" border="0" cellspacing="0" cellpadding="0" summary="topmenu layout table 5-1L1R"> <tr> <td align="right"> <?php if (mosCountModules( "user3" )) { ?> <div class="top-topmenu"> <?php mosLoadModules ( 'user3',-1); ?> </div> <?php } ?> </td> </tr> </table> …このようにして、HTMLを作る際に想定したモジュールポジションの配置位置に[ madeyourweb.php ]を参照し、コピーで済むところはコピーして、ペーストしていきます。そうはいかないところは、それなりに書き込んでいきます。
【debug】まで指定しおわったら、index.phpはひとまず完成です。 では、これでうまく表示できるかテストしてみましょう。 既存の「madeyourweb」テンプレートがある同一階層に、テンプレート名でディレクトリを作って、そこに出来上がったindex.phpを保存または、コピーします。 「madeyourweb」ディレクトリから、CSSディレクトリをとりあえず丸ごとコピーします。「templateDetails.xml」もコピーします。「templateDetails.xml」をエディタで開いて、 とりあえず<name>madeyourweb</name>の項目を自分のテンプレート名と同じにします。 以上が終わったら、Joomla!の管理エリアに入って、テンプレートを切り替えます。 このように表示されます。  まだ、CSS設定が終わっていないので、あたりまえですが表示はぎこちないです。 想定した位置にそれぞれが表示されていることを確認できれば、ひとまず成功です。 さぁ、CSS設定を完成させましょう。 |
|
| 最終更新日 ( 2006/09/12 火曜日 12:16:05 JST ) | |
| < 前へ | 次へ > |
|---|
