レベル7フィールドの入力項目をカスタマイズする ①テキストのみ
カスタムフィールドメーカー
veilブロック
カスタムフィールド
目標
ブログのカスタムフィールドにメールアドレスを入力する欄を設置し、フッターに表示させましょう。
| 解説使用テーマ | beginner2020 |
|---|
Before
After
目次
カスタムフィールドメーカーを使って入力欄を作成する
まずはブログのカスタムフィールド内にメールアドレスの入力欄を設置します。a-blog cmsでは、カスタムフィールドメーカーを使うことで簡単に各種入力欄を作成することができます。
- カスタムフィールドメーカー
- 新設するカスタムフィールドのHTMLソースをブラウザ上で生成するツールを、カスタムフィールドメーカーといいます。カスタムフィールドメーカーでは、カスタムフィールドだけでなく、カスタムフィールドグループ・カスタムユニット・カスタムユニット（フィールドグループ）の計4種類を作成することができます。カスタムフィールドメーカーについての詳細は カスタムフィールドメーカーについて | カスタムフィールド | ドキュメント | a-blog cms developer をご参照ください。
今回のハンズオンでは、カスタムフィールドメーカーを使って下図のようにメールアドレスの入力欄を作成していきます。
まずは以下の手順でカスタムフィールドメーカーに移動しましょう。
- [管理ページ] をクリックする
- サイドメニュー内 [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリックする
- ガイドライン/ツール内 [カスタムフィールドメーカー] をクリックする
クイックサーチで「カスタムフィールドメーカー」と検索しても開くことができます。
今回はブログのカスタムフィールドに入力欄を新設するので、作成モードはデフォルトのまま「カスタムフィールド」に設定しておきます。入力欄の種類・タイトル・フィールド・ツールチップについて以下のように入力し、[生成] ボタンをクリックしてください。
| 入力欄の種類 | テキスト |
|---|---|
| タイトル | メールアドレス |
| フィールド | 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" value="{mail_address}" class="acms-admin-form-width-full" />
<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/field-base.html")
<!-- SEOの設定 -->
@include("/admin/blog/field-seo.html")
<!-- OGPの設定 -->
@include("/admin/blog/field-ogp.html")
<!-- 会社情報 -->
@include("/admin/blog/field-info.html")
<!-- SNSアカウントの設定 -->
@include("/admin/blog/field-sns.html")
<!-- アナリティクスの設定 -->
@include("/admin/blog/field-analytics.html")
<!-- Search Consoleの設定 -->
@include("/admin/blog/field-search-console.html")今回のハンズオンでは「会社情報」の項目内に入力欄を設置するので、field.html 内にインクルードされている会社情報のパスを参考に、作業するテンプレート field-info.html を開きます。そしてこのテンプレート内の文末に、先ほど生成したHTMLソースをコピー＆ペーストします。
/admin/blog/field-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" value="{mail_address}" class="acms-admin-form-width-full" />
<input type="hidden" name="field[]" value="mail_address" />
</td>
</tr>
</table>作業後は、ブログ管理画面内[カスタム設定]からメールアドレスの入力欄が新設されていることを確認しましょう。
現在はカスタムフィールドから生成したソースをそのまま使用しているので、幅などのスタイルが他の入力欄と異なっています。最後に仕上げとして、設置した入力欄のスタイルを既存のものに合わせて調節しましょう。生成したソースの変数を残しつつ、HTML属性を既存のものに習って差し替えていくと、以下のようになります。
<tr>
<th>メールアドレス
<i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i>
</th>
<td>
<input type="text" name="mail_address" value="{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-tel_time">メールアドレス</label><i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i></th>
<td>
<input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-large" />
<input type="hidden" name="field[]" value="mail_address" />
</td>
</tr>
<tr>
</table>
これで入力欄のスタイル調整が完了しました。
入力された値をフッターに表示する
ここからは、下図のように設置した入力欄の値をフッターに表示していきます。
まずは事前準備として、先ほど新設したカスタムフィールドにメールアドレスを入力しておきます。最終的にはここで入力した値がサイトに表示されることで、システムが正常に動作しているかどうか判断します。
| メールアドレス | info@exapmple.com |
|---|
それでは、出力情報を記載するテンプレート footer.html を開きましょう。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 tel:veil -->〜<!-- END tel: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 -->以上でテンプレートの作業は完了です。サイトのフッター部分に入力したメールアドレスが表示されていることを確認しましょう。
