フォームの自由度の高さは a-blog cms の特長のひとつです。このエントリーでは、そのカスタマイズの一例として、ユーザーがフォームに入力したフィールド以外の変数の渡し方を解説します。エントリーフィールド、カテゴリーフィールド、ブログフィールドなどのカスタムフィールド、クエリ変数やグローバル変数をフォームの変数として扱えるようにします。

変数を追加するテンプレートの場所

フォームを入力するテンプレートに追加します。公式テーマの site や beginner では /contact/form/input.html になります。初期の入力画面と step#reapply に共通でインクルードされ、追加した変数を途中のステップで表示することもできるようになります。

エントリーフィールドをフォームの変数として追加する

エントリーにフォームがあり、そのエントリーのカスタムフィールドを渡したい場合には、下記のようにコードを追加します。

<!-- BEGIN_MODULE Entry_Field -->

<input type="hidden" name="area" value="{area}">
<input type="hidden" name="field[]" value="area">

<input type="hidden" name="price" value="{price}">
<input type="hidden" name="field[]" value="price">

<!-- END_MODULE Entry_Field -->

area 及び price というエントリーカスタムフィールドがフォームに渡されます。

カテゴリー、ブログ、ユーザーのカスタムフィールドをフォームの変数として追加する

カテゴリー、ブログのカスタムフィールドの場合も、エントリーの場合と同様、フォームに渡すことができます。また、ログインしているユーザーに関しては、ユーザーのカスタムフィールドを渡すこともできます。その場合 ctx="uid/%{SESSION_USER_ID}" を User_Field モジュールに追加します。

<!-- BEGIN_MODULE User_Field ctx="uid/%{SESSION_USER_ID}" -->

<input type="hidden" name="gender" value="{gender}">
<input type="hidden" name="field[]" value="gender">

<!-- END_MODULE User_Field -->

gender というユーザーカスタムフィールドがフォームに渡されます。もちろん {name} や {mail} などのフィールドも渡せるので、ログインしたユーザーであればフォームの項目にいちいち入力させないといったカスタマイズも可能です。

グローバル変数をフォームの変数として追加する

グローバル変数はそのままでメールの返信テンプレートに使用できます。公式テーマでも %{BLOG_NAME} などのグローバル変数が使われています。拡張したグローバル変数の場合も同様です。しかし、グローバル変数もフォームの変数として追加する必要があるケースがあります。

• クエリストリングから作成されたグローバル変数の場合
• Google スプレッドシートと連携する場合

フォームへのリンクにクエリストリングを持たせておけば、どの媒体、どのページからの遷移であるかを確認するなどの使い方ができます。また、Google スプレッドシートとの連携はフォームの件数や項目が多い場合の管理に便利です。

グローバル変数をフォームの変数として追加する書き方は次のとおりです。

<input type="hidden" name="global_var" value="%{GLOBAL_VAR}">
<input type="hidden" name="field[]" value="global_var">

以上、今回は type="hidden" で変数を渡すケースを解説しましたが、もちろん type="text" 等でフォームの項目の初期値として様々な変数を扱い、ユーザー側で変更可能にするカスタマイズも可能です。ぜひ、取り入れてみてください。

a-blog cms LIVE Vol.3 の「トップページでのページャー問題とその解決法を初心者に紹介」で紹介した内容をブログに残しておきます。

ウェブサイトのトップページのコンテンツとして、上記のように2つのモジュールに対してページャーを用意するような実装については、a-blog cms では残念ながらできない実装となります。

その理由としては、どちらのモジュールのページャーをクリックしても、 https://domain.com/page/2/ のような URL となり、2つのモジュールが次のページに進んでしまいます。

通常は、以下のように検索フォームを作るところを

<form action="" method="post">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

form タグに class="js-post_include" を追加し、実行後の表示する際に必要な条件と、テンプレートを指定する事でページの遷移無しに表示させることができるようになります。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
  <input type="text" name="keyword" value="" size="15" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="hidden" name="tpl" value="include/entry/body.html" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

上記は、検索フォームのサンプルでページャーではありませんが、ページャーとして実装すると以下のような表示になります。

以下のコードを利用する事で、次に表示させたいページの情報をモジュールに渡すことができます。

<!-- BEGIN forwardLink -->
 <input type="hidden" name="page" value="{forwardPage}" />
<!-- END forwardLink -->

こんなフォームがあった際のページャーのサンプルを共有しておきます。

ポイントとしては、検索結果を表示させるには Field_Search モジュール を利用すること。チェックボックスの条件については、配列としてマークアップする必要がある。 name="blood" ではなく name="blood[]" と書き、blood:loop ブロックを用意し、複数件データがあれば複数件のタグを生成するように実装すること。

<!-- BEGIN forwardLink -->
<form action="" method="post" class="js-post_include" style="text-align: center" >
  <input type="hidden" name="tpl" value="/include/member/summary-custom-post_include-more.html" />
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="hidden" name="page" value="{forwardPage}" />
 
  <!-- BEGIN_MODULE Field_Search -->
  <input type="hidden" name="namae" value="{namae}" />
  <input type="hidden" name="field[]" value="namae" />
  <input type="hidden" name="namae@operator" value="lk" />
 
  <input type="hidden" name="gender" value="{gender}" />
  <input type="hidden" name="field[]" value="gender" />
 
  <input type="hidden" name="pref" value="{pref}" />
  <input type="hidden" name="field[]" value="pref" />
 
  <!-- BEGIN blood:loop -->
  <input type="hidden" name="blood[]" value="{blood}" />
  <!-- END blood:loop -->
  <input type="hidden" name="field[]" value="blood" />
 
  <!-- END_MODULE Field_Search -->
 
  <input type="submit" name="ACMS_POST_2GET" value="もっと見る" class="acms-admin-btn acms-admin-btn-large" />
</form>
<!-- END forwardLink -->

初心者でない人だったとしても、Ver. 2.11.25 以降は、新規にインストールすると tplコンテキスト の設定が無効になるような設定になりました。 「ポストインクルードの準備」が必要になったということだけ覚えておいてください。

• ポストインクルードの準備

詳しくは、実際の動画で説明をご覧ください。 全部で 26分間くらいの内容になっております。