「ver4/テーマのデザイン編集」の版間の差分
提供: baserCMS公式ガイド
(ページの作成:「[このコンテンツは内容調整中です] テーマのデザインやレイアウトを変更する上で役立つ情報を掲載しています。(なお、こ...」) |
Katokaisya (トーク | 投稿記録) |
||
行1: | 行1: | ||
− | [ | + | テーマのデザインやレイアウトを変更する上で役立つ情報を掲載しています。(なお、ここに記載されている関数の詳細は「[[関数リファレンス|関数リファレンス ver.3系]]」「[[ver4/関数リファレンス|関数リファレンス ver.4系]]」を参照してください) |
− | + | ||
− | + | ||
行8: | 行6: | ||
テーマは以下の場所に入っています。新たにダウンロードした場合は、以下の場所にいれることで管理画面が自動的に認識します。なおテーマに内包される各種フォルダとファイルの詳細は「[[テーマの構造]]」を参照してください。 | テーマは以下の場所に入っています。新たにダウンロードした場合は、以下の場所にいれることで管理画面が自動的に認識します。なおテーマに内包される各種フォルダとファイルの詳細は「[[テーマの構造]]」を参照してください。 | ||
− | ###Ver. | + | ###Ver.4系統 |
<pre> | <pre> | ||
− | + | /theme/ | |
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== HTMLはレイアウトテンプレートに記述 == | == HTMLはレイアウトテンプレートに記述 == | ||
行27: | 行19: | ||
レイアウトテンプレートに記述出来る内容を、わざわざ別ファイルにしてエレメントファイル化するのは、主に保守性やソースの可視性を高める為ですので、エレメントファイル化せずに全てをレイアウトテンプレート内に書き込む事もできます。なお、エレメントファイルの設置場所については「[[テーマの構造#elementsフォルダ|elementsフォルダ]]」を参照してください。 | レイアウトテンプレートに記述出来る内容を、わざわざ別ファイルにしてエレメントファイル化するのは、主に保守性やソースの可視性を高める為ですので、エレメントファイル化せずに全てをレイアウトテンプレート内に書き込む事もできます。なお、エレメントファイルの設置場所については「[[テーマの構造#elementsフォルダ|elementsフォルダ]]」を参照してください。 | ||
− | ヘッダー部分のエレメントファイルと、フッター部分のエレメントファイルについては、それぞれ「header.php」「footer.php」という名前でエレメント化しておくと、これらを読み込む為の特別な関数<code>$this->BcBaser->header()</code> | + | ヘッダー部分のエレメントファイルと、フッター部分のエレメントファイルについては、それぞれ「header.php」「footer.php」という名前でエレメント化しておくと、これらを読み込む為の特別な関数<code>$this->BcBaser->header()</code>と<code>$this->BcBaser->footer()</code>が使えるようになります。通常の<code>$this->BcBaser->element('header')</code>や<code>$this->BcBaser->element('footer')</code>を使っても呼び出せますが、<code>$this->BcBaser->header()</code>や<code>$this->BcBaser->footer()</code>を使う場合、そこに[[テーマに関する用語#テーマフック|テーマフック]]を利用できます。 |
行34: | 行26: | ||
記述の方法は基本的に変わりません。ただし、設置場所にルールが存在します。以下の場所に設置してください。 | 記述の方法は基本的に変わりません。ただし、設置場所にルールが存在します。以下の場所に設置してください。 | ||
− | ####Ver. | + | ####Ver.4系統 |
<pre> | <pre> | ||
(モバイル) | (モバイル) | ||
− | + | /theme/(テーマのフォルダ)/Layouts/mobile/ | |
(スマートフォン) | (スマートフォン) | ||
− | + | /theme/(テーマのフォルダ)/Layouts/smartphone/ | |
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== 画像、CSS、JSファイルの読み込み == | == 画像、CSS、JSファイルの読み込み == | ||
baserCMSではテーマを利用した際、画像やCSS、JSファイルの設置階層が深くなってしまいます。また、スマートURLの有無など、ルーティングの関係もあり、通常のHTMLタグでの読み込みが煩雑で面倒です。そこでテーマ作成・編集の場面において、それらのファイルを読み込む場合には、一般的にヘルパー(表示用のビューファイルで使われる関数)を利用します。 | baserCMSではテーマを利用した際、画像やCSS、JSファイルの設置階層が深くなってしまいます。また、スマートURLの有無など、ルーティングの関係もあり、通常のHTMLタグでの読み込みが煩雑で面倒です。そこでテーマ作成・編集の場面において、それらのファイルを読み込む場合には、一般的にヘルパー(表示用のビューファイルで使われる関数)を利用します。 | ||
− | 画像の読み込みは<code>$this->BcBaser->img()</code> | + | 画像の読み込みは<code>$this->BcBaser->img()</code>、CSSは<code>$this->BcBaser->css()</code>、JSファイルは<code>$this->BcBaser->js()</code>を利用します。なお、各ファイルの設置場所については、[[テーマの構造]]を参照してください。 |
行65: | 行48: | ||
ウィジェット用のファイルは、もともと以下のフォルダに入っています。 | ウィジェット用のファイルは、もともと以下のフォルダに入っています。 | ||
− | ####Ver. | + | ####Ver.4系統でのウィジェット配置場所 |
<pre> | <pre> | ||
/lib/Baser/Views/Elements/widgets/ | /lib/Baser/Views/Elements/widgets/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
行78: | 行56: | ||
変更が必要なフォルダとファイルを、以下にコピーします。 | 変更が必要なフォルダとファイルを、以下にコピーします。 | ||
− | ####Ver. | + | ####Ver.4系統でのコピー先 |
<pre> | <pre> | ||
− | + | /theme/(テーマのフォルダ)/Elements/widgets/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</pre> | </pre> | ||
なお、blogなどのプラグインに依存するウィジェット(月別アーカイブ一覧など)の変更は | なお、blogなどのプラグインに依存するウィジェット(月別アーカイブ一覧など)の変更は | ||
− | ####Ver. | + | ####Ver.4系統でのプラグインウィジェット |
<pre> | <pre> | ||
− | + | /(テーマのフォルダ)/(プラグイン名)/Views/Elements/widgets/ | |
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | |||
に変更対象ファイルを入れて編集します。 | に変更対象ファイルを入れて編集します。 | ||
2016年10月28日 (金) 17:34時点における版
テーマのデザインやレイアウトを変更する上で役立つ情報を掲載しています。(なお、ここに記載されている関数の詳細は「関数リファレンス ver.3系」「関数リファレンス ver.4系」を参照してください)
目次
テーマの場所
テーマは以下の場所に入っています。新たにダウンロードした場合は、以下の場所にいれることで管理画面が自動的に認識します。なおテーマに内包される各種フォルダとファイルの詳細は「テーマの構造」を参照してください。
Ver.4系統
/theme/
HTMLはレイアウトテンプレートに記述
レイアウトテンプレートで調整します。(レイアウトテンプレートの設置については「layoutsフォルダ」を参照してください。)
レイアウトテンプレートとエレメントファイル等との関係をイメージ図で示すと以下のようになります。
レイアウトテンプレートに記述出来る内容を、わざわざ別ファイルにしてエレメントファイル化するのは、主に保守性やソースの可視性を高める為ですので、エレメントファイル化せずに全てをレイアウトテンプレート内に書き込む事もできます。なお、エレメントファイルの設置場所については「elementsフォルダ」を参照してください。
ヘッダー部分のエレメントファイルと、フッター部分のエレメントファイルについては、それぞれ「header.php」「footer.php」という名前でエレメント化しておくと、これらを読み込む為の特別な関数$this->BcBaser->header()
と$this->BcBaser->footer()
が使えるようになります。通常の$this->BcBaser->element('header')
や$this->BcBaser->element('footer')
を使っても呼び出せますが、$this->BcBaser->header()
や$this->BcBaser->footer()
を使う場合、そこにテーマフックを利用できます。
モバイル・スマートフォンのレイアウトテンプレート
記述の方法は基本的に変わりません。ただし、設置場所にルールが存在します。以下の場所に設置してください。
Ver.4系統
(モバイル) /theme/(テーマのフォルダ)/Layouts/mobile/ (スマートフォン) /theme/(テーマのフォルダ)/Layouts/smartphone/
画像、CSS、JSファイルの読み込み
baserCMSではテーマを利用した際、画像やCSS、JSファイルの設置階層が深くなってしまいます。また、スマートURLの有無など、ルーティングの関係もあり、通常のHTMLタグでの読み込みが煩雑で面倒です。そこでテーマ作成・編集の場面において、それらのファイルを読み込む場合には、一般的にヘルパー(表示用のビューファイルで使われる関数)を利用します。
画像の読み込みは$this->BcBaser->img()
、CSSは$this->BcBaser->css()
、JSファイルは$this->BcBaser->js()
を利用します。なお、各ファイルの設置場所については、テーマの構造を参照してください。
ウィジェットエリア
ウィジェットエリア管理で管理できるウィジェットのレイアウトを変更する必要が有る場合、CSSのみで対応できるならば問題ありませんが、出力されるHTMLを変更する場合、baserCMSのコアフォルダからテーマ内の所定の場所に、ウィジェット用のビューファイルをコピーして、それを変更する事ができます。ファイルをコピーすることで、別々の場所に同機能の同名ファイルができますが、テーマフォルダ内のファイルが優先して読み込まれます。
ウィジェット用のファイルは、もともと以下のフォルダに入っています。
Ver.4系統でのウィジェット配置場所
/lib/Baser/Views/Elements/widgets/
変更が必要なフォルダとファイルを、以下にコピーします。
Ver.4系統でのコピー先
/theme/(テーマのフォルダ)/Elements/widgets/
なお、blogなどのプラグインに依存するウィジェット(月別アーカイブ一覧など)の変更は
Ver.4系統でのプラグインウィジェット
/(テーマのフォルダ)/(プラグイン名)/Views/Elements/widgets/
に変更対象ファイルを入れて編集します。
変更をブラウザで確認する
サーバーキャッシュ
サーバーキャッシュが残っていると、変更点が反映されないことがあります。その場合は、システム管理からサーバーキャッシュの削除を行います。
なお、サーバーキャッシュは管理画面にログインしているユーザーは使用しないようになっていますので、最新のページが見えるはずです。しかし、そのせいでサーバーキャッシュが残っていることをサイト管理者や制作者が気が付かず、一般ユーザーは古い情報を見ている、という可能性も考えられます。変更をしたらサイバーキャッシュを削除することに注意してください。
テキスト寄贈:馬庭 吾一@株式会社ヒニアラタ