はじめての concrete5 – スタック & ページタイプのデフォルトブロック(子ページの設定)篇

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

気がつくと8月も終わり、前回の記事を書いてから約1ヶ月…
8月が特に忙しかったというわけではないのですが、何故かバタバタとした1ヶ月だったような気がする。
というわけで、前回の続きです。

スタックを作ってみる

前回は『サイドバー』部分を作成したわけですが、新規のページを作る度にひとつひとつブロックを追加していくのはとても面倒くさい。
1ページしかない『ホーム』は、ひとつづつブロックを追加してもたいした労力ではないし、『商品ページ』のように『サイドバー』がないレイアウトは問題ない。
でも、『お知らせ』ページは、新規でページを追加するとコンテンツ部分はもちろんのこと、『サイドバー』部分も空っぽです。

新規『お知らせページ』

新規『お知らせページ』

なので、ページを作る度に同じ作業をしなければいけない。
せめて、基本のブロックをまとめておきたい。
基本ブロックの集合体を作りたい。

そこで、『スタック』の登場 🙂

スタックとは、よく使うブロックの集合体です。「管理画面」-「スタック & ブロック」-「スタック」より「グローバルエリア」や「スタック」のブロックを編集します。

サイドバー部分など、よく使いまわすブロックなどをスタックにまとめることにより、更新や並び替えなども一気に行うことができます。

まず、管理画面から『スタック』を選択。
表示した『スタック』には、すでに登録(追加)してある『グローバルエリア』と『他のスタック』がありますので、一番下の『スタックを追加』に適当な名前を記入して『新規』ボタンをクリック。

スタックを追加

スタックを追加

今回は、『基本的なサイドバーのセット』ということで、『Side-basic』としました。
背景画僧によってはわかりにくいこともあるようですが、上部に『スタックが正常に追加されました』と表示されれば OK です。

スタックが追加されました

スタックが追加されました

といっても、『Side-basic』という『スタック』の入れ物ができただけですので、安心してはいけません。
先ほど追加した『Side-basic』をクリックすると『ブロック』を追加する画面になりますので、『スタック』に追加したいブロックを選択してきます。

スタックにブロックを追加

スタックにブロックを追加

今回は、『基本的なサイドバー』の『スタック』ですので、はじめての concrete5 – その8で『サイドバー』に追加した『ブロック』を前回同様追加していきます。
追加する方法は前回と同じですので、今回は省略。

通常のブロックを追加するのと同じ

通常のブロックを追加するのと同様、移動やカスタムテンプレートも選択できます

すべてを追加したら『変更を保存』をクリック。
先ほど新規で作った『お知らせページ』を表示して『編集モード』にし、『Sidebar に追加』を選択します。
今までは、『ブロックを追加』を選択していましたが、今回は『スタックを追加』を選択。

Sidebar エリアにスタックを追加

Sidebar エリアにスタックを追加

スタックを追加

スタックを追加

『編集モード』を終了すれば、『スタック』が追加されてます。

『スタック』が追加されました

『スタック』が追加されました

と、思ったら『余白』をとるのを忘れてました 😥
でも、もう一度『編集モード』に入り、『スタックの内容を管理する』を選べば、『スタック』に追加したそれぞれのブロックを編集できます。
また、もし他のページでも同じ『スタック』が使われていれば、使われているすべてのページに反映されますので、とても便利です。

スタックの内容を管理する

スタックの内容を管理する

『デザイン』の変更が反映されました

『デザイン』の変更が反映されました

これで、ひとつひとつ『ブロック』を追加しなくても『スタック』をひとつ追加するだけで OK です。
いくつかのパターンを想定して『スタック』を作っておけば、かなり楽になると思います。

でも、これだけだと新規にページを作った時には、あいかわらず『Sidebar エリア』は空っぽの状態です。

『Sidebar エリア』には何もない

『Sidebar エリア』に最初から『ブロック』を入れておきたい

う〜ん、何か方法はないものかとconcrete5 Japan 日本語公式サイトを見てみると、『ページタイプ』を使って設定ができるようです。

ページタイプのデフォルトブロックを設定してみる

ということで、管理画面から『ページタイプ』を選択。
今回の『お知らせページ』は『右サイドバー』を使いましたので、『右サイドバー』の『デフォルト』ボタンをクリックします。

『ページタイプ』を選択

『ページタイプ』を選択

『デフォルト』ボタンをクリック

『デフォルト』ボタンをクリック

すると、新規ページを作った時のようなページが開きます。
一瞬、『管理バー(という呼び方でいいのでしょうか?)』右側にダイアログが表示されるのですが、さり気なくて見逃すところでした 😀
左側には『← ページタイプ』と表示されているので、通常の『新規ページ』と間違うことはないと思いますが、もうちょっと、目立つようにしてもいいのに…(編集などのアクションの度に表示されるので、これくらいの方がいいのかもね…)

『デフォルト』クリック後のダイアログ

『デフォルト』クリック後のダイアログ

『← ページタイプ』の表示

『← ページタイプ』の表示

次に『編集モード』へ入り、通常のページと同じように『Sidebar エリア』に『ブロック』または『スタック』を追加します。
今回は、先ほど作った『スタック』を追加して、『編集モード』を終了。
これで、『右サイドバー』を使った『新規ページ』には、『Sidebar エリア』に『スタック』が追加された状態で、ページが表示されます。

『スタック』が追加された状態で『新規ページ』が開く

『スタック』が追加された状態で『新規ページ』が開く

今回のサンプルサイトを作る際に、何も考えないで『お知らせページ』を作ったので、すでに何ページか『お知らせページ』が存在します。
もちろん、『Sidebar エリア』には何も追加していませんので、空っぽの状態です。
このように『すでに存在するページに対してはどうしたらいいのか』というと、先ほど『スタック』を追加した『ページタイプ』の編集モードに入り、追加した『スタック』をクリックして『子ページの設定』を選択します。
すると、『子ページの設定』というそのページタイプに属している子ページの一覧が表示されます。
ページタイプのデフォルト設定をしてから作った『ページタイプのテスト』ページにはチェックが入っていますが、その他のページにはチェックが入っていません。
ここで、この『スタック(ブロック)』を表示させたいページにチェックを入れて『保存』すれば、チェックしたページすべての『Sidebar エリア』に『スタック(ブロック)』が追加されます。
この機能を使えば、あとからでも一括でページに『スタック(ブロック)』を追加することができますので、かなり便利かも 🙂

『子ページの設定』を選択

『子ページの設定』を選択

『子ページの設定』

『ページタイプ』のデフォルト設定後のページにはチェックが入っている『子ページの設定』

しかし、先ほども書いたように今回は何も考えずに『お知らせページ』を『ページタイプ』の『右サイドバー』を使って、ページを作っていきました。
これだと今後、『右サイドバー』を使う時は、『Sidebar エリア』に『スタック(ブロック)』が入った状態で新規ページができる。
まぁ、『右サイドバー』に入っていても問題ない場合はかまわないですし、いらなければその都度削除することもできますので、気にしなくてもいいのかも知れません。
でも、何となく『右サイドバー』という『ページタイプ』は、今後のことを考えるとそのままにしておきたい(初期状態ということ)気がするんですよね。
そこで、『お知らせページ』用の『ページタイプ』を新規で作ることにしました。
『管理画面』から『ページタイプ』を選択して、『ページタイプ追加』をクリックします。
今回は、『名前』を『お知らせページ』、『ハンドル』を『news_entry』、『アイコン』は右側にサイドバーがあるタイプを選択、『初期属性値』は『オートナビから除く』のみチェックしましたが、それぞれのページタイプにあわせて適宜設定してください。
設定が完了すれば、『新規』ボタンをクリック。
これで、『お知らせページ』用の『ページタイプ』できました。

ページタイプを追加

ページタイプを追加

新規ページタイプの設定

新規ページタイプの設定

この『ページタイプ』というのが、concrete5 を使う上でわかりづらい機能のひとつなんですよね。
私も、完全に理解したわけではないですが、この『ページタイプ』の概念が理解できれば、concrete5 を使って制作するのが楽しくなるかも 😉

で、今作った『ページタイプ・お知らせページ』に先ほど『ページタイプ・右サイドバー』に『スタック』を追加したのと同じように『Sidebar エリア』に『スタック』を追加し、『ページタイプ・右サイドバー』は初期状態に戻すということで、『スタック』を削除します。
今回は、『ページタイプ・右サイドバー』のデフォルト設定後のテストページが1ページだけなので問題ないですが、すでに『ページタイプ・右サイドバー』のデフォルト設定が適用されたページがある場合は、すべて削除されてしまいますのでご注意くださいませ。
次から『お知らせ』の新規ページを作る時は、『お知らせページ』という『ページタイプ』を選択すれば、最初から『Sodebar エリア』に『スタック』が入った状態で表示されますので、あとはコンテンツ部分に記事等を書いて行けば OK!

また、今回のように他の『ページタイプ』を使ってページを作ってしまっている場合は、『サイトマップ』から該当ページの『デザイン』選択して、『ページタイプ』を変更することができます。

各ページの『デザイン』を選択

各ページの『デザイン』を選択

もちろん、サイトマップからではなく各ページの『デザイン』からでも変更できますが、ページ数が多い場合は『サイトマップ』から『ページ検索』を選択し、表示された該当ページにチェックを入れて『**選択したアイテム』の『デザイン』を選び、『ページタイプ』を変更すれば、一括で変更できるので楽だと思います。

ページ検索

『ページ検索』ならまとめて変更できます

ただし、あとから『ページタイプ』を変更しても『Sidebar エリア』には『スタック』が追加されませんでした。
これが仕様なのかバグなのかわかりませんが、すでにページがある場合は『エリア』に『ブロック』が追加されている可能性も高く、むやみに変更しないという配慮なのかも知れませんね。
この場合は、先ほどの『子ページの設定』のチェックボックスで変更すれば OK です。
もしかすると『ページタイプ』の変更を適用させるのは、『子ページの設定』でするという仕様なのかな?
まだ、concrete5 を使いこなせていないのでよくわかりませんが、様々な状況を想定してこのようなインターフェースになっているのも知れません。

『子ページの設定』

『子ページの設定』でチェックを入れると各ページに適用される

と、以上が『ページタイプ』のデフォルトブロックを使った設定方法ですが、もうひとつ『グローバルエリア』を使う方法もあります。

グローバルエリアを使って設定してみる

『グローバルエリア』については、はじめての concrete5 – その2を見てください。

で、どのように『お知らせページ』の『Sidebar エリア』を『グローバルエリア』にするかというと、

またテーマ内にページタイプのハンドル名と同名のファイルを用意し、HTMLやCSSを変えレイアウトを変更したり、エリアの数を変えたりする事が出来ます。

ということなので、『ページタイプ・お知らせページ』の『ハンドル』である『news_entry』に対して『news_entry.php』というファイルを作ればいいのではないでしょうか。
試しに、新規に『ページタイプ』を追加して、同名のファイルを作ってみます。 
先ほどと同じ手順で『ページタイプ追加』をクリックして、『名前』を『ニュース』、『ハンドル』を『news』、『初期属性値』は特にチェックなしで保存。

ページタイプ・ニュース

ページタイプ・ニュースを追加

該当するテーマフォルダー(今回の場合では『concrete5をインストールしたディレクトリ / themes / hoge_theme /)内の『default.php』を『news.php』というファイル名で別名保存し、通常のエリアである『Sidebar』を『News Sidebar』という名前の『グローバルエリア』に変更して、もう一度保存。

[php]
<?php
defined(‘C5_EXECUTE’) or die(“Access Denied.”);
$this->inc(‘elements/header.php’);
?>

<div id=”contents”>
<div id=”primary”>
<?php
$a = new Area(‘Main’);
$a->display($c);
?>

</div><!– #primary –>

<div id=”secondary”>

<?php
$a = new GlobalArea(‘News Sidebar’);
$a->display();
?>

</div><!– #secondary –>
</div><!– end contents –>

<?php $this->inc(‘elements/footer.php’); ?>
[/php]

ファイルができたら、『ページタイプ・ニュース』を選択して新規ページを作成します。
新規ページの『Sidebar エリア』が『編集モードで』で『サイト全体の News Sidebar に追加』になっていれば、『グローバルエリア』に設定されています。(当然、『news.php』が読み込まれたということです)

『ページタイプ』の『ニュース』を選択

『ページタイプ』の『ニュース』を選択

グローバルエリアに設定されています

グローバルエリアに設定されています

で、最初は『News Sidebar』に何も入っていませんので、お馴染みの方法で『スタック』を追加すると、次回からは『スタック』が追加された状態で新規ページが開きます。

『グローバルエリア』に『スタック』を追加

『グローバルエリア』に『スタック』を追加

ニュースページ

ニュースページ

というわけで、今回は『スタック』の作成方法と『ページタイプのデフォルトブロック』、『グローバルエリア』を使ったページにあらかじめ『ブロック・スタック』を追加しておく方法でした。
このあたりの機能がわかれば concrete5 を使ったサイト制作も面白くなってくると思います。
うまく使えば製作時間もかなり短縮できそうですしね。

1ヶ月ぶりの記事なので、まとまってないかも知れませんがお許しを… 🙄

concrete5 公式活用ガイドブック (Web Designing BOOKS)

concrete5 公式活用ガイドブック (Web Designing BOOKS)

posted with amazlet at 14.05.06
猪上 博史 Katz Ueno 榊 友哉 佐々木 多生 中根 紳一 菱川 拓郎 吉川 智久
マイナビ (2010-08-05)
Amazon.co.jp で詳細を見る

スポンサーリンク

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。