スタッフブログ
お問い合わせフォームの上の内容をユニットで編集できるようにする
この記事は「a-blog cms Advent Calendar 2023」20日目の記事です。
「a-blog cms★のんびりラジオ 3」を聴きながら書いています。
今年も最高ですね。
また、桐田さんの記事を参考に公開予約機能で投稿しています。
「決まった日時に公開したい時に！a-blog cms の公開予約機能」
20日に無事お届けできているでしょうか。
記事で紹介されてるバージョンの公開予約機能いいですね！嬉しいです！
この記事では「お問い合わせフォームの上の内容をユニットで編集できるようにする」というカスタマイズをご紹介します。
まずは完成形から
Formモジュールを利用することでお問い合わせフォームの上のエリアでユニット編集が可能になります。
<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
@include("/include/module/Entry_Body/body.html", {"module_id": "body_no_date"})
<!-- END step -->
<!-- BEGIN step#reapply -->
@include("/include/module/Entry_Body/body.html", {"module_id": "body_no_date"})
<!-- END step#reapply -->
<!-- BEGIN step#confirm --><!-- END step#confirm -->
<!-- BEGIN step#result --><!-- END step#result -->
<!-- BEGIN step#forbidden --><!-- END step#forbidden -->
<!-- BEGIN step#repeated --><!-- END step#repeated -->
<!-- END_MODULE Form -->demoサイトを参考にお問い合わせフォームを振り返る
a-blog cmsでお問い合わせフォームを作る場合どのように作成するでしょうか。
demoサイトを見るとテーマテンプレートにcontactのカテゴリーと同名のディレクトリを作成してフォームを設置しています。
また、気軽に編集したい内容はカテゴリーのカスタムフィールドの「お問い合わせの設定」で設定しているようです。
テンプレート側
カテゴリー設定画面
カテゴリー詳細画面
この記事でできるカスタマイズ内容は、「お問い合わせの設定」のようなカテゴリーのカスタムフィールドをユニットに変えるイメージです。
もちろんカスタムフィールドを利用しても十分カスタマイズ可能ですが、入力フィールドが固定されますので、ここでは自由度の高いユニットを利用できるようにしてみましょう。
実装
おおまかにsiteテーマのテンプレートのコードを参考にしていますが、細かい箇所は導入するサイトによって調整してください。
1.エントリーの作成
お問い合わせカテゴリーと同名で「ファイル名」が空のエントリー作成します。
「ファイル名」が空のエントリーは初回では作成できないので作成後、空にして再保存してください。
エントリー名を空にするとカテゴリーのトップとして扱われます。
エントリー名を空にする理由はこちら
2.エントリーのテンプレート用にリネーム
ユニットが表示されます。
しかし、/contact/の表示からフォーム項目がなくなりました。
URLはカテゴリー一覧を表示していますが、
先ほど作成したエントリーを親のテンプレートで表示している状態です。
テンプレート名を次に変更します。
「contact/index.html」を「contact/_entry.html」に変更
これでフォームが表示できるようになりました。
3.ユニットを追加
フォームは表示できましたがユニットが消えました。
ここからフォームの上にユニットを表示させます。
現在の_entry.htmlは次のようになっています。
@section(main)
<section>
<header class="acms-page-header page-header">
<h2 class="entry-title">%{CATEGORY_NAME}</h2>
</header>
<!-- フォーム -->
@include("/contact/form/main.html")
</section>
@endsection
エントリーボディの記述が足りません。
現在のテーマのルート階層にある_entry.htmlからエントリーボディーを呼び出す記述を持ってきます。
@include("/include/entry/body.html", {"module_id": "body_no_date"})
ここからがポイントですが、Formモジュール内の表示したい場所にエントリーボディーを設置します。
ここではフォームの初期表示状態とエラー表示状態の場合にユニットを表示するとしました。
@section(main)
<section>
<header class="acms-page-header page-header">
<h2 class="entry-title">%{CATEGORY_NAME}</h2>
</header>
<!-- ▼▼追加 -->
<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
@include("/include/module/Entry_Body/body.html", {"module_id": "body_no_date"})
<!-- END step -->
<!-- BEGIN step#reapply -->
@include("/include/module/Entry_Body/body.html", {"module_id": "body_no_date"})
<!-- END step#reapply -->
<!-- BEGIN step#confirm --><!-- END step#confirm -->
<!-- BEGIN step#result --><!-- END step#result -->
<!-- BEGIN step#forbidden --><!-- END step#forbidden -->
<!-- BEGIN step#repeated --><!-- END step#repeated -->
<!-- END_MODULE Form -->
<!-- 追加▲▲ -->
<!-- フォーム -->
@include("/contact/form/main.html")
</section>
@endsection
これで、ユニットが表示できました。
「BEGIN step」の必要な箇所に記述する形ですね。
ユニット編集時はフォームを非表示にしたい場合はタッチモジュールで囲むと良いです。
確認用テンプレートも表示しても良いかもです。
<!-- BEGIN_MODULE Touch_NotEdit -->
<!-- フォーム -->
@include("/contact/form/main.html")
<!-- END_MODULE Touch_NotEdit -->
<!-- 確認用テンプレート -->
@include("/include/check-seo.html")4.thanks.htmlの修正
最後に、thanks.htmlの中身を適宜修正してください。
まとめ
Formモジュールは別の場所でも使えるということを覚えておく便利です。
ではまた！
関連するタグ
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
ましじめのスキルが必要ですか？
遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートいたします。