a-blog cms にはモジュールと呼ばれる仕組みがあり、この「モジュール」がa-blog cmsで管理しているコンテンツの表示を管理しています。

モジュールには、大きく分けてビルトインモジュール・フィールドモジュール・タッチモジュールの3種類がありますが、今回はよくサイト制作で使われているビルトインモジュールを使ってみましょう。

ここでは、最終的にお知らせカテゴリーの記事一覧を表示できるように説明していきます。

作業の前に、まずは a-blog cms にログインしてください( http://あなた専用のURL/login/ のURLでログイン画面が表示されます )。

モジュールを表示する

1.使用するモジュールのスニペットを入手する

まずは、使用するモジュールのスニペットを入手する必要があります。(スニペットとは、a-blog cms で管理されているコンテンツを表示するために必要なソースコードのことです。)ここでは記事の一覧を表示したいので、「エントリーリスト」というモジュールのスニペットを入手します。

管理者ボックス(ヘッダー下の灰色のボックス)より、「管理ページ」ボタンをクリックし、管理ページに移動したら、左の黒いサイドバーより、「コンフィグ」へ移動します。


(スクリーンショット)

管理者ボックス


「モジュール」項目からエントリーリストを探し、「スニペット」ボタンをクリックしてください。別ウィンドウが表示され、HTMLのコメントタグの文字列とHTMLタグが書かれているのが確認できますが、これがスニペットです。ここまできたら、スニペットをコピーします。



2. テンプレートにモジュールを貼り付ける

ご自分のa-blog cmsが入った環境の /themes/site2015/top.html を開いてください。さきほどコピーしたスニペットを、top.html のお好きな場所にペーストしてください。保存をし、 http://あなた専用のURL/ へ移動すると、リンク付きの記事の一覧が表示されています。


(スクリーンショット)

赤く囲われた枠が追加したエントリーリスト


これでサイト全体の記事の一覧が表示されるようになりました。ですが、サイト全体の記事一覧が表示されている状態なので、まだお知らせカテゴリーのエントリー一覧とは言えません。エントリーを表示する条件を追加して、お知らせカテゴリーのエントリーのみを表示してみましょう。

お知らせカテゴリーのエントリーのみを表示する

1. モジュールIDを作成する

お知らせカテゴリーのエントリーのみを表示するには、モジュールIDを作る必要があります。モジュールIDは管理画面で作成します。再度管理ページへ移動し、左の黒いサイドバーから「モジュールID」をクリックして「モジュールID管理」の画面へ移動します。


(スクリーンショット)

モジュールID管理の画面


右上の「モジュールIDを作成」ボタンをクリックします。新規モジュールID画面になったら、以下の項目を入力します。

モジュールエントリーリスト(Entry_List)
idnewsList
名前お知らせの記事一覧
カテゴリーID(cid)お知らせ(「ID参照」ボタンをクリックして選択すると簡単です)

(スクリーンショット)

設定が完了した画面


入力したら、上部にある青い「作成」ボタンをクリックします。

これで、お知らせカテゴリーのみを表示するエントリーリストのモジュールIDができました。

2. モジュールIDをテンプレートに反映させる

今の状態では、管理画面でモジュールIDを作成しただけで「モジュールを表示する」でテンプレートに記述したエントリーリストとは情報がひも付けられていません。モジュールIDの設定を反映するには、テンプレートにモジュールIDを記述する必要があります。

テンプレートに記述したエントリーリストのスニペットの冒頭に、id="newsList"と記入してください。

以下、記述例になります。

<!-- BEGIN_MODULE Entry_List id="newsList" -->

テンプレートを保存したら、サイトを確認しましょう。お知らせカテゴリーのエントリーのみが表示されるようになっています。


(スクリーンショット)

設定完了後のエントリーリスト。エントリーがお知らせカテゴリーのみに絞られている。


そのほかのビルトインモジュール


今回はエントリーリストを使って説明しましたが、ほかにもカテゴリーを表示する「カテゴリーリスト」や、ナビゲーションを表示する「ナビゲーション」などのビルトインモジュールが用意されているので、使用してみてください。

ビルトインモジュールのドキュメントは、以下のページになります。

ビルトインモジュールのドキュメントへ

また、今回は管理画面からスニペットをコピー&ペースとしましたが、ビルトインモジュールのスニペットはa-blog cms 制作者向け情報にも用意しています。

ビルトインモジュールのリファレンスへ


a-blog cmsのインストール

サーバへの接続

カスタムフィールドを作ってみよう

モジュールを使ってみよう

テーマを編集してみよう

インストールとサーバへの接続について