ポータルサイトテーマ(会員登録)
自社デザインにCMSを組み込む
※初めてCMSをご利用になられる場合
初めて当サイトのCMSをご利用になられる場合、必ず試用版を使ってご自身の環境でCMSが動作するか事前に確認しておいて下さい。
※上級者向けの解説です。
htmlやcssを把握されているお客様向けの解説になります。スタイルはレイアウトが崩れない為の必要最低限の設定しか入っていませんので、ご自身での調整が必要となります。
下準備
土台のファイルの準備
土台にしたいデザインファイルを複製し、そちらでテストしていきます。
今回はtemplate partyさんのtp_school4_navyに組み込む解説をさせて頂きます。
土台ファイルを整理
とりあえず、CMSの土台とする為にindex.htmlだけを残し、他のhtmlは削除しておきます。
(※必要に応じて元ファイル全体のバックアップをとっておいて下さい。)
続いてindex.htmlのファイル名をindex_.html(※アンダーバーつき)に変更します。
CMS専用のcssをダウンロード
tp-style.cssをダウンロード&解凍し、任意の場所に移動。
index_.htmlにこのcssの読み込みタグを追加します。
以下は、tp-style.cssをcssフォルダに入れた場合の例です。
試用版からファイルを移動
試用版から以下ファイル・フォルダを持ってきます。
既に当サイトのCMSで運営中の場合は、サーバーからDLしてきたものを使って下さい。
- cms_files(フォルダ)
- data(フォルダ)
- icon(フォルダ)
- upload(フォルダ)
- user_data(フォルダ)
- index.php(ファイル)
- setup.php(ファイル)
CMS用の設定
リンク先の変更
index_.htmlを開き、リンク先を試用版に合わせて変更します。
既に当サイトのCMSで運営中の場合は、ご自身の環境に応じて変更して下さい。
<a href="./">ホーム</a>
<a href="./?act=list&kind=101">飲食店を調べる</a>
<a href="./?act=list&kind=301">求人情報を探す</a>
<a href="./?act=list&kind=201">病院を探す</a>
<a href="./?act=list&kind=401">習い事を探す</a>
<a href="./?act=list&kind=1">不動産情報(売買)</a>
<a href="./?act=list&kind=2">不動産情報(賃貸)</a>
<a href="./?act=toiawase">フォーム</a>
ユーザーログインのリンクは以下です。
サイト上にリンクを貼るか、ユーザーに直接メールで伝えるか、ご要望の使い方をして下さい。
<a href="./?act=setup">ログイン</a>
トップページ用のタグを記載
index_.htmlのメインコンテンツに、以下のコードをコピペして下さい。
続いて、サブコンテンツに以下のタグも追加します。
(サブコンテンツ専用のタグではありませんので、html内のどこにコピペされても構いませんがcssなどの調整はお客様側で行って下さい。)
デフォルトの一覧ページのタグを記載
index_.htmlファイルを複製し、ファイル名をlist.htmlに変更します。
list.htmlのメインコンテンツのコードを以下に置き換えます。
続いて、head内に以下のjavascriptコードも入れます。
「求人を探す」専用の一覧ページのタグを記載
list.htmlファイルを複製し、ファイル名をlist_job.htmlに変更します。
list_job.htmlのメインコンテンツのコードを以下に置き換えます。
「売買物件を探す」専用の一覧ページのタグを記載
list.htmlファイルを複製し、ファイル名をlist_fudosan.htmlに変更します。
list_fudosan.htmlのメインコンテンツのコードを以下に置き換えます。
「賃貸物件を探す」の日本地図ページのタグを記載
list.htmlファイルを複製し、ファイル名をlist_fudosan_chintai.htmlに変更します。
list_fudosan_chintai.htmlのメインコンテンツのコードを以下に置き換えます。
「賃貸物件を探す」専用の一覧ページのタグを記載
list.htmlファイルを複製し、ファイル名をlist_fudosan_chintai2.htmlに変更します。
list_fudosan_chintai2.htmlのメインコンテンツのコードを以下に置き換えます。
「お知らせ」専用の一覧ページのタグを記載
list.htmlファイルを複製し、ファイル名をlist_oshirase.htmlに変更します。
list_oshirase.htmlのメインコンテンツのコードを以下に置き換えます。
「ユーザー一覧」ページのタグを記載
list.htmlファイルを複製し、ファイル名をlist_user.htmlに変更します。
list_user.htmlのメインコンテンツのコードを以下に置き換えます。
デフォルトの詳細ページ用のタグを記載
list.htmlファイルを複製し、ファイル名をitem.htmlに変更します。
item.htmlのメインコンテンツのコードを以下に置き換えます。
続いて、head内に以下のコードも入れます。
(元々list.htmlに入っていたコードは削除。)
「求人を探す」専用の詳細ページのタグを記載
item.htmlファイルを複製し、ファイル名をitem_job.htmlに変更します。
item_job.htmlのメインコンテンツのコードを以下に置き換えます。
「売買物件を探す」専用の詳細ページのタグを記載
item.htmlファイルを複製し、ファイル名をitem_fudosan.htmlに変更します。
item_fudosan.htmlのメインコンテンツのコードを以下に置き換えます。
「賃貸物件を探す」専用の詳細ページのタグを記載
item.htmlファイルを複製し、ファイル名をitem_fudosan2.htmlに変更します。
item_fudosan2.htmlのメインコンテンツのコードを以下に置き換えます。
「お知らせ」専用の詳細ページのタグを記載
item.htmlファイルを複製し、ファイル名をitem_oshirase.htmlに変更します。
item_oshirase.htmlのメインコンテンツのコードを以下に置き換えます。
フォーム用のタグを記載
item.htmlを複製し、ファイル名をtoiawase.htmlに変更します。
toiawase.htmlのメインコンテンツに、以下のコードをコピペして下さい。
head内のコードは不要なので、削除しておきます。
設定は以上です
サーバーにアップロードしプレビュー確認をして下さい。
フォームの動作はsetup.phpファイルの設定が必要なので、マニュアルをご覧下さい。
詳しい使い方もマニュアルに解説があります。