こんにちは、baserCMSの開発チームの江頭です。
basersマガジンをお借りして、baserCMS Advent Calendar 2016 への参加記事をお届けします。
今回は、「初めてのbaserCMSでのデザインカスタマイズ」でみなさんが挫折しているであろう、「baserCMSのテンプレート」について、再入門として基本的な仕組みをご紹介します。
最初は、少し小難しいかもしれませんが、慣れると素晴らしくメンテナンス性の高いテンプレートシステムである事がわかると思いますので、早速、少しずつ紐解いていきたいと思います。
baserCMSの設計方針
デザイナーの自由度を限りなく高く、
ITリテラシーの高くない方が壊さないように
まず、大前提として、テンプレートの設計方針をお話ししておきます。
みなさんがまず躓くのは、「ブラウザ上での見た目のこの部分を編集したいけど、どうやっていいかわからない」だと思います。
baserCMSは、concrete5 や、a-blog cms のように、フロントエンド側より、色んなパーツを直接編集する事はできません。
これはすごく不便のように感じるかもしれませんが、baserCMSは、次の３つの観点から、あえてこの仕様となっています。
※ もちろんフロントエンドの見た目の状態から直接編集できる事はすごくリッチで素晴らしい事なのですが。
- デザイナーのデザインを自由度高く、最大限まで再現できるよう、CMSの編集画面からは、コンテンツ本体部分のみ編集可能としている。
- ITリテラシーが高くない運営者がデザインを崩してしまう可能性を加味して、あえて、色んなパーツを直接編集できないようにしている。
- ITリテラシーが高くない運営者が「今、編集を行う画面にいる」という事を明確に認識できるよう、別のデザインの「編集画面」を用意している。
そこで、「では、ヘッダーやフッターはどうやってデザインを変更したらいいの？」という事になります。
baserCMSでは、コンテンツ本体以外の部分を変更するには、テンプレートを編集します。テンプレートを編集するには、少しなりとも、HTML の知識が必要となってきます。
ただ、そもそも、baserCMSは、Webクリエイターの為のCMSです。既にあるデザインテーマをカスタマイズする事よりも、Webクリエイターが作成した素晴らしいHTMLをベースに動的タグを埋め込んで動的なサイトに変身させる事の方に主軸が置かれているので、Webクリエイターの方でない方には少しやさしくないかもしれません。
ただ、Webクリエイターでない方もちょっとした「コツ」を知れば、思い通りにデザインの変更ができるようになります。
この記事では、既にあるデザインテーマをカスタマイズする方を対象にテンプレートのカスタマイズ方法について説明していきたいと思います。
管理システムでテンプレート編集
ちなみに、テンプレートを編集するには、テーマフォルダ内のテンプレートを編集して、サーバーにFTPでアップロードしてもいいですが、管理画面の「テーマ管理」より、サーバー上のテンプレートを直接編集したり、テンプレートで使われている画像を直接アップロードする事もできます。
テンプレートの探し方
既に配布されているデザインテーマをカスタマイズする際、次に躓くのは、「テンプレートが多くてどこを編集していいかわからない」という事だと思います。
baserCMSでは、パーツの再利用性を重視しており、「エレメント」という概念を用いており、様々なパーツがエレメントとして分割されています。
分割箇所では、エレメントを呼び出す関数や、エレメントを内部的に呼び出す他の関数が使われていたりします。
<?php $this->BcBaser->element('sidebar') ?>
この分割された箇所のテンプレートは、基本的には、テーマフォルダ内に配置されている「Elements」というフォルダを探せばある程度見つかると思いますが、テーマフォルダ内のどこにもない場合があります。
ここで挫折される方も多いのではないでしょうか。
baserCMSのオーバーライド機構を理解する
baserCMSでは、オーバーライド機構というものを採用しており、テンプレート利用の優先順位が内部的に管理されています。
《プラグイン以外の場合》
app/webroot/theme/theme-name/
> app/View/
> lib/Baser/View/
> lib/Cake/View/
《プラグインの場合》
app/webroot/theme/theme-name/
> app/View/
> lib/Baser/Plugin/PluginName/View/
> lib/Baser/View/
> lib/Cake/View/
制作・開発モードをデバッグモード１以上にして、テーマフォルダに存在せず、エラーが発生していない場合は、テーマフォルダより優先順位が低いフォルダ内に存在するという事になります。
app/View/ フォルダは初期状態では利用していませんので、ほとんどの場合、lib/Baser/View/に存在します。
※ プラグインの場合は、lib/Baser/Plugin/PluginName/View/ となります。
例えば、グローバルナビゲーションを出力する $this->BcBaser->globalMenu()という関数は、内部的に global_menu というエレメントを利用しているのですが、ほとんどの場合、Elements フォルダ内に存在しません。
lib/Baser/View/Elements/global_menu.php として存在します。
こうやって、ある程度アタリをつけて探せば、お探しのテンプレートはきっと見つかるはずです。
表示しているページで利用しているテンプレート一覧を表示
また、baserCMSでは、現在表示しているページで読み込まれているテンプレートの一覧を画面上に表示する機能も備えています。
管理システムのシステム設定より、制作・開発モードをデバッグモード２に変更してから、フロントエンド側をリロードしてみましょう。
画面の下部にテンプレートの一覧が表示されているはずです。
テンプレートのコピーと編集
これまでの説明で、ある程度おわかり頂けたかと思いますが、baserCMSの lib 配下のコアパッケージでは基本的に「デフォルト」となるテンプレートを提供しており、これを利用するかしないかは制作者の自由なのです。
おそらくこうやって、コアパッケージ内のテンプレートを探す理由は、「コアパッケージが提供するデフォルトのHTMLが気に食わない」からだと思いますが、これを直接編集するのは得策ではありません。
baserCMSの新しいバージョンがリリースされてアップデートを行う場合は、lib配下のコアパッケージを新しいパッケージで上書きする必要があるからです。
直接編集してしまっている場合、これまでの編集内容が上書きにより消されてしまいます。
ファイラー上で手動でコピーし編集する
まず、コアパッケージが提供するテンプレートを、Explorer や Finder などの ファイラーで、手動でテーマフォルダ内にコピーをして編集しましょう。
先ほどの「テンプレート利用の優先順位」の仕組みを逆手に取る事になります。
コピー先は、テーマフォルダ配下の同じ階層の場所となり、例えば、先ほどの lib/Baser/View/Elements/global_menu.php の場合、コピー先は、app/webroot/theme/theme-name/Elements/global_menu.php です。
念のため、プラグインの場合の例も記載すると、lib/Baser/Plugin/Blog/View/Blog/default/index.php の場合、app/webroot/theme/Blog/default/index.php となります。
管理システムからコアのテンプレートをテーマにコピーし編集する
また、baserCMSの管理システムからも同様の操作を行う事ができます。
テーマ管理内の「コアテンプレート確認」というリンクを開くと、コアパッケージのテンプレートの一覧が表示されます。ここから、編集したいテンプレートを探し、表示アイコンをクリックすると、画面下部に、「現在のテーマにコピー」というボタンが表示されていますので、クリックすると正しい場所に簡単にコピーする事ができます。
最後に
baserCMSのテンプレートシステムは、ここまで書いたとおり少し小難しいかと思いますが、小難しさを軽減する機能も備えており、慣れてくると、冒頭にお伝えしたとおり、非常にメンテナンス性が高い事がわかってきます。
なぜなら、複雑なサイトを構築する際、テンプレートのパーツ化（モジュール化）と再利用は必須になってくるからです。
パーツ（モジュール）が増えていくと、メンテナンス性を高める為に、「整理」が必要になってきます。
baserCMSは、初めてテンプレートをカスタマイズしようとする際に、テーマフォルダ内のフォルダが多く複雑そうだという印象を与えてしまうようですが、これにもちゃんとした意味があるのです。
テンプレートのパーツ化をすすめていく際、「置く場所が決まっている」という事は「整理がしやすい」という事に繋がり、「整理がしやすい」という事は「メンテナンス性が高い」という事に繋がっていきます。
baserCMSに挫折した方もこの仕組みを理解して頂き、再度、チャレンジして頂けたら幸いです。
