Template Party

求人サイト向けCMS(高機能版)共通メニュー

個別詳細ページ(item.html)の解説

list.htmlの解説を読んだ後にこちらを読むとより理解しやすいと思います。
こちらで使うタグは基本的にlist.htmlと同じで使っているタグにlistが入っているかitemが入っているかの違い程度です。
例:{val list/title}はlistページの見出し、{val item/title}は一覧ページの見出し。どちらも同じ管理ページの見出しを出力させるタグですがlistを使うかitemを使うかの違いがあります。

解説に入ります。以下は、詳細ページ(item.html)です。

見出しの解説からいきます。



■解説:
list.htmlでも見出しの解説はしましたが、今度はitemページなので、{val item/title}となります。(list.htmlの場合は{val list/title}でした。)

以下のタグはそれぞれのアイコンの指定です。アイコンの見た目はcssフォルダのstyle.cssで変更できます。
※こちらもlist.htmlと基本は同じです。(listを使うかitemを使うか)
option1〜option3は管理ページの求人データ登録ページにあるプルダウンでどれか1つ選択できるようになっています。この3つの情報を変更したい場合はsetup.phpの「// オプション選択肢」を編集して下さい。
※setup.phpに注意書きが書いてあるように、「"3" => "募集終了",」を変更する際は注意して下さい。詳しくは後半で解説します。


プルダウンから何も選択していない新着情報の場合、ここの三角マークも「new」になります。

以下は管理ページの説明を出力させるタグです。



■解説:
{val item/contents}は管理ページの「説明」の情報を出力させるタグです。こちらは情報が入力されている場合に表示させたいので、
<!--{def item/contents}-->〜<!--{/def}-->
を使っています。実はこれがなくても大きな問題はないのですが、未入力の場合に段落タグ<p></p>だけ出力されてしまうので、あえてつけました。

以下は画像の出力タグです。



■解説:
管理ページの画像1だけは一覧ページでも使いましたが詳細ページでも1枚目(大きな画像として)に出力されます。
画像2以降はサムネイルで表示され、クリックすると大きな画像と置きかわります。
htmlでは20枚目の画像まで指定されていますが、試用版の管理ページでは10枚しか入力箇所がありません。簡単に20枚まで追加はできるのですが、サーバーによってアップロード数(画像、PDF、ファイルの合計数)が限られている場合があるので10枚で設定しています。

※11枚以上使う場合の設定。
管理ページの「項目設定」メニューから希望の項目の編集ボタンをクリックし、以下の部分の画像11以降に名前を入力していって下さい。もし20点全部使いたい場合、入力値を空(項目1〜10)にすれば20点全部使う設定にかわります。

上に書いたように、全部使えないサーバー環境もあります。例えばサーバーの制限が20点の場合、画像で20点使ったことによりPDF(1枚まで)やファイル(5枚まで)のアップロードができなくなります。

次は、求人ナンバーと見出し(タイトル)です。



■解説:
{val item/info_id}が、求人ナンバーを出力させるタグです。idはプログラムで自動処理されます。
求人ナンバーとは関係ありませんが、横にある、
<!--{def item/new_flag}--><span class="newicon">new</span><!--{/def}-->
は、newアイコンの指定です。defなので新着プルダウンが選択されている場合にアイコンが表示されます。アイコンの表示日数はsetup.phpの39行目あたりで変更できます。
タイトルは上で解説したものと同じです。管理ページの1つ目「見出し」が出力されます。

次は「項目1」〜「項目20」までの読み込みブロックです。
list.htmlの時は項目10までを自動読み込みさせていましたが、今回は「項目20(地域コード)」だけは出力させたくなかったので、個別に読み込みます。



■解説:
{val item/info1/title}は管理ページの「項目1」の見出し(この画像例だと「給与・時給」)を出力させるタグです。この見出しは、管理ページ ->「項目設定」で設定した「項目1」の部分で変更できます。
{val item/info1/value}は管理ページの「項目1」のテキスト入力部分(この画像例だと「時給1,100円〜」の部分)を出力させるタグです。入力エリアはhtmlタグが使えるので例としてスタイル指定をしていますが、文字列だけでももちろん構いません。
前後の、<!--{def item/info1/value}--><!--{/def}-->は、info1/valueが入力されていれば、という意味です。このタグはなくても構いませんが、未入力である場合に見出しだけ出力されるので、すっきりさせる為に未入力の場合は出力させない設定にしました。
残るブロックも同様です。それぞれ「項目1」から「項目10」までを「求人内容」として、「項目11」から「項目19」までを「企業情報」としてテーブルを分けて出力させています。臨機応変に使い分けて下さい。

※自動で20項目全てを出力させる方法。
上では項目を指定して出力させましたが、自動で20項目すべてを自動出力させるタグは以下です。
20項目全ての自動出力になる為、試用版のようにテーブルを分けたりなどはできません。

<!--{each item/info}-->
<tr>
<th>{val item/info/title}</th>
<td>{val item/info/value}</td>
</tr>
<!--{/each}-->

GoogleMapの出力ブロックについて。



■解説:経度と緯度をカンマ区切りで入力するとGoogleMapが出力されるようにタグが入っています。住所を入力すると経度と緯度の値を出してくれるサイトもあるので、検索してみて下さい。
ここはhtml側でGoogleMap用のタグが入っているだけなので、他の項目のように通常出力させることもできます。その場合はiframeパーツは一旦外して{val item/latlon}だけにしてみて下さい。ただし、管理ページの「Map用経度・緯度」の文字情報は変更できませんのでご了承下さい。

サイト全体をSSL化(https)される場合は、必ずitem.htmlの設定を変更(※リンク先は不動産用FAQです)して下さい。
また、GoogleMapの出力タグが将来Google側によって変更される可能性もあるので、定期的にマップを出力している詳細ページをチェックして下さい。

こだわりアイコンの出力ブロックについて。



■解説:
htmlタグの赤枠で囲っている上の方はこだわりがアイコン「画像」で設定されている(def)場合です。こだわりのアイコン化に関する解説はこちら。
赤枠の下の方は試用版のテキストタイプの出力用です。ndefで囲ってあるのでアイコン画像の設定がない場合に出力させる、という意味になります。
こだわりアイコンは管理ページでチェックを入れたものだけが出力されます。この出力されたアイコンはリンクになっており、クリックすればそのこだわり条件を満たす一覧ページが出力されます。
こだわりアイコンのデザイン変更はcssフォルダのstyle.cssで行うことができます。

PDFファイル、ファイルの出力ブロックについて



■解説:
htmlタグの赤枠で囲っている上の方はPDFファイルの出力用タグです。管理ページで「PDFファイル」とあるところからアップロードすれば出力されます。
htmlタグの赤枠の下の方はファイル(最大5枚まで可)の出力用タグです。試用版では1点しかアップロードする箇所がありませんが、5点まで追加する方法は以下です。

※ファイルを5つアップロードできるようにする方法。
管理ページの「項目設定」メニューから変更したい項目の編集ボタンをクリックし、「ファイル2」以降に名前を入力していって下さい。


※これまでにも説明しましたが、画像、PDF、ファイルのアップロードの合計数が制限されているサーバーも多くあります。
例えばサーバーの制限が20点の場合、画像で20点使うとここのファイルがアップロードができなくなります。

次は、登録日・更新日の出力です。



■解説:
{val item/regdate/0}は登録年です。上の出力例なら「2016」
{val item/regdate/1}は登録月です。上の出力例なら「08」
{val item/regdate/2}は登録日です。上の出力例なら「10」
{val item/regtime/0}時{val item/regtime/1}分は登録時刻です。上の出力例なら「18時42分」
{val item/update/0}は更新年です。上の出力例なら「2016」
{val item/update/1}は更新月です。上の出力例なら「09」
{val item/update/2}は更新日です。上の出力例なら「12」
{val item/uptime/0}時{val item/uptime/1}分は更新時刻です。上の出力例なら「11時16分」

もし時刻を表示させたくないなら、{val item/regtime/0}時{val item/regtime/1}分と{val item/uptime/0}時{val item/uptime/1}分を削除すればOKということになります。

最後は応募フォームへのリンクボタンの出力です。こちらは特に解説はないので省きます。
デザインはcssフォルダのstyle.cssで変更可能です。

求人項目ごとに「詳細ページ」を変えたい場合(一覧ページも変更できます)

試用版の場合、詳細ページはitem.htmlの1枚で共通になっています。
これを例えば「飲食店」だけ別のレイアウトにしたい場合、専用のhtmlを使うことができます。

早速作ってみましょう。

まずは既存のitem.htmlを複製します。ファイル名は何でも構いませんが今回はitem_01.htmlにしてみます。

次に、item_01.htmlを開き、必要な箇所を編集して下さい。
今回はわかりやすいようにヘッダーとメインメニューブロックを外してみました。

item_01.htmlをアップロードします。

アップしたitem_01.htmlを飲食店に適用する作業を行います。
管理ページにログインし、「項目設定」メニューから「飲食店」の編集ボタンを選択。以下のように詳細用HTMLにitem_01.htmlと入力して保存します。

設定は以上です。飲食店の詳細ページを実際に開き、以下のようにヘッダーとメニューが消えたか確認して下さい。

マニュアルトップに戻る