スタッフ管理システムのみを自作サイトに使う方法

※ご利用の方へ(※必ずお読み下さい)
本来、スタッフ管理CMSは専用テンプレートとのセットでご利用頂く為のもので、ここで紹介した情報はあくまで「おまけ」です。ご自身の責任において作業を行って下さい。不具合が出た場合のサポート義務は当サイトでは負いません。また、マニュアル以外の使い道においてもサポート外なので予めご了承下さい。

設定方法ステップメニュー

STEP1:まずはじめに。試用版CMSテンプレートを使って全体の動作確認を行っておいて下さい。

全体の流れとしては、試用版CMS専用テンプレートの出力パーツを自作サイトに移動するという事なので、事前に試用版CMSで動作確認しておいてもらえればより理解しやすいかと思います。また、ご利用のサーバーによってはCMSプログラムが使えない場合があるので、正常に動作するかの事前チェックにもなります。
試用版CMS用テンプレートのダウンロードはこちらからどうぞ。試用版CMSプログラム本体のダウンロードもお忘れなく。

↑ ステップメニューへ戻る

STEP2:自作サイトのコピーを作り、そこにCMSプログラムを設定する準備をする。

自作サイトはどこかにバックアップをとり、コピーしたサイト(※以降、コピーサイトと記載します)にCMSプログラムを移動してきて下さい。
CMSプログラムのダウンロード及び、ファイルの移動についてはこちらのマニュアル(※STEP1のみ)をご参照下さい。テンプレートのダウンロードについては、できるだけイメージに近いものをダウンロードしておいて下さい。このCMS専用テンプレートは画像などのパーツだけを後で利用するので、どこか別の場所にでも保存しておきます。

↑ ステップメニューへ戻る

STEP3:文字コード(UTF-8かShift-JIS)を決めます。将来性を考えるならUTF-8がおすすめ。

ダウンロード直後のCMSプログラムはUTF-8でセットしてあります。
もしShift-JISで使いたい場合は、setup.phpの18〜19行目あたりにある、
//define("SCRIPT_ENCODING", "SJIS"); // Shift-JISの場合先頭の'//'を取ります。
define("SCRIPT_ENCODING", "UTF-8"); // UTF-8の場合先頭の'//'を取ります。

を、以下のように変更しておいて下さい。
define("SCRIPT_ENCODING", "SJIS"); // Shift-JISの場合先頭の'//'を取ります。
//define("SCRIPT_ENCODING", "UTF-8"); // UTF-8の場合先頭の'//'を取ります。

※spj_cms(スマホ用)フォルダとk_cms(携帯用)フォルダにも同じような設定箇所があるので忘れずに。

スマートフォン版を使う予定なら、UTF-8のままでご利用下さい。

決定した文字コードに合わせてコピーサイトのhtmlファイルの文字コードも変更しておきます。
htmlタグの上の方に「charset=shift_jis"」や「charset=utf-8"」といった単語が入った行があるのでそこで確認できます。単にここの文字を入れ替えるだけではhtmlファイル本体の文字コードは変わらず、かえって文字化けしてしまう可能性があるので、ご利用の編集ソフトのサポートなどに確認しながら変更してみて下さい。

↑ ステップメニューへ戻る

STEP4:トップページのhtmlファイル名を変更します

年齢制限用のページがあるかないかで設定が異なります。

年齢制限ページがある場合…年齢制限ページは通常index.htmlだと思いますのでそのまま利用してOKです。本体サイトページへのリンク先をindex.phpにして下さい。

年齢制限ページがない場合…トップページはindex.htmlだと思いますので、index2.htmlにファイル名を変更します。

年齢制限ページがない場合はindex.htmlファイルを作らないようにして下さい。このindex2.htmlというのは、CMSでトップページ(index.htmlの代わり)として出力させる為のファイル名なので必ずこのファイル名にして下さい。index.htmlがなくても、トップページのドメインでアクセスすればプログラムがindex2.htmlをトップページとして出力します。つまり、あなたのサイトのドメインがhttp://sample.com/であった場合、このurlでアクセスすればプログラムがindex2.htmlをテンプレートとして使い、自動で出力させるという事で、http://sample.com/index2.htmlにアクセスする必要はないという事です。

STEP5:コピーサイト内のリンク先を設定しなおします

コピーサイト内のリンク先をCMS用に変更します。
トップページへのリンク先は「index.php」に。年齢制限用の入り口ページがある場合も同様に「index.php」がリンク先になります。一括置き換えが可能なら、index.htmlを一括してindex.phpにすると便利です。
他、キャスト一覧ページのリンク先は「index.php?act=cast」に。スケジュール一覧ページは「index.php?act=schedule」に変更します。

↑ ステップメニューへ戻る

STEP6:該当するスタイル(css)を設定します。

コピーサイトのスタイルシートファイル(cssファイル)に以下のスタイルを追加します。後で混乱しない為、別途cssファイルを追加してもいいでしょう。同じスタイル名が存在するとレイアウトを崩す可能性があるので注意して下さい。

↑ ステップメニューへ戻る

STEP7:CMSに使う画像ファイルを、最初にダウンロードしておいたCMS専用テンプレート内から移動してきます

ダウンロードしておいたCMS専用テンプレートから必要な画像を移動しておきます。移動するファイルは、imagesフォルダのbtn_yoyaku.gifと、icon_back.gifと、icon_check.gifと、icon_no1.gifと、photo1.gifです。コピーサイト側にimagesというフォルダがある場合はそこに移動。ない場合は新しくフォルダを作ってそこに入れておいて下さい。これらの画像はもちろん、完成後に好きな画像に入れ替えてもらって構いません。ファイル名だけ同じにしておくと簡単です。

↑ ステップメニューへ戻る

STEP8:トップページ(index2.html)への出力用タグを設定します

index2.htmlに変更したファイルを開きます。

本日早番スタッフ本日遅番スタッフおすすめスタッフNew Faceを出力させる以下のタグを貼り付けます。

次に、「更新情報・お知らせ」を出力させる以下のタグを貼り付けます。

↑ ステップメニューへ戻る

STEP9:サーバーにアップしてプレビュー確認してみて下さい

今まで編集を行ったファイル一式をサーバーにアップします。この場合、元々のサイトには絶対に上書きせず、1つ下の階層などにサンプル用のフォルダを作ってそこにまとめてアップして下さい。
アップ後、トップページにアクセスします。あなたのサイトのドメインがhttp://sample.com/で、その下にsampleというサンプル用フォルダを作ってそこにアップした場合、http://sample.com/sample/でアクセスして下さい。上で設定したCMS用のパーツが出ていればOKです。レイアウトが若干崩れて見えるかもしれませんが、それは後程スタイルシート(cssファイル)で調整して下さい。

↑ ステップメニューへ戻る

STEP10:管理ページにログインして実際に1件登録してみましょう

管理ページにログインして、1件登録してみます。
テスト中のアドレスがhttp://sample.com/sample/だった場合、
http://sample.com/sample/index.php?act=setupで管理画面のログインページが開きます。
その後のステップはマニュアル(※「STEP4:管理画面へのログイン」のみ動作確認して下さい)でご確認下さい。

試用版は、新規のデータ登録はできませんが、既存データの入れ替えが可能なので、画像を含めて入れ替えてみましょう。

無事に登録ができたなら以下のステップへ進みましょう。

↑ ステップメニューへ戻る

STEP11:キャスト一覧ページを準備&サーバーアップ&プレビュー確認します

キャスト一覧を出力させるページを準備しましょう。既存ファイルでキャスト一覧を表示させたいhtmlファイル名をcast.htmlに変更し、編集ソフトで開きます。html側を開き、一覧を出力させたい場所に以下のタグを貼りこみます。

その後、サーバーにアップし、キャスト一覧ページ(上の工程でリンク設定した「index.php?act=cast」です)にアクセスしましょう。
無事に表示できればOKです。レイアウトの調整は最後にcssファイルで行って下さい。

↑ ステップメニューへ戻る

STEP12:スケジュール一覧ページを準備&サーバーアップ&プレビュー確認します

続いてスケジュール一覧を出力させるページを準備しましょう。既存ファイルでスケジュール一覧を表示させたいhtmlファイル名をschedule.htmlに変更し、編集ソフトで開きます。html側を開き、一覧を出力させたい場所に以下のタグを貼りこみます。

その後、サーバーにアップし、スケジュール一覧ページ(上の工程でリンク設定した「index.php?act=schedule」です)にアクセスしましょう。
無事に表示できればOKです。レイアウトの調整は最後にcssファイルで行って下さい。

↑ ステップメニューへ戻る

STEP13:キャストの詳細ページを準備&サーバーアップ&プレビュー確認します

続いてキャスト詳細を出力させるページを準備しましょう。既存ファイルでキャスト詳細ページを表示させたいhtmlファイル名をstaff.htmlに変更し、編集ソフトで開きます。html側を開き、一覧を出力させたい場所に以下のタグを貼りこみます。

続いて、htmlの上の方にある</head>の上の行に以下のタグも追加します。このタグはサムネイルの切り替え表示に必要なタグなので忘れないように。

サーバーにアップし、キャストの詳細ページにアクセス(キャストのサムネイル写真をクリック)しましょう。
無事に表示できればOKです。レイアウトの調整は最後にcssファイルで行って下さい。

↑ ステップメニューへ戻る

STEP14:キャスト専用の簡易予約フォームを準備&サーバーアップ&プレビュー確認します

上のステップで準備したキャスト詳細ページ内にある、簡易予約フォームを準備します。form.htmlを準備し、html側に以下のタグを追加しましょう。

サーバーにアップし、キャストの詳細ページ内にある「この日の予約問い合わせ」もしくは「こちらのスタッフの予約問い合わせをする」をクリックしましょう。無事に簡易予約フォームが表示できればOKです。レイアウトの調整は最後にcssファイルで行って下さい。

フォームの動作確認も必要ですが、通知メールなどの設定がsetup.phpで必要なので、事前に設定してからお試し下さい。setup.phpファイルは、最上層以外にスマートフォン用フォルダ(spj_cms)携帯用フォルダ(k_cms)にもありますので、合わせて変更するのをお忘れなく。

↑ ステップメニューへ戻る

STEP15:スマートフォンページを使う場合はspj_cms内を編集します

最初の方のステップでダウンロードしておいたスタッフCMS専用テンプレートのspj_cmsフォルダ内にある全ファイルを、今まで準備してきたフォルダにあるspj_cmsフォルダに移動します。この今まで準備してきたフォルダにあるspj_cmsフォルダは、スタッフCMSのプログラムについているフォルダで、すでにindex.phpとsetup.phpが入っていると思います。
最初に「よりイメージに近いテンプレートをダウンロードして下さい」と書いたのは、このスマートフォンページは基準となる構成が全て同じである為、スタイル設定したカラーなどができるだけイメージに近いものをDLしておくと、編集せずにすみますのでおすすめした次第です。
移動後、トップページ(spjフォルダ内のindex2.html)のメイン画像の読み込み箇所のタグを必要に合わせて入れ替えて下さい。またメニュー構成も希望に合わせて変更して下さい。これらはhtmlタグを理解されていれば可能だと思います。

※スマートフォン用ページはjQueryMobileを使用している為、当サイトではサポート外です。予めご了承ください。
ただ、jQueryMobileの解説サイトは数多く存在すると思うので、より細かい調整をしてみたい場合はご自身で検索してみて下さい。

↑ ステップメニューへ戻る

STEP16:携帯ページを使う場合はk_cms内を編集します

最初の方のステップでダウンロードしておいたスタッフCMS専用テンプレートのk_cmsフォルダ内にある全ファイルを、今まで準備してきたフォルダにあるk_cmsフォルダに移動します。この今まで準備してきたフォルダにあるk_cmsフォルダは、スタッフCMSのプログラムについているフォルダで、すでにindex.phpとsetup.phpが入っていると思います。携帯版については、将来性があまりないので簡単なモノトーンカラーのみで準備されています。スマホ版同様にメニュー構成などを必要に応じて調整して下さい。

↑ ステップメニューへ戻る

以上で完成です

マニュアル通りにやってもどうしてもうまくいかない場合は、質問BBSをご利用下さい。

ページの上部へ