記事とブロック

SOY CMSのブログでは、記事を格納するラベル(フォルダのようなもの)があり、どのラベルに集められた記事を表示するか？という設定で記事一覧ページを表示しました。

ブログページ以外でも記事を表示することが可能で、様々なページで共通な箇所を記事として投稿しておき、その記事を全ページで表示する事で共通パーツとして管理運営することが可能です。

例えば、ヘッダを記事で管理してみます。

※今回は記事で共通パーツの管理を行いますが、後に話題に挙げる共通パーツの管理であればcms:moduleの方が便利です。

今回もSOY CMSのユーザのoffice*nicoさんのサイトで配布しているテンプレートを組み込みます。

同じテンプレートで試してみたい方は下記のリンクからダウンロードしてください。

SOYCMSでwebサイトを作ってみよう！の手順(基本設定編）｜お知らせやブログや雑記など - 福島県の格安ホームページ作成 OnePriceHomepage

用意したHTMLテンプレートをCMSに組み込みます。

brock1

ページの新規作成画面でページの種類を標準ページにしてページを追加します。

標準ページは後ほど紹介するブロックの設定と各種プラグインの動作のみ行えるページで、

CMS的機能が必要ないページであれば作成する必要はありません。

create_top_page1

作成したページの詳細画面が表示されたら、

用意したページ用のHTMLテンプレートをそのまま貼り付けテンプレートの更新を行います。

更新後にページの確認を行い、

confirm_top_page

用意したテンプレート通りの表示になっているか確認します。

表示に問題がなければ、このページから他ページと共通の箇所を抜き出します。

今回は、

confirm_top_page1

ヘッダの箇所を抜き出すことにします。

管理画面を開き、

共通パーツ用の記事をまとめておくラベルを作成します。

label

label22

ラベルの管理を開き、

ラベル名の冒頭に*印をつけたラベルを作成します。

作成後に

label44

記事管理者には表示されないラベルというエリアが表示され、

そこに作成したラベルが表示されていることを確認します。

記事の投稿画面ではTinyMCEというWYSIWYGエディタを利用しているため、

共通パーツのHTMLを扱うことに向いていません。

TinyMCE | The Most Advanced WYSIWYG HTML Editor

そこでエディタ切り替えプラグインを利用して、記事投稿画面のTinyMCEを無効にしておきます。

pragin3

プラグインの画面を開き、エディタ切り替えプラグインをインストールし、

edita

詳細画面で、*共通パーツのみ設定を無効にしておきます。

設定後、

kijikannri

kijikannri3

記事ページの*共通パーツの下にある新規作成のリンクから

post_common_parts_entry2

該当箇所のHTMLを登録しておきます。

これで共通パーツとしてのヘッダが完成しました。

confirm_top_page1

作成したヘッダの記事を該当の箇所にセットします。

テンプレートの編集画面で該当する箇所のHTMLを下記のように変更します。

<!-- block:id="header" -->
<!-- cms:id="content" -->
<header id="header1" class="borno">
<div class="inner">
<div class="bg">
<h1><a href="index.html"><img src="/sample/site/images/logo_site.png" alt="サンプルサイト"></a></h1>
<h2>サブタイトル、又はサイトの簡単な説明文を入れましょう</h2>
</div>
<div class="sns">
<a href="https://www.facebook.com/" target="_blank">
<img src="/sample/site/images/fb.png" alt="facebook">
</a>
<a href="https://twitter.com/" target="_blank">
<img src="/sample/site/images/tw.png" alt="twitter">
</a>
</div>
</div>
</header>
<!-- /cms:id="content" -->
<!-- /block:id="header" -->

記事を挿入したい箇所にblock:id="***"で囲み、今回は記事本文のみを表示するので、更にcms:id="content"で囲みます。

この時、block:id="***"の中の***は半角英数字であれば自由に名前を決めることが出来ます。

今回はわかりやすいようにheaderにしました。

block:id="***"で囲った箇所で使用できるcms:idは下記のページをご覧ください。

block:id="***"内で使用できるcms:idタグ

指定の箇所をタグで囲ったらテンプレートを保存します。

set_common_parts_conf