レベル7フィールドの入力項目をカスタマイズする ①テキストのみ
カスタムフィールドメーカー
veilブロック
カスタムフィールド
目標
ブログのカスタムフィールド内に入力したメールアドレスをフッターに表示しましょう。
| 解説使用テーマ | beginner2018 |
|---|
Before
After
目次
カスタムフィールドメーカーを使って入力欄を作成する
まずはブログのカスタムフィールド内にメールアドレスの入力欄を設置します。a-blog cmsでは、カスタムフィールドメーカーを使うことで簡単に各種入力欄を作成することができます。
- カスタムフィールドメーカー
- 新設するカスタムフィールドのHTMLソースをブラウザ上で生成するツールを、カスタムフィールドメーカーといいます。カスタムフィールドメーカーの作成モードは、カスタムフィールドだけでなく、カスタムフィールドグループ・カスタムユニット・カスタムユニット（フィールドグループ）の計4種類があり、a-blog cmsで新設する入力欄についてほとんどの場合で使用できます。
今回のハンズオンでは、カスタムフィールドメーカーを使って下図のようにメールアドレスの入力欄を作成していきます。
まずは以下の手順でカスタムフィールドメーカーに移動しましょう。
- [管理ページ] をクリックする
- メニュー内 [コンフィグ] をクリックする
- ガイドライン/ツール内 [カスタムフィールドメーカー] をクリックする
今回はブログのカスタムフィールドに入力欄を新設するので、作成モードはデフォルトのまま「カスタムフィールド」に設定しておきます。入力欄の種類・タイトル・フィールド・ツールチップについて以下のように入力し、[生成] ボタンをクリックしてください。
| 入力欄の種類 | テキスト |
|---|---|
| タイトル | メールアドレス |
| フィールド | mail_address |
| ツールチップ | メールアドレスを入力します。 |
このフィールドで入力された英数字 mail_address が新設する入力欄の変数になります。またツールチップは説明文の設定になるので、カスタムフィールドを作成するにあたっての必須項目ではありません。
以上の作業で、下記のような入力用ソースが生成されます。
<table class="acms-admin-table-admin-edit">
<tr>
<th>メールアドレス<i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i></th>
<td><input type="text" name="mail_address" class="acms-admin-form-width-full" value="{mail_address}"><input type="hidden" name="field[]" value="mail_address"></td>
</tr>
</table>次に、生成した入力用HTMLソースを貼り付けるテンプレートを開きます。a-blog cmsでは、管理画面のテンプレートは「admin」というフォルダで管理しています。
a-blog cmsでは、admin内に「blog」「category」「entry」などフィールド別のファイルを用意して、それぞれが内包する field.html へ複数のテンプレートをインクルードしています。まずは以下のディレクトリへ移動し、field.html を開きましょう。
/admin/blog/field.html
<!-- サイト設定 基本 -->
@include("/admin/blog/base.html")
<!-- SEOの設定 -->
@include("/admin/blog/seo.html")
<!-- OGPの設定 -->
@include("/admin/blog/ogp.html")
<!-- 会社情報 -->
@include("/admin/blog/info.html")
<!-- SNSアカウントの設定 -->
@include("/admin/blog/sns.html")
<!-- アナリティクスの設定 -->
@include("/admin/blog/analytics.html")
<!-- Search Consoleの設定 -->
@include("/admin/blog/search-console.html")今回のハンズオンでは「会社情報」の項目内に入力欄を設置するので、field.html 内にインクルードされている会社情報のパスを参考に、作業するテンプレート info.html を開きます。そしてこのテンプレート内の文末に、先ほど生成したHTMLソースをコピー＆ペーストします。
/admin/blog/info.html
<table class="acms-admin-table-admin-edit">
<tr>
<th>メールアドレス<i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i></th>
<td><input type="text" name="mail_address" class="acms-admin-form-width-full" value="{mail_address}"><input type="hidden" name="field[]" value="mail_address"></td>
</tr>
</table>作業後は、ブログ管理画面内[カスタム設定]からメールアドレスの入力欄が新設されていることを確認しましょう。
現在はカスタムフィールドから生成したソースをそのまま使用しているので、幅などのスタイルが他の入力欄と異なっています。最後に仕上げとして、設置した入力欄のスタイルを既存のものに合わせて調節しましょう。生成したソースの変数を残しつつ、HTML属性を既存のものに習って差し替えていくと、最終的には以下のようになります。
<tr>
<th><label for="input-text-mail_address">メールアドレス</label><i data-acms-tooltip="メールアドレスを入力します。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
<td>
<input type="text" name="mail_address" value="{mail_address}" id="input-text-mail_address" class="acms-admin-form-width-large" />
<input type="hidden" name="field[]" value="mail_address" />
</td>
</tr>また位置についても、<table>タグ内に移動します。
<table class="adminTable acms-admin-table-admin-edit">
<!-- 省略 -->
<tr>
<th><label for="input-text-mail_address">メールアドレス</label><i data-acms-tooltip="メールアドレスを入力します。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
<td>
<input type="text" name="mail_address" value="{mail_address}" id="input-text-mail_address" class="acms-admin-form-width-large" />
<input type="hidden" name="field[]" value="mail_address" />
</td>
</tr>
</table>
これで入力欄のスタイル調整が完了しました。
入力された値をフッターに表示する
ここからは、下図のように設置した入力欄の値をフッターに表示していきます。
まずは事前準備として、先ほど新設したカスタムフィールドにメールアドレスを入力しておきます。最終的にはここで入力した値がサイトに表示されることで、システムが正常に動作しているかどうか判断します。
| メールアドレス | info@exapmple.com |
|---|
それでは早速今回作業するテンプレート footer.html を開きましょう。フッターのテンプレートはインクルードされているので、このパスについては _top.html などフッターが表示されている任意のテンプレートに記載されています。
<!-- フッター -->
@include("/include/footer.html")footer.html を開くと、2行目から30行目にかけてソースがBlog_Fieldモジュールで囲まれているのが確認できます。
<!-- BEGIN_MODULE Blog_Field --> 省略 <!-- END_MODULE Blog_Field -->
a-blog cmsはブログのカスタムフィールドで使用される変数を、このBlog_Fieldモジュールを使って読み取ります。したがって、新しい出力ソースはこの表記の内部に追記していきます。
また今回のハンズオンには該当しませんが、ブログのカスタムフィールドで使用する変数を読み取るもう1つの条件として、Entry_Body や Entry_Summary モジュール内の blogField ブロックも使うことができます。これらについて、詳しくはカスタムフィールド | ドキュメント | a-blog cms developerをご覧ください。
次に現在フッターに表示されている会社情報のソースを確認します。
<!-- BEGIN company_name:veil --><dt class="company-name">{company_name}</dt><!-- END company_name:veil -->
<!-- BEGIN zip:veil --><dd class="company-detail">〒{zip}</dd><!-- END zip:veil -->
<!-- BEGIN address:veil --><dd class="company-detail">{address}</dd><!-- END address:veil -->
<!-- BEGIN tel:veil --><dd class="company-detail">TEL : <a href="tel:{tel}">{tel}</a></dd><!-- END tel:veil -->ここでは <!-- BEGIN zip:veil --> などの veil ブロックが使用されています。
- veilブロック
- a-blog cmsでは、変数を用いた要素を veil ブロックで囲むことで、部分的に要素の表示/非表示を制御することができます。変数が入力されていない場合はブロックごと要素を非表示にするため、値が空の属性を含む不適切なソースが読み込まれることがなくなり、データの最適化にも繋がります。
今回はこの会社情報内の電話番号以下に、メールアドレスの出力ソースを追記していきます。既存の表示スタイルをコピー＆ペーストし、これを型として値や変数をメールアドレスで使用しているものに差し替えましょう。
<!-- BEGIN mail_address:veil --><dd class="company-detail">MAIL : {mail_address}</dd><!-- END mail_address:veil -->会社概要の出力ソースの全体像は以下のようになります。
<!-- BEGIN company_name:veil --><dt class="company-name">{company_name}</dt><!-- END company_name:veil -->
<!-- BEGIN zip:veil --><dd class="company-detail">〒{zip}</dd><!-- END zip:veil -->
<!-- BEGIN address:veil --><dd class="company-detail">{address}</dd><!-- END address:veil -->
<!-- BEGIN tel:veil --><dd class="company-detail">TEL : <a href="tel:{tel}">{tel}</a></dd><!-- END tel:veil -->
<!-- BEGIN mail_address:veil --><dd class="company-detail">MAIL : {mail_address}</dd><!-- END mail_address:veil -->以上でテンプレートの作業は完了です。サイトのフッター部分に入力したメールアドレスが表示されていることを確認しましょう。
