フォームでエントリーなどのカスタムフィールドやグローバル変数を渡すカスタマイズ
フォームの自由度の高さは 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" 等でフォームの項目の初期値として様々な変数を扱い、ユーザー側で変更可能にするカスタマイズも可能です。ぜひ、取り入れてみてください。
クイックサーチ(どこでも検索)
Ver. 2.8 よりログインしていると以下のようなポップアップが現れ、キーワード検索で色々な情報にアクセス出来るようになりました。
アクセス出来る情報
- ブログ
- エントリー
- カテゴリー
- モジュールID
- 管理画面メニュー
- ショットーカット(登録されているもの)
- モジュール変数表
- モジュールスニペット
- グローバル変数(拡張したグローバル変数を含む)
ショートカットキー
- Windows: Ctrl + k
- MacOS: ⌘K
モード
フリーキーワードで検索はそのまま、キーワードを入力すればいいですが、そのほかに3つのモードが用意されています。
スニペット検索モード | キーワードの最初に ;(セミコロン) を入力することにより、スニペットを検索できるようになります。 |
---|---|
変数表検索モード | キーワードの最初に :(コロン) を入力することにより、変数表を検索できるようになります。 |
グローバル変数検索モード | キーワードの最初に %(パーセント) を入力することにより、グローバル変数を検索できるようになります。 |
トップページでのページャー問題とその解決方法
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分間くらいの内容になっております。