カスタムフィールドの基本的な使い方(後編)

カスタムフィールドの情報を表示する

カスタムフィールドの情報を表示するには、フィールドモジュールを使う方法と、各ビルトインモジュールを使う方法があります。

フィールドモジュールを使う方法

フィールドモジュールの中にカスタムフィールドの変数を記述すると内容を出力することができます。

テンプレートエンジン IFブロック

この記事は開発段階のものです。最終的な仕様のIFブロックのドキュメントの記事をご覧ください。

テンプレートエンジン改良

次期バージョン(執筆時1.7.0最新)でテンプレートエンジンの改良を考えています。 実はもう動いているものがあったりするのですが。 そこで今回は現在出来ているものを紹介したいと思います。

IFブロック

今回のテンプレートエンジンの改良点はIF(条件分)を使用できるようにした事です。 if文がなくても十分にサイトを作製する事は出来るのですが、どうしても細かい所で if文が必要な場合があります。そこで今回実装してみました。

記述方法

<!-- BEGIN_IF [%{PAGE}/gte/5] -->
5ページ以上です
<!-- ELSE -->
4ページ以下です。
<!-- END_IF -->

変数表とスニペット

モジュールの記述のための情報

モジュールには出力する内容によって様々なものがあるため、全く何もない状態からテンプレート上に正確に記述していくのは大変です。そこで、a-blog cmsではこの制作者向け情報サイトや、a-blog cmsの管理ページ内にも該当モジュール内で使用できる変数表、基本的な記述方法となるスニペットを用意しています。


カスタマイズ管理>コンフィグ

カスタマイズ管理>コンフィグ


a-blog cmsの管理ページで左側メニュー内、カスタマイズ管理>コンフィグへ進むと、各モジュールの設定への一覧がありますが、各モジュールの右側に変数表とスニペットへのリンクがあります。
この各リンクから、それぞれ変数表、スニペットが別ウィンドウで開きます。


変数表


Entry_Bodyモジュールの変数表

Entry_Bodyモジュールの変数表


各モジュールの変数表では、どのブロック内にどのような変数を表示させることができるかをまとめています。
いずれも白背景の二重線で囲まれた部分が変数名となっており、モジュール内の各ブロックで使えることを表しています。変数の具体的な内容は表中に日本語で補足しています。


スニペット


Entry_Bodyモジュールのスニペット

Entry_Bodyモジュールのスニペット


スニペットとは、よく使用するコードをまとめたデータです。各モジュールの出力に必要なコードがスニペットとして用意してありますので、必要に応じてコピー&ペーストや独自に変更を加えてお使いください。

独自のテンプレートを作成する場合には、元になるHTMLファイルにこれら各モジュールのスニペットを貼り付けて、必要な形に整形していくという流れを取るとスムーズに制作できるでしょう。


Dreamweaverにスニペットを追加する


a-blog cmsのパッケージには「omake」フォルダ内にDreamweaverで使用する拡張機能ファイルをご用意しています。Dreamweaverのスニペットパネルにa-blog cmsで使用する各モジュールのスニペットを追加するファイルとなります。この拡張機能を使うことで、Dreamweaver上で1クリック(ドラッグ&ドロップ)でスニペットを追加できるようになります。管理ページ内のデータと合わせて是非ご利用ください。「omake」フォルダの内容、使用方法につきましては、a-blog cmsに同梱されている新規インストールマニュアル内の「omakeフォルダについて」をご覧ください。

CSVファイルをインポートしてエントリを一括登録しよう

Webサイトの制作において、エントリのデータを1つ1つ登録していくのは、確実ではありますが大変な作業でもあります。特に一定の内容・項目がデータとして入るようなカタログ的なページでは、CSVファイルのデータをエントリとして読みこむ機能が役立ちます。

a-blog cmsでは、エントリをCSVファイルのデータとしてインポートすることで、複数のエントリを一括登録できます。

今回は、テスト用CSVファイルとして「なんちゃって個人情報」で生成したCSVファイルを使用します。実際には、製品のカタログ情報であったり、いろいろな形式の情報があるかと思いますが、CSVファイルとして作られていれば、以下の工程は同じとなります。

生成されたCSVファイルの1行目をエントリの基本情報とカスタムフィールドの項目名に書き換えます。今回は1行目の「名前」をエントリのタイトルとするため「entry_title」とし、あとの項目はカスタムフィールドの項目として任意の名前に変更します。1行目に変更を加えたものが、以下のファイルになります。このファイルには、100人分のデータが登録されています。


ファイルを開く

テスト用CSVファイル


CSVファイルからのインポート


エントリのデータが書かれたCSVファイルは、管理ページ > インポート の「CSV」からインポートできます。基本的には、現在表示しているブログの任意のカテゴリに一括登録されます。ただし、CSVファイル中に項目「entry_category_id」でカテゴリを指定することで、優先してそのカテゴリにインポートされます。

今回は、事前に「会員紹介(カテゴリコード=members)」というカテゴリを作成し、そこにインポートしてみます。


カテゴリ作成画面

カテゴリ「会員紹介(カテゴリコード=members)」を作成


インポート画面

管理ページ > インポート から「CSV」へ


CSVインポート画面

データとインポート先を指定して、インポートを実行します


インポート完了画面

インポートが完了しました


これでCSVファイルのデータがエントリとしてインポートできました。それでは、今回作ったカテゴリ /members/ を表示してみましょう。CSVファイルのデータが、エントリとなって表示されました。


インポート後のカテゴリトップ画面

インポート後のカテゴリトップ


ただし、このままではエントリのタイトルとして読み込んだ「名前」以外の情報が表示されません。 a-blog cmsに標準搭載されているツール「カスタムフィールドメーカー」で、カスタムフィールドの入力・出力用コードを生成して、今読み込んだカスタムフィールドを表示できるようにしましょう。

※カスタムフィールドメーカーは、上記のリンクまたは 管理ページ > コンフィグ から使用できます。


カスタムフィールドメーカーの入口

管理ページ > コンフィグ


読み込んだCSVファイルのデータをa-blog cmsで管理するため、テスト用CSVファイルの項目名に合わせて、管理・編集用と表示用の2種類のHTMLファイルを作成する必要がありますが、ここではa-blog cmsの管理ページから利用できる「カスタムフィールドメーカー」を使ってコードを生成します。 (本節末で、参考として実際に作成したファイルをダウンロードできます)



メールアドレスemailテキスト
変換・入力チェックでメールアドレスチェック
年齢ageテキスト
変換・入力チェックで変換に「n」(「全角」数字を「半角」に変換)を追加
誕生日birthdayテキスト
変換・入力チェックで変換に「a」(「全角」英数字を「半角」に変換)を追加
携帯電話phoneテキスト
変換・入力チェックで変換に「a」(「全角」英数字を「半角」に変換)を追加

※生成されるコードをコピー&ペーストする際、acms-admin.cssのチェックは、入力用ソースの時にはチェックあり、出力用ソースの時にはチェックなしの状態にしてコードをコピーしましょう。


入力用ソースとして生成されたものは /themes/simple2016/admin/entry/fieldinput_6.html 出力用ソースとして生成されたものは /themes/simple2016/include/parts/fieldoutput_6.html として保存します。

※fieldinput_6.html、fieldoutput_6.html の6の部分は今回対象となるカテゴリIDの数字となります。実際に読み込ませるカテゴリIDに合わせて変更をしてください。


出力されたソースの設置先


入力用ソース /themes/simple2016/admin/entry/fieldinput_6.html
出力用ソース /themes/simple2016/include/parts/fieldoutput_6.html

参考用ファイル


ファイルを開く

fieldinput_6.html


ファイルを開く

fieldoutput_6.html

これらが読み込めるように、入力用は /themes/simple2016/admin/entry/field.html に カスタムフィールドの入力欄 を追加します。今回は field.html の文末に以下のコードを追記しましょう。

<!-- カスタムフィールド入力欄 -->
<!--#include file="/admin/entry/fieldinput_%{CID}.html" -->

出力用は、まず「会員紹介」で使うテンプレートを作成します。 今回は members ディレクトリを新設し、その中に /themes/simple2016/entry.html を複製・リネームした index.html を作成します。

次に、 /themes/simple2016/include/entry/bodyNoDate.html の <div class="acms-grid"> と <!-- BEGIN unit:veil --> の間に以下のコードを追記します。

<;!--#include file="/include/parts/fieldoutput_%{CID}.html" -->

※管理・編集用、表示用とも、ファイルをインクルードする際にファイル名部分をグローバル変数にすることで、該当するカテゴリ以外ではカスタムフィールドの情報が表示されなくなります。

これで、一般向けの表示画面でのカスタムフィールドの表示と、編集画面での表示ができるようになりました。


一般向けの表示画面

一般向けの表示画面


一般向けの表示画面

編集画面での表示画面


カスタムフィールドの情報は、Field_Search モジュールを使って検索できます。Field_Search モジュールの使い方と実際のサンプルは、site2016テーマの「物件情報」コンテンツが参考になるでしょう。

今回はサンプルデータに合わせて「性別」「携帯キャリア」「キーワード」の3つで検索ができるように記述した、Field_Search モジュールのHTMLファイルを用意しました。


/themes/simple2016/include/parts/ 以下に、カスタムフィールド情報検索用HTMLファイルのmembers.htmlを設置し、この検索ウィンドウの読み込みのため、 /themes/simple2016/members/index.html に以下のようにインクルードして動作させてみましょう。

この内容を変更することで、任意のカスタムフィールド情報での検索ができます。

<!-- 検索ウィンドウ -->
<!-- #include file="/include/parts/members.html" -->

ファイルを開く

members.html(カスタムフィールド情報検索用HTMLファイル)

URLで指定されている年月をトピックパスに表示する

よくある企業サイトの「お知らせ」ページでは、カテゴリ(もしくは小ブログ)として「お知らせ」を作成して、その中にエントリーを登録していきます。
この方法ですと、トピックパス(パンくずリスト)は、下記のようになります。

ブログ名>お知らせ(カテゴリ)>エントリータイトル

エントリー記事が多いサイトですと、エントリーを年単位、年月単位で分割して展開したいことがあります。

ブログ名>お知らせ(カテゴリ)>2013年>エントリータイトル

ver1.7.0以前でこれを実現しようとしますと、子カテゴリとして2013年を作成する必要がありました。