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

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

サーバー環境について
まずはサーバー環境の準備をしましょう
¡  レンタルサーバー・XAMPP・MAMP等
¡  ロリポップ！の簡単インストールや、ニフティクラウドC4SAのコンテキストなどを利用
すると、baserCMSのインストールまでを数クリックで完了する事ができます。

Copyright 2010 baserCMS All rights reserved

baserCMSのダウンロード
baserCMSの公式サイトから最新版のbaserCMS とアップローダープラグ
インをダウンロードして解凍してください。

¡  baserCMSコアダウンロード
http://basercms.net/download/index.html

¡  プラグインダウンロード
http://basercms.net/plugins/index


baserCMSの
ドキュメントルート
baserCMSをそのまま設置すると、静的ファイルを設置する「ドキュメン
トルート」が強制的に変更されます。

これはbaserCMSのフレームワーク
「CakePHP」のセキュリティ上の仕様なの
ですが、Web制作者にやさしくない！

baserCMSは、簡単にドキュメントルート
を通常の構成に戻す事ができるようになっ
ています。


baserCMS構造変更
¡  webrootフォルダを抜き出します。

¡  そしてwebrootフォルダ内にapp / baser / cake の３つのフォルダを入れ
ちゃいます。

¡  残ったファイルは削除します。


baserCMS構造変更完了形
最終的に次のような構成になれ
ばOKです。

今回、webroot フォルダを抜き
出して構成変更を行なっている
ので webroot がトップディレク
トリのように見えますが、実際
には、webroot の配下のファイ
ルをサーバー上に配置する事と .htaccess

なります。


アップローダープラグインの設
置
¡  アップローダープラグインを解凍し、できたフォルダ/app/plugins/ の
中に配置します。

¡  管理システムにログインし、プラグイン管理よりアップローダープラグ
インのインストールを行います。


アップロード＆インストール
1.  構成変更を終えたファイル群を全てサーバーにアップロードします。

2.  アップロードが完了したら、トップページのURLにブラウザでアクセ
スします。

3.  データベースは環境に応じて任意のものを選択します。
※ 本番環境でCSVの利用はおすすめしません。

4.  インストールが完了したらダッシュボードに移動し、動作を確認しま
す。


テーマの変更
/themed/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。

管理システムから「テーマ管理」をクリックし、「corp」というテーマが表示されているのを
確認します。

《「pages」フォルダに書き込み権限を与え
て下さい。》というメッセージが出ているは
ずですので、/themed/corp/ 内にpagesフォ
ルダを作成して配置して下さい。

リロードするとテーマ「corp」が選択できる
ようになっているはずですので選択します。


ページテンプレートの
権限変更
ページテンプレートには書き込み権限が必要です。

サーバー上のフォルダとファイルの権限を変更します。

¡  /themed/corp/pages/ フォルダ：707（もしくは777）
¡  フォルダ配下のファイル群：606（もしくは666）


デバッグモードへ切り替える
¡  baserCMSのページ機能は表示速度を少しでも改善する為、サーバー
キャッシュ機構というものを利用している為、テンプレートをFTPにて
アップロードした場合、表示が変わらない場合があります。

¡  その場合、管理システムより「サーバーキャッシュの削除」を実行する
と表示を更新する事ができます。
（システム管理＞ユーティリティ＞サーバーキャッシュ削除）

¡  システム設定で、制作・開発モードをデバッグモードに変更すると、
キャッシュは生成されなくなります。事前にデバッグモード１に切り
替えてから制作を行うとキャッシュの削除が不要となり便利です。制作
が完了したら必ずノーマルモードに戻しましょう。
（システム管理＞（オプションバークリック後）＞制作・開発モード）


レイアウトファイルの作成
¡  テーマフォルダ（/themed/corp/）内に「layouts」というフォルダを作
成します。

¡  「layouts」フォルダ内に「default.php」というファイルを作成します。
（文字コードはUTF-8）

¡  添付しているhtmlフォルダ内のindex.htmlの内容をそのまま貼り付けて
アップロードし、公開ページを確認してください。全てのページがデ
ザインの適用されていない素のページが表示されるはずです。


CSSと画像のアップロード
¡  htmlフォルダ内の css フォルダと img フォルダをテーマフォルダ
（/themed/corp/）内に配置し、サーバーにアップロードします。


タイトル・メタタグの埋込
¡  レイアウトファイル（default.php）のheadタグ内に次のタグを書き込
みます。

¡  既存のタイトルタグは消してください。

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

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

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


baser標準タグの埋込
¡  baserCMSが用意している標準の機能を利用する為に次のタグを
</head>の前に埋め込みます。

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

¡  同じくbaserCMSが用意しているツールバーを利用する為に次のタグを
</body>の前に埋め込みます。

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


タグの書き換えについて
¡  配布を目的としたテーマとして作成する場合は、サブフォルダに設置
される可能性もある為、A,IMG,CSSタグ、そしてJAVASCRIPTタグなどに
ついて、baserCMS用のタグに書き換える必要があります。

¡  配布を前提としない場合、通常のHTMLタグで記述されても構いません
が、ヘッダーやフッターなどの共通部品は、違う階層のファイルから
読み込まれる事があるので、スラッシュ（/）から始まるルートパスで
記述します。


CSSタグの書き換え
CSSタグを次のコードに書き換えます。
¡  cssフォルダからのパスで記述します。
¡  cssフォルダ直下の場合は、ファイル名をそのまま書きます。
¡  拡張子は省略可能です。

<?php $bcBaser->css( style ) ?>

二つ以上を一行で指定する場合は配列で指定します。

<?php $bcBaser->css(array( style , test )) ?>


ブラウザで一旦確認
ここらへんで、一旦ブラウザ上でフロントの表示がどのようになってい
るかを確認しておきましょう。

PHPのエラーが発生しておらず、CSSの設定が反映されていれば問題あり
ません。

リモートのサーバーで確認している場合は、通常のWeb制作と同様、編
集したファイルをその都度FTPでアップロードして確認します。


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属性値] )) ?>


IMGタグをAタグで挟む場合
IMGタグをAタグで挟む場合は次のように、urlオプションをつけます。

<?php $bcBaser->img( test.gif , array( url => /test )); ?>


グローバルメニューの
書き換え

¡  グローバルメニューを管理画面で管理する為、ULタグの部分を次のタ
グで書き換えます。ヘッダー・フッターともに書き換えます。

<?php $bcBaser->element( global_menu ) ?>

※ 今回のサンプルデザインのグローバルメニューのように、画像ファイ
ルで作成されているような場合は、グローバルメニューエレメントの利
用は特に有用ではありません。不要であれば、書き換える必要はありま
せん。


コンテンツ部分を分離
¡  レイアウトファイルのうち、コンテンツ本体の部分を削除し、コンテ
ンツ出力タグとして次のタグを記述します。

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

※今回テーマであれば、<!‒ Main Contents --> の記述があるDIVタグ部分
がコンテンツ本体となります。


下層でトップメイン画像非表示
下層ページではトップのメインイメージは不要ですので、トップのみ表
示するというようにします。$bcBaser->isHome関数を利用します。
<?php if($bcBaser->isHome()): ?>

<div id="TopMain >

<?php $bcBaser->img('img_top_main.jpg', array('alt'=>'BaserCMS inc.メインイメージ')) ?>

</div>

<?php endif ?>


indexページの登録
¡  管理システムにログインし、「固定ページ管理」より「index」ページ
の編集画面を開きます。

¡  「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本
体部分のソースを貼り付けます。


フィードの実装
先程編集したindexページにフィード読み込みを実装します。

ULタグ部分を次のタグで書き換えます。

¡  News1・・・ブログデータより直接取得します。

<?php $bcBaser->blogPosts( [ブログコンテンツ名] , [表示件数]) ?>

※ 今回、ブログコンテンツ名には「news」と記述

¡  News2・・・フィードとして読み込みます。

<?php $bcBaser->js( /feed/ajax/[フィード設定NO] ) ?>

※ 今回フィード設定NOには、1 と記述


フィードテンプレートの
コピー
¡  baserフォルダの次の場所よりフィードテンプレートの雛形をコピーし
ます。
/baser/plugins/feed/views/feed/default.php

¡  次の場所に配置します。
/themed/corp/feed/default.php

※ baserCMSのコアファイルをカスタマイズするには、baserフォルダか
ら対象のファイルをthemedフォルダに持ってきた上で編集します。


フィードデザインの
カスタマイズ
¡  先程コピーしたdefault.phpをお題のデザインにあわせて編集します

¡  SPANタグをPタグに書き換えます。

¡  不要な<br />タグを消去します。

¡  完了したらアップロードしてトップページの表示を確認します。


ブログテンプレートの
コピー
¡  同じくbaserフォルダの次の場所よりブログポストテンプレートの雛形
をコピーします。

baser/plugins/blog/views/blog/default/posts.php

¡  次の場所に配置します。

themed/corp/blog/default/posts.php


ブログデザインの
カスタマイズ
¡  先程コピーしたposts.phpをお題のデザインにあわせて編集します

¡  SPANタグをPタグに書き換えます。

¡  不要な<br />タグを消去します。

¡  完了したらアップロードしてトップページの表示を確認します。


サイドバーコンテンツの
読み込み
ブログの最新記事一覧などのウィジェットが配置されているサイドバー
を読み込みます。

サイドバーのABOUT US のDIVタグの後に次のタグを記述します。

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


コンテンツ名出力タグ埋込
デザインの柔軟性を高めるよう、baserCMSがページごとに出力するコン
テンツ名をbodyタグにID属性として埋め込みます。

Bodyタグを次のように書き換えます。

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


初期データの用意
baserCMS 2.0.5 より、データベース用の初期データをテーマで用意する事ができ
るようになりました。

コアの初期データファイルをコピーして、テーマフォルダに配置しましょう。

配置後、CSVをファイルの中身を調整します。

コピーについては次のページで説明します。

これは、居酒屋テーマを作成したい等、baserCMSが最初から準備している初期
データでは合わない場合に利用します。必要でなければ作業は不要です。


初期データのコピー(1)
¡  コア

/baser/config/data/demo/ 配下のCSVファイルをコピー

/themed/corp/config/data/[データセット名]/ 配下へ貼り付け

¡  ブログ

/baser/plugins/blog/config/data/default/ 配下のCSVファイルをコピー

/themed/corp/config/data/[データセット名]/blog/ 配下へ貼り付け


初期データのコピー(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/ 配下へ貼り付け


baserCMSのリセットと、
初期データのインストール
インストール前に初期データを梱包したテーマを配置しておくと、イン
ストールステップ３で、選択できるようになります。

baserCMSをリセットしてテストしてみるとよいでしょう。

リセットするには、制作・開発モードをインストールモードに変更し、
次のURLにブラウザでアクセスします。

http://[baserCMSの設置場所]/installations/reset


動作を確認する
最後に、動作に問題がないかフロントページを確認します。
このように、baserCMSは柔軟にデザインのカスタマイズを行う事ができま
す。
もう少し詳しく知りたい方は、公式サイトの情報も参考にしてください。わ
らかない事があったらフォーラムで質問してみましょう。

なお、今回のお手本となったテーマが次のURLよりダウンロードできます。
こちらも確認してみてください。
http://basercms.net/themes/archives/1


マニュアル、質問先はこちら
¡  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/


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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (14)

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

Semelhante a baserCMSテーマ制作チュートリアル (20)

Mais de Ryuji Egashira

Mais de Ryuji Egashira (14)

Último

Último (9)

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