ワークショップ2:テーマ 導 入 とカスタマイズ ECWorks 滝 下 真 玄 (MASA-P) http://www.ecworks.jp/ info@ecworks.jp @ecworks_masap
1
ほかのデザインを 使 いたい オリジナルデザインを 作 りたい 2
どうしたらいいの?? 3
ほかのデザインを 使 いたい テーマをダウンロード オリジナルデザインを 作 りたい オリジナルテーマの 作 成 4
テーマをダウンロード http://www.basercms.net/download/index.html 5
テーマを 適 用 ダウンロード 今 回 は Ecology を 適 用 してみる 今 回 は 勉 強 会 ページからたどってもOK ダウンロードファイルの 解 凍 一 式 をFTPを 使 ってアップロード インストールフォルダ/app/webroot/themed 内 に 設 置 Ecology_2.0 ではなく その 中 の Ecology をアップロード 6
テーマを 適 用 7
テーマを 適 用 /app/webroot/ecology/pages フォルダ 内 の ファイル 全 部 に 書 き 込 み 権 限 を 与 える 8
テーマを 適 用 適 用 ボタンを 押 す 9
テーマを 適 用 テーマが 適 用 された! 10
テーマを適用 11
ダウンロードテーマを使う場合の注意点 画像はすべて仮なので 自分のサイト向けに作り直す 必要がある 同じ大きさの画像を用意する 画像フォルダは一般的に /app/webroot/themed/(テーマ 名)/img/ 内にある 色味などを変えたい場合はCSSも修正する アイテムを増減させたい場合は /app/webroot/themed/(テーマ名)/pages/ 内の ビューファイルや /app/webroot/themed/(テーマ 名)/layouts/ 内のレイアウトファイルを変更する 12
それでは満足できない 13
14
オリジナルテーマを つくるしかない 15
ご注意 ここからは コーダー寄りの少し難しい話になります 今回はコピペすれば進めるように作ってありますが 作業 が難しいと感じたら 見ていただくだけでもOKです コーダーの方は是非チャレンジしてみてください より詳しいやり方については 今後の勉強会で 16
basercmsの ビュー 17
basercmsの ビュー レイアウト ページ(コンテンツ) エレメント 18
basercmsの ビュー レイアウト 一番外側にあたるもので どのページでも表示される領域 主にヘッダやフッタなどを記述する テーマの管轄 エレメント ビューテンプレート内で呼び出される領域 複数のページで同 じものを表示することができる テーマの管轄 19
basercmsの ビュー ページ(コンテンツ) basercms管理画面の ページ管理 で編集できる領域 また はブログの記事に当たる領域 ファイルとして自動的に保存される テーマの管轄ではない 20
basercmsの ビュー カスタムテーマを作る HTMLファイルを分割して レイアウト と エレメント を 作り出す 21
テーマのフォルダ構造 CSS エレメント 画像 レイアウト ページ (ページ管理で自動的に保存される) 22
早速 オリジナルテーマを つくっていきましょう 23
素材 今回のHTMLは トップページは大きなタイトル画像を 持ち3ペインのレイアウト その他のページはタイトル 画像が小さく2ペインのレイアウト bodyに Home があるかどうかでCSSを判定する (basercmsのapiにページ名を入手するものがあるので それを利用する) トップとその他のページは出来るだけタグやCSSクラス を共通化するようにデザイン コーディング 24
素材 25
素材 26
ひな形の作成 テーマ管理 で demo をコピー demo_copy の 編集 を押し テーマ名の demo_copy を rest に変更 ほかの情報もここで変更OK(今回は割愛) FTP等で /app/webreoot/themed/rest を ダウンロード 27
ひな形を作成 ここをクリックしてテーマを複製 28
ひな形を作成 複製された 29
ひな形を作成 rest に変更 30
ひな形を作成 rest に変更 31
ファイルのコピー js img css の中身を ダウンロードした テンプレートの同じフォルダにコピー レイアウトのdefault.phpを default.php.old 等に しておく(後で消します) index.htmlを default.php に変更してlayoutsにコピー アップロードして更新してみましょう 32
ファイルのコピー 33
パスの書き換え default.phpを開き./css/./js/./img/ に なっているところを /themed/rest/css/ /themed/rest/js/ /themed/rest/img/ に置換 アップロードして更新してみましょう 34
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()?> 35
bodyタグを書き換え <body id="home"> <body id="<?php $bcbaser->contentsname()?>"> 36
ヘッダ部をエレメントに置き換える rest/elements/header.php の中を全部消去 beginheader endheaderをheader.phpに貼り付ける <!-- begin Header --> (この中身を貼り付ける) <!-- end Header --> 37
フッタ部をエレメントに置き換える beginfooter endfooterを下記に置き換える <!-- begin Header --> <?php $bcbaser->header()?> <!-- end Header --> 38
ヘッダ部をエレメントに置き換える rest/elements/footer.php の中を全部消去 beginfooter endfooterをfooter.phpに貼り付ける <!-- begin Footer --> (この中身を貼り付ける) <!-- end Footer --> 39
ヘッダ部をエレメントに置き換える beginheader endheaderを下記に置き換える <!-- begin Footer --> <?php $bcbaser->footer()?> <!-- end Footer --> 40
TwoColumn を sidebar エレメントにする rest/elements/sidebar.php の中を全部消去 begin TwoColumn end TwoColumnをsidebar.php に貼り付ける <!-- begin TwoColumn --> (この中身を貼り付ける) <!-- end TwoColumn --> 41
TwoColumn を sidebar エレメントにする 中身を /rest/elements/sidebar.php にコピー 元あった部分は取っておくと良い <!-- begin TwoColumn --> <?php $bcbaser->element('sidebar');?> <!-- end TwoColumn --> 42
サイドバー内のウィジェットエリアをウィジェットにする <div class= widget-area > </div> を丸ごと何処か に保存して 下記タグを入れる <?php $bcbaser->element('widget_area',array('no'=> $widgetarea))?> 43
サイドバー内のウィジェットエリアをウィジェットにする ウィジェット管理 を開いて 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="floatleft-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> 44
ThreeColumn の部分を Homeの時だけ呼び出す <!-- begin ThreeColumn --> <?php if($bcbaser->istop()) :?> ここはおなじ <?php endif;?> <!-- end ThreeColumn --> 45
画像をTopとそれ以外用に振り分ける <!-- begin ImgMain --> <div id="imgmain"> <?php if($bcbaser->istop()) :?> <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> <!-- end ImgMain --> 46
ThreeColumn の改良 ブログのリスト Ajax機能を貼り付け ブログ名やAjaxのURLは場合によって変わるので注意 <!-- begin ThreeColumn --> <?php if($bcbaser->istop()) :?> <div id="threecolumn"> (略) </div> <?php endif;?> <!-- end ThreeColumn --> 47
グローバルメニューの修正 サイドバーとフッタ内にあるグローバルメニューを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> 48
グローバルメニューの修正 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 Website Development Project" border="0" /></a> <a href="http://cakephp.org/" target="_blank"><img src="/themed/rest/img/cake.power.gif" alt="cakephp(tm) : Rapid Development Framework" border="0" /></a> </div> </div> 49
ContentsBodyを置き換え ContentsBodyの部分を切り取り 何処かに保存しておく 切り取った部分を次のタグで置き換える <!-- begin ContentsBody --> <div id="contentsbody"> <?php $bcbaser->content();?> </div> <!-- end ContentsBody --> 50
ContentsBodyを置き換え 切り取った部分を 管理画面の固定ページ管理で index に適用 編集画面の ソース をクリックしてから適用する 51
テーマ完成 52
その他 携帯やスマートフォン対応については 同様にデザイン を当てる必要がある 管理機能を使わずにpagesを直接編集してもよい また 逆に管理画面だけでもできないことはない レンタルサーバ内で作ろうとすると外部に制作過程が見 えてしまう可能性があるので できればローカル環境で やった方がよい 53
お疲れ様でした 54