カスタムフィールドの基本

カスタムフィールドとは

エントリーや、カテゴリー・ブログ・ユーザーに対して独自のデータを追加することができる機能です。追加したデータは表示や検索用のキーとして利用されます。例えば、ひとつの商品を紹介するエントリーに対して「値段・発売日・サイズ」などの情報をカスタムフィールドとして追加することで、商品情報のデータベースを作ることができます。

カスタムフィールドのタグの基本

カスタムフィールドはフォームタグのようにHTMLベースで書くことができます。値段を入れるカスタムフィールドを追加してみましょう。カスタムフィールドの変数は price にします。

<input type="text" name="price" value="{price}" />
<input type="hidden" name="field[]" value="price" />

HTMLベースなので入力画面を入力しやすいレイアウトできます。

カスタムフィールドでできること

カスタムフィールドは以下のような入力フォームが追加できます。

  • テキスト(テキスト、テキストエリア、チェックボックス、ラジオボタン、セレクトボックス)
  • 画像
  • ファイル
  • 地図(GoogleMaps)

テキスト置換機能を使ってテキストの修正箇所を一括変更しよう

「このテキスト部分をサイトで一括して置換したいけど、エントリーが多すぎて一つずつ修正するのが大変…。」

皆さんの中に、このような経験をされた方はいらっしゃいませんか?そんな時はa-blog cmsのデータ修正機能を使ってみましょう。Ver. 2.8 まではプロフェッショナル版以上でのみ利用可能でしたが、Ver. 2.9ではスタンダード版にも搭載され、誰でも手軽に利用できるようになりました。操作はブラウザのみで行っていただけますので、サイト運用時の一つのテクニックとしてぜひご活用ください。

使用テーマsite2018

課題

平成元年(1989年)と今年(2018年)のニュースがランダムに並んだエントリーがあります。しかしこれらは全て、本文中では「1989年」と表記されてしまっています。今回はこの中でも2018年のニュースについて、西暦部分をデータ修正機能「テキスト置換」を利用して正しい表記に置き換えていきます。


事前準備

まずは平成元年(1989年)と今年(2018年)のニュースがランダムに並んだエントリーを以下の手順で作成します。

1. ハンズオン専用のカテゴリーを作成する

カテゴリー設定画面より、カテゴリー名を[ハンズオン]、コードネームを[handson]と設定し、このハンズオン専用のカテゴリーを新規作成しましょう。


2. 3種類のファイル準備する

①平成元年(1989年)と今年(2018年)のニュースを一覧にしたCSVファイル

以下で配布するsample.csvをダウンロードしてください。


ファイルを開く

sample.csv

②データ内で使用しているカスタムフィールドを入力するテンプレートファイル

sample.csv は、ニュースタイトルが {entry_title} 、本文が {contents} として読み込まれる仕様になっています。


本文の {contents} は a-blog cms 内で定義されていない値になるので、カスタムフィールドとして登録しなければなりません。

以下の階層に handson.html を新規作成し、入力用ソースを記述しましょう。

例)/admin/entry/field/handson.html

<table class="acms-admin-table-admin-edit">
<tr>
<th>ニュース本文</th>
<td><input type="text" name="contents" class="acms-admin-form-width-full" value="{contents}"><input type="hidden" name="field[]" value="contents"></td>
</tr>
</table>

③データ内で使用しているカスタムフィールドを出力するテンプレートファイル

次に {contents} 部分を表示するテンプレートファイルを作成します。以下の階層に entry_handson.html を新規作成し、出力用ソースを記述しましょう。

例)include/field/entry_handson.html

<p>{contents}</p>

3. インポート機能を使ってデータをエントリーに落とし込む

先ほどダウンロードしたCSVファイルを、インポート機能を使ってエントリー登録します。管理画面>インポート より[CSV]を選択し、インポート先カテゴリーを[ハンズオン]に設定してインポートを実行しましょう。



ハンズオンカテゴリーに50件のエントリーが登録されました。以上で事前準備は完了です。


実践

ここからは、実際にテキスト置換機能を使ってテキストの修正箇所を一括変更していきます。テキスト置換機能は、管理ページ>データ修正>テキスト置換 より利用することができます。



上図のように、「対象フィールド」「対象文字 / 置換文字」項目より置換するテキストの情報を指定してきます。また対象フィールドで [カスタムフィールド] を選択すると「フィード指定」という入力欄が追加表示され、対象とする変数を入力することもできます。

今回は {contents} で定義した本文内のテキストを置換の対象とするため、置換するテキストの情報は以下のように設定します。

対象フィードカスタムフィールド
フィード指定contents
対象文字 / 置換文字1989 → 2018

[チェック] をクリックすると下図のように該当するテキストの一覧が表示されます。テキスト内で黄色の網掛けにより強調されている部分が置換対象です。


この中で修正に該当するテキストについてフィード名の左側にあるチェックを打ち、全てに打ち終えたら、最後は [チェックをつけたものを置換] をクリックしてください。


上図のようにテキストが置換できました。

今回のハンズオンでは、平成元年(1989年)と今年(2018年)のニュースをそれぞれ25件ずつ用意しています。正解は以下のファイルにて表記してありますので、答え合わせの際に是非ご活用ください。


ファイルを開く

sample_answer.csv

複数ステップのフォーム作成とHTMLメールを送ってみよう

このハンズオンでは、複数ステップのフォーム作成と、Ver.2.9よりSite2018テーマのお問い合わせフォームのデフォルト設定になったHTMLメールについて学習していきます。

このハンズオンで行うこと

  • 複数ステップフォームの作成では、現在すでにテーマ内に用意されている「お問い合わせ情報」と「お客様情報」を分割して複数ステップのフォームを作成する
  • HTMLメールでは必要な設定をしてすこしHTMLとスタイルを修正する

HTMLメールのテンプレートはsite2018テーマにありますので、このハンズオンではsite2018テーマをベースに解説していきます。(beginner2018テーマをお使いの方はテーマの変更をしなくてもファイルがあれば同じ手順でできます。site2018テーマの中から移動する必要があるファイルについては手順と合わせて順番に解説していきます)

複数ステップフォームの作成

以下の流れで複数ステップフォームを作成する方法についてお伝えしていきます。

  • input.htmlの分割
  • step.htmlでステップを追加
  • main.htmlでステップを追加
  • takeoverの記述を追加

完成図


a-blog cms Ver. 2.1.0 public βを公開しました

a-blog cms Ver. 2.1.0 public β

a-blog cmsの時期バージョンであるa-blog cms Ver. 2.1.0のパブリックベータをダウンロード出来るようにしました。 このバージョンは開発版になりますので、運用中のサイトにはインストールしないで下さい。