baserCMSに挫折した方の為のテンプレ再入門

2016.12.22

こんにちは、baserCMSの開発チームの江頭です。

basersマガジンをお借りして、baserCMS Advent Calendar 2016 への参加記事をお届けします。

今回は、「初めてのbaserCMSでのデザインカスタマイズ」でみなさんが挫折しているであろう、「baserCMSのテンプレート」について、再入門として基本的な仕組みをご紹介します。

最初は、少し小難しいかもしれませんが、慣れると素晴らしくメンテナンス性の高いテンプレートシステムである事がわかると思いますので、早速、少しずつ紐解いていきたいと思います。

baserCMSの設計方針

デザイナーの自由度を限りなく高く、
ITリテラシーの高くない方が壊さないように

まず、大前提として、テンプレートの設計方針をお話ししておきます。
みなさんがまず躓くのは、「ブラウザ上での見た目のこの部分を編集したいけど、どうやっていいかわからない」だと思います。

baserCMSは、concrete5 や、a-blog cms のように、フロントエンド側より、色んなパーツを直接編集する事はできません。
これはすごく不便のように感じるかもしれませんが、baserCMSは、次の3つの観点から、あえてこの仕様となっています。
※ もちろんフロントエンドの見た目の状態から直接編集できる事はすごくリッチで素晴らしい事なのですが。

  1. デザイナーのデザインを自由度高く、最大限まで再現できるよう、CMSの編集画面からは、コンテンツ本体部分のみ編集可能としている。
  2. ITリテラシーが高くない運営者がデザインを崩してしまう可能性を加味して、あえて、色んなパーツを直接編集できないようにしている。
  3. ITリテラシーが高くない運営者が「今、編集を行う画面にいる」という事を明確に認識できるよう、別のデザインの「編集画面」を用意している。

そこで、「では、ヘッダーやフッターはどうやってデザインを変更したらいいの?」という事になります。

baserCMSでは、コンテンツ本体以外の部分を変更するには、テンプレートを編集します。テンプレートを編集するには、少しなりとも、HTML の知識が必要となってきます。

ただ、そもそも、baserCMSは、Webクリエイターの為のCMSです。既にあるデザインテーマをカスタマイズする事よりも、Webクリエイターが作成した素晴らしいHTMLをベースに動的タグを埋め込んで動的なサイトに変身させる事の方に主軸が置かれているので、Webクリエイターの方でない方には少しやさしくないかもしれません。

ただ、Webクリエイターでない方もちょっとした「コツ」を知れば、思い通りにデザインの変更ができるようになります。
この記事では、既にあるデザインテーマをカスタマイズする方を対象にテンプレートのカスタマイズ方法について説明していきたいと思います。

 

管理システムでテンプレート編集

ちなみに、テンプレートを編集するには、テーマフォルダ内のテンプレートを編集して、サーバーにFTPでアップロードしてもいいですが、管理画面の「テーマ管理」より、サーバー上のテンプレートを直接編集したり、テンプレートで使われている画像を直接アップロードする事もできます。

テーマ一覧|テーマ管理|baserCMS inc..png

 

テンプレートの探し方

既に配布されているデザインテーマをカスタマイズする際、次に躓くのは、「テンプレートが多くてどこを編集していいかわからない」という事だと思います。

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/

制作・開発モードをデバッグモード1以上にして、テーマフォルダに存在せず、エラーが発生していない場合は、テーマフォルダより優先順位が低いフォルダ内に存在するという事になります。

app/View/ フォルダは初期状態では利用していませんので、ほとんどの場合、lib/Baser/View/に存在します。
※ プラグインの場合は、lib/Baser/Plugin/PluginName/View/ となります。

例えば、グローバルナビゲーションを出力する $this->BcBaser->globalMenu()という関数は、内部的に global_menu というエレメントを利用しているのですが、ほとんどの場合、Elements フォルダ内に存在しません。

lib/Baser/View/Elements/global_menu.php として存在します。

こうやって、ある程度アタリをつけて探せば、お探しのテンプレートはきっと見つかるはずです。

 

表示しているページで利用しているテンプレート一覧を表示

また、baserCMSでは、現在表示しているページで読み込まれているテンプレートの一覧を画面上に表示する機能も備えています。

管理システムのシステム設定より、制作・開発モードをデバッグモード2に変更してから、フロントエンド側をリロードしてみましょう。
画面の下部にテンプレートの一覧が表示されているはずです。

baserCMS inc..png

 

テンプレートのコピーと編集

これまでの説明で、ある程度おわかり頂けたかと思いますが、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 inc..png

 

最後に

baserCMSのテンプレートシステムは、ここまで書いたとおり少し小難しいかと思いますが、小難しさを軽減する機能も備えており、慣れてくると、冒頭にお伝えしたとおり、非常にメンテナンス性が高い事がわかってきます。

なぜなら、複雑なサイトを構築する際、テンプレートのパーツ化(モジュール化)と再利用は必須になってくるからです。
パーツ(モジュール)が増えていくと、メンテナンス性を高める為に、「整理」が必要になってきます。

baserCMSは、初めてテンプレートをカスタマイズしようとする際に、テーマフォルダ内のフォルダが多く複雑そうだという印象を与えてしまうようですが、これにもちゃんとした意味があるのです。

テンプレートのパーツ化をすすめていく際、「置く場所が決まっている」という事は「整理がしやすい」という事に繋がり、「整理がしやすい」という事は「メンテナンス性が高い」という事に繋がっていきます。

baserCMSに挫折した方もこの仕組みを理解して頂き、再度、チャレンジして頂けたら幸いです。

江頭 竜二

江頭 竜二  - 株式会社キャッチアップ / 代表取締役

1973年佐賀県生まれ、佐賀育ち。就職後は福岡へ。
27歳で他業種よりIT関連会社へ転職。その後、2007年に独立。
5年間のフリーランスを経験後、2012年1月、株式会社キャッチアップを立ち上げ、Webシステム(CMS系)を中心とした提案、開発に携る。
ユーザビリティ・運営を意識した開発を心がけている。
フリーランス中に参加したコミュニティ活動を通じて、2010年に自身が開発していたCMS「baserCMS」をオープンソースとして公開。
現在は、baserCMSのコミュニティであるbaserCMSユーザー会を運営し、全国的な活動を行なっており、
2014年には、baserCMSを継続的に普及促進、機能改善していく為、特定非営利活動法人ベーサー・ファウンデーションを設立。

この人の関連サイト