小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

カスタム項目(テキスト項目)の追加と必須チェックの方法

最終更新日: 2016-08-29

カスタム項目とは?

CMS「すぐ使えるCGI」では、初期設定で表示している「日付」「タイトル」「記事内容」の他に、テンプレートのカスタマイズでテキスト項目を最大11個追加できます(下表参照)。

このサポート情報ページではこのうち、Ver. 4.6 以上で対応した1行テキスト項目と複数行テキスト項目の追加方法と、その必須チェックを行う方法をご説明します。

項目 初期設定 対応バージョン 備考
日付 初期設定 全て
タイトル 初期設定 全て
記事内容 初期設定 全て
サマリー オプション Ver. 2.0 以上 設定方法はこちら
1行テキスト オプション Ver. 4.6 以上 5つまで追加可能。HTMLタグ無効。
複数行テキスト オプション Ver. 4.6 以上 5つまで追加可能。HTMLタグ有効。

対応製品

2016年8月現在、対応している製品(=Ver. 4.6 以上が公開されている製品)は以下の通りです。

項目の追加方法

項目追加の概要

項目追加のための作業は以下の3点です。

  1. 管理画面のテンプレートファイルを編集し、入力画面、確認画面に追加項目が表示されるようにします。
  2. その後、記事用テンプレートファイルを編集し、その項目を表示したい位置に該当のテンプレート変数を追加して下さい。
  3. 最後に、エラーがあった時にメッセージに追加した項目名が含まれるように admin/admin.cgi を編集します。
追加項目用テンプレート変数は以下の通りです。具体的なコード例は、後述します。
形式 テンプレート変数
1行テキスト %_linetext1_%、%_linetext2_%、%_linetext3_%、%_linetext4_%、%_linetext5_%
複数行テキスト %_blocktext1_%、%_blocktext2_%、%_blocktext3_%、%_blocktext4_%、%_blocktext5_%

編集時の注意点

製品によっては、初期設定で既にカスタム項目を利用していたり、CSSで隠された入力欄が含まれている場合があります。編集時には、ファイル内に同様の設定が無いかを確認してから行って下さい。

管理画面への項目追加

入力画面 templates/admin/2.html への項目追加

入力画面への項目追加には templates/admin/2.html を編集し、追加したい項目の分、下記例のコードを挿入して下さい。青字の項目名は自由に変更できます。赤字は、項目ごとに変えなければならない変数名です。

フォームの入力欄(<input type="text"> または <textarea>)が残ればOKですので、管理画面のデザインに応じてテーブル関連タグ(<tr>や<td>)は適宜変更して下さい。

編集時の注意点

  • 製品によっては、初期設定で既にカスタム項目を利用している場合があります。既に使われているカスタム項目の追加は避け、他のカスタム項目を使って下さい。
  • Ver. 5.0 以上の製品は、CSSで隠された入力欄がテンプレートに含まれている場合があります。項目があった場合、周辺のCSS設定を探して、「style="display: none;"」や 「class="hidden"」等の設定があればこれを削除して項目を表示して下さい。
<tr>
<th class="titem">追加テキスト1</th>
<td class="contents"><input type="text" name="linetext1" id="linetext1" value="%_linetext1_%" class="imeauto">
</td>
</tr>

以下は追加できる項目(1行テキスト5個、複数行テキスト5個)分のサンプルコードです。コピーして使って下さい。

なお、1行テキスト項目の入力形式を複数行テキスト(<textarea>)に変更しても複数行は入力できず、エラーになります。逆に、複数行テキスト項目の入力形式は1行テキスト(<input type="text">)に変更可能です。

入力画面 templates/admin/2.html 用 1行テキスト項目

<tr>
<th class="titem">1行項目名-1</th>
<td class="contents"><input type="text" name="linetext1" id="linetext1" value="%_linetext1_%" class="imeauto">
</td>
</tr>

<tr>
<th class="titem">1行項目名-2</th>
<td class="contents"><input type="text" name="linetext2" id="linetext2" value="%_linetext2_%" class="imeauto">
</td>
</tr>

<tr>
<th class="titem">1行項目名-3</th>
<td class="contents"><input type="text" name="linetext3" id="linetext3" value="%_linetext3_%" class="imeauto">
</td>
</tr>

<tr>
<th class="titem">1行項目名-4</th>
<td class="contents"><input type="text" name="linetext4" id="linetext4" value="%_linetext4_%" class="imeauto">
</td>
</tr>

<tr>
<th class="titem">1行項目名-5</th>
<td class="contents"><input type="text" name="linetext5" id="linetext5" value="%_linetext5_%" class="imeauto">
</td>
</tr>


入力画面 templates/admin/2.html 用 複数行テキスト項目

<tr>
<th class="titem">複数行項目名-1</th>
<td class="contents"><textarea name="blocktext1" cols="60" rows="3" class="imeauto" id="blocktext1">%_blocktext1_%</textarea>
</td>
</tr>

<tr>
<th class="titem">複数行項目名-2</th>
<td class="contents"><textarea name="blocktext2" cols="60" rows="3" class="imeauto" id="blocktext2">%_blocktext2_%</textarea>
</td>
</tr>

<tr>
<th class="titem">複数行項目名-3</th>
<td class="contents"><textarea name="blocktext3" cols="60" rows="3" class="imeauto" id="blocktext3">%_blocktext3_%</textarea>
</td>
</tr>

<tr>
<th class="titem">複数行項目名-4</th>
<td class="contents"><textarea name="blocktext4" cols="60" rows="3" class="imeauto" id="blocktext4">%_blocktext4_%</textarea>
</td>
</tr>

<tr>
<th class="titem">複数行項目名-5</th>
<td class="contents"><textarea name="blocktext5" cols="60" rows="3" class="imeauto" id="blocktext5">%_blocktext5_%</textarea>
</td>
</tr>


確認画面 templates/admin/3.html への項目追加

確認画面への項目追加には templates/admin/3.html を編集し、2.html に追加したのと対応する位置に以下のようにコードを追加して下さい。青字および赤字の項目名は、入力画面の設定と対応させて下さい。

編集時の注意点

  • Ver. 5.0 以上の製品は、CSSで隠された表示欄がテンプレートに含まれている場合があります。項目があった場合、周辺のCSS設定を探して、「style="display: none;"」や 「class="hidden"」等の設定があればこれを削除して項目を表示した上、項目名を変更して下さい。
<tr>
<th class="titem">1行項目名-1</th>
<td class="contents">%_linetext1_html_%</td>
</tr>

記事ページへの項目追加

記事ページでは、表示したい位置に対応するテンプレート変数を追加して下さい。編集対象のテンプレートファイルは以下の通りです。

ページ 編集対象テンプレート
全一覧(目次) templates/article/article_list.txt
短い一覧(新着情報) templates/article/short_list.txt
記事ページ ※ templates/article/article.html

※ 「記事ページ」は製品に依ってははありません。

追加するテンプレート変数は以下の通りです。

記事ページテンプレート用 1行テキスト項目

%_linetext1_%
%_linetext2_%
%_linetext3_%
%_linetext4_%
%_linetext5_%


記事ページテンプレート用 複数行テキスト項目

%_blocktext1_%
%_blocktext2_%
%_blocktext3_%
%_blocktext4_%
%_blocktext5_%


エラーメッセージの調整

追加した項目にタブを入力してしまった場合や、1行テキスト項目に改行を入力してしまった場合は管理画面でエラーとなりメッセージが表示されます。

このエラーメッセージに追加した項目名が含まれるようにするには、admin/admin.cgi の末尾に以下のように項目名設定がありますので追加して下さい。

追加した項目分、青字部分の項目名を指定して下さい。行内の空白(追加する項目名と、その前のアルファベット表記の間)はタブ1つです。

#
# ITEM NAMES [ FORMAT INFO ] reserved
#
localname_blocktext1	複数行項目名-1
localname_blocktext2	
localname_blocktext3	
localname_blocktext4	
localname_blocktext5	
localname_linetext1	1行項目名-1
localname_linetext2	
localname_linetext3	
localname_linetext4	
localname_linetext5	

HTMLタグ入力について

複数行テキスト項目ではHTMLタグ入力機能( {{{ と }}} で囲う)が使えます。1行テキストではHTMLタグを入力しても無効になります。

なお、元の複数行テキスト(<textarea>)の入力欄の形式を1行テキスト(<input type="text">)に変更しても、HTMLタグの入力機能は有効のまま残ります。

必須チェックの設定方法

追加したカスタム項目はCGIプログラム側での必須チェックができません。追加した項目を必須入力にしたい場合は、JavaScript での必須チェックの仕組みを追加して下さい。

追加項目の必須チェックを追加

templates/admin/2.html 内に「function set_order(LIST)」で始まる行があります(※1)。

その行を探してその直後に、チェックする項目ごとに下記の赤字6行分をコピーして追加して下さい。赤字中の青字部分は、必須チェックする追加項目名に対応する値に変更して下さい。

※1 templates/admin/2.html ファイル内に「function set_order(LIST)」が無い場合

JavaScript は外部ファイルに指定されている場合もあります。もしファイル内に「function set_order(LIST)」で始まる行が見つからなければ、<script src="..."> を探し、読み込んでいる JavaScript ファイル内から該当の行を探して下さい。 webdir/parts/js/admin.js や webdir/parts/js/sugu-admin.js などの名前でファイルがある筈です。

function set_order(LIST){
    //既存の関数「set_order」の先頭に追加
    var TGT = document.getElementById('linetext1');
    if (TGT && TGT.value === ''){
        alert('1行項目名-1を入力して下さい。');
        return false;
    }
    var ListTable = document.getElementById(LIST);
    var FileTarget;
    var ListCildOfTbody;

関連リンク

さらに詳しく