自社デザインにCMSを組み込む方法｜ブリーダー業者テーマ(通常版)

ブリーダー業者テーマ(通常版)
自社デザインにCMSを組み込む

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

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

下準備

土台のファイルの準備

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

土台ファイルを整理

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

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

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

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

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

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

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

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

CMS用の設定

リンク先の変更

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

<a href="./">ホーム</a>
<a href="./?act=list&kind=1">トイプードル</a>
<a href="./?act=list&kind=2">チワワ</a>
<a href="./?act=list&kind=3">ダックス</a>

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

index_.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">  <figure><a href="?act=bukken&id={val list0/info_id}"><img src="user_data/{val list0/image1_file}" alt="{val list0/title}"></a></figure>  <div> <h4> <a href="?act=bukken&id={val list0/info_id}">{val list0/title}</a> <span class="tp-icon tp-newicon">NEW</span> <span class="tp-icon tp-option1">おすすめ</span> <span class="tp-icon tp-option2">ご契約済</span> <span class="tp-icon">※セール中</span> <span class="tp-icon">PDF資料あり</span> </h4> <dl class="tp-line">   <dt>{val list0/list_item/row/title}</dt> <dd>{val list0/list_item/row/value}</dd>   </dl> </div> </div>  </section> </div>

続いて、サブコンテンツに「PICK UP」のタグも追加します。
（サブコンテンツ専用のタグではありませんので、html内のどこにコピペされても構いませんがcssなどの調整はお客様側で行って下さい。）
「PICK UP」は、トップページ、一覧ページ、詳細ページに出力できます。フォームには出力されないのでご注意下さい。
 <div id="tp-sub-side"> <section> <h2>PICKUP</h2>  <div class="tp-list-sub"> <figure><a href="?act=bukken&id={val osusume/info_id}"><img src="user_data/{val osusume/image1_file}" alt="{val osusume/title}"></a></figure> <h4><a href="?act=bukken&id={val osusume/info_id}">{val osusume/title}</a></h4> <p>■{val osusume/info1/title}…{val osusume/info1/value} ■{val osusume/info2/title}…{val osusume/info2/value} ■{val osusume/info3/title}…{val osusume/info3/value}</p> </div>  </section> </div>

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

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

list.htmlのメインコンテンツのコードを以下に置き換えます。
<div id="tp-main"> <section> <h2>{val title}</h2> <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=""> <table class="tp-ta1">  <tr> <th>こだわりで検索</th> <td>  <div class="tp-specialbox"> <label for="special{val form/special/no}"> <input type="checkbox" name="special{val form/special/no}" id="special{val form/special/no}" value="{val form/special/no}" checked>  <img src="icon/{val form/special/icon}" alt="{val form/special/title}" title="{val form/special/title}">   {val form/special/title}  </label> </div>   </td> </tr>  </table> <div class="tp-c tp-mb30"><input type="submit" value="この条件で検索する"> <input type="button" value="リセット" onClick="do_reset()"></div> </form> <div class="tp-c tp-mb30">  高い順にソート   <a href="javascript:do_search(1)">高い順にソート</a>  ｜  安い順にソート   <a href="javascript:do_search(2)">安い順にソート</a>  ｜  新着順にソート   <a href="javascript:do_search('')">新着順にソート</a>  ｜ </div> <div>  <div class="tp-list2">  <figure><a href="?act=bukken&id={val list/info_id}"><img src="user_data/{val list/image1_file}" alt="{val list/title}"></a></figure>  <div> <h4> <a href="?act=bukken&id={val list/info_id}">{val list/title}</a> <span class="tp-icon tp-newicon">NEW</span> <span class="tp-icon tp-option1">おすすめ</span> <span class="tp-icon tp-option2">ご契約済</span> <span class="tp-icon">※セール中</span> <span class="tp-icon">PDF資料あり</span> </h4> <dl class="tp-line"> <dt>{val list/info1/title}</dt><dd>{val list/info1/value}</dd> <dt>{val list/info2/title}</dt><dd>{val list/info2/value}</dd> <dt>{val list/info3/title}</dt><dd>{val list/info3/value}</dd> <dt>{val list/info4/title}</dt><dd>{val list/info4/value}</dd> </dl> </div> </div>  </div>  <div class="tp-pager">  <a href="javascript:do_page({val pager/prev/no})"><< 前へ</a>   <span><< 前へ</span>    <a href="javascript:do_page({val pager/list/no})">{val pager/list/name}</a>   <span>{val pager/list/name}</span>    <a href="javascript:do_page({val pager/next/no})">次へ >></a>   <span>次へ >></span>  </div>  </section> </div>

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

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

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

item.htmlのメインコンテンツのコードを以下に置き換えます。
<div id="tp-main"> <article> <h2>{val item/title}　[No.{val item/info_id}]</h2> <span class="tp-icon tp-newicon">NEW</span> <span class="tp-icon tp-option1">おすすめ</span> <span class="tp-icon tp-option2">ご契約済</span> <span class="tp-icon">※セール中</span> <span class="tp-icon">PDF資料あり</span> <figure id="tp-item-image">  <img src="user_data/{val item/image1_file}" id="bukken_image" alt="">  </figure> <p class="tp-c">  <a href="javascript:set_image('user_data/{val item/image1_file}');"><img src="user_data/{val item/image1_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image2_file}');"><img src="user_data/{val item/image2_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image3_file}');"><img src="user_data/{val item/image3_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image4_file}');"><img src="user_data/{val item/image4_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image5_file}');"><img src="user_data/{val item/image5_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image6_file}');"><img src="user_data/{val item/image6_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image7_file}');"><img src="user_data/{val item/image7_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image8_file}');"><img src="user_data/{val item/image8_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image9_file}');"><img src="user_data/{val item/image9_file}" alt="" class="tp-thumbnail"></a>   <a href="javascript:set_image('user_data/{val item/image10_file}');"><img src="user_data/{val item/image10_file}" alt="" class="tp-thumbnail"></a>  </p> <table class="tp-ta1"> <tr> <th>犬種</th> <td>{val item/title}</td> </tr>  <tr> <th>{val item/info/title}</th> <td>{val item/info/value}</td> </tr>   <tr> <th>詳細情報</th> <td>{val item/contents}</td> </tr>   <tr> <th>資料</th> <td><a href="?act=get_file&id={val item/pdf}">{val item/pdf_file/name}</a></td> </tr>  <tr> <th>価格に含まれるもの</th> <td>   <a href="?act=list&kind={val item/kind}&special{val item/special/value}={val item/special/value}"><img src="icon/{val item/special/icon}" alt="{val item/special/title}" title="{val item/special/title}"></a>   <a href="?act=list&kind={val item/kind}&special{val item/special/value}={val item/special/value}">{val item/special/title}</a>   </td> </tr> </table> <p class="tp-c"> <span style="color:red">※管理ページの「ご契約済み」を選択した場合のみ、ここの問い合わせボタンは表示されません。<br> setup.phpのご契約済みの場所を変更すると設定がずれるのでご注意下さい。<br> 常にボタンを表示させたい場合は、ボタンタグからとを削除して下さい。</span><br> <div class="tp-btn"><a href="?act=toiawase&id={val item/info_id}">問い合わせをする</a></div> 《こちらのワンちゃんは飼い主さんが決まりました》 </p> </article> <p><a href="javascript:history.back()"><< 前のページに戻る</a></p> </div>

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

フォーム用のタグを記載

item.html（※どのhtmlでも構いません）を複製し、ファイル名をtoiawase.htmlに変更します。

toiawase.htmlのメインコンテンツに、以下のコードをコピペして下さい。
<div id="tp-main"> <section> <h2>仔犬専用お問い合わせフォーム</h2>  <p class="tp-color-check">お問い合わせ内容を送信しました。</p>    <p class="tp-color-check">全項目入力必須です。</p>   <p class="tp-color-check">{val message}</p>  <form name="form1" method="post" action="?act=toiawase"> <input type="hidden" name="mode" value="{val mode}"> <input type="hidden" name="id" value="{val item/info_id}"> <table class="tp-ta1">  <tr> <th>No</th> <td>{val item/info_id}</td> </tr> <tr> <th>名称</th> <td>{val item/title}</td> </tr>  <tr> <th>お名前</th> <td>  {val form/name}   <input type="text" name="name" size="30" class="tp-ws" value="{val form/name}">  </td> </tr> <tr> <th>メールアドレス</th> <td>  {val form/email}   <input type="text" name="email" size="50" class="tp-ws" value="{val form/email}">  </td> </tr> <tr> <th>お問い合わせ詳細 </th> <td>  {val form/comment}   <textarea name="comment" cols="60" rows="8" class="tp-wl">{rval form/comment}</textarea>  </td> </tr> </table> <div class="tp-btn">  <input type="submit" value="この内容で送信する">   <input type="submit" value="確認する">  </div> </form>  </section> </div>

head内のコードは不要なので、削除しておきます。

設定は以上です

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

通常版を購入する

ブリーダー業者テーマ(通常版)自社デザインにCMSを組み込む

下準備