Successfully reported this slideshow.

baserCMSテーマ制作チュートリアル

8,557 views

Published on

http://basercms.net/files/basertutorial.zip より、資料に必要となる HTMLデータがダウンロードできます。

Published in: Technology

baserCMSテーマ制作チュートリアル

  1. 1. baserCMS  Users  Community
  2. 2. baserCMS テーマ制作 チュートリアル
  3. 3. サーバー環境について まずはサーバー環境の準備をしましょう ¡  レンタルサーバー・XAMPP・MAMP等 ¡  ロリポップ!の簡単インストールや、ニフティクラウドC4SAのコンテキストなどを利用 すると、baserCMSのインストールまでを数クリックで完了する事ができます。Copyright 2010 baserCMS All rights reserved
  4. 4. baserCMSのダウンロード baserCMSの公式サイトから最新版のbaserCMS とアップローダープラグ インをダウンロードして解凍してください。 ¡  baserCMSコアダウンロード http://basercms.net/download/index.html ¡  プラグインダウンロード http://basercms.net/plugins/indexCopyright 2010 baserCMS All rights reserved
  5. 5. baserCMSの ドキュメントルート baserCMSをそのまま設置すると、静的ファイルを設置する「ドキュメン トルート」が強制的に変更されます。 これはbaserCMSのフレームワーク 「CakePHP」のセキュリティ上の仕様なの ですが、Web制作者にやさしくない! baserCMSは、簡単にドキュメントルート を通常の構成に戻す事ができるようになっ ています。Copyright 2010 baserCMS All rights reserved
  6. 6. baserCMS構造変更 ¡  webrootフォルダを抜き出します。 ¡  そしてwebrootフォルダ内にapp / baser / cake の3つのフォルダを入れ ちゃいます。 ¡  残ったファイルは削除します。Copyright 2010 baserCMS All rights reserved
  7. 7. baserCMS構造変更完了形 最終的に次のような構成になれ ばOKです。 今回、webroot フォルダを抜き 出して構成変更を行なっている ので webroot がトップディレク トリのように見えますが、実際 には、webroot の配下のファイ ルをサーバー上に配置する事と .htaccess なります。Copyright 2010 baserCMS All rights reserved
  8. 8. アップローダープラグインの設 置 ¡  アップローダープラグインを解凍し、できたフォルダ/app/plugins/ の 中に配置します。 ¡  管理システムにログインし、プラグイン管理よりアップローダープラグ インのインストールを行います。Copyright 2010 baserCMS All rights reserved
  9. 9. アップロード&インストール 1.  構成変更を終えたファイル群を全てサーバーにアップロードします。 2.  アップロードが完了したら、トップページのURLにブラウザでアクセ スします。 3.  データベースは環境に応じて任意のものを選択します。 ※ 本番環境でCSVの利用はおすすめしません。 4.  インストールが完了したらダッシュボードに移動し、動作を確認しま す。Copyright 2010 baserCMS All rights reserved
  10. 10. テーマの変更 /themed/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。 管理システムから「テーマ管理」をクリックし、「corp」というテーマが表示されているのを 確認します。 《「pages」フォルダに書き込み権限を与え て下さい。》というメッセージが出ているは ずですので、/themed/corp/ 内にpagesフォ ルダを作成して配置して下さい。 リロードするとテーマ「corp」が選択できる ようになっているはずですので選択します。Copyright 2010 baserCMS All rights reserved
  11. 11. ページテンプレートの 権限変更 ページテンプレートには書き込み権限が必要です。 サーバー上のフォルダとファイルの権限を変更します。 ¡  /themed/corp/pages/ フォルダ:707(もしくは777) ¡  フォルダ配下のファイル群:606(もしくは666)Copyright 2010 baserCMS All rights reserved
  12. 12. デバッグモードへ切り替える ¡  baserCMSのページ機能は表示速度を少しでも改善する為、サーバー キャッシュ機構というものを利用している為、テンプレートをFTPにて アップロードした場合、表示が変わらない場合があります。 ¡  その場合、管理システムより「サーバーキャッシュの削除」を実行する と表示を更新する事ができます。 (システム管理>ユーティリティ>サーバーキャッシュ削除) ¡  システム設定で、制作・開発モードをデバッグモードに変更すると、 キャッシュは生成されなくなります。事前にデバッグモード1に切り 替えてから制作を行うとキャッシュの削除が不要となり便利です。制作 が完了したら必ずノーマルモードに戻しましょう。 (システム管理>(オプションバークリック後)>制作・開発モード)Copyright 2010 baserCMS All rights reserved
  13. 13. レイアウトファイルの作成 ¡  テーマフォルダ(/themed/corp/)内に「layouts」というフォルダを作 成します。 ¡  「layouts」フォルダ内に「default.php」というファイルを作成します。 (文字コードはUTF-8) ¡  添付しているhtmlフォルダ内のindex.htmlの内容をそのまま貼り付けて アップロードし、公開ページを確認してください。全てのページがデ ザインの適用されていない素のページが表示されるはずです。Copyright 2010 baserCMS All rights reserved
  14. 14. CSSと画像のアップロード ¡  htmlフォルダ内の css フォルダと img フォルダをテーマフォルダ (/themed/corp/)内に配置し、サーバーにアップロードします。Copyright 2010 baserCMS All rights reserved
  15. 15. タイトル・メタタグの埋込 ¡  レイアウトファイル(default.php)のheadタグ内に次のタグを書き込 みます。 ¡  既存のタイトルタグは消してください。 <?php $bcBaser->title() ?> <?php $bcBaser->metaDescription() ?> <?php $bcBaser->metaKeywords() ?>Copyright 2010 baserCMS All rights reserved
  16. 16. baser標準タグの埋込 ¡  baserCMSが用意している標準の機能を利用する為に次のタグを </head>の前に埋め込みます。 <?php $bcBaser->scripts() ?> ¡  同じくbaserCMSが用意しているツールバーを利用する為に次のタグを </body>の前に埋め込みます。 <?php $bcBaser->func() ?>Copyright 2010 baserCMS All rights reserved
  17. 17. タグの書き換えについて ¡  配布を目的としたテーマとして作成する場合は、サブフォルダに設置 される可能性もある為、A,IMG,CSSタグ、そしてJAVASCRIPTタグなどに ついて、baserCMS用のタグに書き換える必要があります。 ¡  配布を前提としない場合、通常のHTMLタグで記述されても構いません が、ヘッダーやフッターなどの共通部品は、違う階層のファイルから 読み込まれる事があるので、スラッシュ(/)から始まるルートパスで 記述します。Copyright 2010 baserCMS All rights reserved
  18. 18. CSSタグの書き換え CSSタグを次のコードに書き換えます。 ¡  cssフォルダからのパスで記述します。 ¡  cssフォルダ直下の場合は、ファイル名をそのまま書きます。 ¡  拡張子は省略可能です。 <?php $bcBaser->css( style ) ?> 二つ以上を一行で指定する場合は配列で指定します。 <?php $bcBaser->css(array( style , test )) ?>Copyright 2010 baserCMS All rights reserved
  19. 19. ブラウザで一旦確認 ここらへんで、一旦ブラウザ上でフロントの表示がどのようになってい るかを確認しておきましょう。 PHPのエラーが発生しておらず、CSSの設定が反映されていれば問題あり ません。 リモートのサーバーで確認している場合は、通常のWeb制作と同様、編 集したファイルをその都度FTPでアップロードして確認します。Copyright 2010 baserCMS All rights reserved
  20. 20. A,IMGタグの書き換え レイアウトテンプレート内の各A,IMGタグを書き換えます。 ¡ Aタグ ¡  URLは Baser設置場所のスラッシュから始まるルートパスで記述 <?php $bcBaser->link( [リンクテキスト] , [URL] ) ?> ¡ IMGタグ ¡  URLは baser設置場所のスラッシュから始まるルートパスで記述 ¡  IDやALTは省略可 <?php $bcBaser->img( [URL] , array( alt => [ALT属性値] , id => [ID属性値] )) ?>Copyright 2010 baserCMS All rights reserved
  21. 21. IMGタグをAタグで挟む場合 IMGタグをAタグで挟む場合は次のように、urlオプションをつけます。 <?php $bcBaser->img( test.gif , array( url => /test )); ?>Copyright 2010 baserCMS All rights reserved
  22. 22. グローバルメニューの 書き換え ¡  グローバルメニューを管理画面で管理する為、ULタグの部分を次のタ グで書き換えます。ヘッダー・フッターともに書き換えます。 <?php $bcBaser->element( global_menu ) ?> ※ 今回のサンプルデザインのグローバルメニューのように、画像ファイ ルで作成されているような場合は、グローバルメニューエレメントの利 用は特に有用ではありません。不要であれば、書き換える必要はありま せん。Copyright 2010 baserCMS All rights reserved
  23. 23. コンテンツ部分を分離 ¡  レイアウトファイルのうち、コンテンツ本体の部分を削除し、コンテ ンツ出力タグとして次のタグを記述します。 <?php $bcBaser->content() ?> ※今回テーマであれば、<!‒ Main Contents --> の記述があるDIVタグ部分 がコンテンツ本体となります。Copyright 2010 baserCMS All rights reserved
  24. 24. 下層でトップメイン画像非表示 下層ページではトップのメインイメージは不要ですので、トップのみ表 示するというようにします。$bcBaser->isHome関数を利用します。 <?php if($bcBaser->isHome()): ?> <div id="TopMain > <?php $bcBaser->img(img_top_main.jpg, array(alt=>BaserCMS inc.メインイメージ)) ?> </div> <?php endif ?>Copyright 2010 baserCMS All rights reserved
  25. 25. indexページの登録 ¡  管理システムにログインし、「固定ページ管理」より「index」ページ の編集画面を開きます。 ¡  「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本 体部分のソースを貼り付けます。Copyright 2010 baserCMS All rights reserved
  26. 26. フィードの実装 先程編集したindexページにフィード読み込みを実装します。 ULタグ部分を次のタグで書き換えます。 ¡  News1・・・ブログデータより直接取得します。 <?php $bcBaser->blogPosts( [ブログコンテンツ名] , [表示件数]) ?> ※ 今回、ブログコンテンツ名には「news」と記述 ¡  News2・・・フィードとして読み込みます。 <?php $bcBaser->js( /feed/ajax/[フィード設定NO] ) ?> ※ 今回フィード設定NOには、1 と記述Copyright 2010 baserCMS All rights reserved
  27. 27. フィードテンプレートの コピー ¡  baserフォルダの次の場所よりフィードテンプレートの雛形をコピーし ます。 /baser/plugins/feed/views/feed/default.php ¡  次の場所に配置します。 /themed/corp/feed/default.php ※ baserCMSのコアファイルをカスタマイズするには、baserフォルダか ら対象のファイルをthemedフォルダに持ってきた上で編集します。Copyright 2010 baserCMS All rights reserved
  28. 28. フィードデザインの カスタマイズ ¡  先程コピーしたdefault.phpをお題のデザインにあわせて編集します ¡  SPANタグをPタグに書き換えます。 ¡  不要な<br />タグを消去します。 ¡  完了したらアップロードしてトップページの表示を確認します。Copyright 2010 baserCMS All rights reserved
  29. 29. ブログテンプレートの コピー ¡  同じくbaserフォルダの次の場所よりブログポストテンプレートの雛形 をコピーします。 baser/plugins/blog/views/blog/default/posts.php ¡  次の場所に配置します。 themed/corp/blog/default/posts.phpCopyright 2010 baserCMS All rights reserved
  30. 30. ブログデザインの カスタマイズ ¡  先程コピーしたposts.phpをお題のデザインにあわせて編集します ¡  SPANタグをPタグに書き換えます。 ¡  不要な<br />タグを消去します。 ¡  完了したらアップロードしてトップページの表示を確認します。Copyright 2010 baserCMS All rights reserved
  31. 31. サイドバーコンテンツの 読み込み ブログの最新記事一覧などのウィジェットが配置されているサイドバー を読み込みます。 サイドバーのABOUT US のDIVタグの後に次のタグを記述します。 <?php $bcBaser->element(sidebar) ?>Copyright 2010 baserCMS All rights reserved
  32. 32. コンテンツ名出力タグ埋込 デザインの柔軟性を高めるよう、baserCMSがページごとに出力するコン テンツ名をbodyタグにID属性として埋め込みます。 Bodyタグを次のように書き換えます。 <body id="<?php $bcBaser->contentsName() ?>">Copyright 2010 baserCMS All rights reserved
  33. 33. 初期データの用意 baserCMS 2.0.5 より、データベース用の初期データをテーマで用意する事ができ るようになりました。 コアの初期データファイルをコピーして、テーマフォルダに配置しましょう。 配置後、CSVをファイルの中身を調整します。 コピーについては次のページで説明します。 これは、居酒屋テーマを作成したい等、baserCMSが最初から準備している初期 データでは合わない場合に利用します。必要でなければ作業は不要です。Copyright 2010 baserCMS All rights reserved
  34. 34. 初期データのコピー(1) ¡  コア /baser/config/data/demo/ 配下のCSVファイルをコピー /themed/corp/config/data/[データセット名]/ 配下へ貼り付け ¡  ブログ /baser/plugins/blog/config/data/default/ 配下のCSVファイルをコピー /themed/corp/config/data/[データセット名]/blog/ 配下へ貼り付けCopyright 2010 baserCMS All rights reserved
  35. 35. 初期データのコピー(2) ¡  メール /baser/plugins/mail/config/data/default/ 配下のCSVファイルをコピー /themed/corp/config/data/[データセット名]/mail/ 配下へ貼り付け ¡  フィード /baser/plugins/feed/config/data/default/ 配下のCSVファイルをコピー /themed/corp/config/data/[データセット名]/feed/ 配下へ貼り付けCopyright 2010 baserCMS All rights reserved
  36. 36. baserCMSのリセットと、 初期データのインストール インストール前に初期データを梱包したテーマを配置しておくと、イン ストールステップ3で、選択できるようになります。 baserCMSをリセットしてテストしてみるとよいでしょう。 リセットするには、制作・開発モードをインストールモードに変更し、 次のURLにブラウザでアクセスします。 http://[baserCMSの設置場所]/installations/resetCopyright 2010 baserCMS All rights reserved
  37. 37. 動作を確認する 最後に、動作に問題がないかフロントページを確認します。 このように、baserCMSは柔軟にデザインのカスタマイズを行う事ができま す。 もう少し詳しく知りたい方は、公式サイトの情報も参考にしてください。わ らかない事があったらフォーラムで質問してみましょう。 なお、今回のお手本となったテーマが次のURLよりダウンロードできます。 こちらも確認してみてください。 http://basercms.net/themes/archives/1Copyright 2010 baserCMS All rights reserved
  38. 38. マニュアル、質問先はこちら ¡  baserCMS公式マニュアル http://basercms.net/manuals/2/index ¡  関数リファレンス http://basercms.net/reference_2/index ¡  baserCMSユーザーズフォーラム http://forum.basercms.net ¡  baserCMSの雑談広場(Facebook) http://www.facebook.com/groups/basercms.zatsudan/Copyright 2010 baserCMS All rights reserved

×