ブログページを作成する(ブログトップ)

自身で用意したブログ用のテンプレートを使用してブログページを作成します。

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

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

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



作成したサイトにログインして、



ページの新規作成でページの種類をブログページにして作成します。

この時、ブログページのみのサイトの場合はURIを空にすれば良いです。

プログページ以外のトップページやお問い合わせページを持つ場合はblogといったURIにすると良いです。



ページが作成できたら、投稿のリンクからテストの記事を投稿しておきます。





サンプル記事が準備できたら、HTMLテンプレートを組み込みます。



作成したブログページの詳細であればどのページにもあるテンプレートのリンクをクリックし、



ブログトップのテンプレート編集画面が表示されていることを確認した後、

ご用意したブログトップ用のHTMLを何も加工せずに貼り付けます。


更新後、ブログの確認を行うと、



貼り付けたHTMLそのままの内容が表示されます。

※画像やCSSといった外部ファイルはHTMLに記述されているパスの通りにサーバに配置してください。

※SOY CMS内で用意されているファイルマネージャからでもサーバへアップロードが可能です。

SOY CMSで利用しているelFinderでjsファイルのアップロードを許可する - saitodev.co


この段階ではエディタに貼り付けた生のHTMLをそのまま表示しているだけなので、

ブログの機能は動いていません。


これからブログの機能をHTMLに追加していきます。



はじめに繰り返し表示されている記事に該当する箇所を一つだけ探して、

下記の様に繰り返しの開始と終了にブログ用のタグを記述します。


<!-- b_block:id="entry_list" -->
<div class="post archive">
<span class="imgbox alignleft"><img src="/sample/images/sampleimg/sam2.png"></span>
<h3><a href="#">記事タイトル</a></h3>
<div class="contents"><p>ブログのコンテンツはここに抜粋で表示されます。<br></p></div>
<div class="tim_cat alignleft archi_top">
<span>2016/09/19</span>
<a href="blog_archive.html"><span class="label">カテゴリ名</span></a>
</div>
<span class="morelink alignright">
<a href="blog_entry.html"><img src="/sample/images/more.png"></a>
</span>
</div>
<!-- /b_block:id="entry_list" -->

これで記事の投稿数だけ、b_block:id="entry_list"で囲った箇所が表示されます。

※SOY CMSでCMSにテンプレートを組み込む際はコメント形式、もしくはタグの属性値として指定します。


b_block:id="entry_list"で囲っていない記事のHTMLはそのまま表示されてしまいますので、

削除しておくなり、

下記のコードのように表示の際に無視するエリアの指定をしておきましょう。


<!-- cms:ignore -->
<div class="post archive">
<span class="imgbox alignleft"><img src="/sample/images/sampleimg/sam2.png"></span>
<h3><a href="#">記事タイトル</a></h3>
<div class="contents"><p>ブログのコンテンツはここに抜粋で表示されます。<br></p></div>
<div class="tim_cat alignleft archi_top">
<span>2016/09/19</span>
<a href="blog_archive.html"><span class="label">カテゴリ名</span></a>
</div>
<span class="morelink alignright">
<a href="blog_entry.html"><img src="/sample/images/more.png"></a>
</span>
</div>
<!-- /cms:ignore -->

ここまで対応した上で、改めて表示を確認してみると、



投稿した記事分だけ表示されるようになりました。


続いて、



最初にサンプルとして投稿した記事の内容を記事エリアに表示できるようにします。


b_block:id="entry"で囲った箇所に更にタグを追加していきます。


<!-- b_block:id="entry_list" -->
<div class="post archive">
<span class="imgbox alignleft"><img src="/sample/images/sampleimg/sam2.png"></span>
<h3><a href="" cms:id="entry_link"><!-- cms:id="title_plain" -->記事タイトル<!-- /cms:id="title_plain" --></a></h3>
<div class="contents" cms:id="content"><p>ブログのコンテンツはここに抜粋で表示されます。<br></p></div>
<div class="tim_cat alignleft archi_top">
<span cms:id="create_date" cms:format="Y/m/d">2016/09/19</span>
<a href="blog_archive.html"><span class="label">カテゴリ名</span></a>
</div>
<span class="morelink alignright">
<a href="" cms:id="more_link"><img src="/sample/images/more.png"></a>
</span>
</div>
<!-- /b_block:id="entry_list" -->

太字で囲った箇所が追加箇所です。

このテンプレートを保存して、ブログページの表示を確認してみると、



記事の内容が反映されています。

左側のサムネイル画像は何もしていないのでそのまま表示されています。




タグについて

SOY CMSでテンプレートをCMSに組み込む時、

生のHTMLをテンプレートエディタに貼り付けて、そのHTMLにコメントもしくはタグの属性として表示したい内容を指定します。


ブログで記事を繰り返したい箇所を<!-- b_block:id="entry_list"で囲いました。


記事タイトルを表示したい箇所を

<a href="" cms:id="entry_link"><!-- cms:id="title_plain" -->記事のタイトル<!-- /cms:id="title_plain" --></a>

のように

アンカータグでは属性値の指定のようにcms:id="entry_link"を挿入し、

記事のタイトルでは<!-- cms:id="title_plain" -->記事のタイトル<!-- /cms:id="title_plain" -->のようにHTMLのコメントタグでcms:idの前にスラッシュ無しを開始タグ、スラッシュのあるものを終了タグのように使って記事を出力する箇所を指定しました。

<!-- cms:id="title_plain" /-->とコメントの閉じる箇所の前にスラッシュをつけることで、一つのタグで表示の指定を行うことも可能です。


記事の投稿時刻も

<span cms:id="create_date" cms:format="Y/m/d">2016/09/19</span>

cms:id="create_date"で記事の投稿時刻の表示を指定して、cms:format="Y/m/d"で表示のフォーマットを指定しています。

cms:formatはPHPのdate関数で使用できるフォーマットと同じものが使用出来ます。

http://php.net/manual/ja/function.date.php


b_block:idとcms:idはたくさん種類がありますが、

それは順を追って紹介していきます。


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

b_block:id="entry_list"内で使用できるcms:idタグ


追記



記事一覧で本文からHTMLタグを除いて200文字を表示したい場合は、

<div class="contents" cms:id="content" cms:length="200"><p>ブログのコンテンツはここに抜粋で表示されます。<br></p></div>

cms:id="content"で本文の取得の指定をした直後にcms:length="文字数"でタグ無しの本文を取得出来ます。

Tweet Follow @saitodev
戻る

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

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

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

SOY CMS/Shopの読み物

SOY Shop開発秘話

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

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