私がSOY CMSの検証用に作って公開しているサイトには、「取扱商品一覧」というページがあります。
http://webbing.s41.coreserver.jp/omame/ccc/index.html
SOY CMSは、このようなテーブルや、リストを使ったコンテンツの構築にとても適しています。
SOY CMSを触っていない方は、Dreamweaverとの親和性が高いといわれてもピンと来ないと思います。
Dreamweaverを使ったやや複雑なカスタマイズ手順について詳しく解説します。
※あくまでカスタマイズの一例です。基本的な手順として参考にしてください。
1. 準備
まず、SOY CMS側で「サイト」を作り、Dreamweaver側でも「サイトの設定」で公開ページのルートへ接続できるようにしておかなければいけません。
どちらも基本的な操作なので、ここでは割愛します。
さらに、SOY CMS側では「カスタムフィールドプラグイン」「テンプレート同期プラグイン」を有効にしておきます。どちらも基本パックに同梱されていて、サイト管理画面からすぐ有効にできます。
2. 静的ページを作る
Dreamweaverで普通の制作と同様に、商品一覧のページを作ります。
既存ページを改造する場合はそのまま使っても問題ありませんが、インデントだけでもきちんと整形した方が、あとの独自タグ入れ込みが楽です。
テーブルを見ながら
- どこをラベルとして扱うか
- どこを記事タイトル・本文として扱うか
- どこをカスタムフィールドとして扱うか
の三点を考えます。
これはこの段階までに決めておかなければいけません…というより、実務の構築では作業を始める前からちゃんと考えますw
「ラベル」は、MT・WP的に言うとカテゴリーやタグのことです。
例の場合は、商品種別（煮豆/豆腐…）をラベルとして扱い、
商品名が記事タイトル、
説明文が本文、金額と容量がカスタムフィールドになります。
慣れてくれば、この段階でいきなり8.の独自タグを書く作業をしてしまって問題ありません。
実際、私は先に独自タグを書いてから、書き込んだIDを元にカスタムフィールドを作っています。
3. ラベルの設定をする
静的ページの準備ができて、構成が固まったら、SOY CMSの管理画面の設定をしていきます。
SOY CMSでいちばん最初に作成しなければならないのは、「ラベル」です。
これがないと、今後の設定がスムーズにできません。
さっき決めた通りのラベルを作っていきます。
MovableTypeのカテゴリー等とは異なり、ベースネームの設定は必要ありません。日本語で大丈夫です。
ただし、後で混乱しないよう、「商品：」という共通の接頭語は付けておきます。
（例のサイトの場合は、「新着情報」が既にある状態です）
4. カスタムフィールドの設定をする
次に、「カスタムフィールドプラグイン」の画面に移動し、追加の入力項目を作ります。
タイプは、文字を入力するだけなので「一行テキスト」としています。
ここは投稿画面で表示する「フィールド名」の他に、テンプレートに絡む「ID」の入力が必要です。IDに日本語が使えるかどうかはわかりませんが、フィールド名との差別化もあるし、英数字でいいと思います。
IDは後で使うので、全部メモしておきます。
左の写真は完成した状態の一覧なのですが、「煮豆」や「豆腐」で別々のカスタムフィールドを作っているため、項目2×ラベル4＝8つもあります。
何故こんな細かいことをするのかというと、
「記事投稿時に特定のラベルを選択したときだけ、この項目を表示する」
というオプションを利用するためです。
先述したように、例のサイトには商品一覧とは別に「新着情報」のラベルがあります。新着情報を書くときにも価格や容量の欄が出てきてしまうと、更新担当者が混乱してしまいます。
なので、煮豆のときは煮豆の、豆腐のときは豆腐の項目をあらかじめ用意するのです。
このオプションは、表右端の「高度な設定」をクリックし、「ラベルとの関連付け」で有効にします。
「高度な設定」では、項目の初期値・空のときの値も入れておけます。せっかくなので「オープン価格」などと設定しておきます。
ラベルの複数選択ができれば、作るカスタムフィールドは2つで済むんですよね…
バージョンアップに期待したいところです。
補足：
MT・WPはブログベースなので、現時点ではカテゴリーごとにカスタムフィールドを切り替える機能はありません。プラグインがあるかもしれませんが、実務では安定性を重視するため、有志に頼るプラグインは多用できないのです。
5. 動作確認用の記事を書く
5.と6.は、順不同で構いません。
ここまでの段階で、投稿画面が完成したので記事をいくつか書きます。
この例ではひとつしか書いていませんが、カスタマイズに慣れていない方は各ラベル2～3個くらい書くと間違いがありません。
各ラベルにチェックを入れたときだけカスタムフィールドが出てくるか、一応確認してください。
6. 新規ページを作る
商品一覧用のページを作ります。ここの例では、ファイル名を「ccc/index.html」にしています。
ページの種類には「標準ページ」と「ブログページ」があり、一度作ると変更ができないため、悩むところです。
判断基準としては、
- 時系列でアーカイブする必要があるコンテンツ
- 更新担当者に自由にカテゴリー追加・削除をさせたいコンテンツ
- 本文と追記を分割したいコンテンツ
- コメント・トラックバックが必要なコンテンツ
であれば、ブログページでなければいけません。
新着情報であれば、ブログページが良いです。
ぶっちゃけ全部ブログページでも問題ないぽいですが。
この例では、記事分類がラベルに依存しており、1ページしか必要ないため、標準ページとして作ります。
制作中のサイトであれば、いきなり「公開」にしてしまっていいと思います。
title要素の設定だけ、忘れがちなので気を付けてください。
7. テンプレートをエクスポートする
ページを作成したら、「テンプレート同期プラグイン」の画面に入って、テンプレートを静的ファイルとして書き出します。
テンプレートは、サイトルート内の「export」フォルダに
「5_ccc_index_html.html」
などというファイル名が付いて書き出されます。
このファイル名をDreamweaverで接続して確認したら、
2.で作った静的ページを「複製」して、「書き出されたテンプレートと同じ名前」を付けます。
これに独自タグを書き込んでいきます。
ここでは念のため元のHTMLを残していますが、慣れてきたらファイルを複製せずindex.htmlに独自タグを埋め込んでいってもいいと思います。この場合は、9.でアップロードしてからサーバー上でファイル名を変更します。
独自タグを書き込んでも、Dreamweaverへの表示の影響はありません。
8. 独自タグを書き込む
ここでやっと、HTMLに独自タグを書き込みます。
独自タグの書き方についてはここでは特に説明しませんが、スクリーンショットを見ていただければわかると思います。
表の最初の一列のみブロックタグ・属性を書き込んで、あとは非表示タグでまるっと囲んでおきます。
タグの種類は少ないので、スニペットを登録しておくといいんじゃないでしょうか。
さらに、今回の例の場合は「商品種別ごとに整理して表示する」構造なので、
ブロックタグをコピー・ペーストで増やして、種別ごとに合計4ブロック作ります。
もちろん、ブロックIDはそれぞれ変えなければいけません。
カスタムフィールドのIDも、さっきメモしたものをそれぞれ書き込みます。
9. 独自タグを書き込んだHTMLをアップロード
できたファイルを、さっきの「export」フォルダに投げ込んで上書きします。
アップロードは「PUT」ではありません。PUTだと「ccc」フォルダができてしまいます。
左の写真のように、exportフォルダにカーソルが接するように、直接ドラッグしてください。
「テンプレート同期プラグイン」の画面で、テンプレートを読み込んだら…
「ccc/index.html」にアクセスして、ページがちゃんと表示されているか確認します。
ローカルとサーバーのファイル構造が同じであれば画像やCSSのリンクは切れないはずですが、階層が変わる場合はフルパスで書いた方が無難かもしれません。
10. ブロックの設定をする
さっきのページを見てみると、全ていちばん最初の記事しか表示されていません。
しかもラベルごとに分類されていません。
この設定は、管理画面の「ページのブロック設定」で行います。
ブロックタグに間違いがなければ、テンプレート編集画面の「ブロック」タブを切り替えたときに一覧ができているはずなので、それぞれのブロックとラベルを関連付けます。
これについては、公式のマニュアルを参照してください。
MT・WPに慣れている人は、記事絞り込みのトリガーをテンプレート側で設定しないことに違和感を感じるかもしれません。
MovableTypeだったらこう書けばいいんじゃね？と思うはずです。
<mt:Entries category="煮豆" limit="999"> ～ </mt:Entries>この辺りは一長一短ですが、トリガーを管理画面側で制御することで、HTMLの方に書き込む独自タグがシンプルになり、他のサイトにコピペで使い回しやすくなるという利点があると思います。
a-blog cmsもこれに近い仕様になっているようです。
11. 記事を追加しながら調整する
あとは、残りの記事を追加しながら実際の公開ページの表示をチェックしていきます。
テーブルのセル幅が足りなくて改行されていないかとか、ラベルの関連付けが間違っていないかなど。
ここで、記事の順番が「逆順」になっていることに気付きました。
商品一覧の場合は任意で順番を変えるか、昇順の方がいいはずです。
SOY CMSはバージョン1.2.5aの段階では並び順を昇順にすることはできないようなので、記事一覧の画面で手動で順番を変えることにしました。
実際のCMSカスタマイズでは、昇順並び替えはよく使います。できれば、10. のブロック設定のところでできるようになって欲しいところです。
Dreamweaverを使ったSOY CMSのカスタマイズの流れはこんなところです。
細かく手順を書いているので長そうに見えますが、カスタムフィールドの設定が割と楽なので、慣れればMovableTypeよりやや短い作業量というところです。
何より、後からテンプレートをDreamweaverで編集しても崩れないので
「とりあえず現状サイトで動的にして、検索エンジンに情報が行き渡ってから細かいデザイン改修を行う」
という二段階の改修が容易になります。
「カスタムフィールドの内容によってHTMLの出力を切り替える」などの、いわゆる「if文」は現状ではPHPで対応しなければいけませんが、うまく利用すれば予算や案件に合わせた、柔軟な構築が可能になると思います。