【素材あり】concrete5テーマの”とっても優しい”作り方説明

concrete5
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

concrete5の次期バージョン”8.0.0″のベータ版が公開されました。ダウンロードしていろいろと動作確認してる中、ふと思ったのが「5.7以降のテーマ作成について、ゼロから教えてる記事に行きあたってないな」と。

5.6から5.7にかけてのテーマ構造の変化に対し、「5.7になってこう変わったよ」という内容の記事は目にするものの、ゼロから始めるテーマ作成みたいなものにヒットした事がなかったので、テーマの作り方を”とっても優しく説明する”事に挑戦します!(`・ω・´)

事前準備

  • 当たり前ですが、concrete5をダウンロードの上、サーバやXAMP/MAMP環境などにインストールしておいてください。
  • 今回のテーマ化に使える、最低限のHTMLを用意しました。下記フォームにメールアドレスを入力すれば、ダウンロードURLが届きます。自由にご利用ください。※テーマ化したいHTMLがある場合は、そちらをご利用ください。

c5_theme01

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

layout

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

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

テーマ作成① default.phpの編集

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

絶対必要な呪文の追記

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は完了です。

テーマ作成③ view.phpの作成

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

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




<article>
  <?php print $innerContent; ?>
</article>



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

テーマ作成③ 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行目の{ }内に記載していきます。今後ですね。

テーマ作成④ その他ファイルの作成

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

WplngC5
WEB懐石でひろったテーマ

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

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

テーマのUp

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

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

c5_theme02


もちろんもっと作りこめばもっと様々なことができるようになりますが、一番簡単なものをということでまとめてみました。細かいカスタマイズはまた別途。

ちなみに本テーマは、一応バージョン8にも動作したので、今後も大丈夫かと思います。ダメなら修正してい甲と思います。もしくは、もっと優しく説明できる時には。

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone