SOY CMSは、静的コンテンツの動的化に適したシステムですが、サイトの新着情報には下の画像のように「特定の記事にだけアイコンを付ける」というものがよくあります。
これをSOY CMSで構築するには、カスタムフィールドとPHPのif文を利用します。
アイコンまわりのカスタマイズは、SOY CMSの良さを残したまま割と簡単にできるので、試してみてください。
※サンプルコードには、読みやすいように改行やインデントを入れています。実際に出力されるコードが冗長になるので、動作を確認したら改行を詰めるなどした方が良いと思います。
元になるHTML
下記のようなHTMLソースに、SOY CMSを組み込みます。
<h3>要素内に更新日付と、「重要な記事」を知らせるアイコンが入っています。
2009年8月20日
SOY CMS側の設定
SOY CMSの管理画面に入り、「カスタムフィールドプラグイン」を有効にします。
記事を書いている時点(1.25a)以前のバージョンの場合は、「テンプレート内でPHPスクリプトを有効にする」ための環境ファイル書き換えも必要ですが、旧バージョンにはセキュリティホールがあるため、最新版にアップグレードしてください。
カスタムフィールドの設定
カスタムフィールドで「チェックボックス」を新規作成します。
下の画面の通り、「高度な設定」の全ての項目を空にします。「ニュース」の記事を書くときだけ指定できるように、ラベルの関連付けもしておきます。
設定が終わったら、記事を書いてみます。下の画像のようにチェックボックスが出てくればOKです。
チェックを入れている記事と、入れていない記事を書いてください。
独自タグを書く
記事部分をSOY CMSのブロックタグで囲み、日付を出すタグを書き込みます。
ブロックタグ、エントリータグについては、公式サイトのマニュアル「よく使う項目」を参考にしてください。
日付を出す「cms:id="create_date"」は、アイコンも含めてまるっと囲みます。
2009年8月20日
(記事本文がつづく)
ここで注意が必要なのは、SOY CMSの標準である「属性値に書く方法」を利用しないことです。
例えば、下のような書き方も同じ意味を持ちますが、この書き方だと<h3>要素の中身をそっくり置き換える動作になるので、あとで<h3>の中にPHPを書いた時にエラーになってしまいます。
2009年8月20日
(記事本文がつづく)
代替として用意されている、コメントで囲む方法を選んでください。
PHPで記事情報を取得するには
記事を表示する「block:id」「b_block:id」の内部では、「$[idに指定した名前]」という連想配列に、cms:idをキーとした全ての記事データが格納されています。
以下のように書くと記事ごとに配列の内容がずららっと出てきます。
なので、「block:id="news"」内のカスタムフィールド「important」をPHPの変数$hogeに入れるには、以下のようにスクリプトを書きます。
カスタムフィールドのチェックボックスの場合は、チェックを入れたときは「フィールド名」がそのまま入り、入れなかった場合は空になります。
先程の例の場合だと、チェックを入れていれば$hogeは「重要なお知らせ」になるはずです。
PHPの条件分岐を加える
ここまでわかったところで、</h3>の前に条件分岐を追加してみましょう。
2009年8月20日
‘;
}
?>
「$news[important]」が空ではないことを条件に、echoでアイコンを出します。
functionを使用するとエラーになるので、PHPの平文で書いてください。また、HTMLでダブルクォーテーションを使用している場合、echo文はシングルクォーテーションで囲んでください。
保存してページを確認すると、「重要なお知らせ」にチェックを入れた記事にだけアイコンが出るようになります。
SOY CMSの利点は、「オーサリングツールで崩れず編集できる使いやすさ」です。このため、HTMLの表示に影響が出る条件分岐などは、PHPで対応することになります。
それを踏まえて、カスタマイズするときも本来のHTMLを生かす方向でできるだけシンプルにした方がいいし、条件分岐が予想される場合は納品後の改修作業も視野に入れた方が良いと思います。
今回のサンプルは、ローカル環境でのブラウザプレビューではアイコンの部分のコードが見えてしまいますが、PHP構文を解釈できるDreamweaverなら問題なく表示できます。
ローカルで確認したいときは、<?php ~ ?>を一時的にコメントアウトしてください。
条件分岐を行う場所が、記事タイトルだったりすると、もう少し難しくなります。
それについてはまた後日記事にします。