concrete5(5.7ver)テーマ作成方法の手順メモ

Publish2015/06/12(金)

今回はいつもと違ってちょっと技術よりの話です。
とある案件でconcrete5を使用する事になったので、テーマを作成したんですがかなり以前と変わっていてちょっと苦労したので自分用メモをかねてテーマを作成する手順をまとめておきます。

concrete5とは?

concrete5を知らない人向けに説明すると、WordPressとかMovabletypeのようなCMSだと思えば分かりやすいです。
実際に触るとそれらとは全然違うものだと気付きますが、ざっくり何かといえばCMSというくくりになるかと思います。
詳しくは公式サイトや紹介動画を見た方が早いです。
http://concrete5-japan.org/

concrete5を実際に作って使ってみて分かったのは、使う人を最優先に考えられた設計がされているなという点。
例えばページを変更する場合などは、画面上から直接編集をして保存できる(専用の管理画面がない)など、かなり直感的に扱えるように出来ています。
この辺はjimdoなどでも見られる傾向ですが、作る事が目的ではなく運用する事が目的になっている感じにすごく好感が持てます。

テーマ作成の前に

では早速テーマを作成しましょうという事にはならず、まずはconsrete5がインストールされていないと話になりません。
今回は現時点での最新版の5.7を使用するのですが、インストールするために必要なのはMySQLのデータベースを作って、アカウントの情報をメモしておくだけです。
公式サイトからダウンロードしてきたファイル一式をサーバーにアップロードしたあとは手順にそって必要な情報を入力するだけです。
サーバーによってはパーミッションを変更する必要はありますが、やるとしてもそのくらいです。
制作者であれば特に困る事なくインストールできるだろうと思える簡単さです。
ドキュメントも用意されているので、詳しくはこちらで。
concrete5インストール方法
インストールが終わったら設定に入りますが、ここでひとつ注意。
concrete5はキャッシュの機能があって完成後は表示速度を速くするのに使えるんですが、このキャッシュがけっこう強めです。
開発時にはキャッシュを残さないようにしておいた方が快適です。
TPOに合わせて使いましょう。

テーマの作成手順

ではテーマを作ります。
テーマを作成する場合は、まずHTMLで自分でサイトを作ってそれをテーマ化するような手順が制作者的には一番分かりやすいかと思います。
作ってから気付いたのは、concrete5はモジュールやセクションのような概念を持って最初からサイトを設計しておいた方があとで使い回しがしやすいなという点ですが、それは実際に触ってからでないと出てこない実感なので、まああまり重要ではありません。
まずは普通にサイトを作りましょう。
サイトを作ったら次はそのデータをテーマ化します。

テーマの最小構成

テーマを構成する最小限の構成は以下3ファイルになります。

  • default.php
  • description.txt
  • thumbnail.png

default.phpが表示させるテンプレートとなる基本のファイルです。
description.txtはそのテーマの説明用のファイルです。
thumbnail.pngは管理画面に表示させるための120×90の画像です。
この3つがあれば動きます。
ここからdefault.phpを複製、リネームして個別のテンプレートを作成して適用させたりする事が出来るわけです。
この辺はイメージ的にWordPressでpage-xx.phpとか作るイメージと変わりないです。
概要については公式を目を通しておく方がいいですね。
テーマの概要

よく使うもの。スニペット的に。

テーマを作る時によく使うコードを以下にメモしておきます。
WordPressのsynaxhighlightが好きではないので、gistにて埋め込みます。
まずはテーマファイルのヘッダーとフッターに必要なこれ。
これがないと駄目ってドキュメントにも書いてます。

その後に、body直下と/body直前に以下コードを。
これを書く事で編集可能領域としてシステムが認識するようになります。

後よく使うのがテーマまでのパスを代入するコード。
WordPressでいうところの bloginfo(‘template_url’); に該当する感じです。
WordPressで作る人は比較的良く使うと思います。

あとは、テンプレートの読み込み。
以下の場合だとnav.phpを読み込むという意味になります。

あとはconcrete5がブロックを追加できるようにするエリア、人からすると編集が可能になるエリアを以下で作ります。
エリア名には固有の名前をつけましょう。

ページのタイトルを取得するコードはこちら。
毎回手入力するのとかどう考えても無駄だし間違いのもとですよね。

公開日時の取得はこちら。
ブログとかではよく使うかと思います。
情報公開日が書いてないと情報の信憑性があまりよくないです。

あと、よく使うかどうかわかりませんが、編集時のみ表示させたい内容を記述するエリアが必要になったんですが、それは以下で実現できます。

実際に使う人のためのエリアなので、けっこう重要かなと思っています。
あと、親切なKさんにコード類のまとめを教えてもらいました。
公開日は2013年なので、今のバージョンに対応しているかどうかは試してみないと分かりませんが。
知っておくと便利なconcrete5デザインカスタマイズ小ネタ集
※本編とは関係ないですが、コードをgistで埋め込んでいるところに勝手に好感度が上がっています(笑)

テーマのアップロード

テーマを作ったらサイトに適用させます。
テーマファイルをアップロードする訳ですが、アップロード箇所は決まっています。
/application/themes/テーマ名
ここです。
applicationと同じ階層に「concrete」というディレクトリがありますが、こちらはコアファイルなので触らないようにしましょう。
「/concrete/themes/」にもテーマがあり紛らわしいですが、こちらは初期に入っている公式テーマの場所と思った方がいいかと思います。
テーマファイルをアップロードした後は、管理画面で有効化して使えるようになります。
あと、ちょっとしたはまりポイントですが、テーマに新しいテンプレートを追加してアップロードしただけではテンプレートとして認識しません。
必ず管理画面からアップロードしたテンプレートを使用できるように設定する必要があります。
テーマの作成は基本的な部分はこんな感じです。
これが出来ていれば最低限できた感じになります。
もちろんまだ先は長い感じはしますがここがスタートラインです。

ブロックの編集手順

とはいえ、はじめると少し新しい事をやってみたくなるもの。
なので、初期に配置されているブロックを編集する方法を書いておきましょう。
これが出来るようになると、より自由にconcrete5と戯れる事が出来るようになるわけです。
今回は、ブログ記事を読み込む「ページリスト」を編集する場合の方法です。
まず基礎知識として、concrete5では基本的なブロックが
/concrete/blocks/
の中にありますが、これはconcreteに入っている事からも分かるように、ここを変えてしまうのはしてはいけない事なのです。
concrete5ではテーマをアップロードしたapplicationディレクトリにconcreteディレクトリと同じ階層で同名のファイルがあった場合上書きするようになっています。
cssの読み込みをイメージすると分かりやすいかと思います。
applicationに入れた方で上書きする感じですね。
ページリストの場合は
/concrete/blocks/page_list/view.php
に表示用のファイルがあるので、view.phpをダウンロードしてきて編集した後
/application/blocks/page_list/view.php
にアップロードすれば大丈夫です。
他のブロックに関しても同じ扱いなので、気になる方はやってみるとよいかと思います。

まとめ

今さらながら改めてconcrete5を触ったわけですが、やっぱりツールには向き不向きがあるなと感じているところです。
concrete5はサイトとしてデータを変更していく際にはすごくいいツールで、お客さんがどんどん更新できる感じというのはすごくいいです。
でも、ブログをしようとする場合であれば、やはり他のブログツールの方が記事を書く事に集中できる感じはあります。
ひとつのツールで何でもまかなうというのも違うと思うので、使い方次第なのは変わりませんが、色々な手段がある事を知っていて、必要な時に使えるようにしておく事はやはり重要だなと改めて思いました。
今後も積極的に取り入れていこうかなと思います。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期で更新しています。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

ふにろぐとは?

でぐち

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにす株式会社

ふにす株式会社は大阪の高槻にある「Webを起点に会社の成長を応援するパートナー」をモットーに、Webにまつわるいろいろな問題を解決する、サポートをする会社です。
ホームページでお問い合わせを増やしたい、もっとたくさんの人に見てもらいたいなど、ホームページ/Webサイトを活用したい方向けの活動を行っています。
また、ホームページの作成や、外部パートナーとしての運用サポートなど、幅広くWebにまつわる諸々のことをおこなっております。

ブログ内検索

サービス

ふにすWeb相談所

ホームページの運用お得情報

ホームページ/Webサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Webサイトの運用に関する情報

お問い合わせ

ホームページを成功させたいとお考えの方はお気軽にご相談ください。
ご相談は、下記の中からお好きなものを選んでいただければ大丈夫です。

  • メールで問い合わせる
  • チャットワークで問い合わせる
  • Facebookで問い合わせる
  • Twitterで問い合わせる

LINE@でも相談を受け付けています。
QRコードから友達登録を行って、メッセージを送ってください。

LINE@

最新記事

カテゴリ別記事一覧

月別記事一覧