【a-blog cms】テーマ実装に役立つ！便利な機能3選
このエントリーは「a-blog cms Advent Calendar」の18日目の記事です。
今回は、a-blog cmsのテーマ実装を行うなかでよく使っている便利な機能をいくつかピックアップしてご紹介します。
カスタムフィールドメーカー
a-blog cmsには「カスタムフィールドメーカー」というツールが搭載されています。
このツールはカスタムフィールドやカスタムユニットのコードをGUIで生成できる便利な機能なのですが、実はお問い合わせフォームなどのフォームの入力画面にも活用できることをご存知でしょうか？
a-blog cmsのフォームでは、項目に入力された値をカスタムフィールドと同じ形式で保持しているため、フォーム項目の追加にもカスタムフィールドメーカーが使えます。
特にラジオボタン・チェックボックス・セレクトボックスは手作業でコーディングすると間違いが起きやすいので、カスタムフィールドメーカーの利用がおすすめです。
バリデーションも一緒に設定できます🌟
Ver. 3.2では、カスタムフィールドメーカーがリニューアルされ、<table>のほかに<div>によるレイアウトを選べるようになったり、プレースホルダーを設定できるようになったりするのだとか…！楽しみです🥳
クイックサーチ機能
CMSにログインしている状態で、MacOSでは「⌘K」、Windowsでは「Ctrl + K」を押すとコマンドパレットが表示されます。
ログイン中であればどの画面からでも呼び出せてとっても便利！今回ご紹介するなかでも私が特に気に入っている機能です。
私は主に以下の目的で活用しています。
変数表の確認
「:（コロン）」のあとにモジュール名を入力しEnterキーを押すと、任意のモジュールの変数表を呼び出すことができます。
テーマ実装中に遭遇しがちな「このモジュールでこの変数使えたっけ？」という疑問をすぐに解決でき、制作スピードの向上に繋がります🏃♂️💨
スニペットの呼び出し
「;（セミコロン）」のあとにモジュール名を入力しEnterキーを押すと、スニペットを呼び出すことができます。
私は主にページャーなど、自分で実装すると手間がかかるパーツのソースコードをスニペットからコピーして活用しています。
カスタムフィールドメーカーへのクイックアクセス
カスタムフィールドメーカーにアクセスするには、本来「管理画面 > コンフィグセット > [任意のコンフィグセット] > カスタムフィールドメーカー」と遷移していく必要があります。利用頻度の高いツールなだけに、毎度この手順を踏むのは少し面倒に感じることも…😵💫
そんなときにもクイックサーチ機能が便利です！
コマンドパレットを開いて「custom」や「カスタム」などと入力すると、一発でカスタムフィールドメーカーにアクセスできます✨
カスタムフィールドメーカー以外にも、管理画面内のほとんどのメニューにコマンドパレットからアクセスすることができます。
Module_Field
Module_Fieldはカスタムフィールドを独立させ、様々な場所で使えるようにするモジュールです。
例えば、メインビジュアルのキャッチコピーをカスタムフィールドで管理したい場合を考えてみましょう。これをブログのカスタムフィールドとして用意すると、テーマによってはデフォルトで多くのフィールドが用意されているため、目的のフィールドを探すのが難しくなってしまいます。
Siteテーマのブログカスタムフィールド。
画面外にも「OGP設定」「会社情報」などたくさんの項目が並んでいます。
このようなとき、Module_Fieldを使用して、メインビジュアルのカスタムフィールドのみを独立して管理することができます。
以下に具体的な手順を説明します。
1. モジュールIDを用意する
まずはModule_FieldのモジュールIDを用意します。
今回は「MF_mainvisual」というIDで設定します。
2. モジュール管理画面用のテンプレートファイルを用意する
モジュールIDの管理画面の「カスタム設定」タブにカスタムフィールドの入力項目を表示するため、利用中のテーマに以下の2つのファイルを用意します。
- admin/module/field.html
- admin/module/id-[モジュールID].html
admin/module/field.html
以下のように記述します。
@include("/admin/module/id-%{MODULE_ID}.html")
この記述により、現在管理画面を表示しているモジュールID専用のテンプレートを呼び出すことができます。
admin/module/id-[モジュールID].html
モジュールIDごとに用意するテンプレートファイルです。
今回は「MF_mainvisual」というモジュールIDを設定したため、id-MF_mainvisual.html というファイル名で用意します。
今回はキャッチコピー設定用のカスタムフィールドを用意したいので、以下に記述にします。
<table class="acms-admin-table-admin-edit">
<tbody>
<tr>
<th>キャッチコピー</th>
<td>
<textarea name="mainvisual_copy" class="acms-admin-form-width-full">{mainvisual_copy}</textarea>
<input type="hidden" name="field[]" value="mainvisual_copy">
</td>
</tr>
</tbody>
</table>
ファイルが用意できたら、モジュールID「MF_mainvisual」の管理画面を確認します。
「カスタム設定」タブに以下のようにカスタムフィールドが表示されているはずです！
このカスタムフィールドに設定した内容は、以下のようにして表示できます。
<!-- BEGIN_MODULE Module_Field id="MF_mainvisual" -->
<!-- BEGIN mainvisual_copy:veil -->
<p>{mainvisual_copy}[nl2br4html]</p>
<!-- END mainvisual_copy:veil -->
<!-- END_MODULE Module_Field -->
このように、Module_Fieldを使うと特定のパーツ専用のモジュールを簡単に作成できます✨
私は以下のようなパーツの実装でよく活用しています。
- メインビジュアル（画像やキャッチコピー）
- CTAセクション（電話番号や営業時間、「お問い合わせボタン」のリンク先など）
- 会社情報（住所やメールアドレス、SNSアカウントのURLなど）
まとめ
今回はa-blog cmsのたくさんの機能のなかから、私が特に便利だと感じているお気に入りの機能を厳選してご紹介しました。
皆さんのお気に入りの機能はどの機能でしょうか？ぜひ教えてください👀
明日はアップルップルの宇井陸登さんの投稿です！
Discussion