最もシンプルな「concrete5」テーマのつくりかた

※最新のconcrete5のバージョンはこちらでご確認ください。

concrete5は、以前はconcrete5.* .*というバージョン表記で、5.1〜5.7まで更新がされていました。しかし、2016年公開バージョンより、concrete5 Version.8.*.*と、名称とバージョンが切り離されたものとなっています。

CMSとしての構造自体にも大きな変化があり、テーマの作成方法も大きく変わりました。ここでは、バージョン8以降のテーマの作り方について説明します。

※この説明内容でテーマが作れるよう、素材ファイルをダウンロードできます。ご自由に利用ください。

目次

事前準備

  • concrete5をダウンロードの上、サーバやXAMP/MAMP環境などにインストールしておいてください。
  • 下部フォームにメールアドレスを入力の上、ダウンロードURLからテンプレートHTMLを入手してください。※テーマ化したいHTMLがある場合は、そちらをご利用ください。
テーマ

ちなみにこのHTMLは、下図のような構造になっています。非常にシンプルですが、ベースを理解するにはこれで十分です。

layout

テーマ名は、解凍した際のフォルダ名でもある「wplngc5」とします。テーマフォルダの中身は、最終的に下記のようになります。

  • default.php：最も基本的なテンプレート
  • main.css：テンプレートに適用されるCSS（いじりません）
  • page_theme.php：テーマの設定をいろいろとするファイル
  • view.php：404エラー時など、システム的に吐き出すページのテンプレート
  • description.txt：テーマ名と説明が記載されたテキストファイル
  • thumbnail.png：テーマのサムネイル画像（なくても動作には問題なし）

1. default.phpの編集

ダウンロードしたフォルダ内のindex.htmlをdefault.phpにリネームし、エディタで開きます。そしてテーマ化に必要な項目を編集していきます。

AD

絶対必要な呪文の追記

WordPressで言うところの、 <?php wp_head(); ?> のようなものです。

まず冒頭1行目に、セキュリティ上必要な下記一文を追記。

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

続いて、文字コード指定とCSS読込みのMETAタグの間に、正にwp_head()な一文を追記。

<meta charset="UTF-8">
<?php Loader::element('header_required'); ?>
<link rel="stylesheet" href="main.css">

更に、</body>前にも同じように追記します。

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

</body>

最後に、concrete5の特長でもある”ドラッグ＆ドロップな編集画面”に対応させるため、<body></body>直下を下記divで囲みます。

<body>
<div class="<?php echo $c->getPageWrapperClass()?>">
・・・
</div>
</body>

CSSのキャッシュ化

CSSのリンク方法ですが、テーマファイル内のCSSへパスを通す方法でもOKですが、ここではconcrete5特有のキャッシュ化をやってみます。下記の用にCSSリンクの記述を書き換えてください。

<?php echo $html->css($view->getStylesheet('main.css')) ?>

コンテンツエリアの指定

CMS上でコンテンツを追加するための、コンテンツエリアを指定します。

まずはヘッダーエリアから。サンプルファイルでは<header></header>内がヘッダーエリアとなるため、headerタグ内の記述を下記の記述に置き換えます。

<header>

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

</header>

これでOKです。簡単ですね。ちなみにここで宣言される”GlobalArea”ですが、「サイト内共通のエリア」という意味です。そのため、同一のエリア名であれば他ページでも同じコンテンツが表示されるようになります。ヘッダーやフッター、固定のサイドバーなどで使われます。

続いて、メインコンテンツエリアです。今回は<article></article>内をコンテンツエリアとしてみましょう。article内を、下記の記述に置き換えます。

<article>

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

</article>

メインコンテンツエリアは、それぞれのページで独立ですので、エリアの指定も”Area”で大丈夫です。

最後にフッターエリア。ヘッダーエリアのように、footer内をグローバルエリアで指定します。

<footer>

  <?php $a = new GlobalArea('Footer'); $a->display();
  ?>

</footer>

これでdefault.phpは完了です。

2. view.phpの作成

自分で作りこむコンテンツとは別に、404エラーページなどシステム上吐き出されるページのためのテンプレートファイルを作ります。手っ取り早く、default.phpを複製して、view.phpと名前を付けしましょう。

view.phpをエディタで開いたら、先ほど記述したメインコンテンツエリア指定の記載を、システムがアウトプットできる記述に修正します。

<article>

  <?php print $innerContent; ?>

</article>

これでview.phpも完了です。

3. page_theme.phpの作成

5.7以降で必要になった、各種設定を記述するPHPファイルです。詳細な設定内容は様々なところで記事化されているので、ここでは最低限必要な”PHP名前空間”の指定のみ記述してみます。

エディタで新規ファイルに下記記述を記載し、page_theme.phpの名称で保存してください。

<?php
namespace Application\Theme\Wplngc5;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {}

テーマ名に併せて、2行目の”wplngc5“の部分が変わります（インストールフォルダも同様）。今後、各種設定を追加したいは、3行目の{ }内に記載していきます。

4. その他ファイルの作成

description.txtは、1行目にテーマ名、2行目にテーマの説明を記載します。そうすると、concrete5の管理画面でテーマ選択画面にそれが表示されます。今回ならたとえば、

WplngC5
WEBPLAでひろったテーマ

などとしておけばOKです。page_theme.phpでの指定もできますが、この方法でも問題ありません。

同じようにテーマ選択画面で表示されるサムネイルが、thumbnail.pngです。120 x 90ピクセルで画面キャプチャなどで作成します。無くてもエラーにはなりません。

5. テーマのUp

こうしてできたファイル群を”wplngc5”フォルダに保存したら、concrete5の application > themes フォルダ内に保存します。あとはconcrete5の管理画面からインストール→有効化してください。

Homeページに戻って編集モードにした際、下図の様な編集画面になれば大丈夫かと思います。

c5_theme02

もちろんもっと作りこめばもっと様々なことができるようになりますが、一番簡単なものをということでまとめてみました。まずはこれをベースにカスタマイズをしてみてください。

ファイルダウンロード

DXの最新記事8件