ページ毎にwolf CMSのページデザインを変更する

Wolf CMSを使っていて、トップページと他のページとでデザインを変えたいと思ったことはないでしょうか。
今回は、TOPページと子ページとでデザインを変えたい時に使えるであろうテクニックを紹介します。

管理画面のレイアウトタブを開き、デザインを変更したいレイアウトの編集します。
デフォルトではWolfレイアウトになっているかと。

開いたレイアウトの<body>と書かれている部分を下記のように変更してください。

<body id="<?php if( $this->id() == 1){ echo 'top'; }else{ echo 'page'; } ?>">

こうすることで、Home Pageのbodyタグidセレクタをtopに、
それ以外(子ページ)のbodyタグのidセレクタをpageに設定することができます。

あとはCSSの方で、

/* TOPページのデザインは#topで指定 */
/* e.g. */
#top {
    /* ... */
}
#top header {
    /* ... */
}

/* その他ページのデザインは#pageで指定 */
/* e.g. */
#page {
    /* ... */
}
#page footer {
    /* ... */
}

上記のような感じで、topページと子ページに応じてそれぞれcssを設定していけばいいかと思います。

PHPコードの説明

ちなみにですが、

<?php if( $this->id() == 1){ echo 'top'; }else{ echo 'page'; } ?>

上記のコードはページのidを取得して、そのページがトップかどうか判断しています。
ちなみにトップページの戻り値は必ず1になるようです。
公式ドキュメント


投稿日

カテゴリー:

投稿者:

タグ: