ホーム > サポート・マニュアル > チュートリアル > 静的サイトからの移行 > 既存の静的サイトからの移行#2 「トピックスを動的に」編

既存の静的サイトからの移行#2 「トピックスを動的に」編

ドキュメント最終更新日時：2011/07/12 00:51

トピックスを動的に更新できるように

今回のチュートリアルでは、前回のチュートリアルで取り込んだ静的サイトの『トピックス』を動的なコンテンツとして更新できるようにしていきます。ファイル自体は今まで通りHTMLのままなので、ファイル編集・アップロード等の作業は、使い慣れたエディタやFTPクライアントを使って進めてください。

テーマの中のHTMLは、表示される前に一度システムに読み込まれます。読み込まれたHTML上にモジュール等、a-blog cmsで利用するテンプレートタグが記述されていると、自動的にそれを解釈し、出力します。

トピックスのみ動的に更新する

本来a-blog cmsは、カテゴリーやモジュールID、ルールといった概念によって複雑な構造のWebサイトを構築できるようになっています。今回は、静的サイトからの移行という想定なので、まずはトピックスだけ更新できるように進めます。カテゴリーを作成して、サイトを管理する方法は、チュートリアルの後半で解説します。

index.htmlにEntry_Headlineモジュールを埋め込み

トップページのトピックス一覧をa-blgo cmsの動的なモジュールに置き換えます。リファレンスのEntry_Headlineのスニペットや、Dreamweaverをお使いの方は配布パッケージのomakeフォルダ内に同梱されているスニペットをインストールして利用することもできます。Dw用のスニペットの場合、『a-blog cms』→『ビルトインモジュール』→『Entry_Headline』です。

BEFORE

この部分をEntry_Headlineで置き換えます。スニペットを直接貼り付けた時点では、余分な記述があったり異なる記述も含まれるので、それらの箇所も既存のデザインに合わせて整形します。

<ul>
<li>2009/05/19　<a href="topics/index.html#event010">満開のサボテンの花祭り開催中</a></li>
<li>2009/04/16　<a href="topics/index.html#event009">マグロの稚魚放流体験参加者募集</a></li>
<li>2009/03/03　<a href="topics/index.html#event008">クローバーステージにエスカルゴサーカス団がやってくる！</a></li>
<li>2009/02/17　<a href="topics/index.html#event007">名古屋自然公園フォトコンテスト優秀作品発表</a></li>
<li>2009/01/30　<a href="topics/index.html#event007">名古屋自然公園フォトコンテスト参加者募集</a></li>
<li>2008/11/01　<a href="topics/index.html#event006">紅葉のきれいな散歩道オープン！</a></li>
<li>2008/10/22　<a href="topics/index.html#event005">ヤマネとのふれあい体験開催します</a></li>
</ul>

AFTER

Entry_Headlineを今回の既存の静的サイトのデザインにあわせて整形すると、下のようになります。この時点でそのままページを表示すると、company1テーマに含まれていたエントリーがリストアップされます。

<!-- BEGIN_MODULE Entry_Headline -->
<ul><!-- BEGIN entry:loop -->
<li>{date#Y}/{date#m}/{date#d} <a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_Headline -->

topics/index.htmlにEntry_Summaryモジュールを埋め込み

リファレンスのEntry_Summaryのスニペットや、Dreamweaverをお使いの方は配布パッケージのomakeフォルダ内に同梱されているスニペットをインストールして利用することもできます。Dw用のスニペットの場合、『a-blog cms』→『ビルトインモジュール』→『Entry_Summary』です。

BEFORE

タイトルの他に、エントリー本文に含まれるような情報も表示されているので、ここではEntry_Summaryモジュールを使用します。前のEntry_Headlineと同様にデザインに合わせて整形します。

<div class="eventbox">
<h3><a name="event010" id="event010" class="event-title">満開のサボテンの花祭り開催</a></h3>
<p>1年に一夜限り咲き誇るサボテンたちの花祭りを開催します。<br />
夜の闇に浮かび明る大輪の美しい花や、とても香り高い花など、様々な種類のサボテンの花を見ることができます。</p>
<p class="event"><span>開催日時：</span>5月中旬 18:00~</p>
</div>
<div class="eventbox">
<h3><a name="event009" id="event009" class="event-title">マグロの稚魚放流体験参加者募集</a></h3>
<p>これから先の未来もおいしいマグロが食べられるように、マグロの稚魚放流体験会を開催します。参加される方は十分な日焼け対策を行って、こまめに水分補給をしましょう。</p>
<p class="event"><span>開催日時：</span>4月29日（祝）<br />
<span>受付開始：</span>9:00〜</p>
</div>

AFTER

開催期間や日時など、本文とは別の項目として扱われている部分は、後からカスタムフィールドを設定して更新可能にします。ひとまず元のコンテンツの項目を静的に置いておきます。

<!-- BEGIN_MODULE Entry_Summary -->
<!-- BEGIN entry:loop -->
<div class="eventbox">
<h3><a class="event-title" href="{url}">{title}[raw]</a> ( {date#Y}.{date#m}.{date#d} )</h3>
<p>{summary}[trim(196,...)]</p>
<p class="event"><span>開催日時：</span>5月中旬 18:00~</p>
</div>
<!-- END entry:loop -->
<!-- END_MODULE Entry_Summary -->

更新できるようにする

ここまでの作業で、「トップ」や「トピックス」のページではエントリーが動的に一覧できるようになりました。しかし、今の状態だと1つのトピックスに関する詳細が見れず、エントリーの編集ページも正しく設定できていない状態です。ここではplainテーマのindex.htmlを流用する形で、即席のエントリー編集ページ＆詳細ページを設定します。