はじめに

導入

運用

参加・貢献

リソース

GitHubでこのページを編集

Home / 5 / theme / テーマの構造

テーマの構造

baserCMSのテーマファイルは、共通したフォルダ構造を持ちます。ファイル名については、個別のテーマで異なる部分もありますが、基幹部分は共通しています。 (テーマに関する用語については「テーマ用語集」を参照して下さい。)

テーマの基本的なフォルダ構造は以下のようになっています。

テーマフォルダ/
  |- config/ ・・・テーマブートストラップの為のファイルや、テーマの初期データ群が入ります。
  |- src/
      |- Plugin.php ・・・テーマをコントロールするクラスです。必ず準備します。
      |- View/
          |- Helper/ ・・・テーマ内で利用できるヘルパーやフックのためのファイルが入ります。
  |- plugins/ ・・・テーマに梱包するプラグインを入れます。        
  |- templates/
      |- Blog/ ・・・ブログプラグイン部分に関わるファイル群が入ります。
      |- element/ ・・・エレメントファイルが入ります。
      |- layout/ ・・・レイアウトテンプレートが入ります。
      |- Mail/ ・・・メールプラグイン部分に関わるファイル群が入ります。
      |- Pages/ ・・・固定ページファイルが入ります。
    |- webroot/
      |- css/ ・・・CSSファイルが入ります。
      |- img/ ・・・画像ファイルが入ります。
      |- js/ ・・・javascriptファイルが入ります。
      |- files/ ・・・初期データ用の画像などが入ります。
  |- VERSION.txt ・・・テーマのバージョン情報ファイル。
  |- config.php ・・・テーマの各種情報ファイル。
  |- screenshot.png ・・・管理画面で表示するスクリーンショット画像。

config.php

テーマ名や説明文、作成者、作成者のURLを記載します。ここに記載された情報が、管理画面のテーマ管理上で表示されます。

return [
    'type' => 'Theme',
    'title' => 'BcColumn',
    'description' => 'bcColumnは「1カラム」「2カラム左サイド」「2カラム右サイド」のレイアウトが準備されているデザインテーマです。
管理画面からレイアウトを選択することで、基本的な3パターンのレイアウトを簡単に切り替えることができるのが、名前のコンセプトです。
基本的なテーマカラーはテーマ設定から変更できることはもちろん、どんな色にもマッチするサブカラーで『シンプルでカッコいい』デザインを目指しています。

レスポンシブデザインなので、システム設定の「スマホ対応しない」を選択してください。',
    'author' => '小桃クリップ',
    'url' => 'https://komomo.biz/'
];

screenshot.png

テーマ管理で表示されるスクリーンショット画像です。PING画像を300px×240pxで作成します。

VERSION.txt

テーマのバージョン情報を記載したテキストファイルです。一行目が読み込まれます。

layout フォルダ

テーマで利用する レイアウトテンプレート を入れるフォルダです。「default.php」というファイルを作ると、それがこのテーマのデフォルトテンプレートとして利用されます。

default.php 以外にも複数準備すると、コンテンツ管理の編集画面より、コンテンツごとに切り替えることができます。

element フォルダ

テーマで利用する エレメントファイル を入れておくためのフォルダです。このフォルダに入れられたファイルは、次のコードで呼び出すことが出来ます。

<?php $this->BcBaser->element('element_name') ?>

コンテンツテンプレート

ブログやメールフォーム、固定ページなど、「コンテンツ本体」を表現する コンテンツテンプレート 入れるフォルダです。

Blog フォルダ

このフォルダにはブログプラグインで利用されるファイル群が入っています。
Blog フォルダの中には、default フォルダをはじめ、複数のフォルダセットを配置可能となっており、ブログコンテンツの設定画面より選択することができます。

ブログのコンテンツテンプレートでは、以下の4つファイルが使用でき、これらのファイルを編集することで、各部のデザインを変更する事が出来ます。

  • index.php ・・・ブログのトップページ用
  • single.php ・・・個別の記事表示用
  • archives.php ・・・記事の一覧表示用
  • posts.php ・・・サイトのトップページ等からブログ記事一覧を呼び出した際の表示用

Mail フォルダ

baserCMSに同封される「メールプラグイン」のデザイン・レイアウトに関するファイルが入っています。
Mail フォルダの中には、default フォルダをはじめ、複数のフォルダセットを配置可能となっており、メールコンテンツの設定画面より選択することができます。

メールプラグインで利用できるコンテンツテンプレートのファイルは以下の4つです。

  • index.php ・・・メールフォームの画面用
  • confirm.php ・・・送信前の確認画面用
  • submit.php ・・・送信後の送信完了画面用
  • unpublish.php ・・・非公開時に表示する画面用

Pages フォルダ

固定ページで指定できるコンテンツテンプレートの設置フォルダです。
Pages フォルダの中には、default.php をはじめ、複数のテンプレートを配置可能となっており、コンテンツフォルダの編集画面、及び、固定ページの編集画面より選択することができます。

config フォルダ

テーマに同梱する初期データを入れたり、テーマブートストラップを利用して、テーマ内で利用する関数や定数の設を使う事ができます。詳細については テーマブートストラップ をご覧ください。

また、テーマのインストール時に展開される初期データを梱包できます。詳細については 初期データ をご覧ください。

アセットファイル

画像やCSS、Javascript などのアセットファイルは、webroot フォルダ内に、各フォルダを作成し配置します。

css フォルダ

テーマ内で利用するCSSファイルを入れておきます。ここに含まれるCSSの記述は一般的なものと特に相違ありませんが、背景画像などを指定する際は以下のような注意が必要です。ここに入れた CSS ファイルは、ヘルパで呼び出すことが出来ます。

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

img フォルダ

テーマで利用する画像が入るフォルダです。ここに入れた画像はヘルパで呼び出す事ができます。

<?php $this->BcBaser->img('your-image.jpg') ?>
<?php echo $this->BcBaser->getImg('your-folder/your-image.jpg') ?>

js フォルダ

テーマで利用するjavascript ファイルが入るフォルダです。ここに入れた javascript ファイルはヘルパで呼び出す事ができます。

<?php $this->BcBaser->js('your-javascript.js') ?>

Helper フォルダ

テーマヘルパー を使う為のフォルダで、ヘルパーファイルが入ります。ここに含まれたヘルパーはテーマ内から呼び出すことができます。

plugins フォルダ

テーマで利用するプラグインを、テーマに梱包する場合にこのフォルダに配置することで、プラグイン管理より管理することができます。詳しくは、テーマプラグイン をご覧ください。