ワークショップ2：テーマ導入とカスタマイズlabs.ecworks.jp/download/baserCMS_workshop2.pdf ·...

ワークショップ２：テーマ導入とカスタマイズ

ECWorks滝下真玄(MASA-P)

http://www.ecworks.jp/[email protected]

@ecworks_masap

コーポレートサイトにちょうどいいCMS「 BaserCMS」1


◎ほかのデザインを使いたい

◎オリジナルデザインを作りたい


どうしたらいいの？？


◎ほかのデザインを使いたい

→テーマをダウンロード

◎オリジナルデザインを作りたい

→オリジナルテーマの作成


【テーマをダウンロード】

http://www.basercms.net/download/index.html


【テーマを適用】

• ダウンロード

–今回は「Ecology」を適用してみる

–今回は勉強会ページからたどってもOK

• ダウンロードファイルの解凍

• 一式をFTPを使ってアップロード

–「インストールフォルダ/app/webroot/themed」内に設置

–「Ecology_2.0」ではなく、その中の「Ecology」をアップロード



「/app/webroot/Ecology/pages」フォルダ内のファイル全部に書き込み権限を与える



適用ボタンを押す



テーマが適用された！


【ダウンロードテーマを使う場合の注意点】

• 画像はすべて仮なので、自分のサイト向けに作り直す必要がある

–同じ大きさの画像を用意する

–画像フォルダは一般的に「/app/webroot/themed/(テーマ名)/img/」内にある

• 色味などを変えたい場合はCSSも修正する

• アイテムを増減させたい場合は「/app/webroot/themed/(テーマ名)/pages/」内のビューファイルや「/app/webroot/themed/(テーマ名)/layouts/」内のレイアウトファイルを変更する


それでは満足できない？


オリジナルテーマを

つくるしかない！！


【ご注意】

• ここからは、コーダー寄りの少し難しい話になります

• 今回はコピペすれば進めるように作ってありますが、作業が難しいと感じたら、見ていただくだけでもOKです

• コーダーの方は是非チャレンジしてみてください

• より詳しいやり方については、今後の勉強会で


【baserCMSの「ビュー」】



レイアウト

ページ(コンテンツ)

エレメント



• レイアウト

– 一番外側にあたるもので、どのページでも表示される領域。主にヘッダやフッタなどを記述する。

– テーマの管轄。

• エレメント

– ビューテンプレート内で呼び出される領域。複数のページで同じものを表示することができる。

– テーマの管轄。



• ページ(コンテンツ)

– baserCMS管理画面の「ページ管理」で編集できる領域。またはブログの記事に当たる領域。

– ファイルとして自動的に保存される。

– テーマの管轄ではない。



カスタムテーマを作る

HTMLファイルを分割して

「レイアウト」と「エレメント」を

作り出す


【テーマのフォルダ構造】

エレメント

ページ(ページ管理で自動的に保存される)

レイアウト

CSS

画像


早速

オリジナルテーマを

つくっていきましょう


【素材】

• 今回のHTMLは、トップページは大きなタイトル画像を持ち3ペインのレイアウト、その他のページはタイトル画像が小さく2ペインのレイアウト

• bodyに「Home」があるかどうかでCSSを判定する(baserCMSのAPIにページ名を入手するものがあるのでそれを利用する)

• トップとその他のページは出来るだけタグやCSSクラスを共通化するようにデザイン／コーディング


【素材】


【ひな形の作成】

• 「テーマ管理」で「demo」をコピー

– 「demo_copy」の「編集」を押し、テーマ名の「demo_copy」を「rest」に変更

– ほかの情報もここで変更OK(今回は割愛)

• FTP等で「/app/webreoot/themed/rest」をダウンロード


【ひな形を作成】

ここをクリックしてテーマを複製



複製された！！



「rest」に変更


【ファイルのコピー】

• 「js」「img」「css」の中身を、ダウンロードしたテンプレートの同じフォルダにコピー

• レイアウトのdefault.phpを「default.php.old」等にしておく(後で消します)

• index.htmlを「default.php」に変更してlayoutsにコピー

• アップロードして更新してみましょう


【ファイルのコピー】


【パスの書き換え】

• default.phpを開き、「./css/」「./js/」「./img/」になっているところを「/themed/rest/css/」「/themed/rest/js/」「/themed/rest/img/」に置換

• アップロードして更新してみましょう


【htmlヘッダを書き換え】

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<title>Italian Restaurant BASER</title>

↓

<?php $bcBaser->charset() ?>

<?php $bcBaser->title() ?>

<?php $bcBaser->metaDescription() ?>

<?php $bcBaser->metaKeywords() ?>


【bodyタグを書き換え】

<body id="Home">

↓

<body id="<?php $bcBaser->contentsName() ?>">

【ヘッダ部をエレメントに置き換える】

• 「rest/elements/header.php」の中を全部消去

• beginHeader～endHeaderをheader.phpに貼り付ける



(この中身を貼り付ける)

【フッタ部をエレメントに置き換える】

• beginFooter～endFooterを下記に置き換える



<?php $bcBaser->header() ?>

• 「rest/elements/footer.php」の中を全部消去

• beginFooter～endFooterをfooter.phpに貼り付ける

• beginHeader～endHeaderを下記に置き換える



<?php $bcBaser->footer() ?>

【「TwoColumn」を「sidebar」エレメントにする】

• 「rest/elements/sidebar.php」の中を全部消去

• begin TwoColumn ～ end TwoColumnをsidebar.phpに貼り付ける

【「TwoColumn」を「sidebar」エレメントにする】

• 中身を「/rest/elements/sidebar.php」にコピー

※元あった部分は取っておくと良い



<?php $bcBaser->element('sidebar'); ?>


【サイドバー内のウィジェットエリアをウィジェットにする】

• 「<div class=“widget-area”>～</div>」を丸ごと何処か

に保存して、下記タグを入れる

<?php $bcBaser->element('widget_area',array('no'=>

$widgetArea)) ?>


【サイドバー内のウィジェットエリアをウィジェットにする】

• 「ウィジェット管理」を開いて「text」で登録する• 「<div class="widget-area">」の部分は消去する

<div id="SideContact"><h2><img src="/themed/rest/img/head_side_contact.gif" alt="CONTACT"/></h2><div class="clearfix">

<img src="/themed/rest/img/img_contact.gif" alt="店内イメージ" class="float-left-img" id="ImgContact" />

<img src="/themed/rest/img/logo_small.gif" width="119" height="30"alt="Italian Restaurant Baser ロゴ" class="logo-small" />

<p>福岡県福岡市天神<br />TEL 000-000-0000<br /></p></div><a href="./contact/index"><img src="/themed/rest/img/bnr_contact.jpg" alt="お問い合わせ" class="btn" id="BannerContact" /></a>

</div>

【「ThreeColumn」の部分を、Homeの時だけ呼び出す】



<?php if($bcBaser->isTop()) : ?>

ここはおなじ

<?php endif; ?>

【画像をTopとそれ以外用に振り分ける】



<div id="ImgMain">


<img src="/themed/rest/img/img_top_main.jpg"alt="Italian Restaurant Baser メインイメージ" />

<?php else: ?>

<img src="/themed/rest/img/img_sub_main.jpg"alt="Italian Restaurant Baser イメージ" />

<?php endif; ?>

</div>

【「ThreeColumn」の改良】

• ブログのリスト、Ajax機能を貼り付け

※ブログ名やAjaxのURLは場合によって変わるので注意！




<div id="ThreeColumn">

(略)

</div>

<?php endif; ?>


【グローバルメニューの修正】

• サイドバーとフッタ内にあるグローバルメニューをbaserCMSに合わせる※グローバルメニューの調整が必要ですが、割愛します

【sidebar.php】

<div id="TwoColumn">

<div id="SideGlobalMenu" class="side-box"><h2><img src="/themed/rest/img/head_side_contents.gif" width="200"

height="20" alt="CONTENTS" /></h2><?php $bcBaser->element('global_menu') ?>

</div>

<?php $bcBaser->element('widget_area',array('no'=>$widgetArea)) ?>

</div>


【グローバルメニューの修正】

【footer.php】

<div id="Footer"><div id="FooterGlobalMenu" class="clearfix">

<?php $bcBaser->element('global_menu') ?></div><div id="Copyright">

Copyright(C) 2010 Baser All rights Reserved.<a href="http://basercms.net/" target="_blank"><img

src="/themed/rest/img/baser.power.gif" alt="BaserCMS : Based WebsiteDevelopment Project" border="0" /></a>

<a href="http://cakephp.org/" target="_blank"><imgsrc="/themed/rest/img/cake.power.gif" alt="CakePHP(tm) : Rapid DevelopmentFramework" border="0" /></a></div>

</div>

【ContentsBodyを置き換え】

• ContentsBodyの部分を切り取り、何処かに保存しておく

• 切り取った部分を次のタグで置き換える



<div id="ContentsBody">

<?php $bcBaser->content(); ?>

</div>


【ContentsBodyを置き換え】

• 切り取った部分を、管理画面の固定ページ管理で「index」に適用

• ※編集画面の「ソース」をクリックしてから適用する


テーマ完成！！


【その他】

• 携帯やスマートフォン対応については、同様にデザインを当てる必要がある

• 管理機能を使わずにpagesを直接編集してもよい。また逆に管理画面だけでもできないことはない

• レンタルサーバ内で作ろうとすると外部に制作過程が見えてしまう可能性があるので、できればローカル環境でやった方がよい


お疲れ様でした！！

ワークショップ2：テーマ導入とカスタマイズlabs.ecworks.jp/download/baserCMS_workshop2.pdf ·...

Documents

Transcript of ワークショップ2：テーマ導入とカスタマイズlabs.ecworks.jp/download/baserCMS_workshop2.pdf ·...