いちばん簡単なconcrete5テーマ

いちばん簡単な
concrete5 テーマ
～ concrete5 のテーマを作ってみよう～
MACHIDA ‘matchy’ Hideki

concrete5 とは

PHP 、 MySQL を使用した、 Web サイト
用 CMS

いわいる「ホームページ」を作るための
CMS であり、 Blog ツールではない

Joomla に近いカンジ

コーポレートサイトや学校サイトなどに適
している

テーマをつくろう

標準でいくつかテーマがついてくる

マーケットプレイスにも有償、無償のものがたくさん
ある

WordPress などのメジャーなものにはかなわない

標準のテーマを転がして自分流にするのはちと無理が
ある

「 Blog 」じゃなくて「ホームページ」なので、そこそ
この見た目でないと ...

というわけで、作ってみよう

トップページと下層ページ

今回はトップページとそれ以外 ( 下層ページ ) 用に２種
類のページ ( ページタイプ ) をつくる

まずはそれぞれモックアップの HTML を作成する

後からレイアウトなどを大幅に修正するのは厳しいの
で、この段階でお客様の確認をとっておく

いちばん簡単なトップページのモック
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> トップページ </title>
</head>
<body>
<h1> トップページ </h1>
<p>
～内容 (** ここが可変領域 **) ～
</p>
</body>
</html>
ファイル： home.html

いちばん簡単な下層ページのモック
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> その他のページ </title>
</head>
<body>
<h1> その他のページ </h1>
<p>
～内容 (** ここが可変領域 **) ～
</p>
</body>
</html>
ファイル： default.html

名前を決める

テーマの名前を考える ( 半角英数 )

ここでは「 VerySimple 」とする

「 VerySimple 」というディレクトリを作り、以後作成
するファイルはすべてこの中に入れる。

テーマ定義ファイル
３つのファイルを作ってテーマディレクトリ直下に入れる。

ファイル： description.txt

ファイル： thumbnail.png

テーマを識別するアイコン / サムネイル画像

120 x 90 ピクセルの png

ファイル： typography.css

編集・管理機能が使うための CSS 。内容は共通なので、他の
テーマファイルからコピーしてくる
VerySimple <- テーマの名前
Theme for concrete5 very simple. <- テーマの説明

トップページと下層ページを配置

テーマファイルは実は PHP スクリプトである

ファイル名は以下のようにする

トップページ用： home.php

それ以外のページ用： default.php

先に作ったモックアップ HTML をとりあえず拡張子を
「 php 」にしてテーマディレクトリに入れる

参考 ) ページタイプを増やすことも可能

例 ) 左サイドバー用、右サイドバー用

例 ) 商品リストページ用、商品詳細ページ用

PHP ファイルのお約束
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
ブラウザからアクセスされたときに中身が見えないように、すべて
の PHP ファイルの先頭に以下を記入しておく ( おまじない )

共通するところは部品にしよう

それぞれのページタイプ用 PHP ファイルで、内容が同じかつ
ユーザーが編集しない部分は共通部品化したほうが後々の修正
が楽

よくある例

「 <html> ～ <body> 」までと「 </body> ～ </html> 」まで

グローバルメニュー、住所連絡先

共通部品として切り出した PHP (HTML) の断片は
「 elements 」というサブディレクトリの中に入れるお約束

ここでは「 <html> ～ <body> 」までと「 </body> ～ </html> 」
までを部品化する

<head> のお約束
<?php Loader::element('header_required'); ?>
<style type="text/css">@import "<?php echo $this->getStyleSheet('typography.css');?>";</style>

<title> 、 <meta name="keywords"> 、 <meta
name="description"> 、 <meta http-
equiv="content-type"> は入れない

jQuery 本体の JavaScript 呼び出しは入れない

<head> 直後ぐらいに、以下を記述

</body> のお約束
<?php Loader::element('footer_required'); ?>
</body> の直前ぐらいに、以下を記述


テーマディレクトリ直下の CSS ファイルは以下のよう
に記述できる
画像、 JavaScript 、 CSS など
<style>@import "<?php echo $this->getStyleSheet('hoge.css');?>";</style>
<link rel="stylesheet" href="<?php echo $this->getStyleSheet('hoge.css');?>" />

サブディレクトリの中のファイルや、 CSS 以外の画
像・ JavaScript などは、以下のように記述する
<script src="<?php echo $this->getThemePath();?>/js/hoge.js"></script>
<img src="<?php echo $this->getThemePath();?>/image/hoge.jpg" />

いちばん簡単な共通ヘッダ
<html>
<head>
<?php Loader::element('header_required'); ?>
<style type="text/css">
@import "<?php echo $this->getStyleSheet('typography.css')?>";
</style>
</head>
<body>
ファイル： elements/header.php

いちばん簡単な共通フッタ
<?php Loader::element('footer_required'); ?>
</body>
</html>
ファイル： elements/footer.php

共通部品の呼び出し
<?php $this->inc('elements/header.php'); ?>
<?php $this->inc('elements/footer.php'); ?>
共通部品は次のようにして呼び出す

編集可能エリア
<?php $a = new Area('Main');
$a->display($c);
?>

編集可能エリアには次のように記述する

「 Main 」のところは編集可能エリアを識別する一意
の文字列

１つのページタイプの中に複数の編集可能エリアがあ
る場合は、この文字列を区別する

例 ) 「 Main 」「 Sidebar 」など

いちばん簡単なトップページ
<h1> トップページ </h1>
<p>
$a->display($c);
?>
</p>
ファイル： main.php

いちばん簡単な下層ページ
<h1> その他のページ </h1>
<p>
$a->display($c);
?>
</p>
ファイル： default.php

アップロードするところ

concrete5 がインストールされているとこ
ろの「 theme 」ディレクトリ

手元のテーマディレクトリのディレクトリ
構造を保ったままアップロードする

「 concrete/theme 」ディレクトリは標準
添付のテーマが入っている

インストール～テーマ適用

[ 管理画面 ]->[ システムと設定 ]->[ キャッシュ
をクリア ]->[ キャシュをクリア ]( 念のため )

[ 管理画面 ]->[ テーマ ]->[ インストール可能な
テーマ ]->[ インストール ]->[ 有効 ]

必要に応じ、 [ 管理画面 ]->[ ページタイプ ] で
ファイル名 ( ハンドル ) と名前の関係を追加修
正する
 例 )[ 商品ページ ] -> [product_detail](.php)

ナゾな「テンプレートタグ」は存在しない

これでほぼすべてです ( 爆

WordPress や MovableType のような、ナゾの「テン
プレートタグ」は存在しない

その代わり「編集可能エリア」におまじないの PHP
コードを埋める

特別なパーツやウィジットはすべて「ブロック」とし
て GUI で入力するので、覚えるおまじないがとても少
ない

PHP のごくあたりまえな文法 (HTML 含む ) でしかな
いので、特殊な方言を覚える必要がない

いちばん簡単なconcrete5テーマ

More Related Content

What's hot

Viewers also liked

Similar to いちばん簡単なconcrete5テーマ

More from Hideki MACHIDA

Recently uploaded

いちばん簡単なconcrete5テーマ