CMSをサイトに出力する為のプレースホルダーについて
template_index.html、template_list.html、template_item.htmlのコード側を見て頂くとわかりますが、以下のプレースホルダーに自動的にCMSが出力されます。
- {{CATEGORIES}}
メニュー（カテゴリーリスト）を出力するプレースホルダー。 - {{ANNOUNCEMENTS}}
template_index.html（トップページ）でお知らせを出力するプレースホルダー。 - {{HOME_BLOCKS}}
template_index.html（トップページ）でブロックを出力するプレースホルダー。 - {{CATEGORY_NAME}}
template_list.htmlでカテゴリーのtitleを出力するプレースホルダー。title要素やh2要素などに使っています。 - {{NEWS}}
template_list.htmlでブロックを出力するプレースホルダー。 - {{TITLE}}
template_item.htmlでhead内のtitleを出力するプレースホルダー。 - {{DESCRIPTION}}
template_list.htmlとtemplate_item.htmlでhead内のdescriptionを出力するプレースホルダー。 - {{DETAIL_BODY}}
template_item.htmlでブロックを出力するプレースホルダー。 - {{CONTACT}}
簡易フォーム
実際に自分のサイトに導入する手順
IDとパスワード は「必ず」入れ替えて下さい。また、cmsフォルダ内にある data.dbのファイル名 も「必ず」変更して下さい。いずれも config.php で設定できます。これらは不正アクセス防止用なので「必ず」行って下さい。
- まず、tp_base_cmsをDLしておきます。
- DLしたCMSから、以下のフォルダとファイルを持ってきます。
cms（フォルダごと）
uploads（フォルダごと）
config.php
contact.php
index.php
item_detail.php
.htaccess（※隠しファイル。もし見えない場合はGoogle検索して見えるようにして下さい。） - トップページのhtmlファイル名（通常はindex.html）をtemplate_index.htmlに変更します。
htmlを開き、DLしたCMSのtemplate_index.htmlにあるプレースホルダーのコードをコピペします。
head内のtheme.cssの読み込みと、html下部のjQueryとtheme.jsの読み込みも入れます。 - トップページ以外に使いたいhtmlのファイル名をtemplate_list.htmlに変更します。
htmlを開き、DLしたCMSのtemplate_list.htmlにあるプレースホルダーのコードをコピペします。
head内のtheme.cssの読み込みと、html下部のjQueryとtheme.jsの読み込みも入れます。
一覧ページの場合、html冒頭のtitleとdescriptionもプレースホルダーになるので忘れず置き換えます。 - 詳細ページ用のhtmlのファイル名をtemplate_item.htmlに変更します。
htmlを開き、DLしたCMSのtemplate_item.htmlにあるプレースホルダーのコードをコピペします。
head内のtheme.cssの読み込みと、html下部のjQueryとtheme.jsの読み込みも入れます。
詳細ページの場合、html冒頭のtitleとdescriptionもプレースホルダーになるので忘れず置き換えます。 - CMS出力パーツのcssを調整して下さい。
cms/theme.cssやcms/theme.jsがCMSテンプレート専用のファイルです。お好みで調整して下さい。 - サーバーにアップロードし、確認。
※もしすでに.htaccessがある場合、上書きリセットしないようにご注意下さい。
管理ページでデータを更新した場合の注意点
管理ページで更新した場合、ローカル上の.dbフファイルを上書きしないようにして下さい。元の状態にリセットされてしまいます。
うっかり上書きしてしまう恐れがあるなら、ローカル上のファイル名を別名にしておくなどをおすすめします。
管理ページで更新した場合、ローカル上の.dbフファイルを上書きしないようにして下さい。元の状態にリセットされてしまいます。
うっかり上書きしてしまう恐れがあるなら、ローカル上のファイル名を別名にしておくなどをおすすめします。
レイアウトのバリエーションを増やす
レイアウトのプルダウンのバリエーションを増やす方法です。
cssがわかる人であれば誰でも追加が可能です。（htmlコードは限定されます。）
補足：htmlコードの変更はプログラムの修正が必要です。
プログラムがわかる場合は、cms/app/views内の各フォルダ内を参考に編集して下さい。groups内は外側の親のブロック指定。blocks内はその中でループ処理させる子ブロックの指定です。
尚、プログラムの修正については、当サイトではサポート外です。予めご了承下さい。
手順
- 以下のphpファイルにレイアウトの選択肢を追加します。
cms/app/content_create.php
cms/app/content_edit.php
cms/app/home_block_create.php
cms/app/home_block_edit.php
cms/app/content_list.php
cms/app/home_block_list.php - 以下はcontent_create.phpのコードの例。（home_block_create.phpも同じ内容です。）
以下のように、コードを１行追加。valueの値がそのままclass名になります。
補足：レイアウトプルダウンを選んだ際に下のブロックの表示・非表示を切り替える場合。
説明文を隠すなら、data-hide-body="1"
画像欄を隠すなら、data-hide-img="1"
両方非表示なら、data-hide-body="1" data-hide-img="1"
上記はあくまで入力欄自体の表示・非表示切り替えです。すでに使っているデータに対して、非表示を追加した場合、入力済みデータについてはサイト側に表示されてしまうので、そういった際はcssで非表示指定を追加して下さい。 - 以下はcontent_edit.phpのコードの例。（home_block_edit.phpも同じ内容です。）
上の、content_create.phpより複雑ですが、基本、既存コードをコピペして、classに該当する部分を入れ替えるだけです。
- 以下はcontent_list.phpのコードの例。（home_block_list.phpも同じ内容です。）
- 一旦サーバーにアップします。以下のようにレイアウトプルダウンに追加れていればOK。
- 適当に登録してみます。
まだcssを設定していないので、そのまま画像とテキストが出力されるだけですが、以下のようにサイト側に出力されていればOK。
- あとは、cms/theme.cssに今回追加したclassを使ってスタイルを追加して下さい。
今回は、タイトル、説明、画像全てを管理画面で使う指定だったので、
<div class="tpcms-layout1">
<div class="tpcms-list">
<figure>
<img src="uploads/1754893028_IMG_3545.jpg" alt="">
</figure>
<div class="tpcms-text">
<h4>追加レイアウトタイトル</h4>
<p>追加レイアウトの本文です。</p>
</div>
</div>
</div>
のhtmlコードになっています。
必ず頭に.tpcms-layout1（※今回の例で追加したclass名の場合）とつけてcssを追加していって下さい。
既存のtheme.cssを見ると参考になると思います。
