OWLetでサイト内ブログを作ってみる

  • このエントリーをはてなブックマークに追加
OWLetのアーティクルリスト機能を使えば、簡単にサイト内ブログを構築することができます。
この記事では、実際にサイト内ブログを構築するフローを解説します。

Step1. レイアウトを登録する

まずはレイアウトの作成から

sample

まずはレイアウトの作成を行います。

レイアウトはページCMSの上部メニューにある「レイアウト」から作成できます。

今回は図のように2カラムのレイアウトでサイト内ブログを構築します。

 

サイドカラム:カテゴリアーカイブ、月間アーカイブ

メインカラム:ブログ一覧orブログ詳細

 

ここでは、アーティクルを登録するだけで、レイアウトの中身は後ほど作成します。

Step2.ディレクトリ設定をする

sample

続いて、管理画面のディレクトリ設定を開きます。

ここではブログを設置するディレクトリ定義します。

管理画面の「setting」>「ディレクトリ設定」と進みます。

ディレクトリ設定画面ではすでに作成しているディレクトリグループの一覧が表示されます。

ページ下部の新規グループ登録から「ブログ」グループを作成します。

一覧画面用のディレクトリを作成する

sample

「ブログ」グループが作成できたら作成したグループの「ディレクトリ設定」を行います。

ディレクトリグループ一覧で、作成したグループ名称右にある「ディレクトリ設定」リンクをクリックします。

ディレクトリ設定ページに遷移したら下記のように入力して登録ボタンをクリックします。

 

ディレクトリ名:ブログ(一覧ページの名称になります)

URL:blog/

レイアウト:ブログ一覧(Step1で作成した一覧ページのレイアウトを指定します)

カテゴリ毎の一覧ページ用のディレクトリを作成する

sample

さらに、カテゴリ毎の一覧画面用のディレクトリ設定も作成します。

 

<階層構造イメージ>

ブログ一覧

  |-カテゴリAの一覧ページ

  |             |-カテゴリAの記事1

  |             |-カテゴリAの記事2  

  |

    |-カテゴリBの一覧ページ

              |-カテゴリBの記事1

                |-カテゴリBの記事2  

 

作成したブログディレクトリにカテゴリAのディレクトリとカテゴリBのディレクトリを追加します。

図のようにディレクトリが作成できれば完了です。

Step3.アーティクルの作成と投稿

sample

アーティクルの作成を行います。

アーティクルは管理画面「setting」>「アーティクル」から作成できます。

ここでは下記のように入力してアーティクルを作成します。

 

アーティクル名:ブログ

詳細ページデフォルトレイアウト:ブログ詳細(Step1で作成したレイアウトです)

対象ディレクトリグループ:ブログ(Step2で作成したディレクトリグループを選択します)

 

アーティクルの作成が完了したら、入力項目の設定を行います。

入力項目とは、記事を投稿する際に入力する項目のことです。

例えばブログの場合、タイトル、一覧ページ用のテキスト、アイキャッチ画像等です。

 

OWLetのアーティクルリストでは入力項目を自由に定義することができます。

入力の形式もテキスト、メールアドレス、住所、電話・FAX、日付・時間、単一選択、複数選択、画像、ファイルと自由に設計が可能です

ブログの投稿

sample

作成したアーティクルに記事を投稿するのは、管理画面「contetns」>「ブログ」を選択します。

ここで「新規作成」ボタンから記事の投稿が可能です。

図のように実際に記事を投稿してみましょう。

ここでのポイントはディレクトリです。

ディレクトリ欄にはアーティクル作成時に選択したディレクトリグループのディレクトリが選択肢として表示されます。

記事の属するカテゴリを選択しましょう。

 

これでアーティクルの作成と記事の投稿が完了です。

Step4. 一覧ページ、詳細ページの作成

月間アーカイブ、カテゴリアーカイブ

sample

月間アーカイブとカテゴリアーカイブを作成します。

Step1の「ブログ共通」レイアウトに各アーカイブを設置します。

 

それぞれ使用するパーツは、

月間アーカイブ:「月間アーカイブ」パーツ

カテゴリアーカイブ:「ディレクトリ一覧」パーツ

です。

sample

「ディレクトリ一覧パーツ」を設置したら図のようなダイアログが表示されます。

ここでは下記のように設定します。

 

ルートディレクトリ:ブログ

出力階層:1(カテゴリA、カテゴリBはルートディレクトリから見て1階層目にあるので、ここでは1と入力します)

開始タグ、終了タグ:リストで表示する場合は<ul>タグを記載します。

ループタグ:ここでの記述が対象のディレクトリ数分繰り返されます。

                  変数については下記を参照して下さい。

 

[*@deirectory:url*]:対象ディレクトリのURL

[*@name*]:対象ディレクトリ名

[*article_count(@directory:id,'article','article','',array('@id.setting'),true)*]:この記述で対象ディレクトリに投稿された記事数が表示できます。

sample

「月間アーカイブ」パーツを設置すると図のようなダイアログが表示されます。

図のように必要項目を入力して登録ボタンをクリックします。

 

以上で、カテゴリアーカイブと月間アーカイブの作成は完了です。

一覧ページの構築

sample

続いてブログ一覧ページの構築です。
Step1で作成した「ブログ一覧」レイアウトに進みます。
パーツの一覧に作成したアーティクルリストのパーツが自動で追加されていますので、設置したいアーティクルのパーツをドラッグ&ドロップで追加するだけで一覧ページの構築は完了です。

詳細ページの構築

sample

最後に詳細ページの構築です。
Step1で作成した「ブログ詳細」のレイアウトに遷移すると、パーツ一覧の最下部に「プレースホルダー」というカテゴリがあります。
ここにアーティクル作成時に設定した入力項目のパーツがありますので、通常のページ構築同様にパーツを組み合わせてページのレイアウトを作成します。

以上で、サイト内ブログの構築が完了です。

sample

アーティクルリストを使えば、通常はPHP等のプログラミング言語を使いこなさなければできない更新系コンテンツの構築が、管理画面での設定とドラッグ&ドロップでのパーツ設置のみで構築できてしまいます。
アーティクルリストを有効利用して、より少ない工数で更新系コンテンツを作成してみてください。

OWLetを用いたWEB制作事業はこちらから

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

EXPOバナーよくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 09:30~17:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>