SOYCMSの使い方、第5回(下)。ブロックの作成(エントリーの埋め込み)

(上)に引き続き、ブロックの作成(エントリーの埋め込み)について説明します。

サンプルのサイトは全て設定を行ってありますので、/realfile.htmlのソースと比べてテンプレートがどのようになっているのか、違いを見ていただければと思います。解説はその設定の過程について行います。

まずは、「更新頻度が高い情報」をブロック化していきます。

標準ページでのブロック設定

トップページでは「新着情報」と「お薦め商品」が更新頻度の高い情報にあたります。

テンプレートの設定

この部分のHTMLソースは、新着情報を例に取ると

<ul class="top_list">
	<li>2008.8.16 ここに新着情報が入ります</li>
	<li>2008.8.16 ここに新着情報が入ります</li>
	<li>2008.8.16 ここに新着情報が入ります</li>
</ul>
です。ここでは<li>~</li>が繰返しの単位になっていますから、それをブロックに設定します。つまり、<li>~</li>を囲むように<!–– block:id=”***” ––>と<!–– /block:id=”***” ––>を記入し、エントリー(記事)の内容(もしくはタイトル・追記・作成日)に入れ替えたい部分のタグのなかに属性値と同じようにcms:id=”###”を追記します。正しく追記すると下記のようになります。
<ul class="top_list">
<!–– block:id="news" ––>
	<li><span cms:id="create_date" cms:format="Y.m.d">2008.8.16</span> <span cms:id="title">ここに新着情報が入ります</span></li>
<!–– /block:id="news" ––>
<!–– cms:ignore ––>
	<li>2008.8.16 ここに新着情報が入ります</li>
	<li>2008.8.16 ここに新着情報が入ります</li>
<!–– /cms:ignore ––>
</ul>

ここで注意していただきたいのは、block:id=”***”の***はページごとに重複しない任意の半角文字列ですが、cms:id=”###”の###はエントリーの本文なら”content”、追記なら”more”という風に最初から決まっている値です。また、<!–– cms:ignore ––>~<!–– /cms:ignore ––>という印が見えますが、これはそこに囲まれている内容を表示しないという意味です。

ブロックの設定

上記テンプレート設定を記入し終わったら、一度「更新」ボタンを押してください。その上でエディタ部分の「HTML」の横の「ブロック」タブをクリックすると、ブロック設定画面に移ります。正しくテンプレートに追記が行われていれば、block:id=”***”と設定したブロックが表示されていると思います。

デモサイトでは設定を既に行ってありますが、ここでは「ラベル表示用ブロック」を選択し、「新着情報」ラベルのついたエントリーを5件、タイトルに「おまめ商事種式会社 新着情報」のエントリーページ(1ページ1記事の、記事投稿ごとに増えていくページ)へのリンクが自動生成されるように設定してあります。

会社情報ページも設定は同様です。新着情報のみが書き換えの対象となるので、当該箇所に<!–– block:id=”***” ––>等を記入しブロックの設定を行ってください。

ブログページのブロック設定

引き続きブログページのブロック設定を行います。ブログページは以前ご説明したように、ブログトップ、エントリーページ、アーカイブページの三つのテンプレートを持ちますので、それぞれにブロックを設定していきます。基本的な設定操作は標準ページと同じですが、ブログページでは標準ページで設定できるブロックは全て用いることができるほか、ブログページでしか使えないブロック「b_block」を使うことができます。詳しくはマニュアルをご覧頂くとして、ここではサンプルサイトの商品案内ページの設定を行っていきます。

まず、商品案内ページではブログトップとエントリーページしか使いませんのでこの二つのテンプレートを設定します。

商品案内(一覧)ページの設定

ここではブログページ独特のブロック(b_block)は使いません。商品一覧を業務用と家庭用に分けて表示したいので、「業務用」「家庭用」のラベルを新たに作成し、それらのラベルのついたエントリーが表示されるようにブロックを設定します。ここで注意していただきたいのが、「タイトルにブログページへのリンクを張る」設定です。タイトルにブログ(のエントリー)ページへのリンクを張る設定を行う場合、どのブログページにリンクを張るか選択するのですが、設定するブログは表示の対象となるラベルが設定されているブログでなくてもかまいません。ここでは、「業務用」のラベルがついたエントリーを表示させ、「商品情報」ラベルが設定されているブログ「おまめ商事種式会社 商品案内」へのリンクを張ります。このような設定を行う場合、「業務用」ラベルは必ず「商品情報」ラベルとセットで貼るようにして下さい。もし「業務用」ラベルがついていて、「商品情報」ラベルがついていないエントリーを公開すると、リンク先が存在しないことになりますので気をつけてください。

新着情報の設定は標準ページと同じです。

商品案内(詳細)ページの設定

商品案内(詳細)ページは、商品情報のエントリーが追加されるたびに新しいページ(URL)が増えていきます。増えるURLはブログページの設定画面に従って、

/product_catalogue/item【自由に変えられる】/【エントリー名】

という規則で決まります。このページでは、どのURLで(どの商品、エントリーについて)情報を表示するかによって内容が変わります。それを制御するのがb_block:id=”entry”です。このブログページ用ブロックは、ブログページのエントリーページでのみ使用ができて、呼び出されたURLに該当するエントリーの内容を表示するために用います。

<!–– b_block:id=”entry” ––>
<h2 cms:id=”title”>商品名</h2>
<p cms:id=”content”>商品の説明商品の説明商品の説明
商品の説明商品の説明商品の説明商品の説明商品の説明
商品の説明商品の説明商品の説明商品の説明商品の説明
</p>
<p><a href=”/product_catalogue/”>商品一覧に戻る</a></p>
<!–– /b_block:id=”entry” ––>

あとは新着情報を今までと同様に設定すればOKです。

複数のページで共通の部品のブロック化

「更新頻度が高い情報」の他、「複数のページで共通の部品(たとえばメニューやフッタなど)」もブロック化、エントリー化しておくと便利です。その部分をブロックにしてエントリーを埋め込んでおけば、そのエントリーを書き換えるだけで全ページ一斉に更新をすることが可能になります。

デモサイトでは、メニュー部分のテンプレートに設定を行い、ブロックの設定は行わない状態にしてあります。

<!–– block:id=”menu” ––><!–– cms:id=”content” ––>
<div id=”menu”>
<a href=”/company_information/” id=”company_information” class=”menu_button”>会社情報</a><a href=”/product_catalogue/” id=”product_catalogue” class=”menu_button”>商品案内</a><a href=”#” id=”inquiry” class=”menu_button”>お問合せ</a><a href=”#” id=”recruit” class=”menu_button”>採用情報</a>
</div>
<!–– /cms:id=”content” –><!– /block:id=”menu” ––>

この、複数のページで共通の部品のブロック化をする場合には、その部品は別にサイトを作ってそこにエントリーを作成し、「SOYCMS他サイトラベルブロック」で呼び出すのが安全です。というのも、同じサイトでラベル・エントリーを作るとエントリー管理者でログインしても他のエントリーやラベルと同様に編集することができてしまうからです。他サイトに作成しておけば、厳密な権限運用が実現できます。

以上でサイトの設定は完了、あとはエントリーを追加していくだけです。続きは次回!

コメントをどうぞ

トラックバック URL

トラックバック