WordPressユーザーの為のconcrete5新規テーマ作成

このページは約15分で読み終わります

後で読む

WordPressを普段使いつつもconcrete5も初めて触ってみる、という方向けの記事になります。WordPress構築の経験はありつつ、新しいCMSを触ると「ここはどこに相当するものなんだろう‥」とつい思ってしまうものですよね。ここではテーマ作成にフォーカスし、テーマの作り方・扱い方をまとめてみました。

WordPressとconcrete5のテーマ比較

まずはテーマディレクトリの場所を比較してみます。
WordPressではテーマディレクトリは
/wp-content/themes/以下
となりますが、concrete5では
/application/themes/以下
にテーマファイルを設置します。

ベースとなるテーマの作成〜導入

1. 最小限の必要なファイル構成の比較

テーマ名を「theme-name」とした場合、WordPressでは以下のファイルが最小構成パーツとして必要になります。
・/theme-name/style.css　-　テーマのタイトルや概要などを記述
・/theme-name/screenshot.png　-　テーマ用のスクリーンショット
・/theme-name/index.php　-　何もファイルが存在しない場合に表示するテンプレート

対するconcrete5では以下のファイルが最小構成として必要となります。
・/theme-name/description.txt　-　テーマのタイトルや概要などを記述
・/theme-name/thumbnail.png　-　テーマ用のスクリーンショット
・/theme-name/default.php　-　何もファイルが存在しない場合に表示するテンプレート

構成要素としてはどちらのCMSも同じで、テーマ名を設定するファイル、サムネイル画像、そして受け皿としてのphp1ファイルとなります。

2. テーマファイルを作成しよう(default.php)

default.phpにはとりあえずシンプルなHTMLを用意してみましょう。下記のHTMLを元にこの後concrete5用のタグを仕込んでいきます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>C5用サンプルHTML</title>
</head>
<body>
</body>
</html>

WordPressでテーマを作成する場合、下記の2つのタグは必ず挿入してくださいね、とよく教本に書かれていますが下記タグを入れることでWordPress本体やプラグインから自動的に生成されるcssやJavaScriptが挿入されるようになります。

まずはhead内には以下のタグ。

<?php wp_head(); ?>

bodyの閉じタグ直前には以下のタグ。

<?php wp_footer(); ?>

concrete5でも同様で以下の基本タグを挿入するようにします。WordPressと同じで、header用、footer用の2つのタグを挿入します。タグを挿入することで、concrete5にログインをした状態ではページ上部にツールバー（WordPressでいうところのアドミンバー）が表示されるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>C5用サンプルHTML</title>
	<?php Loader::element('header_required') // headタグ内に挿入します ?>
</head>
<body>
ここにページ内コンテンツを入れます
<?php Loader::element('footer_required') // body閉じタグ直前に挿入します ?>
</body>
</html>

またheader_requiredではSEO用のmetaタグも含まれており、ここら辺がWordPressと異なります。

そして上記がheader_requiredによって追加されたログイン時のconcrete5ツールバーですね。

続いて以下重要な3つのタグも一緒に押さえておきます。

1) 全体divのclass自動付与
管理画面にログイン中はツールバーが表示され、コンテンツがツールバーの下の隠れてしまうのを防ぐ為、下記タグを挿入します。これにより自動的にclass名が挿入されるようになります。

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

2)htmlタグのlang属性
htmlのlang属性を自動的に処理する為にWordPressで相当するところの下記と同等ですが、

<?php language_attributes(); ?>

concrete5では以下のようなタグを記述します。

<html lang="<?php echo Localization::activeLanguage()?>">

3)プログラム実行の除外処理
直接default.phpなどのテンプレートURLを叩いた際に、プログラムが処理されないようにする為にはドキュメント宣言の上に下記タグの挿入をします。

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

4) リソースパスの自動化
WordPressではCSSやJSなどのファイルパスを参照する際に下記等で記述しますが

<?php echo get_template_directory_uri(); ?>

concrete5では下記のように記述します。

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

1〜4も含めここまでの流れを全てまとめると、最終的にはdefault.phpは下記のようになります。

// default.php
<?php defined('C5_EXECUTE') or die("Access Denied."); ?>
<!DOCTYPE html>
<html lang="<?php echo Localization::activeLanguage()?>">
<head>
	<meta charset="UTF-8">
	<title>C5用サンプルHTML</title>
	<?php Loader::element('header_required') // headタグ内に挿入します?>
	<link href＝"<?php echo $this->getThemePath()?>/css/style.css" rel="stylesheet">
</head>
<body>
<div class="<?php echo $c->getPageWrapperClass()?>">
ここにページ内コンテンツを入れます
</div>
<?php Loader::element('footer_required') // body閉じタグ直前に挿入します?>
</body>
</html>

3. テーマ名称を設定しよう(description.txt)

続いてdescription.txtには下記のように記述します。WordPressでいうところのstyle.cssとなり大切なファイルです。記述にはhタグやbrタグ等は不要で、自動的に1行目がテーマ名、2行目が概要文と割り振られます。
1行目：テーマ名
2行目：テーマの概要文

サンプルテーマ名
ここにテーマの概要文を記述するようにします。管理画面から表示のされ方を確認できます。

4. サーバにファイルをアップロードしよう

ここまでできたらFTPツールを使ってテーマファイルをアップロードしてみましょう。下記3ファイルとなります。
・/theme-name/description.txt
・/theme-name/thumbnail.png　※適当な画像を用意してください。
・/theme-name/default.php

また、FTPのファイルパスは下記となります。
/application/themes/theme-name/

5. 管理画面からテーマの適用をしてみよう

アップロード後管理画面を開き、右上にあるボタンを押し、「ページとテーマ」を押します。

すると下記のように「インストール可能なテーマ」が表示されていることが確認できます。ここでは先程description.txtに設定したテーマ名とその概要文、またthumbnail.pngが表示されていますね。

インストールを押し、「テーマの一覧に戻る」を押すとインストール済みにテーマが追加されていますので「有効」を押します。

この状態でサイトを見てみましょう。すると以下のような表示になっていることが確認できます。

ここまでで最小限のテーマの作成と適用ができました。

concrete5のブロック機能を追加

上記まででテーマ化は行えました。続いてconcrete5の醍醐味であるフロントエンドからのブロック追加を行えるようにします。本文中に下記タグを挿入し、再度default.phpをFTPしてみましょう。

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

するとログイン状態であれば、ブロックの追加エリアが表示されるようになります。尚、上記では「Area Name」としていますが、名称は英数字であれば自由に記入できます。またこのブロックが追加できる領域は「エリア」と呼ばれており、そのページのみの領域は「エリア」、サイト内で全て共通するコンテンツ/ロゴ/ヘッダー/フッターで利用する領域を「グローバルエリア」と呼びます。上記の記述は「エリア」ですが、「グローバルエリア」は若干書き方が異なります。

ここでは一先ず上記コードを記述すると下記画面のようになります。

「Area Name」から「ブロックを追加」すると初期で用意されている様々なブロックを選択し挿入できるようになります。

いかがでしたか？なんとなくテーマ導入のきっかけが掴めたのではと思います。

ここでご紹介した内容はconcrete5 JapanのステップバイステップチュートリアルにあるリリースページのStep1〜Step4までの内容を実際に検証してみた記事になります。より詳しく知りたい方はそちらのサイトをご覧ください。

続いて「~~WordPressユーザーの為のconcrete5新規テーマ作成その2~~（※只今準備中です）」でもう少しテーマを触ってみます。

最後までお読み頂きありがとうございます！