記事とブロック

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


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


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

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




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

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

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


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



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

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

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



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

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


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



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




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


今回は、



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


管理画面を開き、

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




ラベルの管理を開き、

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


作成後に



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

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




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

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

TinyMCE | The Most Advanced WYSIWYG HTML Editor


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



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



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


設定後、




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



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

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





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

テンプレートの編集画面で該当する箇所の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タグ


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



保存後にエディタの上の方にあるブロックタブをクリックし、



未設定のブロックに追加したブロックがあることを確認します。

名前が正しければ設定するリンクをクリックし、



ブロックの新規追加を行います。

今回は特定の記事を表示するので記事表示用ブロックを指定して、



ヘッダ用のパーツとして用意した記事を追加します。

これで共通箇所の設定は終了です。


設定に間違いがないか共通化した箇所の記事を変更してみます。



共通で使用した記事の詳細を開き、変化がわかりやすい箇所を修正します。

今回はサイトの説明文の箇所を修正することにします。


修正後、公開側のページを開き、



指定の箇所が修正されていることが確認できれば、ブロック化は終了です。

Tweet Follow @saitodev
戻る

操作方法の追加リクエスト

操作方法質問フォームでマニュアルに記載されていない操作方法の質問を受け付けています。
より良いマニュアルサイトを目指していきますのでご協力をお願い致します。

当サイトの運営者についての詳細はこちらをご覧下さい。

SOY CMS/Shopの読み物

SOY Shop開発秘話

開発元で働いていた時に発表したスライドです。

売りたいものがあるならば、まずはネットショップのCMSを開発しましょう from Tsuyoshi Saito