ホーム > サポート・マニュアル > チュートリアル > 静的サイトからの移行 > 既存の静的サイトからの移行#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">満開のサボテンの花祭り開催中</a></li>
<li>2009/04/16 <a href="topics/index.html">マグロの稚魚放流体験参加者募集</a></li>
<li>2009/03/03 <a href="topics/index.html">クローバーステージにエスカルゴサーカス団がやってくる!</a></li>
<li>2009/02/17 <a href="topics/index.html">名古屋自然公園フォトコンテスト優秀作品発表</a></li>
<li>2009/01/30 <a href="topics/index.html">名古屋自然公園フォトコンテスト参加者募集</a></li>
<li>2008/11/01 <a href="topics/index.html">紅葉のきれいな散歩道オープン!</a></li>
<li>2008/10/22 <a href="topics/index.html">ヤマネとのふれあい体験開催します</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を流用する形で、即席のエントリー編集ページ&詳細ページを設定します。

plainテーマのindex.htmlをtopics/entry.htmlとしてコピー

./themes/plain/index.htmlをentry.htmlにリネームして、./themes/park/topics/の中にコピーします。このentry.htmlがエントリーの編集ページと詳細ページをかねるテンプレートのベースになります。

編集ページと詳細ページを設定

『カスタマイズ管理』→『コンフィグ』→『テーマ設定』で、テンプレートを設定します。

  • 詳細ページ
  • エントリー編集ページ
  • カラム追加ページ

以上の3項目について、topics/entry.htmlに設定します。これで、トピックスに出ている個々のエントリーの詳細ページが見れるようになり、ログインしている状態ではエントリーの編集や、エントリーの作成が可能になりました。

Entry_Bodyの周辺を整形する

Entry_Bodyの上下を、他のHTMLから流用して見た目を合わせていきます。エントリー編集ページのテンプレートは記述が多いため、既存のテンプレートをベースに編集すると、崩れてしまった場合にも元に戻しやすいです。

より詳細にコンテンツを更新できるように

今の状態でも、既存のエントリーを削除すればトピックスにコンテンツを追加・更新することが可能なWebサイトになっています。

開催日時などの特定項目が足りていなかったり、カテゴリーを使用していなかったり、実際に更新するために必要な機能が揃っていません。

次回のチュートリアルでは、より現実的にサイトの詳細な設定について解説します。



携帯アクセス解析