「ver4/テーマ制作チュートリアル」を編集中
提供: baserCMS公式ガイド
警告: ログインしていません。
編集すると、IPアドレスがこのページの編集履歴に記録されます。この編集を取り消せます。
下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 | 編集中の文章 | ||
行1: | 行1: | ||
+ | [このコンテンツは内容調整中です] | ||
+ | |||
## baserCMSのダウンロードとインストール | ## baserCMSのダウンロードとインストール | ||
行13: | 行15: | ||
* [http://basercms.net/download/index.html baserCMS コアパッケージダウンロード] | * [http://basercms.net/download/index.html baserCMS コアパッケージダウンロード] | ||
+ | |||
+ | ### baserCMSのドキュメントルート | ||
+ | [[ファイル:document_root.png]]</br> | ||
+ | |||
+ | baserCMS のパッケージを解凍し、中身をそのまま設置すると、静的ファイルを設置する「ドキュメントルート」が強制的に変更されます。 | ||
+ | これは baserCMS のフレームワーク 「CakePHP」のセキュリティ上の仕様です。 | ||
+ | HTML等の静的ファイルを配置する際は、 webroot フォルダの中に配置してください。 | ||
+ | するとドキュメントルート配下に配置されたものとしてブラウザで参照する事ができます。 | ||
+ | /app/webroot/test.html のように配置すると | ||
+ | http://exapmle.com/test.html | ||
+ | として参照できます。 | ||
### アップロード&インストール | ### アップロード&インストール | ||
− | 1. | + | 1. 構成変更を終えたファイル群を全てサーバーにアップロードします。 |
(XAMPP、MAMPの場合はドキュメントルートフォルダへコピーします。) | (XAMPP、MAMPの場合はドキュメントルートフォルダへコピーします。) | ||
2. アップロードが完了したら、トップページのURLにブラウザでアクセスしインストールをすすめます。 | 2. アップロードが完了したら、トップページのURLにブラウザでアクセスしインストールをすすめます。 | ||
行26: | 行39: | ||
## テーマと表示の設定 | ## テーマと表示の設定 | ||
### テーマの変更 | ### テーマの変更 | ||
− | [[ファイル: | + | [[ファイル:theme_change.png|350px]]</br> |
theme/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。 | theme/ フォルダの中に「corp」という名前でフォルダを作成し、サーバーにアップします。 | ||
− | 管理システムから「テーマ管理」をクリックし、「corp」というテーマが表示されているのを確認します。 | + | 管理システムから「テーマ管理」をクリックし、「corp」というテーマが表示されているのを確認します。(<span style="color:red;">この段階ではまだテーマを有効化しないでください</span>) |
+ | 《「Pages」フォルダに書き込み権限を与えて下さい。》というメッセージが出ているはずですので、/theme/corp/ 内にPagesフォルダを作成し書き込み権限を与えます。 | ||
その後、一番左の緑色のチェックマークをクリックしテーマを有効化します。 | その後、一番左の緑色のチェックマークをクリックしテーマを有効化します。 | ||
### 公開サイトの表示を確認する | ### 公開サイトの表示を確認する | ||
− | [[ファイル: | + | [[ファイル:koukai_side.png|350px]]</br> |
画面左上のサイト名部分をクリックすると公開サイドのトップページを表示できます。 | 画面左上のサイト名部分をクリックすると公開サイドのトップページを表示できます。 | ||
現時点では、テーマフォルダ内にテンプレートが存在しないので、baserCMSコアパッケージのデザインが反映された状態となっています。 | 現時点では、テーマフォルダ内にテンプレートが存在しないので、baserCMSコアパッケージのデザインが反映された状態となっています。 | ||
行41: | 行55: | ||
* baserCMSのページ機能は表示速度を少しでも改善する為、サーバーキャッシュ機能というものを利用している為、テンプレートをFTPにてアップロードした場合、表示が変わらない場合があります。 | * baserCMSのページ機能は表示速度を少しでも改善する為、サーバーキャッシュ機能というものを利用している為、テンプレートをFTPにてアップロードした場合、表示が変わらない場合があります。 | ||
* その場合、管理システムより「サーバーキャッシュの削除」を実行すると表示を更新する事ができます。 | * その場合、管理システムより「サーバーキャッシュの削除」を実行すると表示を更新する事ができます。 | ||
− | (システム管理 >ユーティリティ> サーバーキャッシュ削除) | + | (システム管理>ユーティリティ> サーバーキャッシュ削除) |
* システム設定で、制作・開発モードをデバッグモードに変更すると、キャッシュは生成されなくなります。事前にデバッグモード1に切り替えてから制作を行うとキャッシュの削除が不要となり便利です。 | * システム設定で、制作・開発モードをデバッグモードに変更すると、キャッシュは生成されなくなります。事前にデバッグモード1に切り替えてから制作を行うとキャッシュの削除が不要となり便利です。 | ||
− | <span style="color:red;"> | + | <span style="color:red;"><u>制作が完了したら必ずノーマルモードに戻しましょう。</u></span> |
(システム管理 > 下部「オプション」クリック後 > 制作・開発モード変更 > 保存ボタン) | (システム管理 > 下部「オプション」クリック後 > 制作・開発モード変更 > 保存ボタン) | ||
行52: | 行66: | ||
[[ファイル:template_kousei.png|350px]]</br> | [[ファイル:template_kousei.png|350px]]</br> | ||
− | + | baserCMSのテンプレートは上図のようなテンプレートで構成されています。 | |
* レイアウト | * レイアウト | ||
行59: | 行73: | ||
ヘッダーやフッター等Webページの部品となるテンプレート | ヘッダーやフッター等Webページの部品となるテンプレート | ||
* コンテンツ | * コンテンツ | ||
− | CMSで管理するコンテンツ本体が出力されるエリア | + | CMSで管理するコンテンツ本体が出力されるエリア |
− | < | + | <u>上図はあくまで例であり、エレメントを利用せず、レイアウトとコンテンツのみ構成しても構いません。</u> |
### レイアウトテンプレートの作成 | ### レイアウトテンプレートの作成 | ||
レイアウトテンプレートは、「Layouts」というフォルダ内に保存します。 | レイアウトテンプレートは、「Layouts」というフォルダ内に保存します。 | ||
− | * <span style="color:red;">まずは、[http://basercms.net/files/uploads/ | + | * <span style="color:red;">まずは、[http://basercms.net/files/uploads/html.zip こちら]からthemeフォルダに設置するhtmlファイルをダウンロードしてください。</span> |
* テーマフォルダ(theme/corp/)内に「Layouts」というフォルダと「Elements」というフォルダを作成します。 | * テーマフォルダ(theme/corp/)内に「Layouts」というフォルダと「Elements」というフォルダを作成します。 | ||
* 「Layouts」フォルダ内に「default.php」というファイルを作成します。(文字コードはUTF-8) | * 「Layouts」フォルダ内に「default.php」というファイルを作成します。(文字コードはUTF-8) | ||
* 「Elements」フォルダ内は今は空のままで問題ありません。 | * 「Elements」フォルダ内は今は空のままで問題ありません。 | ||
− | * 添付しているhtmlフォルダ内のindex. | + | * 添付しているhtmlフォルダ内のindex.htmlの内容をそのまま貼り付けて保存してください。 |
### CSSと画像の配置 | ### CSSと画像の配置 | ||
行127: | 行141: | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
− | <?php $this->BcBaser-> | + | <?php $this->BcBaser->link('[リンクテキスト]', '[URL]') ?> |
</syntaxhighlight> | </syntaxhighlight> | ||
(例)```<img src="img/img_about.gif" alt="ABOUT US イメージ" />``` の場合 | (例)```<img src="img/img_about.gif" alt="ABOUT US イメージ" />``` の場合 | ||
行151: | 行165: | ||
AタグでbaserCMSのタグを利用する理由は、パスを解決する為ですので、次のようにbaseUrl という関数を利用しても構いません。こちらの方が、一括置換処理を行いやすいです。 | AタグでbaserCMSのタグを利用する理由は、パスを解決する為ですので、次のようにbaseUrl という関数を利用しても構いません。こちらの方が、一括置換処理を行いやすいです。 | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
− | <a href="<?php $this->BcBaser->baseUrl() ?>about.html">more</a> | + | <a href="<?php$this->BcBaser->baseUrl() ?>about.html">more</a> |
</syntaxhighlight> | </syntaxhighlight> | ||
行223: | 行237: | ||
## コンテンツの登録・編集 | ## コンテンツの登録・編集 | ||
− | ### | + | ### indexページの登録 |
− | + | * 管理システムにログインし、「固定ページ管理」より「index」ページ の編集画面を開きます。 | |
− | * | + | |
* 「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本 体部分のソースを貼り付けます。 | * 「本文」欄をソースビューに切り替え、htmlファイルのコンテンツ本 体部分のソースを貼り付けます。 | ||
※今回のテーマであれば、```<*‒ Main Contents -->``` の記述がある<u>DIVタグ部分の中身</u>がコンテンツ本体となります。 | ※今回のテーマであれば、```<*‒ Main Contents -->``` の記述がある<u>DIVタグ部分の中身</u>がコンテンツ本体となります。 | ||
− | |||
行346: | 行358: | ||
メインイメージの出力箇所に下記のタグを記述します。 | メインイメージの出力箇所に下記のタグを記述します。 | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
− | <?php $this->BcBaser->mainImage(array( | + | <?php $this->BcBaser->mainImage(array(‘all’ => true, ‘id’ => ’MainImage’)) ?> |
</syntaxhighlight> | </syntaxhighlight> | ||
行420: | 行432: | ||
もう少し詳しく知りたい方は、公式サイトの情報も参考にしてください。わらかない事があったら[http://forum.basercms.net フォーラム]で質問してみましょう。 | もう少し詳しく知りたい方は、公式サイトの情報も参考にしてください。わらかない事があったら[http://forum.basercms.net フォーラム]で質問してみましょう。 | ||
− | なお、今回のお手本となったテーマが次のURLよりダウンロードできます。[ | + | なお、今回のお手本となったテーマが次のURLよりダウンロードできます。[http://barket.jp/products/detail.php?product_id=14 こちら]も確認してみてください。 |
<br> | <br> | ||
行433: | 行445: | ||
* [http://basercms.net/manuals/3/index baserCMS公式マニュアル] | * [http://basercms.net/manuals/3/index baserCMS公式マニュアル] | ||
* [http://wiki.basercms.net/ baserCMS公式ガイド] | * [http://wiki.basercms.net/ baserCMS公式ガイド] | ||
− | * [http:// | + | * [http://goo.gl/skaVyE 関数リファレンス] |
* [http://forum.basercms.net/ baserCMSユーザーズフォーラム] | * [http://forum.basercms.net/ baserCMSユーザーズフォーラム] | ||
* [http://www.facebook.com/groups/basercms.zatsudan/ baserCMSの雑談広場(Facebook)] | * [http://www.facebook.com/groups/basercms.zatsudan/ baserCMSの雑談広場(Facebook)] |