復習2サイトの階層を拡大しよう

a-blog cms は、インストール後の初期状態ではブログ、カテゴリー、エントリーから成る3階層のサイトを構成しています。そのため、4階層以上の規模の大きなサイトを作る場合には、ブログの階層の下に子ブログを作る「マルチブログ化」をしなければなりません。総復習2「サイトの階層を拡大しよう」では、「お知らせ」を子ブログとして再設定し、お知らせコンテンツの中でカテゴリー分けができるようにサイトをマルチブログ化していきます。

※総復習1「静的HTMLサイトからCMSのテーマを作ってみよう」から引き続き作業をされる方は、お手数ですが再度 http://ablogcms.io よりテスト環境のご用意をお願いします。

またチュートリアルの実践環境として、本編ではローカルサーバー http://localhost を使用して説明しておりますが、以下のフォームから実際に作業をするサーバーのURLを入れていただく事で、文中のテキストを希望のURLに書き換えることができます。ぜひご活用ください。

目次

1. カテゴリーをブログに変更する
2. テーマを設定する
3. ヘッダーとフッター部分を表示する
4. エントリーを移行する
5. テンプレートを切り替える
6. グローバルメニューのリンクを修正する
7. トップページにエントリーヘッドラインを表示する
8. 最後に

1. カテゴリーをブログに変更する

まずは「お知らせ(news) 」の子ブログを作成していきます。現在「news」というコードはお知らせカテゴリーで使われており、新しく作成する子ブログのコードには使用することができません。そのため、まずはお知らせのカテゴリーコード「news」を変更します。

管理ページより カテゴリー設定画面 にアクセスして、 news を news_c と変更してください。

次に ブログの設定画面 より、右上にある 子ブログを作成 をボタンから以下の設定で子ブログを作成します。

以上でお知らせブログが作成できました。URLは http://localhost/news/ になります。 またここからは、管理画面の一番上の項目で親ブログと子ブログを切り替えることができます。是非ご活用ください。

2. テーマを設定する

新しく作成した「お知らせ」の子ブログには、初期設定として「blog2020」のテーマがあてられています。このテーマを変更して、親ブログで利用されている「beginner2020」を継承しましょう。

テーマの継承

子ブログを作成した際に、親ブログで使っているテーマをそのまま子ブログでも表示できるようにすることを、「テーマの継承」といいます。テーマの継承をすることで、サイト制作者が新たに用意するファイルは、子ブログが個別に必要とするもののみになります。そのためファイルの総数が最小限に抑えられ、メンテナンス性の向上にも繋がります。テーマの継承について、詳しくは「テーマの継承 | テーマ | ドキュメント | a-blog cms developer」をご覧ください。

テーマの継承では、継承するテーマ名は「(子ブログコード)＠(親ブログのテーマ名)」になります。ここでは親ブログのテーマが「beginner2020」なので、これを継承するテーマは「news@beginner2020」です。

それでは /themes/ 以下に「news@beginner2020」という空のフォルダを用意してください。

その後、お知らせブログのテーマ設定 より news@beginner2020 を選択して保存しましょう。

これでテーマの継承ができました。お知らせブログのトップページを表示すると、ここで表示されているテンプレートは親ブログのテーマファイル /themes/beginner2020/_top.html であることがわかります。このように、news@beginner2020 のフォルダが空のうちは、全てのページにおいて親ブログのテーマファイルが適用されます。

またこの時点では、サイトタイトルやフッター部分は正常に表示されていません。まずはこの部分について、親ブログの見え方と統一していきましょう。

3. ヘッダーとフッター部分を表示する

モジュールID は、初期状態ではモジュールが設定されているブログ内でのみ利用ができるようになっています。これをグローバル化して、下の階層のブログでも利用できるようにしましょう。

まずは親ブログの モジュール ID設定画面 から、グローバルナビゲーション（global_navi）の設定を変更します。リスト右側にある [設定] ボタンをクリックしてください。

その後、左上タブ「条件設定」内の「グローバル」の項目で「下の階層のブログが利用することを許可する」にチェックを打ち、保存しましょう。

http://localhost/news/ を表示するとナビゲーションが表示されるようになりました。

これでナビゲーションは表示されましたが、サイトタイトルやフッター部分について、親ブログのブログフィールドから設定した情報を表示しています。これらが子ブログで表示されないのは、親ブログからその情報が上手く引き継げていないためです。

親ブログのブログフィールド

親ブログでの表示

ここでは、全てのパーツで共通してBlog_Fieldのフィールドモジュールが使われています。

<!-- BEGIN_MODULE Blog_Field -->

略

<!-- END_MODULE Blog_Field -->

このブログフィールドの情報を子ブログでも表示するには、フィールドモジュールにモジュールIDを設定して、さらに設定画面からモジュールをグローバル化する必要があります。それでは早速モジュールIDを設定していきましょう。

それでは新規にモジュールID id="BF_root" としたブログフィールドを設定します。名前は自由に設定可能ですが、ここでは「ルートブログのカスタム設定を表示」と設定します。

その後、条件設定タブから「グローバル」の項目を確認します。この「下の階層のブログが利用することを許可する」にチェックを打つことで、モジュールがグローバル化され、引数で指定されている情報を親ブログから子ブログに引き継ぐことができます。

ここでは引数として a-blog cms（bid:1）が設定されているので、親ブログのフィールドモジュールの情報が下の階層に伝えられることになります。

モジュールIDの設定が完了したら、該当箇所のフィールドモジュールにモジュールIDid="BF_root"を設定していきます。作業するテンプレートは以下の3点です。

• themes/beginner2020/include/header.html
• themes/beginner2020/include/footer.html
• themes/beginner2020/include/footer/suggest.html

変更前
<!-- BEGIN_MODULE Blog_Field -->

変更後
<!-- BEGIN_MODULE Blog_Field id="BF_root" -->

これでサイトタイトルやフッター部分について表示できるようになりました。

4. エントリーを移行する

ここからは、親ブログ内にある「お知らせ」のエントリーをまとめて子ブログ側に移動します。親ブログのエントリー管理画面から絞り込み機能を利用して、「お知らせ」エントリーを一覧表示してください。

これらのエントリーについて、以下の手順で子ブログへ移行します。

1. リスト一番左上のチェックボックスにチェックを打ち、全件について選択
2. 「表示順」のプルダウンを「ブログ」に変更
3. 「お知らせ」を選択
4. [変更] ボタンをクリック

以上でエントリーの移行は完了です。「お知らせ」の子ブログに移動すると、エントリーの情報が表示されているのが確認できます。

5. テンプレートを切り替える

今回は、親ブログのコンテンツの1つである「お知らせ」を子ブログとして構成しています。したがって、グローバルナビゲーションから「お知らせ」をクリックした際は、トップページ（_top.html）ではなく一覧ページ（index.html）が表示されるようにしなければなりません。ここからは、このように子ブログで表示するテンプレートを切り替える作業を行なっていきます。

では、まずはお知らせの子ブログ専用で使用する index.html と _entry.html を用意しましょう。news@beginner2020 に以下の2つのファイルをコピーしてください。

• コピー元 /themes/beginner2020/news/index.html →コピー先 /themes/news@beginner2020/index.html
• コピー元 /themes/beginner2020/news/_entry.html →コピー先 /themes/news@beginner2020/_entry.html

その後、テーマ設定画面からテンプレートファイルについて以下のように設定を変更します。

また子ブログではテンプレート選択ファイル（template.yaml）は使わないので、「テンプレート選択ファイル（template.yaml）の値を優先する」のチェックは外しておきましょう。

この設定を保存したのちに子ブログを表示すると、現在表示中のテンプレートとして「/themes/news@beginner2020/index.html」が表示されているのが確認できます。

以上でお知らせページについて、おおよそ形になりました。ここからは、パーツ単位で細かな修正を行なっていきます。修正する部分は以下の2点です。

• グローバルメニューのリンク
• トップページのエントリーヘッドライン

6. グローバルメニューのリンクを修正する

現状では、お知らせのページを表示した状態でグローバルメニューの項目をクリックすると、404ページが表示されてしまいます。

これは、ナビゲーションモジュールで入力されているURLのパスが、子ブログを使用して運用する際の設定に最適化されていないためです。モジュールの表示設定を開くと、URLの接頭辞が %{BASE_URL} となっています。

グローバル変数 %{BASE_URL} はその時表示しているブログのURLを取得するものです。そのため、お知らせを開いている時の %{BASE_URL} は a-blog cms によって http://localhost/news/ と解釈され、家庭用製品をクリックした時などはhttp://localhost/news/product/domestic のページを表示しようとしてしまいます。

この部分については、 %{BASE_URL} から %{HOME_URL} へ書き換えることによって、正しいURLである http://localhost/product/domestic へ繋げることができます。

7. トップページにエントリーヘッドラインを表示する

現在、トップページのメインカラムには「採用情報」のコンテンツのみが表示されています。

しかし当初は、下図のように「新着情報」のエントリーヘッドラインも表示されていました。

この部分について非表示になってしまった原因は、エントリーヘッドラインで引数としていた「お知らせ」カテゴリーがブログへ移動してしまったことです。そのため、エントリーヘッドラインを復活させるには、引数を正しく修正しなければなりません。

このエントリーヘッドラインで振られているモジュールIDは「top_headline」です。このモジュールIDの設定画面を開き、引数について以下のように変更しましょう。

以上でトップページにエントリーヘッドラインが表示されるようになりました。

8. 最後に

このように、a-blog cms ではマルチブログ化をすることによって、簡単にサイトの階層を拡大することができます。子ブログのステータスをシークレットとすることで会員制コンテンツとして運用することもできますし、子ブログ単位でユーザーを作って部分的な更新担当を設定することも可能です。 この時、どのコンテンツをブログにして、どのコンテンツをカテゴリーにするかは、サイトの設計次第になります。

ぜひ今後もマルチブログ化を活用して、サイト制作の可能性を広げてみてくださいね。