無料ホームページテンプレート Template Party無料ホームページテンプレート Template Party

汎用CMS(企業向け)のご紹介

汎用CMS(企業向け)共通メニュー

>> CMSバージョン履歴(最終更新2019/01/22) <<

サービスページ

以下はデモページです。※このページを作るわけではありません。

手順

手順は「トップページ」や「会社概要」と同じですが、出力用のタグが少し違うのと、ループ出力用のタグが新しく加わります。

  1. 左メニュー「項目設定」を選択し、「新規追加」ボタンをクリック。

    サンプルセットは新規登録ができないので、ここのステップは設定済みです。
    以下のリストが表示されますので、「サービス」の「編集」ボタンを押して次のステップに移動して下さい。

    ※並び順はこの画像の通りではない可能性があります。

  2. 冒頭のプルダウンから「サービス」を選択します。
  3. トップページや会社概要の時と同様、テスト用データを入力してみましょう。

  4. サービスページの情報を入力してみましょう。
    左メニューから「サービス」を選択し、「新規追加」ボタンをクリック。

    サンプルセットは新規登録ができないので、ここのステップは設定済みです。
    以下のリストが表示されますので「1つ目のデータタイトル」の「編集」ボタンを押して次のステップに移動して下さい。

    ※並び順はこの画像の通りではない可能性があります。

  5. サンプルデータを入力していきます。
    今回は一番下の「新着」と「おすすめ」プルダウンも選択してみましょう。
    3つのサンプルデータが登録されていますので、それぞれ全て入力しておきます。
  6. サービスページのテンプレートを準備します。
    最初にsetup.phpで指定したファイル名をつけましょう。
  7. top.htmlをコピーし、ファイル名を「service.html」にします。
  8. service.htmlを開き、head内に以下のタグを追加します。

    ※ループ出力ページ全てに必要なタグです。忘れず入れるようにして下さい。


    ↓以下をコピペして使って下さい。
  9. そのままアップロードしてみてみましょう。
    メニューに「サービス」をセットしているのでそちらをクリック。

    会社概要ページなどのようには中身は出力されません。
    これはループ出力タイプに使うタグが異なる為です。

ループ出力ページで使うタグ

{val list/〜}

valはデータを出力させる為のタグです。全ページ共通で使うタグなので覚えておきましょう。
listはループ出力ページのデータを指定するタグです。トップページや会社概要などの固定ページはここがinfoでしたね。

  • ページタイトル(名称)はtitleなので、一覧ページの出力用タグは{val list/title}です。
  • ページコメント(説明)はcontentsなので、一覧ページの出力用タグは{val list/contents}です。
  • 1つ目の見出しはlist1/title、本文はlist1/valueなので、一覧ページの出力用タグはそれぞれ{val list/list1/title}{val list/list1/value}です。
  • 1つ目の画像の見出しはimage1/title、画像はimage1_fileなので、一覧ページの出力用タグはそれぞれ{val list/image1/title}{val list/image1_file}です。
    但し、{val list/image1_file}だと画像ファイル名がそのまま表示されるだけなので、<img src="./user_data/{val list/image1_file}" alt="">とimgタグを使って指定しましょう。user_dataは画像がアップロードされるフォルダ名です。

    ループ出力ページでは、以下で解説している「each(ループ)」の中でしか読み込む事ができないのでご注意下さい。

実践してみましょう

service.htmlのmainブロックを一旦空にし、以下のタグを入力します。

使用したタグの解説

「1」の解説

{val title}

setup.phpの項目名を読み込むタグです。
ループ出力ページでは、each(ループ)の中でしか管理ページのデータを読み込む事ができないので、タイトルはsetupのデータを抜き出して使っています。

「2」の解説

プログラムタグです。基本的にここはループ出力タイプのページ共通で入力しておいて下さい。
検索用ブロックを配置する際に、ここのform間に検索ブロックを置きます。
検索用ブロックの詳細については本マニュアルをご覧下さい。

「3」の解説

全ての項目(1〜20)をここに出力させる必要はないので、サンプルでは「項目1(info1)」と「項目11(info11)」だけを設定し、残りはリンク先の詳細ページに出力させる事にしました。

<!--{each list}--> 〜 <!--{/each}-->
入力データの出力ブロックです。このタグの間をループ形式で出力していきます。

<!--{ndef list/〜}--> 〜 <!--{/ndef}-->
「def」は「データがある場合に出力させる」、でしたがこれは「ndef」です。
こちらは「データがない場合に出力させる」という逆の内容になります。
このサンプルでは、「image1_fileがない場合、代替画像(noimg.png)を表示させる」となります。

<!--{def list/recommend●}--> 〜 <!--{/def}-->
setup.phpの「オプション選択肢」を出力させるタグです。
setupのデータは、管理画面のデータ入力ページの一番下のおすすめプルダウンに反映されます。

オプション選択肢の"1"に設定したものは「recommend1」、"2"に設定したものは「recommend2」、"3"に設定したものは「recommend3」……です。
サンプルでは単に文字列として扱っていますが、html側で画像を使ったり、スタイルと組み合わせて使う事もできます。
例えば、不動産の物件である場合、「おすすめ物件」「ご契約済み」「キャンペーン中」…と設定するなど目的に応じて使い分けて下さい。

<!--{def list/new_flag}--> 〜 <!--{/def}-->
管理画面の「新着」プルダウンを選択した場合に出力させるタグです。
こちらもサンプルでは単にテキストとして表示しているだけですが、スタイル用のタグと組み合わせるなどして応用してもOKです。

<!--{def list/pdf}--> 〜 <!--{/def}-->
管理画面の「PDFファイル」からアップロードした場合に表示させるタグです。

./?act=info&id={val list/info_id}
詳細ページへのリンクアドレスです。

「4」の解説

ページ移動リンク用のタグです。スタイルなど追加して頂いても構いませんが、特に変更は不要です。

service.htmlを再びアップロードしてプレビュー

以下のようにデータが出力されていればOKです。

あとは一覧ページ用にhtmlやスタイルを整えて下さい。

サンプルデータをご利用中の場合は、残り2つ分のデータも入力してページに反映させてみましょう。
ループ出力ページなので、複数データが出力されていきます。

>> Next. サービス詳細ページの作成

このコンテンツのトップに戻る

<< 1つ前のページに戻る