カラーミーショップのトップページにフリーページのコンテンツを表示させる

カラーミーショップ には、トップページに「お知らせ」と「フリースペース」とで2か所、自由に挿入できるスペースがあります。

お知らせは、入荷情報やイベント情報など、時事的な内容が多いですし、フリースペースはバナーを掲載したり、特集を掲載したいときに使えます。

ただ、実質自由に使えるのは「フリースペース」ですので、実質1か所ということになります。

従って、例えば「商品一覧」や「ランキング」などの上下に分けて入れたい場合は、直接テーマ自体にHTMLコードを入れ込む必要があります。

ただ、この方法ですと、気軽にちょこちょこっと直す、という使い方には向いていません。

なぜなら、テーマ自体のHTMLコードに手を加える際は、「入力支援ツール」が使えませんから、ある程度HTMLソースを知っている必要がありますし、万が一タグの閉じ忘れや不要なタグが入っている場合、トップページ全体のレイアウトがガタガタになってしまうリスクがあります。

しかも、ソースのミスって気づきにくいんですよね・・

そこで、なるべくテーマのコードをいじらずに、気軽に更新できる別の方法を模索するわけですが、この場合実装したのが「フリーページのコンテンツをトップページに掲載する方法」です。

カラーミーのフリーページを活用する

カラーミーショップ のフリーページはプランによって作れる数が異なりますが、すべてを使い切ることはあまりないのではないでしょうか。

そこで、コンテンツ内容はフリースペースで管理して、トップページの任意の場所に挿入することを考えます。※トップページ以外でも表示できると思います。

この方法ですと、テーマ自体をいじるのは最初の一回で済みますし、もしレイアウト崩れが起こったとしても、挿入したフリーページ内のソースだけを疑えばいいので管理がしやすいメリットがあります。

ここでメリットをまとめます。

フリーページの挿入を使うメリット

  • 使い慣れている管理画面から編集が可能
  • ソース画面とHTMLエディタを使い分けてコンテンツを作れる
  • サイトのどの部分でも流用可能
  • フリーページの数が許させている限り、入れたい場所に入れたいコンテンツを入れられる
  • テーマを変えたとしても簡単なコードで活用できる
  • ソースに慣れていない人も改編しやすい
  • PHPコードも使える
  • カスタマイズの幅が広がる

ということで、テーマのカスタマイズだけは知識のある人が行って、日常の改編作業はあまり知識がない人に任せる、というような場合でも使いやすい方法です。

さて、前振りが長くなりましたが、以下のコードをテーマのHTMLに挿入するだけです。

※下はフリーページ7を挿入した例なので、番号はそれぞれに応じて変えてください。

<!--フリーページ7の内容を読み込む-->
<{assign var="my_tpl" value=$file_name|regex_replace:"/\/(.*?)\\.tpl/":""}>
<{include file="$my_tpl/free7.tpl"}>

1.最初にフリーページに入れ込みたい内容を入れる

2.管理画面の「ショップ作成」→「デザイン」に進む

3.利用中のテンプレートで「テンプレート編集」へ進む

4.トップの上級モードで編集「HTML・CSS編集」のHTML編集画面に上記のソースをコピー&ペーストして「保存」

でOKです。

必要に応じてCSSも編集してください。

トップページだけではなく、共通などにも使えると思います^^

タイトルとURLをコピーしました