カテゴリーリストモジュール（ Category_List ）を利用して、検索フォームを作る実装について書いてみます。カテゴリーリストモジュールは、子カテゴリーがあった際に入れ子で表示ができるようにするために少し複雑な動きをしています。

まずは、カテゴリーリストモジュールのスニペットを確認してみます。

<!-- BEGIN_MODULE Category_List -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
  <!-- BEGIN category:loop --><!-- BEGIN ul#front -->
  <ul class="acms-list-group">
  <!-- END ul#front --><!-- BEGIN li#front -->
    <li><!-- END li#front --><!-- BEGIN category:veil -->
      <a href="{url}" class="acms-list-group-item">{name}<!-- BEGIN amount:veil -->
        <span class="acms-badge acms-float-right">{amount}</span><!-- END amount:veil -->
      </a><!-- END category:veil --><!-- BEGIN li#rear -->
    </li><!-- END li#rear --><!-- BEGIN ul#rear -->
  </ul>
  <!-- END ul#rear --><!-- END category:loop -->
</div>
<!-- END_MODULE Category_List -->

上記のようなスニペットを利用して、以下のような HTML ができるようなことを考えてみます。

<form action="" method="POST">
  <select name="cid">
    <option>全て</option>
    <option value="2">お知らせ</option>
    <option value="3">製品情報</option>
    <option value="4">会社概要</option>
    <option value="6">お問い合わせ</option>
    <option value="7">採用情報</option>
    <option value="8">物件情報</option>
  </select>
  <input type="submit" name="ACMS_POST_2GET" value="検索">
</form>

フォームとしては実際には、以下のようになります。

普通に考えると、まずは以下のように実装するのではないかと思います。

<form action="" method="POST">
  <!-- BEGIN_MODULE Category_List -->
  <select name="cid">
    <option value="">全て</option>
  <!-- BEGIN category:loop -->
    <option value="{cid}">{name}</option>
  <!-- END category:loop -->
  </select>
  <!-- END_MODULE Category_List -->
<input type="submit" name="ACMS_POST_2GET" value="検索">
</form>

<select name="cid">
  <option value="">全て</option>
  <option value=""></option>
  <option value="2">お知らせ</option>
  <option value=""></option>
  <option value="3">製品情報</option>
  <option value=""></option>
  <option value="1">家庭用製品</option>
  <option value=""></option>
  <option value="5">業務用製品</option>
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
  <option value="4">会社概要</option>
  <option value=""></option>
  <option value="6">お問い合わせ</option>
  <option value=""></option>
  <option value="7">採用情報</option>
  <option value=""></option>
  <option value="8">物件情報</option>
  <option value=""></option>
  <option value=""></option>
</select>

方法としては IFブロックを利用して表示されて欲しくない部分は出ないようにします。例えば、{cid} が空ではない時という条件を設定したり

  <!-- BEGIN category:loop -->
    <!-- BEGIN_IF [{cid}/nem]-->
      <option value="{cid}">{name}</option>
    <!-- END_IF -->
  <!-- END category:loop -->

子カテゴリーがあるものがあった時に子カテゴリーを非表示にしたい場合を考え、階層の変数 {level} が 1 のものだけを表示する

  <!-- BEGIN category:loop -->
    <!-- BEGIN_IF [{level}/eq/1]-->
      <option value="{cid}">{name}</option>
    <!-- END_IF -->
  <!-- END category:loop -->

このような設定をします。

検索結果のページで select が選択したところが選択したままになるようにするためには、option に selected="selected" をつける必要があります。

今回は、option の中に IFブロックを書き、グローバル変数 %{CID} とカテゴリーリストモジュール内の {cid} との比較を行います。

<!-- BEGIN_IF [%{CID}/eq/{cid}] --> selected="selected"<!-- END_IF -->

1. スニペットを改造してみる
2. 空の optoin を非表示にする
3. selected="selected" の処理

を実装し、人が読みやすいようにテンプレートを書くと以下のようになります。

<form action="" method="POST">
  <!-- BEGIN_MODULE Category_List -->
  <select name="cid">
    <option value="">全て</option>
  <!-- BEGIN category:loop -->
    <!-- BEGIN_IF [{level}/eq/1]-->
    <option value="{cid}"
      <!-- BEGIN_IF [%{CID}/eq/{cid}] -->
        selected="selected"
      <!-- END_IF -->
    >{name}</option>
    <!-- END_IF -->
  <!-- END category:loop -->
  </select>
  <!-- END_MODULE Category_List -->
<input type="submit" name="ACMS_POST_2GET" value="検索">
</form>

a-blog cms のテンプレートは、必要がないところは消える仕様になっていますが、消える部分の外にある改行だけ有効になってしまうことから上記を実行すると

<form action="" method="POST">
  
  <select name="cid">
    <option value="">全て</option>
  
    
  
    
    <option value="2"
      
    >お知らせ</option>
    
  
    
  
    
    <option value="3"
      
    >製品情報</option>


（以下略）

のように空白だらけのソースコードになります。HTML として表側では改行や空白は関係ないので、このままでも構いませんが綺麗にした例もご紹介しておきます。

<form action="" method="POST">
  <!-- BEGIN_MODULE Category_List -->
  <select name="cid">
    <option value="">全て</option>
  <!-- BEGIN category:loop --><!-- BEGIN_IF [{level}/eq/1]-->  <option value="{cid}"<!-- BEGIN_IF [%{CID}/eq/{cid}] --> selected="selected"<!-- END_IF -->>{name}</option>
  <!-- END_IF --><!-- END category:loop --></select>
  <!-- END_MODULE Category_List -->
<input type="submit" name="ACMS_POST_2GET" value="検索">
</form>

この HTML であれば、以下のようなソースコードになります。

<form action="" method="POST">
  
  <select name="cid">
    <option value="">全て</option>
    <option value="2">お知らせ</option>
    <option value="3">製品情報</option>
    <option value="4">会社概要</option>
    <option value="6">お問い合わせ</option>
    <option value="7" selected="selected">採用情報</option>
    <option value="8">物件情報</option>
  </select>
  
<input type="submit" name="ACMS_POST_2GET" value="検索">
</form>

今回は、特殊なカテゴリーリストのループをシンプルにする方法と、現在表示している selected の対応についての紹介でした。

目次

ようこそa-blog cmsへ

ログインするには

まずはサブカラム右下にある [login] ボタンをクリックしてください。 もしくは、表示されているURLの語尾に /login を追記しても同じページが表示されます。

例）https://example.com/login

次に「ユーザーID/メールアドレス」「パスワード」の各欄に管理者が発行した情報を入力し、[ログイン] ボタンをクリックします。

パスワードを忘れてしまった場合は、パスワードを再発行しましょう。

[パスワードをお忘れですか？] をクリックして登録してあるメールアドレスを入力すると、パスワードを変更するためのリンクと新しいパスワードがメールで送られてきます。メールの内容に従って新しいパスワードでログインしてください。

これでログインは完了です。

ログイン中は、ヘッダーの直後とフッターの直前に灰色の管理ボックスが表示されます。サイトの運営は主にこの管理ボックスを使って行っていきます。

またヘッダー直後の管理ボックスにある [ログアウト] というボタンをクリックすることで、ログイン前の状態に戻ることもできます。

インストール時のサイトマップについて

テーマについて

チュートリアルでは、主にテーマ「beginner」を使います。「テーマ ディレクトリ名」を「beginner」に設定し、保存をしておきましょう。

ディレクトリー構造について

目標

目次

初期設定のページタイトルの仕様について

「スタッフ紹介」一覧ページのページタイトルに背景画像と説明文を設定する

おまけ：サイトタイトルを変更する