CMS

SOY CMSのカスタムフィールドを使った条件分岐(1)

共有する?

このエントリーをはてなブックマークに追加
follow us in feedly

SOY CMSは、静的コンテンツの動的化に適したシステムですが、サイトの新着情報には下の画像のように「特定の記事にだけアイコンを付ける」というものがよくあります。

soycustom_1

これをSOY CMSで構築するには、カスタムフィールドとPHPのif文を利用します。
アイコンまわりのカスタマイズは、SOY CMSの良さを残したまま割と簡単にできるので、試してみてください。

※サンプルコードには、読みやすいように改行やインデントを入れています。実際に出力されるコードが冗長になるので、動作を確認したら改行を詰めるなどした方が良いと思います。

元になるHTML

下記のようなHTMLソースに、SOY CMSを組み込みます。
<h3>要素内に更新日付と、「重要な記事」を知らせるアイコンが入っています。

SOY CMS側の設定

SOY CMSの管理画面に入り、「カスタムフィールドプラグイン」を有効にします。

記事を書いている時点(1.25a)以前のバージョンの場合は、「テンプレート内でPHPスクリプトを有効にする」ための環境ファイル書き換えも必要ですが、旧バージョンにはセキュリティホールがあるため、最新版にアップグレードしてください。

カスタムフィールドの設定

カスタムフィールドで「チェックボックス」を新規作成します。
下の画面の通り、「高度な設定」の全ての項目を空にします。「ニュース」の記事を書くときだけ指定できるように、ラベルの関連付けもしておきます。

soycustom_2

設定が終わったら、記事を書いてみます。下の画像のようにチェックボックスが出てくればOKです。
チェックを入れている記事と、入れていない記事を書いてください。

soycustom_3

独自タグを書く

記事部分をSOY CMSのブロックタグで囲み、日付を出すタグを書き込みます。
ブロックタグ、エントリータグについては、公式サイトのマニュアル「よく使う項目」を参考にしてください。
日付を出す「cms:id="create_date"」は、アイコンも含めてまるっと囲みます。

ここで注意が必要なのは、SOY CMSの標準である「属性値に書く方法」を利用しないことです。
例えば、下のような書き方も同じ意味を持ちますが、この書き方だと<h3>要素の中身をそっくり置き換える動作になるので、あとで<h3>の中にPHPを書いた時にエラーになってしまいます。

代替として用意されている、コメントで囲む方法を選んでください。

PHPで記事情報を取得するには

記事を表示する「block:id」「b_block:id」の内部では、「$[idに指定した名前]」という連想配列に、cms:idをキーとした全ての記事データが格納されています。
以下のように書くと記事ごとに配列の内容がずららっと出てきます。

なので、「block:id="news"」内のカスタムフィールド「important」をPHPの変数$hogeに入れるには、以下のようにスクリプトを書きます。

カスタムフィールドのチェックボックスの場合は、チェックを入れたときは「フィールド名」がそのまま入り、入れなかった場合は空になります。
先程の例の場合だと、チェックを入れていれば$hogeは「重要なお知らせ」になるはずです。

PHPの条件分岐を加える

ここまでわかったところで、</h3>の前に条件分岐を追加してみましょう。

「$news[important]」が空ではないことを条件に、echoでアイコンを出します。
functionを使用するとエラーになるので、PHPの平文で書いてください。また、HTMLでダブルクォーテーションを使用している場合、echo文はシングルクォーテーションで囲んでください。

保存してページを確認すると、「重要なお知らせ」にチェックを入れた記事にだけアイコンが出るようになります。


SOY CMSの利点は、「オーサリングツールで崩れず編集できる使いやすさ」です。このため、HTMLの表示に影響が出る条件分岐などは、PHPで対応することになります。

それを踏まえて、カスタマイズするときも本来のHTMLを生かす方向でできるだけシンプルにした方がいいし、条件分岐が予想される場合は納品後の改修作業も視野に入れた方が良いと思います。

今回のサンプルは、ローカル環境でのブラウザプレビューではアイコンの部分のコードが見えてしまいますが、PHP構文を解釈できるDreamweaverなら問題なく表示できます。
ローカルで確認したいときは、<?php ~ ?>を一時的にコメントアウトしてください。

条件分岐を行う場所が、記事タイトルだったりすると、もう少し難しくなります。
それについてはまた後日記事にします。

共有する?

このエントリーをはてなブックマークに追加
follow us in feedly

permalink

http://webbingstudio.com/weblog/cms/entry-108.html

publish