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

カスタム項目とは？

「すぐ使えるCMS」では、「日付」「タイトル」「記事内容」の他に、テンプレートのカスタマイズでテキスト項目を最大11個追加できます（下表参照）。

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

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

カスタム項目のHTMLタグと改行入力

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

また、複数行テキスト項目では改行が入力できます。1行テキストでは改行を入力するとエラーになります。

複数行テキスト項目を、入力欄は1行テキスト（<input type="text">）形式にして使う事もできます。この場合は、操作上改行の入力はできませんが、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>）は適宜変更して下さい。

コピー 
<tr>
<th class="titem">追加テキスト1</th>
<td class="contents">
<input type="text" name="linetext1" id="linetext1" value="%_linetext1_%" class="imeauto">
</td>
</tr>

編集時の注意点

  • 製品によっては、初期設定で既にカスタム項目を利用している場合があります。既に使われているカスタム項目の追加は避け、未使用の項目を使って下さい。
  • Ver. 5.0 以上の製品は、CSSで隠された入力欄がテンプレートに含まれている場合があります。項目があった場合、周辺のCSS設定を探して、「style="display: none;"」や 「class="hidden"」、 「class="hide"」等の設定があればこれを削除して項目を表示して下さい。
  • バージョンによってはフォーム関連タグのHTMLコードが異なる場合があります。その場合は、元々テンプレートに含まれている他の項目のコードをコピーして編集元とし、項目名やテンプレート変数名部分だけ、上記のコードを参考にしながら変更して下さい。

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

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

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

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>
複数行テキスト項目
コピー 
<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 に追加したのと対応する位置に以下のようにコードを追加して下さい。青字および赤字の項目名は、入力画面の設定と対応させて下さい。

なお、確認画面に関しては、入力画面と異なり、1行項目か複数行項目かによるコードの違いはありません。

コピー 
<tr>
<th class="titem">1行項目名-1</th>
<td class="contents">%_linetext1_html_%</td>
</tr>

編集時の注意点

  • Ver. 5.0 以上の製品は、CSSで隠された表示欄がテンプレートに含まれている場合があります。項目があった場合、周辺のCSS設定を探して、「style="display: none;"」や 「class="hidden"」等の設定があればこれを削除して項目を表示した上、項目名を変更して下さい。
  • バージョンによってはHTMLコードが異なる場合があります。その場合は、元々テンプレートに含まれている他の項目のコードをコピーして編集元とし、項目名やテンプレート変数名部分だけ、上記のコードを参考にしながら変更して下さい。

記事ページへの項目追加

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

ページ 編集対象テンプレート
全一覧（目次） 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    複数行テキスト 2
localname_blocktext3    複数行テキスト 3
localname_blocktext4    複数行テキスト 4
localname_blocktext5    複数行テキスト 5
localname_linetext1    1行テキスト 1
localname_linetext2    1行テキスト 2
localname_linetext3    1行テキスト 3
localname_linetext4    1行テキスト 4
localname_linetext5    1行テキスト 5

必須チェックの設定方法

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

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

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

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

コピー 
function set_order(LIST){
    //既存の関数「set_order」の先頭に追加
    var TGT;
    TGT = document.getElementById('linetext1');
    if (TGT && TGT.value === ''){
        alert('1行項目名-1を入力して下さい。');
        return false;
    }
    //以下は、既存コード。これと異なる場合があります。
    var ListTable = document.getElementById(LIST);
    var FileTarget;
    var ListCildOfTbody;

複数項目のチェックをする場合

必須チェックを行う項目が複数ある場合は、下記赤字のように、必要なだけ追記して下さい。

コピー 
function set_order(LIST){
    //既存の関数「set_order」の先頭に追加
    var TGT;
    TGT = document.getElementById('linetext1');
    if (TGT && TGT.value === ''){
        alert('1行項目名-1を入力して下さい。');
        return false;
    }
    TGT = document.getElementById('linetext2');
    if (TGT && TGT.value === ''){
        alert('1行項目名-2を入力して下さい。');
        return false;
    }
    //以下は、既存コード。これと異なる場合があります。
    var ListTable = document.getElementById(LIST);
    var FileTarget;
    var ListCildOfTbody;

※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 などの名前でファイルがある筈です。

関連記事

画像の追加（画像を増やす）方法

基本のマニュアル ホームページ画面
「すぐ使えるCMS」はテンプレートの編集でアップロードできる画像の個数を増やすことができます。画像の追加方法のご説明。

入力欄のサイズ変更方法

応用マニュアル 管理画面
「すぐ使えるCMS」管理用画面の入力欄のサイズ変更方法。

JavaScript でテキスト欄を選択リストにする

応用マニュアル 管理画面
フォームのテキスト欄に、選択肢のクリックで入力する方法。JavaScript のコードサンプル。

入力文字数の制限とカウンターの設定方法

応用マニュアル 管理画面
「すぐ使えるCMS」の入力欄に、強制的な文字数制限を設ける方法と、入力文字数のカウンターを付ける方法。

広告