自社デザインにCMSを組み込む方法｜ネットショップ向けCMS

ショップCMS
自社デザインにCMSを組み込む

※初めてCMSをご利用になられる場合
初めて当サイトのCMSをご利用になられる場合、必ず試用版を使ってご自身の環境でCMSが動作するか事前に確認しておいて下さい。

※上級者向けの解説です。
htmlやcssを把握されているお客様向けの解説になります。スタイルはレイアウトが崩れない為の必要最低限の設定しか入っていませんので、ご自身での調整が必要となります。

下準備

土台のファイルの準備

土台にしたいデザインファイルを複製し、そちらでテストしていきます。
今回はtemplate partyさんのtp_school4_navyに組み込む解説をさせて頂きます。

土台ファイルを整理

とりあえず、CMSの土台とする為にindex.htmlだけを残し、他のhtmlは削除しておきます。
（※必要に応じて元ファイル全体のバックアップをとっておいて下さい。）

続いてindex.htmlのファイル名をtop.html（※アンダーバーつき）に変更します。

CMS専用のcssをダウンロード

tp-style.cssのダウンロード

tp-style.cssをダウンロード＆解凍し、任意の場所に移動。
top.htmlにこのcssの読み込みタグを追加します。
以下は、tp-style.cssをcssフォルダに入れた場合の例です。

試用版からファイルを移動

試用版から以下ファイル・フォルダを持ってきます。
既に当サイトのCMSで運営中の場合は、サーバーからDLしてきたものを使って下さい。

data（フォルダ）
user_data（フォルダ）
index.php（ファイル）

CMS用の設定

リンク先の変更

top.htmlを開き、リンク先を試用版に合わせて変更します。
既に当サイトのCMSで運営中の場合は、ご自身の環境に応じて変更して下さい。

<a href="./">HOME</a>
<a href="./?act=list&kind=1">商品グループ1</a>
<a href="./?act=list&kind=2">商品グループ2</a>

トップページ用のタグを記載

top.htmlのメインコンテンツに、以下のコードをコピペして下さい。
<div id="tp-main"> <section> <h2>更新情報・お知らせ</h2> <dl class="tp-new">  <dt>{val newinfo/rss_date}</dt>  <dd><a href="{val newinfo/url}">{val newinfo/title}<br>{val newinfo/contents}</a></dd>   <dd>{val newinfo/title}<br>{val newinfo/contents}</dd>   </dl> </section> <section> <h2>新着商品情報</h2>  <div class="tp-list2 up option2"> <figure> <a href="?act=item&id={val newitem/info_id}">  <img src="user_data/{val newitem/image1_file}" alt="{val newitem/title}">  </a> </figure> <div> <h4> <a href="?act=item&id={val newitem/info_id}">{val newitem/title}</a> <span class="tp-icon tp-newicon">NEW</span><br> {val newitem/price_s}円 </h4> <p>{val newitem/contents}<br> <span class="tp-icon">在庫：あり</span> <span class="tp-icon">在庫：残り僅か</span> <span class="tp-icon tp-option1">おすすめ</span> <span class="tp-icon tp-option2">SOLD OUT</span> </p> </div> </div>  </section> </div>

続いて、サブコンテンツ用のタグも追加します。
（サブコンテンツ専用のタグではありませんので、html内のどこにコピペされても構いませんがcssなどの調整はお客様側で行って下さい。）
<div id="tp-sub-side"> <h2>商品検索</h2> <form name="search" method="post" action="./?act=search"> <input type="text" name="keyword"> <input type="submit" value="検索"> </form> <h2>カート</h2> <p>購入商品：{val cart_count}点<br> 購入金額：{val cart_total}円</p> <p class="tp-btn"><a href="./?act=cart">カートをみる</a></p> <h2>商品メニュー(※自動出力)</h2> <ul>  <li><a href="?act=list&kind={val group/id}">{val group/title}</a></li>  </ul>  <h2>おすすめ商品</h2>  <div class="tp-list-sub"> <figure> <a href="?act=item&id={val osusume/info_id}">  <img src="user_data/{val osusume/image1_file}" alt="{val osusume/title}">  </a> </figure> <h4><a href="?act=item&id={val osusume/info_id}">{val osusume/title}</a></h4> <p>{val osusume/price_s}円<br> <span class="tp-icon tp-option2">SOLD OUT</span></p> </div>    <h2>人気ランキング</h2>  <div class="tp-list-sub"> <figure> <a href="?act=item&id={val ranking/info_id}">  <img src="?act=img&file=user_data/{val ranking/image1_file}" alt="{val ranking/title}">  </a> </figure> <h4><a href="?act=item&id={val ranking/info_id}">{val ranking/title}</a></h4> <p>{val ranking/price_s}円<br> 人気 No.{val ranking/num} <span class="tp-icon tp-option2">SOLD OUT</span></p> </div>   </div>

一覧ページ用のタグを記載

top.htmlファイルを複製し、ファイル名をlist.htmlに変更します。

list.htmlのメインコンテンツのコードを以下に置き換えます。
<div id="tp-main"> <h2>{val title}（全：{val total}点）</h2> <p>{val contents}</p> <form name="form1" method="get"> <input type="hidden" name="act" value="list"> <input type="hidden" name="ord" value="{val form/ord}"> <input type="hidden" name="kind" value="{val form/kind}"> <input type="hidden" name="limit" value="{val limit}"> <input type="hidden" name="html" value="{val html}"> <input type="hidden" name="top" value="{val top}"> <input type="hidden" name="page" value=""> <input type="hidden" name="keyword" value="{val form/keyword}"> </form> <p class="tp-c">  価格の高い順にソート   <a href="javascript:do_search(1)">価格の高い順にソート</a>  ｜  価格の安い順にソート   <a href="javascript:do_search(2)">価格の安い順にソート</a>  ｜  新着順にソート   <a href="javascript:do_search('')">新着順にソート</a>  ｜ </p>  <div class="tp-list2 up option2"> <figure> <a href="?act=item&id={val list/info_id}">  <img src="user_data/{val list/image1_file}" alt="{val list/title}">  </a> </figure> <div> <h4><a href="?act=item&id={val list/info_id}">{val list/title}</a> <span class="tp-icon tp-newicon">NEW</span><br> {val list/price_s}円</h4> <p>{val list/contents}<br> <span class="tp-icon">在庫：あり</span> <span class="tp-icon">在庫：残り僅か</span> <span class="tp-icon tp-option1">おすすめ</span> <span class="tp-icon tp-option2">SOLD OUT</span> </p> </div> </div>   <p class="tp-c">  << <a href="javascript:do_page({val pager/prev/no})">前の10件を表示</a>   <a href="javascript:do_page({val pager/next/no})">次の10件を表示</a> >>  </p>  </div>

続いて、head内に以下のjavascriptコードも入れます。
<script>  </script>

詳細ページ用のタグを記載

list.htmlファイルを複製し、ファイル名をitem.htmlに変更します。

item.htmlのメインコンテンツのコードを以下に置き換えます。
<div id="tp-main"> <h2>{val item/title}　《{val item/price_s}円》</h2> <span class="tp-icon tp-newicon">NEW</span> <figure id="tp-item-image">  <p><img src="user_data/{val item/image1_file}" alt="{val item/title}" id="item_image"></p>  </figure> <p class="tp-c">  <a href="javascript:set_image('user_data/{val item/image1_file}')"><img src="?act=img&file=user_data/{val item/image1_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image2_file}')"><img src="?act=img&file=user_data/{val item/image2_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image3_file}')"><img src="?act=img&file=user_data/{val item/image3_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image4_file}')"><img src="?act=img&file=user_data/{val item/image4_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image5_file}')"><img src="?act=img&file=user_data/{val item/image5_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image6_file}')"><img src="?act=img&file=user_data/{val item/image6_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image7_file}')"><img src="?act=img&file=user_data/{val item/image7_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image8_file}')"><img src="?act=img&file=user_data/{val item/image8_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image9_file}')"><img src="?act=img&file=user_data/{val item/image9_file}" alt="{val item/title}" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image10_file}')"><img src="?act=img&file=user_data/{val item/image10_file}" alt="{val item/title}" class="tp-thumbnail"></a>  </p> <table class="tp-ta1"> <tr> <th>商品ナンバー</th> <td>No.{val item/info_id}</td> </tr> <tr> <th>商品名</th> <td> {val item/title}  ⇒<a href="{val item/link}">この商品の関連情報</a>  </td> </tr> <tr> <th>価格</th> <td>{val item/price_s}円</td> </tr> <tr> <th>説明</th> <td>{val item/contents}</td> </tr>  <tr> <th>{val item/info/title}</th> <td>{val item/info/value}</td> </tr>  </table> <form name="form1" method="post" action="?act=cart"> <input type="hidden" name="mode" value="add"> <input type="hidden" name="id" value="{val item/info_id}"> <table class="tp-ta1"> <tr> <th>個数選択</th> <td> <select name="qty"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </td> </tr> </table> <p class="tp-btn">  《こちらの商品は売り切れました》   <input type="submit" value="カゴにいれる">  </p> </form>  <h2>関連商品</h2> <p>  <a href="?act=item&id={val item/item/id}"><img src="?act=img&file=user_data/{val item/item/image_file}" alt="{val item/item/title}" class="tp-thumbnail"></a>  </p>  </div>

続いて、head内に以下のコードも入れます。
（上のlist.htmlで入れたコードは削除。）
<script> function set_image(img) { document.getElementById('item_image').src = img; } </script>

カート画面（cart）のタグを記載

item.htmlを複製し、ファイル名をcart.htmlに変更します。

cart.htmlのメインコンテンツに、以下のコードをコピペして下さい。
<div id="tp-main"> <p class="tp-c"><strong>カート画面</strong>　>>　お客様情報入力　>>　確認　>>　完了</p> <form name="form1" method="post" action="?act=cart">  <div style="color:red" class="tp-c">{val message}</div>   <table class="tp-ta1"> <caption>カート画面</caption> <tr> <th>商品</th> <th>金額</th> <th>個数</th> <th>計</th> </tr>  <tr> <td>  <img src="?act=img&file=user_data/{val items/image}&x=50&y=50" alt="item name" width="50" height="50">  {val items/title}</td> <td>{val items/price_s}円</td> <td> <select name="qty{val items/id}"> {val items/qty} <option value="1" {val items/qty1_sel}>1</option> <option value="2" {val items/qty2_sel}>2</option> <option value="3" {val items/qty3_sel}>3</option> <option value="4" {val items/qty4_sel}>4</option> <option value="5" {val items/qty5_sel}>5</option> <option value="6" {val items/qty6_sel}>6</option> <option value="7" {val items/qty7_sel}>7</option> <option value="8" {val items/qty8_sel}>8</option> <option value="9" {val items/qty9_sel}>9</option> <option value="10" {val items/qty10_sel}>10</option> </select> 個 <input type="button" value="個数変更" onClick="change({val items/id}, document.form1.qty{val items/id}.value)"> <input type="button" value="削除" onClick="location='?act=cart&mode=del&id={val items/id}'"></td> <td>{val items/total_s}円</td> </tr>  <tr> <td colspan="3">小計</td> <td>{val total_s}円</td> </tr>  <tr> <td colspan="3">送料</td> <td> {val send_s}</td> </tr>  <tr> <td colspan="3">合計</td> <td>{val alltotal_s}円</td> </tr> </table>  </form> <p class="tp-c"><< <a href="./">お買い物を続ける</a></p> <p class="tp-c"><a href="?act=cart1"><input type="submit" value="お客様入力画面へ進む"></a></p> </div>

続いて、head内に以下のコードも入れます。
（上のitem.htmlで入れたコードは削除。）
<script> function change(id, qty) { location='?act=cart&mode=change&id=' + id + '&qty=' + qty; } </script>

カート画面（cart1）のタグを記載

cart.htmlを複製し、ファイル名をcart1.htmlに変更します。

cart1.htmlのメインコンテンツに、以下のコードをコピペして下さい。
上のcart.htmlで入れたhead内のコードは不要なので、削除しておきます。
<div id="tp-main"> <p class="tp-c">カート画面　>>　<strong>お客様情報入力</strong>　>>　確認　>>　完了</p> <form name="form1" method="post" action="?act=cart2"> <input type="hidden" name="mode" value="form"> <p style="color:red" class="c">{val message}</p> <table class="tp-ta1"> <caption>お客様情報入力（※全項目入力必須）</caption> <tr> <th>お名前</th> <td><input type="text" name="name" size="30" class="tp-ws" value="{val form/name}"></td> </tr> <tr> <th>フリガナ</th> <td><input type="text" name="kana" size="30" class="tp-ws" value="{val form/kana}"></td> </tr> <tr> <th>メールアドレス</th> <td><input type="text" name="email" size="30" class="tp-ws" value="{val form/email}"></td> </tr> <tr> <th>メールアドレス（再入力）</th> <td><input type="text" name="email2" size="30" class="tp-ws" value="{val form/email2}"></td> </tr> <tr> <th>郵便番号</th> <td><input type="text" name="zip" size="12" value="{val form/zip}"></td> </tr> <tr> <th>ご住所</th> <td><select name="pref"> <option value="">都道府県選択</option> <option value="1" {val pref1}>北海道</option> <option value="2" {val pref2}>青森県</option> <option value="3" {val pref3}>岩手県</option> <option value="4" {val pref4}>宮城県</option> <option value="5" {val pref5}>秋田県</option> <option value="6" {val pref6}>山形県</option> <option value="7" {val pref7}>福島県</option> <option value="8" {val pref8}>茨城県</option> <option value="9" {val pref9}>栃木県</option> <option value="10" {val pref10}>群馬県</option> <option value="11" {val pref11}>埼玉県</option> <option value="12" {val pref12}>千葉県</option> <option value="13" {val pref13}>東京都</option> <option value="14" {val pref14}>神奈川県</option> <option value="15" {val pref15}>新潟県</option> <option value="16" {val pref16}>富山県</option> <option value="17" {val pref17}>石川県</option> <option value="18" {val pref18}>福井県</option> <option value="19" {val pref19}>山梨県</option> <option value="20" {val pref20}>長野県</option> <option value="21" {val pref21}>岐阜県</option> <option value="22" {val pref22}>静岡県</option> <option value="23" {val pref23}>愛知県</option> <option value="24" {val pref24}>三重県</option> <option value="25" {val pref25}>滋賀県</option> <option value="26" {val pref26}>京都府</option> <option value="27" {val pref27}>大阪府</option> <option value="28" {val pref28}>兵庫県</option> <option value="29" {val pref29}>奈良県</option> <option value="30" {val pref30}>和歌山県</option> <option value="31" {val pref31}>鳥取県</option> <option value="32" {val pref32}>島根県</option> <option value="33" {val pref33}>岡山県</option> <option value="34" {val pref34}>広島県</option> <option value="35" {val pref35}>山口県</option> <option value="36" {val pref36}>徳島県</option> <option value="37" {val pref37}>香川県</option> <option value="38" {val pref38}>愛媛県</option> <option value="39" {val pref39}>高知県</option> <option value="40" {val pref40}>福岡県</option> <option value="41" {val pref41}>佐賀県</option> <option value="42" {val pref42}>長崎県</option> <option value="43" {val pref43}>熊本県</option> <option value="44" {val pref44}>大分県</option> <option value="45" {val pref45}>宮崎県</option> <option value="46" {val pref46}>鹿児島県</option> <option value="47" {val pref47}>沖縄県</option> </select> <br> <input type="text" name="address" size="30" class="tp-wl" value="{val form/address}"></td> </tr> <tr> <th>TEL</th> <td><input type="text" name="tel" size="30" class="tp-ws" value="{val form/tel}"></td> </tr> </table> <table class="tp-ta1"> <caption>お支払い・配達</caption>  <tr> <th>お支払い方法<br>（※入力必須）</th> <td> <select name="pay"> <option value="">選択してください</option>  <option value="{val pay_list/id}" {val pay_list/sel}>{val pay_list/title}</option>  </select></td> </tr>   <tr> <th>配達日・時間指定</th> <td>  <select name="date"> <option value="">準備出来しだい</option>  <option value="{val send_list/id}" {val send_list/sel}>{val send_list/title}</option>  </select>   <select name="time"> <option value="">希望なし</option>  <option value="{val time_list/id}" {val time_list/sel}>{val time_list/title}</option>  </select> <br>運送会社によりご希望に添えない場合もあります。  </td> </tr>  <tr> <th>ご要望・ご連絡事項</th> <td> <textarea name="comment" cols="60" rows="5" class="tp-wl">{rval form/comment}</textarea> <br>上記以外のご要望やご連絡がありましたらご記入ください。 </td> </tr> </table> <table class="tp-ta1"> <caption>お届け先　（お客様情報と異なる場合のみご入力下さい）</caption> <tr> <th>お名前</th> <td><input type="text" name="to_name" size="30" class="tp-ws" value="{val form/to_name}"></td> </tr> <tr> <th>フリガナ</th> <td><input type="text" name="to_kana" size="30" class="tp-ws" value="{val form/to_kana}"></td> </tr> <tr> <th>郵便番号</th> <td><input type="text" name="to_zip" size="12" value="{val form/to_zip}"></td> </tr> <tr> <th>ご住所</th> <td><select name="to_pref"> <option value="">都道府県選択</option> <option value="1" {val to_pref1}>北海道</option> <option value="2" {val to_pref2}>青森県</option> <option value="3" {val to_pref3}>岩手県</option> <option value="4" {val to_pref4}>宮城県</option> <option value="5" {val to_pref5}>秋田県</option> <option value="6" {val to_pref6}>山形県</option> <option value="7" {val to_pref7}>福島県</option> <option value="8" {val to_pref8}>茨城県</option> <option value="9" {val to_pref9}>栃木県</option> <option value="10" {val to_pref10}>群馬県</option> <option value="11" {val to_pref11}>埼玉県</option> <option value="12" {val to_pref12}>千葉県</option> <option value="13" {val to_pref13}>東京都</option> <option value="14" {val to_pref14}>神奈川県</option> <option value="15" {val to_pref15}>新潟県</option> <option value="16" {val to_pref16}>富山県</option> <option value="17" {val to_pref17}>石川県</option> <option value="18" {val to_pref18}>福井県</option> <option value="19" {val to_pref19}>山梨県</option> <option value="20" {val to_pref20}>長野県</option> <option value="21" {val to_pref21}>岐阜県</option> <option value="22" {val to_pref22}>静岡県</option> <option value="23" {val to_pref23}>愛知県</option> <option value="24" {val to_pref24}>三重県</option> <option value="25" {val to_pref25}>滋賀県</option> <option value="26" {val to_pref26}>京都府</option> <option value="27" {val to_pref27}>大阪府</option> <option value="28" {val to_pref28}>兵庫県</option> <option value="29" {val to_pref29}>奈良県</option> <option value="30" {val to_pref30}>和歌山県</option> <option value="31" {val to_pref31}>鳥取県</option> <option value="32" {val to_pref32}>島根県</option> <option value="33" {val to_pref33}>岡山県</option> <option value="34" {val to_pref34}>広島県</option> <option value="35" {val to_pref35}>山口県</option> <option value="36" {val to_pref36}>徳島県</option> <option value="37" {val to_pref37}>香川県</option> <option value="38" {val to_pref38}>愛媛県</option> <option value="39" {val to_pref39}>高知県</option> <option value="40" {val to_pref40}>福岡県</option> <option value="41" {val to_pref41}>佐賀県</option> <option value="42" {val to_pref42}>長崎県</option> <option value="43" {val to_pref43}>熊本県</option> <option value="44" {val to_pref44}>大分県</option> <option value="45" {val to_pref45}>宮崎県</option> <option value="46" {val to_pref46}>鹿児島県</option> <option value="47" {val to_pref47}>沖縄県</option> </select> <br> <input type="text" name="to_address" size="30" class="tp-wl" value="{val form/to_address}"></td> </tr> <tr> <th>TEL</th> <td><input type="text" name="to_tel" size="30" class="tp-ws" value="{val form/to_tel}"></td> </tr> </table> <p class="tp-c"><input type="submit" value="確認画面へ進む"></p> </form> </div>

カート画面（cart2）のタグを記載

cart1.htmlを複製し、ファイル名をcart2.htmlに変更します。

cart2.htmlのメインコンテンツに、以下のコードをコピペして下さい。
head内のコードは不要なので、削除しておきます。
<div id="tp-main"> <p class="tp-c">カート画面　>>　お客様情報入力　>>　<strong>確認</strong>　>>　完了</p> <table class="tp-ta1"> <caption>お客様情報入力</caption> <tr> <th>お名前</th> <td>{val form/name}</td> </tr> <tr> <th>フリガナ</th> <td>{val form/kana}</td> </tr> <tr> <th>メールアドレス</th> <td>{val form/email}</td> </tr> <tr> <th>メールアドレス（再入力）</th> <td>{val form/email2}</td> </tr> <tr> <th>郵便番号</th> <td>{val form/zip}</td> </tr> <tr> <th>ご住所</th> <td>{val form/pref}{val form/address}</td> </tr> <tr> <th>TEL</th> <td>{val form/tel}</td> </tr> </table> <table class="tp-ta1"> <caption>お支払い・発送方法</caption> <tr> <th>お支払い方法</th> <td>{val form/pay}</td> </tr> <tr> <th>配達日・時間指定</th> <td>{val form/date} {val form/time}</td> </tr> <tr> <th>ご要望・ご連絡事項</th> <td>{val form/comment}</td> </tr> </table> <table class="tp-ta1"> <caption>お届け先　（お客様情報と異なる場合のみご入力下さい）</caption> <tr> <th>お名前</th> <td>{val form/to_name}</td> </tr> <tr> <th>フリガナ</th> <td>{val form/to_kana}</td> </tr> <tr> <th>郵便番号</th> <td>{val form/to_zip}</td> </tr> <tr> <th>ご住所</th> <td>{val form/to_pref}{val form/to_address}</td> </tr> <tr> <th>TEL</th> <td>{val form/to_tel}</td> </tr> </table> <p class="tp-c"><input type="button" value="修正する" onClick="location='?act=cart1_reinput'"><input type="button" value="この内容で注文する" onClick="location='?act=cart3'"></p> </div>

カート画面（cart3）のタグを記載

cart2.htmlを複製し、ファイル名をcart3.htmlに変更します。

cart3.htmlのメインコンテンツに、以下のコードをコピペして下さい。
head内のコードは不要なので、削除しておきます。
<div id="tp-main"> <p class="tp-c">カート画面　>>　お客様情報入力　>>　確認　>>　<strong>完了</strong></p> <p>お申し込み有難うございました。<br> 自動返信メールがお手元に届きますのでご確認下さい。</p> <p class="tp-c"><input type="button" value="トップページへ" onclick="location='./'"></p> </div>

設定は以上です

サーバーにアップロードしプレビュー確認をして下さい。
フォームの動作はsetup.phpファイルの設定が必要なので、マニュアルをご覧下さい。
詳しい使い方もマニュアルに解説があります。

ショップCMS自社デザインにCMSを組み込む

下準備