このコンテンツをご覧になるには、Adobe Flash Playerをインストールする必要があります。

テーマの作り方 & クイックリファレンス

concrete5 テーマの作り方の超基礎を、動画を使って紹介します。これは 2010/7/9 に京都で開催された、オープンソースカンファレンス 2010 Kansai @ Kyoto での30分セミナーをそのまま載せたものです。

concrete5 オリジナルテーマ作成で知らなきゃいけないのは、HTML+CSSと、簡単なルールだけ。最小構成で concrete5 オリジナルテーマを作るためのクイックリファレンスです。テーマ作成を詳しく知りたい方はテーマのつくり方を御覧ください。

この講座は 5.4.0.5 を基本に作成されました。内容は、2010年7月現在のものです。5.4.2.1 でも基本構造は変わりません。

 

ファイル保存場所

concrete5.6 の場合

【concrete5ディレクトリー】/themes/【任意の半角英数字ディレクトリー】/

concrete5.7 の場合

【concrete5ディレクトリー】/application/themes/【任意の半角英数字ディレクトリー】/

* /concrete/themes/ ディレクトリー以下のテーマファイルは絶対に変更しないでください。詳しくはテーマのつくり方を御覧ください。

※ ディレクトリ名は、半角英小文字数字のみが使用できます。(全角文字、英大文字、ハイフン (-) は使わないようにしてください)

 

構成ファイル一覧

  • description.txt
    • 必須
    • 管理画面用、テーマの説明テキストファイル
    • UTF-8文字エンコーディングである必要(Windownsユーザーさん注意)
  • thumbnail.png
    • 必須
    • 管理画面用、テーマの縮小画面
    • 120x90 のPNG形式
  • default.php
    • 必須
    • デフォルトのテーマファイル本体
  • view.php
    • オプション
    • シングルページ用テーマファイル本体
    • 404やログインページのデザインをカスタマイズしたい場合は作成が必要
  • typography.css
    • オプション (5.6 のみ)
    • 記事ブロック用CSSファイル
    • body, h1, h2, h3, img やカスタムクラスなど
  • page_theme.php
    • オプション (5.7のみ)
    • テーマのカスタマイズ関連の情報を格納した PHP ファイル
  • CSS ファイル
    • テーマに使われれる CSS ファイルの一覧
    • 多くは main.css などと名付けて作成
    • CSS
  • 画像ファイル
    • テーマに埋め込む画像などを /images/ などのフォルダを作成して格納。
  • 【ページタイプハンドル】.php(※ オプション)
    • 特定ページタイプ専用のテーマファイル

 

PHPコード一覧

動画で紹介したコードの一覧です。

*サンプルコードを読みやすくするために色を変えていますが、.phpファイルは普通のテキストファイルです。

*日本語は使用される場合は、特に、文字エンコーディングが「UTF-8」であることを確認してください。

 

1. セキュリティー対策用 PHP

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>

concrete5で使われるテーマ用PHPテキストファイル全ての一番最初に記述

 

2. テーマパスを追加

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

このコードが、テーマファイルのパスを出力します。テーマファイルに直接 CSS ファイルや JS ファイル、画像ファイルの URL を埋め込む場合、テーマフォルダ内にそれらのファイルを格納します。上記コードを使わず、絶対パスを入れてもいいのですが、このコードを入れると、URLを移動した時も書き換えが必要ありません。

CSS ファイルや JS ファイルの指定に使ってください。

 

2. headタグ

<?php Loader::element('header_required'); ?>

ここで、画面上部のツールバーや、ページタイトルなどの情報を読み込みます。

 

4a. エリアを指定する PHP

<?php
$a
= new Area('【エリアの名前】');
$a->display($c);
?>

【エリアの名前】の部分を半角英数字のエリアの名前に変更して配置してください。「Main」「Header Nav」「Header」「Sidebar」をなるべく使うようにしてください。

4b. グローバルエリアを指定する PHP

グローバルエリア。サイト内で全て共通するコンテンツ、ロゴや、ヘッダー、フッターで使用する用。※グローバルエリアはバージョン5.5から追加された機能です。

<?php
$a
= new GlobalArea('【エリアの名前】');
$a->display();
?>

5. フッター

 <?php Loader::element('footer_required'); ?>

管理画面 - サイト全体の設定 中にある「アクセス解析」コードをこのコードの部分で出力します。

 

6. view.php のメインエリア

<?php
Loader::element('system_errors', array('error' => $error));
print
$innerContent;
?>

default.php で「Main(メイン)」エリアに該当する部分にこれを入れてください。あとは default.php と同じようにデザインしてください。

このファイルに適用させるためには「シングルページのデザイン&カスタマイズ方法」に掲載された、「/config/site_theme_paths.php」の内容を変更する必要があります。

7. page_theme.php

<?php 
namespace Application\Theme\【テーマハンドル】;

class PageTheme extends \Concrete\Core\Page\Theme\Theme {
設定を入れる
}

concrete5.7.x 以降はオプションなファイルです。5.6.x 以下は設置しないでください。また下記機能が必要なければ設置不要です。

テーマハンドルは、半角英数字のテーマのハンドルで、最初の文字は大文字である必要があります。(例:テーマのフォルダ名が「elemental」の場合「namespace Concrete\Theme\Elemental;」となります。)

 

下記の設定などを指定します。

  • 特定の CSS や JS を読み込ませる設定 (テーマに直接書き込むのではなく、page_theme.php を解すことで重複の読み込みを防ぎます)
  • テーマが使用している CSS フレームワーク (Bootstrap3 か Foundation) の指定。(レイアウト機能で使用するため。)
  • ブロックのデザインで使用できるプリセット CSS クラスの設定
  • エリアのデザインで使用できるプリセット CSS クラスの設定
  • ブロックでデフォルトで使用するテンプレートの設定
  • レスポンシブ用に画像のリサイズを行う際のサイズの種類の登録
  • テーマエディタでカスタマイズする際に設定できるクラスの指定

 

詳しくは /concrete/themes/elemental/page_theme.php をご覧ください。

Ustream 勉強会 第5シーズン (2017年)

2017年、バージョン 8 に対応した Ustream 勉強会の録画一覧です。現在、毎週木曜日に順次生放送&収録中です。 YouTube のプレイリストはこちら

  • 第1回 concrete5 のとは?何ができるの?
  • 第2回 インストール講座
  • 第3回 基本ブロックの紹介
  • 第4回 ページタイプ・ページテンプレート・コンポーザーの紹介
  • 第5回 マーケットプレイスの紹介
  • 第6回 グローバルエリア・スタックの紹介
  • 第7回 属性について
  • 第8回 権限・ワークフローについて
  • 第9回 オリジナルテーマの作り方
  • 第10回 ブロックのカスタマイズ:カスタムテンプレートの作り方
  • 第11回 ブロックの作り方 前半: アドオンを活用してブロックをつくろう (Block Designer & Block Designer Pro)
  • 第12回 ブロックの作り方 後半: 開発者向けブロック・パッケージの開発方法
  • 第13回 ページリスト、オートナビブロックを極める
  • 第14回 Express データオブジェクト入門
  • 第15回 Express データオブジェクトでレストランメニューと店舗リストを作ろう
  • 第16回 Express データオブジェクト応用編
  • 第17回 外部フォームブロックを使って自由にフォームを作る

シーズン5は、現在収録中です。収録は順次行っていきます。途中の進行により予告する内容から変更になる場合があります。

 

Ustream 勉強会 第4シーズン (2015年)

2015年、バージョン 5.7.4.x に対応した Ustream 勉強会の録画一覧です。この動画を見れば、大幅アップグレードした cocnrete5 を使えるようになります!YouTube のプレイリストはこちら

Ustream 勉強会 第3シーズン (2014年)

2014年、バージョン 5.6.3 に対応した Ustream 勉強会の録画一覧です。この動画を見れば concrete5 を使えるようになります。YouTube のプレイリストはこちら

Ustream 勉強会 第2シーズン (2012年)

2012年に行ったUstream 勉強会の録画一覧です。最新バージョン 5.5.x のインターフェースにサポートしています。

Ustream 勉強会 第1シーズン (2010年)

2010年8月〜11月にかけて5回行った、Ustream生勉強会の録画一覧です。concret5.4.x 以前の古いインターフェースで作成しています。