このページは、concrete5スイスのRemo氏によるチュートリアルを翻訳したものです。文章は一部修正してあります。原文はこちらです。Thanks Remo!

concrete5 オリジナルテーマのつくり方

concrete5 Tutorial 1 From codeblog

目次　（クリックすると該当記事へジャンプします。）

はじめに

このチュートリアルでは、既に制作した HTML 、 CSS のテンプレートを concrete5 のテーマに変換するためのやり方を紹介します。

前提として、 HTML と CSS の基礎知識が必要です。しかし PHP のコードは全て解説しますので PHP の経験は必要ありません。

このチュートリアルでは、以下のサンプルファイルを使いますので、ダウンロードしてお使い下さい。また、このページの最後では、完成版のダウンロードもすることができます。

HTML / CSS のサンプル元ファイル

layout.zip (66KB)

20090423help.theme_design.create_theme.layout.jpg

次に、 HTML/CSS でつくったこのレイアウトファイルを、 concrete5 用テーマに変換するポイントを追って行きます。

１．テーマの構成要素

オリジナルなレイアウトを実現するためには、concrete5のテーマの仕組みを理解することが必要です。

そこで最初に、テーマを構成する全要素を概観してみます。

すべてのファイルの文字エンコーディングをUTF-8に設定して下さい。そうでないと文字化けの原因となります。

20090423help.theme_design.create_theme.theme_element.jpg

＊全てのテキストファイルの文字エンコーディングは、「UTF-8」に設定する必要があります

テーマ保存場所

テーマは、以下の様なフォルダーを作成し、その配下にファイルを保存します。フォルダー名は、半角英小文字数字のみで空白は認められません。

/themes/[テーマハンドル]/

その他にも、マーケットプレイスでは、パッケージ作成の手順を踏んでいただく必要がありますが、テーマ関連ファイルは以下のフォルダー内に・・・

/packages/[パッケージハンドル]/themes/[テーマハンドル]/

concrete5 デフォルトのテーマは、以下のフォルダー内に・・・

/concrete/themes/[テーマハンドル]/

というフォルダー内にファイルが保存されています。

テーマ設定用ファイル(必須)

description.txt
- concrete5 用テーマに、識別用の名前と短い説明を書いておくためのテキストファイルです。
thumbnail.png
- プレビュー用の縮小画面を120×90ピクセルのPNG形式の画像として用意します。

テーマファイル(必須)

default.php
- 特定のページタイプを持たないページ作成用の既定ファイルです。
view.php
- 「シングルページ」やアプリケーション用のレイアウトファイルです。
typography.css
- 記事ブロックエディター「TinyMCE」で使用されるCSSファイルです。
main.css
- 上記以外のCSS定義をここに。これはファイル名を変更しても構いません。

ページタイプ用テーマ（オプション）

以下のファイルを制作すると、デフォルトのページタイプと連動します。このチュートリアルでは紹介しませんが、以下と同名のファイルを作成すると、デフォルトのテーマに保存されているページタイプを適用出来るようになります。

home.php
- ホームページに適用されるテンプレート。これがなければ、default.php が適用されます。
full.php
- 「full（全幅）」というページタイプを選んだ時に使われるレイアウトファイルです。
left_sidebar.php
- 「左サイドバー」というページタイプを選んだ時用のレイアウトファイルです。

また、ページタイプのハンドルと同じファイルを作成すると、そのファイルが適用される様になります。

ディレクトリー（オプション）

concrete5 では、以下のディレクトリーを作成する必要はありませんし、別の名前でディレクトリーを作成されても構いませんが、今回は、 concrete5 で最も一般的に行われている方法を元に紹介して行きます。

elements
- ヘッダーやフッター等を共通にしたい場合にこのディレクトリー以下にそれに関する php テキストファイルを配置します。必須ではありません。
images
- backgroud image(背景)のような、編集不必要な画像をテーマに配置するとき、このディレクトリ以下にすべて保存するようにします。

テーマを構成するこれらのファイルは全てまとめて1つのディレクトリに保存します。

これらのファイルをを所定の位置（/themes/[テーマハンドル]/）にコピーして、管理画面でインストールするだけで、テーマをインストールすることができます。

（*ただし本家のマーケットプレイスからダウンロードしたテーマは「/packages」のディレクトリーに配置します）

topに戻る

２．レイアウト構造

最初に示したレイアウト例を、もう一度見てみましょう。

20090423help.theme_design.create_theme.layout.jpg

当チュートリアルは、このレイアウト例を使って進めていきます。

::::::::::::::::::::::::::::::::::::::::::

さて、このレイアウトは、1.「ロゴ」と、2.「画像」と、3.「メニュー」部分と「文章」部分とに分かれたコンテンツ、という3つの部分で構成されています。

20090423help.theme_design.create_theme.html_layout.jpg

HTMLの構造は以下のようになっています。

20090423help.theme_design.create_theme.html_structure.jpg

これを基に、concrete5で編集可能な、【3.1】に「オートナビブロック」と、【3.2】に「コンテンツブロック」を追加できるようにしたいと思います。

次のステップでは、そのためのPHPコードをこのHTMLコードに挿入してみましょう。

topに戻る

3. テーマのテンプレートファイルを作る

ディレクトリー作成とファイルの移動

まず、「images」「elements」ディレクトリーを作成。そして、画像ファイルを「images」ディレクトリーに移動させます。

main.cssファイルを作成

まず最初に、「main.css」ファイルを作成します。

今回は、main.cssに全てのルールを記述します。「layout.html」のヘッダータグにあるCSSの記述を全てコピー&ペーストして「main.css」という名前で新規作成して下さい。

concrete5 テーマ用に、全ての画像を「images」フォルダーに保存したので、cssの定義を最初のものから二か所修正します。「background.png」を「images/background.png」に、「picture.jpg」を「images/picture.jpg」にします。これで、main.cssの作成は終わりです。

＊「typography.css」は、ページ下のダウンロードパッケージに concrete5 デフォルトの「typography.css」を同梱しました。詳しくは今後、別チュートリアルで説明する予定です。（英語チュートリアルはこちら）

＊背景色が黒色なテーマは「typography.css」でも、ページの背景色を指定する必要があります。

default.php を作成

では、実際のテーマテンプレートを、default.phpというファイル名でつくって行きます。中身は、オリジナルのhtmlとほとんど変わりません。

Filename: default.php

<?php 
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php'); 
?>

<div id="outercontainer1">
   <div id="outercontainer2">   
      <div id="container">
      
         <div id="logo">
            <img src="<?php echo $this->getThemePath()?>/images/logo.png" alt="Logo"/>
         </div>
         
         <div id="picture">            
         </div>
         
         <div id="content">
            <div id="column_1">
               &nbsp;
            </div>
            
            <div id="column_2">               
         		<?php
         		$a = new Area('Header Nav');
         		$a->display($c);		
         		?>               
            </div>
            
            <div id="column_3">
         		<?php
         		$a = new Area('Main');
         		$a->display($c);		
         		?>     
            </div>
            
            <div style="clear:both;"></div>
            
         </div>            
      </div>
   </div>
</div>

<?php
$this->inc('elements/footer.php'); 
?>

ページ冒頭に PHP 命令文を記述

まず、一番最初の4行に、以下の記述をします。

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>

・1行目に、PHPの書式が始まるという呪文を記述します。

・2行目は、concrete5 のプログラムでないと、ファイルを直接開けないようにするための呪文みたいなものです。

・3行目は「elements/header.php」のファイルをここに含めるという命令で、ヘッダーをもたせるためのものです。ヘッダーについては後で詳しく説明します。

・4行目に、 PHP の命令文が終わり、普通の HTML に戻るという記述を加えます

テーマ内の画像などの URL をテンプレートの URL に変更

6～40行目でレイアイトの指定をしています。

普通の HTML の構造にどのサイトにインストールされても、ファイルの保存先がきちんと反映されるようにPHP命令文を加えて行きます。

このテンプレートでは、11行目に画像が1つだけ使われているので、そこに PHP 命令文を記述します。

<img src="<?php echo $this->getThemePath()?>/images/logo.png" alt="Logo"/>

上記のように、

<?php echo $this->getThemePath()?>

という命令文を加えます。これは、テーマが保存されているパスをそこに挿入するという命令です。つまり、この他にも画像やファイルを読み込ませたいと思われている方は、URLの部分に上記の命令を加えることになります。

エリアの指定

22～25行目で、 concrete5 が編集出来るエリアを指定します。まず最初は「header nav」エリアです。

編集可能エリア（ブロック挿入可能部）を定義したphpコードです。

<div id="column_2">
    <?php
    $a = new Area('Header Nav');
    $a->display($c);
    ?>
</div>

「column-2」というCSSのIDの中に「header nav」エリアのコンテンツを表示させるという指定をしています。

メイン部分のエリアを作成

29～32行目は、コンテンツを挿入するための2つ目のエリアです。

 <div id="column_3">
    <?php
    $a = new Area('Main');
    $a->display($c);
    ?>
 </div>

フッターを読み込む指定

42～44行目で後述の「elements/footer.php」を読み込むという命令文を加えます。

<?php $this->inc('elements/footer.php'); ?>

view.php を作成

今回のチュートリアルでは、詳しい説明は省きますが、「view.php」では、普通のテンプレートではなく、「シングルページ」や将来公開される大掛かりなアプリケーションを表示させる時に使用するテンプレートです。ですので、エリアを指定するのではなく、メインコンテンツを表示させる場所に以下の命令文を記述します。

<?php 
print $innerContent;
?>

このコードは、5.3.0 以降でサポートされている「公開プロフィール」や、大掛かりなアプリケーションのコンテンツを表示させる所を指定するコードです。今回は詳しい説明を省かせていただきました。ページ下の完成版に「view.php」を同梱しました。

また、普通にエリアを含める事も可能です。今回のパッケージでの「view.php」には、【3.1】の「Header Nav」というエリアを残し、【3.2】の「Main」エリア部分を、このシングルページ用に当てはめる事にします。

topに戻る

4. ヘッダーとフッター要素

普通、どのウェブサイトでも、ヘッダーの部分とフッターの部分は同じような表示をします。ですので、今回は、「elements」ディレクトリー内に、「header.php」と「footer.php」テキストファイルを作成します。

「header.php」を作成

「header.php」ファイルには、concrete5の特別な説明書きを含める必要があります。今回はコピー&ペーストのみで大丈夫です。

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
<?php  Loader::element('header_required'); ?>
<!-- Site Header Content //-->
<style type="text/css">@import "<?php echo $this->getStyleSheet('main.css')?>";
</style>
<style type="text/css">@import "<?php echo $this->getStyleSheet('typography.css')?>";
</style>
</head>
<body>

1行目の「defined('C5_EXECUTE') or die(_("Access Denied."));」も「default.php」と時と同じように、 concrete5 がアクセスした時のみ、このファイルが読み込まれるようにするための呪文です。

6行目の「Loader::element('header_required');」は、 concrete5 が使用する Javascript や CSS ファイル、セッション情報やその他の設定を読み込ませるための呪文です。

8〜9行目で、先ほど作成した2つのCSSファイルを読み込ませる「echo $this->getStyleSheet('main.css')」「echo $this->getStyleSheet('typography.css')」という記述をしています。

「footer.php」を作成

「footer.php」も今回はコピー&ペーストのみで大丈夫です。

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php');
?>
</body>
</html>

3行目の「require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php');」は、「管理画面」-「サイト全体の設定」にある、アクセス解析コード等を出力する指示をします。

５．サムネイル(縮小画像)と説明書き

これでもうほとんどの重要なファイル群は出来上がりました。後は、作成したテーマが concrete5 の管理画面で見栄え良く確認できるようにしてみましょう。

photoshop等でレイアウトを開き、120×90ピクセルで小さな画像を作成し、「thumbnail.png」というファイル名のPNG形式画像をフォルダーに保存します。この画像が管理画面で表示される画像になります。

「description.txt」テキストファイルを作成

また、「description.txt」（説明）と呼ばれるテキストファイルを作成します。最初の行にはテーマの名前を書き、2行目には解説を書きます。

Codeblog Theme
Codeblog Theme by mesch.ch, Remo laubacher

６．インストール

これで必要なファイルは全て作成しました。さあ、作成したテーマをインストールしてみましょう。

concrete5 をインストールしたディレクトリに「themes」というフォルダーがあるので、フォルダーを丸ごとアップロードします。

20090423help.theme_design.create_theme.ftp.jpg

そして、管理画面にログインして、「ページとテーマ」を開きます。

20090512.help.design.theme.install.jpg

そして、「インストール」をクリックし、確認画面を待ちます。

もし新しいテーマを既定のテーマにしたい場合は、「有効」をクリックしてください。すると全てのページがこの新しいテーマにセットされます。

変換作業を終えたテンプレートファイル

これが、今回のチュートリアルで紹介したテンプレート変換後のファイルです。

codeblog.zip (84KB)

topに戻る

7. クイックリファレンス

上記の PHP 命令文の他に、知っておきたいコードを並べておきます。

デフォルトテンプレートに使われているエリア

concrete5 のデフォルトのテンプレート「プレーンヨーグルト」には、

Header Nav - オートナビブロックに、「header menu」とカスタムテンプレートを適用したメニューを表示
Header - トップの画像
Main - メインコンテンツ
Sidebar - サイトバー

というエリアが指定してあります。これらのエリアをテンプレートに入れずに独自のネーミングをされても構いません。ただし、他のテンプレートとの互換性がなくなり、テーマを変えたとたんに、ブロックがページから消えてしまいますので、これらを優先的に使用される事をお勧めします。

ということで、上のチュートリアルでは、「Header Nav」と「Main」のエリアを作成しましたが、「Header」と「Sidebar」のエリアを作りたい場合は・・・。

Header エリア

<?php           
$a = new Area('Header');
$a->display($c);            
?>

Sidebar エリア

<?php 
$a = new Area('Sidebar');
$a->display($c);
?>

を、レイアウトの該当箇所に挿入して下さい。

topに戻る

最後に

Usagi Project では、当サイトでテンプレートを公開出来る場所や、本家のマーケットプレイスへテンプレートを公開する代行もしようと考えています。ご自慢のテンプレートを公開されたい場合は、お気軽に、Usagi Projectまでお知らせ下さい。

▲▲ このページのトップへ

© 2010 concrete5日本語公式サイト. | Power by Usagi Project & Concrete CMS, inc.
concrete5はMITライセンスで配布されているオープンソースCMSです
"concrete5"のロゴならびに名称は、Concrete CMS, inc.の登録商標です。名称とロゴの使用について。
All rights reserved.。サイト内の情報の著作権は放棄しておりません。

ヘルプ総合

concrete5 オリジナルテーマのつくり方

はじめに

HTML / CSS のサンプル元ファイル

１．テーマの構成要素

テーマ保存場所

テーマ設定用ファイル(必須)

テーマファイル(必須)

ページタイプ用テーマ （オプション）

ディレクトリー （オプション）

２．レイアウト構造

3. テーマのテンプレートファイルを作る

ディレクトリー作成とファイルの移動

main.cssファイルを作成

default.php を作成

Filename: default.php

ページ冒頭に PHP 命令文を記述

テーマ内の画像などの URL をテンプレートの URL に変更

エリアの指定

メイン部分のエリアを作成

フッターを読み込む指定

view.php を作成

4. ヘッダーとフッター要素

「header.php」を作成

「footer.php」を作成

５．サムネイル(縮小画像)と説明書き

「description.txt」テキストファイルを作成

６．インストール

変換作業を終えたテンプレートファイル

7. クイックリファレンス

デフォルトテンプレートに使われているエリア

Header エリア

Sidebar エリア

最後に

ページタイプ用テーマ（オプション）

ディレクトリー（オプション）