初のWordPressテンプレートで、以前にMTで制作したBRAinFACTORYのblogをWordPress用に再デザイン、再コーディングしたものです。
動作環境
・Win：Internet Explorer6、7、FireFox1.5で確認済。
・Mac：Safari2.05、FireFox1.5で確認済。
テスト環境
・WordPress ME2.2.3
まずは手始めということで、機能としては最低限のindex.phpで全て補う感じになっています。
まだ利用規約等のテキストはできていませんが、商用、非商用に関わらず、ご自由にお使いください。
フッターに入っている「designed by inDetail」の画像は、デザインの邪魔になるようであれば外してもらっても構いません。(残しておいてくれた方が嬉しいですけど)
最後にお約束を。
このテンプレートの使用によって万一何らかの損害が発生しても当方は一切の責任を負いませんので、利用者の自己責任でご利用ください。
これまでスクリーンショットの部分は外部xmlに制御させていたのだけど、カスタムフィールドに変更しました。
これまでの方式だと手間が多いし、なにより処理が重たくなっていたので、PHPでfor文をまわしてカスタムフィールドをHTMLタグにして表示するようにしました。
PHPって全然、初心者なんだけど、FlashのActionScriptと記述は似てるので分かりやすかったかも。
書いたPHPはこんな感じ。
<?php
$scrrenArray=get_post_meta($post->ID,'works_screen',FALSE);
$numScreen=count($scrrenArray);
$dic="http://www.indetail.jp/wp-content/themes/inDetail/images/works/";
for($i=0;$i<$numScreen;$i++){
echo("<img src=\"".$dic.$scrrenArray[$i]."\" />\n");
}
?>
スクリーンショットの投稿される数は案件によるので get_post_meta($post->ID,’works_screen’,FALSE)で配列として値を受け取って、配列に含まれる変数の数をカウント、for文で必要回数だけタグを書き込むようにしています。
ここ最近、ずっとworksの調整をしてたんだけど、ようやくなんとか欲しい機能は全部揃った。
本来の予定だと、Spry+jQuery+lightwindowで、ページ遷移なしで完結したかったのだけど、どうもSpryで生成したHTMLに対しては、lightwindowが使えない模様。
(多分だけど、lightwindowはHTMLのclass=”lightwindow”をざっとなめて、認識してるっぽい。そのプロセスゆえに、prototypeが動作した後にHTMLが生成されるから動作しない)
で、結局lightwindowなしで、ページを分割するカタチを採用。
構成パーツは下記の通り。
・JSライブラリ：Spry、 jQuery
・XML：works.xml(制作実績一覧のXML)、works_screen.xml(スクリーンショットのXML)
・ページ：worksのインデックス、worksの詳細。
サイトを追加する場合は、ページ機能の投稿でサイト名、コメント、カスタムフィールドで前のサイト、次のサイトを投稿。
works.xmlに基本情報を追加、works_screen.xmlに表示するスクリーンショットを追加という流れになってます。
ちょっと手数が多いけど、まあ、追加や更新はかなり楽になりました。
詳細ページはSpryの <div spry:choose=”spry:choose”>機能を使って自動的に振り分けてます。そのせいで、ちょっと重いかも？
今後の課題としては、
・headerテンプレートをやむを得ず分離してしまった。
・ページの横の移動をSpry頼みにしてしまってるので、これをなんとかしたい。
・next、backをわざわざ入力しないといけない。
この点はまたぼちぼち、直していきたいかな。