この記事は最終更新日から2年以上経過しています。
お問い合わせフォームの上の内容をユニットで編集できるようにする
公開日：
更新日：
この記事は「a-blog cms Advent Calendar 2023」20日目の記事です。
「a-blog cms★のんびりラジオ 3」を聴きながら書いています。
今年も最高ですね。
また、桐田さんの記事を参考に公開予約機能で投稿しています。
「決まった日時に公開したい時に！a-blog cms の公開予約機能」
20日に無事お届けできているでしょうか。
記事で紹介されてるバージョンの公開予約機能いいですね！嬉しいです！
この記事では「お問い合わせフォームの上の内容をユニットで編集できるようにする」というカスタマイズをご紹介します。
まずは完成形から
Formモジュールを利用することでお問い合わせフォームの上のエリアでユニット編集が可能になります。
<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
<!-- END step -->
<!-- BEGIN step#reapply -->
<!-- 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>
<header class="acms-page-header page-header">
<h2 class="entry-title">スタッフブログ</h2>
</header>
<!-- ▼▼追加 -->
<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
<!-- END step -->
<!-- BEGIN step#reapply -->
<!-- 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 -->
<!-- 追加▲▲ -->
<!-- フォーム -->
</section>
エントリーボディの記述が足りません。
現在のテーマのルート階層にある_entry.htmlからエントリーボディーを呼び出す記述を持ってきます。
ここからがポイントですが、Formモジュール内の表示したい場所にエントリーボディーを設置します。
ここではフォームの初期表示状態とエラー表示状態の場合にユニットを表示するとしました。
<section>
<header class="acms-page-header page-header">
<h2 class="entry-title">スタッフブログ</h2>
</header>
<!-- ▼▼追加 -->
<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
<!-- END step -->
<!-- BEGIN step#reapply -->
<!-- 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 -->
<!-- 追加▲▲ -->
<!-- フォーム -->
</section>
これで、ユニットが表示できました。
「BEGIN step」の必要な箇所に記述する形ですね。
ユニット編集時はフォームを非表示にしたい場合はタッチモジュールで囲むと良いです。
確認用テンプレートも表示しても良いかもです。
<!-- BEGIN_MODULE Touch_NotEdit -->
<!-- フォーム -->
<!-- END_MODULE Touch_NotEdit -->
<!-- 確認用テンプレート -->
4.thanks.htmlの修正
最後に、thanks.htmlの中身を適宜修正してください。
まとめ
Formモジュールは別の場所でも使えるということを覚えておく便利です。
ではまた！
関連記事
この記事のハッシュタグ #a-blog cms から関連する記事を表示しています。
a-blog cmsで使えるTwigフィルター
この記事はa-blog cms Advent Calendar 2025 の2日目の記事です。11月の a-blog cms Training Camp 2025お疲れ様でした！今回、Twigのフィルターと a-blog cms の校正オプションについて発表させていただきました。Twig が使えるようになったことで、フィルターを校正オプションのように扱うことも可能になりました。Twig 側で公式に用意されているフィルターは全部で58種類あり、そのうち a-blog cmsで使用できるのは約39種類です。登壇資料ではすべての詳細をお伝えしきれなかったため、a-blog cmsで利用可能なTwigフィルターの使い方と使用例を、あらためてまとめてみました。公式では58種用意されている実際にa-blog cmsで使えるのは39種（既存の校正オプションとの重複を含む）Twigのフィルターはこちらから参照できます。まずは概要a-blog cm v3.2からテンプレートエンジンTwigが利用可能になりました。a-blog cmsには校正オプションというTwigのフィルターと同様の機能があります。Twigが利用可能になったことでTwigフィルターの機能も使えるようになります。従来の校正オプションも引き続き利用できますが、同名のフィルターはTwig側が優先されます。既存の校正オプションを使いたい場合は、acms_ プレフィックスを付けて明示的に使用しましょう。一方で、twig/string-extraパッケージなどTwig本体を拡張して追加するフィルターは利用できないようです。もし拡張フィルターに近い機能が必要な場合は、校正オプションの拡張として同様の処理を実装するのが良さそうです。拡張も今まで通り校正オプションの拡張でいけるそうです。
スタッフブログ
Training Camp後、セッションを振り返る
こんにちは。今年もAdvent Calendarの時期がやってきました。 この記事は a-blog cms Advent Calendar 2024 の9日目の記事です。 よろしくお願いします！ 先月、ベースキャンプ名古屋にて「a-blog cms Training Camp 2024」が開催されました。久々のリアルでお会いできた人も多く懐かし楽しかったです！ 僕は事例紹介のセッションで構築したサイトで使用したカスタマイズ方法をご紹介しました。 本記事では、a-blog cms Training Camp 2024で次のバージョンの機能を聞いた内容を取り込みつつ、事例紹介のセッション一部を振り返ってみたいと思います。 1.カスタムユニットフィールドグループを開閉させる カスタムユニットフィールドグループは繰り返しの情報が登録できて便利ですが 情報が多くなってくるとどうしても長くなってしまい順番の入れ替えが大変だったりします。 そこで、管理画面をスッキリさせ、編集がしやすいカスタムフィールドの実装方法を紹介しました。 カスタムフィールドメーカーで作成した場合、tr.sortable-item の td にある table に「details と summary」を追加します。 2箇所追加する必要があり、最初の箇所にはタイトルなどを入れておくと、閉じた状態でも内容がわかりやすくなります。 ← 追加 {titleのカスタムフィールド名} ← 追加 ← 追加 ... ← 追加 保存されていません ← 追加 ← 追加 ... 2.ユニットグループで画像のサイズを揃える ユニットは画像を一括で登録できて便利なのですが、画像のサイズがバラバラの場合は、デコボコになってしまいます。 アップロードする画像やユニットのサイズで調整したできますが、少し手間がかかってしまいます。 そこで、簡単に画像サイズを揃える方法を紹介しました。 管理画面の「編集設定」から、ユニットグループにクラスとラベルを追加します。 例えば次のように設定します。 クラス： acms-col-md-4 is-acms-col-gallery ラベル： 画像ギャラリー 次に、CSSに以下のクラスを追加します。 その後、エントリーのユニットグループで「画像ギャラリー」を選択すればOKです。 .is-acms-col-gallery [class*=column-media] { margin-bottom: var(--var-scale-1); } .is-acms-col-gallery img { aspect-ratio: 3/2; object-fit: cover; } 3.管理画面のカスタムーフィールド選択項目をわかりやすくする 管理画面で選択する際にテキストだけだと変更した場合の表示イメージが想像しづらいです。 その場合、変更後をイメージできる画像を設置するだけでもグッとわかりやすくなります。 ← 追加 背景画像 ← 追加 ... まずカスタムフィールドでチェックボックスを準備します。 その後、親に`.custom-radio-box`というクラスを追加して装飾をしています。 4.同じコードを繰り返し書くのが大変な時は「includeで変数を渡す」 大部分が同じコードはinclude文を使用して変数を渡すことで効率的に再利用できます。 例えば、次のような「○△×」など選択するフィールドを作成したい場合、そのまま書くと1月から12月までパターンを3つ書く必要があり大変な作業となります。 しかし、コードの中身を見るとカスタムフィールドの値が違うだけで大部分のコードは同じとなっていました。 この場合、インクルード文を使用してデータを受け渡すことで作成可能です。 このように重複したコードは、データを表示するテンプレートと値を渡すテンプレートに分けることで簡潔にまとめることができます。 ですが、これも今のバージョンの話、バージョン3.2からはテンプレートエンジンとしてTwigが導入予定ですのでよりプログラム風にコードを書くことができます。 Twigで書き直すとこのようになります。かなり省略できますね。 ソースコードも短くなりファイル間のデータ受け渡しも不要になりました。 今回Twigに書き直したコードは少し複雑ですが、もっと簡単に気軽に使えますので、ぜひ導入してみてください。 以上、「a-blog cms Training Camp 2024」の内容を含め発表した内容をまとめてみました。 また来年キャンプでお会いしましょう！
スタッフブログ
