「テーマ制作チュートリアル」の版間の差分

2016年10月28日 (金) 17:20時点における最新版

baserCMSのダウンロードとインストール

サーバー環境について

まずはサーバー環境の準備をしましょう

• レンタルサーバー・XAMPP・MAMP 等
• ロリポップ!の簡単インストールや、ニフティクラウド C4SA のコンテキストなどを利用すると、baserCMS のインストールまでを数クリックで完了する事ができます。
  

baserCMSのダウンロード

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

• baserCMS コアパッケージダウンロード

baserCMSのドキュメントルート

baserCMS のパッケージを解凍し、中身をそのまま設置すると、静的ファイルを設置する「ドキュメントルート」が強制的に変更されます。
これは baserCMS のフレームワーク 「CakePHP」のセキュリティ上の仕様です。
HTML等の静的ファイルを配置する際は、 webroot フォルダの中に配置してください。
するとドキュメントルート配下に配置されたものとしてブラウザで参照する事ができます。
/app/webroot/test.html のように配置すると http://exapmle.com/test.html として参照できます。

アップロード&インストール

1. 構成変更を終えたファイル群を全てサーバーにアップロードします。 (XAMPP、MAMPの場合はドキュメントルートフォルダへコピーします。)
2. アップロードが完了したら、トップページのURLにブラウザでアクセスしインストールをすすめます。
3. データベースは環境に応じて任意のものを選択します。
4. インストールが完了したらダッシュボードに移動し、動作を確認します。

テーマと表示の設定

テーマの変更

theme/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。
管理システムから「テーマ管理」をクリックし、「corp」というテーマが表示されているのを確認します。(この段階ではまだテーマを有効化しないでください)
《「Pages」フォルダに書き込み権限を与えて下さい。》というメッセージが出ているはずですので、/theme/corp/ 内にPagesフォルダを作成し書き込み権限を与えます。
その後、一番左の緑色のチェックマークをクリックしテーマを有効化します。

公開サイトの表示を確認する

画面左上のサイト名部分をクリックすると公開サイドのトップページを表示できます。
現時点では、テーマフォルダ内にテンプレートが存在しないので、baserCMSコアパッケージのデザインが反映された状態となっています。

事前にデバッグモードへ切り替える

• baserCMSのページ機能は表示速度を少しでも改善する為、サーバーキャッシュ機能というものを利用している為、テンプレートをFTPにてアップロードした場合、表示が変わらない場合があります。
• その場合、管理システムより「サーバーキャッシュの削除」を実行すると表示を更新する事ができます。
  (システム管理>ユーティリティ> サーバーキャッシュ削除)
• システム設定で、制作・開発モードをデバッグモードに変更すると、キャッシュは生成されなくなります。事前にデバッグモード1に切り替えてから制作を行うとキャッシュの削除が不要となり便利です。 制作が完了したら必ずノーマルモードに戻しましょう。
  (システム管理 > 下部「オプション」クリック後 > 制作・開発モード変更 > 保存ボタン)

テンプレートの作成

テンプレートの構成について

baserCMSのテンプレートは上図のようなテンプレートで構成されています。

• レイアウト Webページの全体を構成するテンプレート。エレメントやコンテンツ出力部分を配置します 。
• エレメント ヘッダーやフッター等Webページの部品となるテンプレート
• コンテンツ CMSで管理するコンテンツ本体が出力されるエリア 上図はあくまで例であり、エレメントを利用せず、レイアウトとコンテンツのみ構成しても構いません。

レイアウトテンプレートの作成

レイアウトテンプレートは、「Layouts」というフォルダ内に保存します。

• まずは、こちらからthemeフォルダに設置するhtmlファイルをダウンロードしてください。

• テーマフォルダ(theme/corp/)内に「Layouts」というフォルダと「Elements」というフォルダを作成します。
• 「Layouts」フォルダ内に「default.php」というファイルを作成します。(文字コードはUTF-8)
• 「Elements」フォルダ内は今は空のままで問題ありません。
• 添付しているhtmlフォルダ内のindex.htmlの内容をそのまま貼り付けて保存してください。

CSSと画像の配置

• htmlフォルダ内のcssフォルダ、imgフォルダ、jsフォルダをテーマフォルダ(theme/corp/)内に配置します。
  この時点では、画像やCSS、Javascritpのリンクのパスが解決できていない為、リンク切れの状態となります。

外部ファイルを参照するタグの書き換えについて

• 配布を目的としたテーマとして作成する場合は、サブフォルダに設置される可能性もある為、A、IMG、CSS、JAVASCRIPTタグについて、自動的に適切なパスとなるよう、baserCMS用のタグに書き換える必要があります。
• 配布を前提としない場合、通常のHTMLタグで記述されても構いません が、ヘッダーやフッターなどの共通部品は、違う階層のファイルから読み込まれる事があるので、スラッシュ(/)から始まる「ルートパス」で記述します。

CSSタグの書き換え

CSSタグを次のコードに書き換えます。

• cssフォルダからのパスで記述します。
• cssフォルダ直下の場合は、ファイル名をそのまま書きます。
• 拡張子は省略可能です。

  <?php $this->BcBaser->css('style') ?>

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

  <?php $this->BcBaser->css(array('style', 'corp')) ?>

CSSタグでbaserCMSのタグを利用する理由は、パスを解決する為ですので、次のように themeUrlという関数を利用しても構いません。

  <link rel="stylesheet" type="text/css" href="<?php $this->BcBaser->themeUrl() ?>css/style.css" />

Javascriptタグの書き換え

Javascriptタグを次のコードに書き換えます。

• jsフォルダからのパスで記述します。
• jsフォルダ直下の場合は、ファイル名をそのまま書きます。
• 拡張子は省略可能です。

  <?php $this->BcBaser->js('jquery-1.10.1.min') ?>

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

  <?php $this->BcBaser->js(array('jquery-1.10.1.min', 'corp')) ?>

JavascriptタグでbaserCMSのタグを利用する理由は、パスを解決する為ですので、次のように themeUrlという関数を利用しても構いません。

  <script type="text/javascript" src="<?php $this->BcBaser->themeUrl() ?>js/corp.js"></script>

IMGタグの書き換え

レイアウトテンプレート内の各IMGタグを書き換えます。

• URLは baserCMS設置場所のスラッシュから始まるルートパスで記述

  <?php $this->BcBaser->link('[リンクテキスト]', '[URL]') ?>

(例)<img src="img/img_about.gif" alt="ABOUT US イメージ" /> の場合

  <?php $this->BcBaser->img('img_about.gif', array('alt' => 'ABOUT US イメージ')); ?>

IMGタグでbaserCMSのタグを利用する理由は、パスを解決する為ですので、次のようにthemeUrl という関数を利用しても構いません。こちらの方が、一括置換処理を行いやすいです。

  <img src="<?php $this->BcBaser->themeUrl() ?>img/img_about.gif" alt="ABOUT US イメージ" />

Aタグの書き換え

レイアウトテンプレート内の各Aタグを書き換えます。

• URLは baserCMS設置場所のスラッシュから始まるルートパスで記述

  <?php $this->BcBaser->link('[リンクテキスト]', '[URL]') ?>

(例) <a href=“./about.html”>more</a> の場合

  <?php $this->BcBaser->link('more', ‘/about.html') ?>

AタグでbaserCMSのタグを利用する理由は、パスを解決する為ですので、次のようにbaseUrl という関数を利用しても構いません。こちらの方が、一括置換処理を行いやすいです。

  <a href="<?php$this->BcBaser->baseUrl() ?>about.html">more</a>

IMGタグをAタグで挟む場合

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

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

baseUrl関数とthemeUrl関数を合わせて利用しても構いません。

  <a href="<?php $this->BcBaser->baseUrl() ?>test”>
    <img src="<?php $this->BcBaser->themeUrl() ?>test.gif" />
  </a>

ブラウザで一旦確認

ここらへんで、一旦ブラウザ上でフロントの表示がどのようになっているかを確認しておきましょう。 先ほどは、リンク切れした状態でしたが、 CSSや、Javascript、画像のパスがきちんと解決していれば、上図のように正常に画像等が表示され、スライダーが動作するはずです。

タイトル・メタタグの埋込

• レイアウトファイル(default.php)のheadタグ内に次のタグを書き込みます。

  <?php $this->BcBaser->title() ?>

  <?php $this->BcBaser->metaDescription() ?>

  <?php $this->BcBaser->metaKeywords() ?>

baser標準タグの埋込

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

  <?php $this->BcBaser->scripts() ?>

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

  <?php $this->BcBaser->func() ?>

この時点でブラウザを確認すると画面上部にツールバーが表示されます。

ブラウザで一旦確認

ここらへんで、一旦ブラウザ上でフロントの表示がどのようになっているかを確認しておきましょう。
PHPのエラーが発生していなければ問題ありません。リンクをクリックしても全てトップページになるはずです。
リモートのサーバーで確認している場合は、通常のWeb制作と同様、編集したファイルをその都度FTPでアップロードして確認します。

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

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

  <?php $this->BcBaser->globalMenu() ?>

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

コンテンツの登録・編集

indexページの登録

• 管理システムにログインし、「固定ページ管理」より「index」ページ の編集画面を開きます。
• 「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本 体部分のソースを貼り付けます。

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

コンテンツ部分の書き換え

• コンテンツ出力タグとして次のタグを記述します。

  <?php $this->BcBaser->content() ?>

この部分に、管理システムより登録した、固定ページや、ブログ記事、 メールフォーム等が表示されます。

下層でトップメイン画像非表示

下層ページではトップのメインイメージは不要ですので、トップのみ表示するというようにします。 $this->BcBaser->isHome関数 を利用します。

  <?php if ($this->BcBaser->isHome()): ?>
    <div id="TopMain">
      <ul id="MainImage">
        :
      </ul>
    </div>
  <?php endif ?>

フィードの実装

先程編集したindexページにフィード読み込みを実装します。 管理システムのトップページ編集よりULタグ部分を次のタグで書き換えます。

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

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

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

• News2・・・baserCMS公式サイトの情報をフィードで読み込みます。

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

※ 今回フィード設定NOには、1 と記述
固定ページは、PHPタグの埋め込みが可能です。

ブログテンプレートのコピー

トップページのブログ記事の読み込み部分について、日付とタイトルの間に改行が入ってしまっているので調整します。
baserCMSコアパッケージに対象テンプレートが存在するのですが、直接編集した場合、baserCMSのバージョンアップ時に先祖返りを起こしてしまうので、テーマフォルダーにコピーして編集します。

• baserフォルダの次の場所よりブログポストテンプレートの雛形をコピーします。
  lib/Baser/Plugins/Blog/View/Blog/default/posts.php
• 次の場所に配置します。
  theme/corp/Blog/default/posts.php

ブログデザインのカスタマイズ

• 先程コピーした posts.php をお題のデザインにあわせて編集します
• SPAN タグを P タグに書き換えます。
• 不要な <br /> タグを消去します。
• 完了したら保存してトップページの表示を確認します。

フィードテンプレートのコピー

トップページのフィードの読み込み部分について、日付とタイトルの間に改行が入ってしまっているので調整します。
baserCMSコアパッケージに対象テンプレートが存在するのですが、直接編集した場合、baserCMSのバージョンアップ時に先祖返りを起こしてしまうので、テーマフォルダーにコピーして編集します。

• baserフォルダの次の場所よりフィードテンプレートの雛形をコピーします。
  lib/Baser/Plugin/Feed/View/Feed/default.php
• 次の場所に配置します。
  theme/corp/Feed/default.php

フィードデザインのカスタマイズ

• 先程コピーした default.php をお題のデザインにあわせて編集します
• SPAN タグを P タグに書き換えます。
• 不要な
  タグを消去します。
• 完了したらアップロードしてトップページの表示を確認します。

サイドバーコンテンツの読み込み

ブログの最新記事一覧などのウィジェットが配置されているサイドバーを読み込みます。
サイドバーのABOUT US のDIVタグの後に次のタグを記述します。

  <?php $this->BcBaser->widgetArea() ?>

コンテンツ名出力タグ埋込

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

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

固定ページのカテゴリごとに読み込むCSS設定を変更する場合などに有用です。

テーマの詳細設定

テーマ画像の配置

ロゴとメインイメージは管理システムのテーマ設定より変更する事ができるようになっています。
メインイメージについては、カルーセル等に対応できるよう、5枚まで設定できるようになっています。
まずは、初期画像としてルールに則って画像が配置されている必要があります。

• ロゴ - theme/corp/img/logo.(gif|jpg|png)
• メインイメージ - theme/corp/img/main_image_num.(gif|jpg|png)

※ numには1~5の番号が入ります。

テーマ画像の出力

ロゴの出力箇所に下記のタグを記述します。

  <?php $this->BcBaser->logo() ?>

メインイメージの出力箇所に下記のタグを記述します。

  <?php $this->BcBaser->mainImage(array(‘all’ => true, ‘id’ => ’MainImage’)) ?>

※ 第一引数に、次のオプションを配列で指定する事ができます。

• num - 取得する画像の番号指定(省略時は1番目)
• all - 全ての画像を取得するかどうか(リストタグで出力。省略時は false)
• id - 全ての画像を取得する際に ul タグに付与する id 属性

テーマカラーの設定

メインカラー、サブカラー、テキストリンク、 テキストホバーをテーマで定義しておくと、管理システムで変更できるようになります。
テーマカラーの設定は、テーマカラーとなるCSSを抜き出し、設定元CSSとして、次のファイルに記述します。

theme/{テーマ名}/css/config.css

• MAIN ・・・メインカラー
• SUB ・・・サブカラー
• LINK ・・・テキストリンクカラー
• HOVER ・・・テキストホバーカラー

テーマカラー設定ファイル例

<code>body {
  background-color:MAIN!important;
}
#FooterGlobalMenu {
  background-color:SUB!important;
}
a:link{
  color:LINK!important;
}
a:hover{
  color:HOVER!important;
}
</code>

テーマカラー設定における注意事項

• テーマ内のCSSを書き換えるのではなく、あくまで設定上書き用のCSSを作成し、両方を読み込むので、条件によっては上書きができない場合があります。
  ※ 設定用CSSのプロパティに important を付与する事で対応できます。
• MAIN、SUBなど4つの設定について、全て埋め込む必要はなく、必要な設定だけ埋め込めば大丈夫です。
• テーマカラーを設定した場合、$this->BcBaser->script() を記述した箇所にCSSを挿入しますので、上記関数の後にCSSを読み込まないようにしてください。

初期データの設定

初期データの用意

データベース用の初期データをテーマで用意する事ができます。
管理システムで、メニューや、固定ページの内容を変更した後、その状態を初期データとしてテーマに梱包する事ができます。

• 管理システムを開き、テーマ管理に移動します。
• サブメニューの「テーマ用初期データダウンロード」をクリックします。

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

初期データ配置

ダウンロードしたデータは、下記フォルダに配置します。
theme/corp/Config/data/
初期データは複数配置してテーマに梱包する事ができます。

 (例)
 デフォルト・・・theme/corp/Config/data/default/
 パターンA・・・theme/corp/Config/data/pattern-a/
 パターンB・・・theme/corp/Config/data/pattern-b/

baserCMSのリセットと、初期データのインストール

インストール前に初期データを梱包したテーマを配置しておくと、インストールステップ3や、テーマ管理で、選択できるようになります。
baserCMSをリセットしてテストしてみるとよいでしょう。
リセットするには、制作・開発モードをインストールモードに変更し、次のURLにブラウザでアクセスします。
http://[baserCMSの設置場所]/installations/reset

動作を確認する

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

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

その他

他にもいろいろ機能があります

• 制作者向け機能の詳細は下記URLの「制作者向け機能一覧」を御覧ください

制作者向け機能一覧

マニュアル、質問先はこちら

• baserCMS公式マニュアル
• baserCMS公式ガイド
• 関数リファレンス
• baserCMSユーザーズフォーラム
• baserCMSの雑談広場(Facebook)
• APIドキュメント

Copyright 2016 baserCMS All rights reserved