カラーミーショップをカスタマイズするには、いろいろな無料のテンプレートの中身を見てみると参考になる部分が沢山あります。
Previewしながら、良いところを見つけたら中身を見て、参考にしちゃいましょう。
無料のテンプレートを他の無料のテンプレートの良いとこどりで、有料のテンプレート相当のものにUpgradeもできると思います。有料テンプレートにしかない画面いっぱいのスライドショーなどは、有料テンプレートのサンプルページなどのソースを見ることで、実現方法もわかると思います。
カラーミーショップは、SmartyというPHP用のテンプレートエンジンを使用しているそうで、テンプレートの中身を見るときにsmartyの公式ページのドキュメントが役に立ちます。(なかなか全部読んで理解するのは大変なので、いろいろなテンプレートや実際に表示させてみると大体は理解できるとは思いますので、わからないところや不安なところ、応用したいときなどに参考にするだけでも良いと思います。)
あと、テンプレートを理解して応用するには、カラーミーショップの独自タグを概要だけでも見ておいた方がよいでしょう。なんとなくでも意味が分かるような表記にはなっているので、すぐわかると思いますが、このカラーミーショップの独自タグの説明ページだけ見ただけでは、どうやって使うのかわからないことがあります。
例えば、「フリーページを1から100まで利用する場合」で、フリーページ98のURLはというと”<{$freepage[98].link_url}>”といった感じになります。これもテンプレートの中身を見ているとわかると思います。(昔、「プログラムを覚えるのに良いプログラムを読め」と言っていたのを思い出します。)
さて、テンプレートを見ているとよくある構文をいくつかあります。
1つは、ループ、もう1つは、分岐(if)これを知っていれば、流れの部分はカバーできると思います。あとは、ループを使う上で、ループの中の状態を知る方法でしょう。この3つを知っていれば、ほとんどのテンプレートは読めると思います。もちろん、html/CSS/Javascriptなどもある程度は理解できる知識が必要です(^-^;
<ループ section>
以下は、カテゴリリストを表示する処理です。「<{section……}> ~ <{/section}>」
<{section name=num loop=$category}>
<{if $smarty.section.num.first }>
<div>
<h3 class=”pad_l_10″>カテゴリーから探す</h3>
<ul class=”unstyled bor_b_1 mar_b_20″>
<{/if}>
<li class=”pad_10 bor_t_1″>
<a href=”<{$category[num].link_url}>” class=”show txt_c_333″>
<{if $category[num].img_url != “”}>
<img src=”<{$category[num].img_url}>” class=”show hidden-phone mar_b_5 cat-left” />
<{/if}>
<{$category[num].name}>
</a>
</li>
<{if $smarty.section.num.last }>
</ul>
</div>
<{/if}>
<{/section}>
<分岐 if>
以下は、ショップ会員機能が有効であれば、ログインしているかどうかで表示を変える部分です。
<{if $members_use_flg == true}>
<{if $members_login_flg == false}>
<li class=”header-link”>
<a href=”<{$members_login_url}>” class=”btn btn-01″><i class=”icon-w icon-login”></i>ログイン</a>
</li>
<{if $members_register_flg == true}>
<li class=”header-link”>
<a href=”<{$members_regi_url}>” class=”btn btn-01″><i class=”icon-w icon-adduser”></i>会員登録</a>
</li>
<{/if}>
<{else}>
<li class=”header-link”>
<a href=”<{$members_login_url}>” class=”btn btn-01″><i class=”icon-w icon-logout”></i>ログアウト</a>
</li>
<{/if}>
<{/if}>
<ループ状態 smarty.section>
<{smarty.section.xxx.yyyyy}> : section name=xxxのなかのプロパティyyyyyの値となります。
yyyyy:iteration(ループの現在の反復回数),index(ループのインデックスでしてしない場合は0から始まります),first(1回目の処理時にtrue),last(最後の処理時にtrue),rownum(iterationと同意,1から始まる),loop(ループの最後のインデックス番号,{section}の外で使えます。)