SlideShare ist ein Scribd-Unternehmen logo
1 von 34
Downloaden Sie, um offline zu lesen
作るだけなら怖くない!
concrete5でテーマを作ってみよう!
田原遊馬(タハラユウマ)
株式会社クロスキューブ 取締役 / アートディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
ノンプログラマでもできる、5.7系テーマの作り方
2015.11.21 第4回 concrete5 東京初心者勉強会
田原遊馬(たはらゆうま)
株式会社クロスキューブ 取締役 / アートディレクター / デザイナー
facebook.com/BuccaneerBoogie
@90zbear
concrete5などのCMS案件を中心にお仕事してます。
concrete5 / WordPress / EC-CUBE / PHP / JavaScript / HTML / CSS /
DTP & WEB Design and more!!
コンクリのテーマは、
作るだけなら簡単です。
Bootstrap3を使って
テーマを作ってみよう!
Bootstrap3とは何ぞ
超メジャーなCSSのフレームワーク
5.7系のデフォルトテーマ
Elementalでも
ベースとして使われています。
今回は、デフォルトテーマと同じように
レイアウト機能が使えるテーマを作ります。
本日はBootstrapやHTML/CSSの勉強会ではないため、
Bootstrapについては、
「手軽にテーマを作るならこれを覚えればいいのか!」
と、覚えて帰ってください。
Bootstrapのダウンロード
http://getbootstrap.com/getting-started/#download
基本となるテンプレートを用意
とてもシンプル。カスタムのベースにぴったり。
これで、Bootstrapを使った、
基本のHTML・CSS・JavaScriptができました。
早速、concrete5、5.7系のテーマ化に挑戦!
基本となるテンプレート一式をまとめる
• hoge.html(さっき作った)
• 「css」ディレクトリ
• 「js」ディレクトリ
• 「fonts」ディレクトリ
HTMLファイルの名前を
「default.php」に変更し、
1行目に「コンクリ以外のアクセスはダメ!ゼッタイ!」
という意味のおまじない
を入れる。
<?php
defined('C5_EXECUTE') or die("Access Denied.");
?>
page_theme.phpを用意
これがテーマの設定ファイルです。
今回は、初心者向け説明のため、
Elementalから拝借。
/concrete/themes/elemental/page_theme.php
最終的にはきちんと作りましょう!
page_theme.phpの編集
作るテーマフォルダ名に合わせて、書き換えます。
今回は「training」になるため、こんな感じ。
PHPの名前空間・クラス継承あたりを勉強すると理解できます
が、今日はおまじないとして必要なことだと思ってください。
page_theme.phpの編集
テーマの名前、説明文の書き換えを適宜行います。
return t( Elemental )をreturn t( 練習テーマ )
return t( 長い英文 )をreturn t( 練習用ですよ! )
とすると、「練習用ですよ!」という説明文の「練習テーマ」になり
ます。
早速作りたてのテーマをインストール!
インストール可能なテーマに追加されているので、
インストールしてしまいましょう!
とてもシンプルすぎる見た目になりました。
管理用のナビゲーションもいませんね。
おや、おかしい。
コンクリ用の必須ファイルの読み込み
HTMLの
をごっそり
に置き換え。
BODY最下部のJSたちのBootstrap以外を
に置き換え
<meta keywords= >
<meta description= >
<title>
<?php Loader::element('header_required'); ?>
<?php Loader::element('footer_required'); ?>
しかし、相変わらずシンプルすぎる。
管理用ナビゲーションがついた
CSSやJSのパスを合わせるおまじない
読み込むCSSやJSまでのパスを
テーマフォルダまでのパスを出力してくれるおまじないを使って
書き換え。
例:CSSが「テーマフォルダ/css/style.css」にいる場合
<?php echo $this->getThemePath(); ?>
<link href="<?php echo $this->getThemePath(); ?>/css/bootstrap.min.css" rel="stylesheet">
今度こそいい感じ!
編集モードを試してみる
え、サイトのナビゲーションが固定されたままだし、
よく見たらコンテンツもそのままの場所で動いてない・・・
魔法のDIVで囲めばOK
<body>の中、<script>以外のものををまとめて
の中に入れてしまいましょう。
<div class="<?php echo $c->getPageWrapperClass()?> c5wrap >
中身
</div>
正常にパネルが開きます
あとは各種ブロックを設置するためのエリアの設定です。
ページ固有のエリアを設定したい
いわゆるコンテンツ部分を以下と置き換えてしまいます。
同じ要領で、複数のエリアも、new Area('Main')をnew
Area( エリアの名前')としてやれば可能です。
<?php
$a = new Area('Main');
$a->display($c);
?>
ページ共通のエリアを設定したい
ナビゲーションなど、共通して使うエリアの設定は以下
固有のエリア設定同様、複数設定できます。
<?php
$a = new GlobalArea('Header Navigation');
$a->display();
?>
エリアの設定をすれば、ブロックの配置が可能
これで基礎的なテーマは完成です。
一番シンプルなテーマを作る方法
• HTML・CSS・JSなど通常の静的ページのデータを用意する。
• page_theme.phpを用意する。
• HTMLの冒頭におまじないを記述し、default.phpとする。
• コンクリ用のヘッダ・フッタを読み込ませるコードを入れる。
• おまじないを使って、CSSやJSのパスを合わせる。
• コンクリ用の魔法のDIVタグを入れる。
• 適宜エリアを設定する。
• いい感じにスクリーンショットを撮影し、360px*270pxの
thumbnail.pngを作る。
よりいい感じにするには
• 右サイドバーや、左サイドバーのテンプレートを作る。
• テンプレートで使い回すヘッダなどのパーツを分割する。
• Bootstrapを使いこなし、オリジナリティ れるデザインにする。
• コンクリ内蔵のlessコンパイラを使えるようにする。
• cssを部分的に管理画面から書き換えられるようにする。
• 勢い余ってブロックの作り方を覚える。
• さらに勢い余って、パッケージ化し、バージョン管理をする。
など・・・
今回のものに少しだけ手を加えて配布しています。
https://github.com/90zbear/concrete5--training-theme
どこよりも素のBootstrapに近いコンクリテーマです。
ご清聴ありがとうございました

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!concrete5 の超便利アドオン Designer Content を極める!
concrete5 の超便利アドオン Designer Content を極める!
 
concrete5 最新情報
concrete5 最新情報concrete5 最新情報
concrete5 最新情報
 
concrete5 多言語サイト制作へのお誘い
concrete5 多言語サイト制作へのお誘いconcrete5 多言語サイト制作へのお誘い
concrete5 多言語サイト制作へのお誘い
 
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
 
WordBench神戸資料-テーマ:Resonsive
WordBench神戸資料-テーマ:Resonsive WordBench神戸資料-テーマ:Resonsive
WordBench神戸資料-テーマ:Resonsive
 
CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5
 
初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!
 
concrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポートconcrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポート
 

Ähnlich wie 2015.11.21第4回concrete5初心者勉強会「作るだけなら怖くない!concrete5でテーマを作ってみよう!」

concrete5ではじめるCMS
concrete5ではじめるCMSconcrete5ではじめるCMS
concrete5ではじめるCMS
武彦 大山
 

Ähnlich wie 2015.11.21第4回concrete5初心者勉強会「作るだけなら怖くない!concrete5でテーマを作ってみよう!」 (20)

第3回concrete5初心者勉強会
第3回concrete5初心者勉強会第3回concrete5初心者勉強会
第3回concrete5初心者勉強会
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
 
WEB TOUCH MEETING #52
WEB TOUCH MEETING #52WEB TOUCH MEETING #52
WEB TOUCH MEETING #52
 
WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門
 
オープンソースCMSに学ぶ、前PSR時代のプロジェクトが脱レガシーする5つの方法
オープンソースCMSに学ぶ、前PSR時代のプロジェクトが脱レガシーする5つの方法オープンソースCMSに学ぶ、前PSR時代のプロジェクトが脱レガシーする5つの方法
オープンソースCMSに学ぶ、前PSR時代のプロジェクトが脱レガシーする5つの方法
 
ASP.NET MVC で Bootstrap
ASP.NET MVC で BootstrapASP.NET MVC で Bootstrap
ASP.NET MVC で Bootstrap
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
 
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
 
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
第4回concrete5京都勉強会 〜まだまだ遅くない!基礎からガッチリ使いこなそうconcrete5〜
 
concrete5 勉強会 20150117_テーマ作成
concrete5 勉強会 20150117_テーマ作成concrete5 勉強会 20150117_テーマ作成
concrete5 勉強会 20150117_テーマ作成
 
第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-
 
Webコーディングの基本+α
Webコーディングの基本+αWebコーディングの基本+α
Webコーディングの基本+α
 
Bootstrap5がBootstrap4から変わったところ.pptx
Bootstrap5がBootstrap4から変わったところ.pptxBootstrap5がBootstrap4から変わったところ.pptx
Bootstrap5がBootstrap4から変わったところ.pptx
 
HTML初心者向け勉強会
HTML初心者向け勉強会HTML初心者向け勉強会
HTML初心者向け勉強会
 
Blazor Server テンプレート解説
Blazor Server テンプレート解説Blazor Server テンプレート解説
Blazor Server テンプレート解説
 
concrete5ではじめるCMS
concrete5ではじめるCMSconcrete5ではじめるCMS
concrete5ではじめるCMS
 
実例から見る、CMSとレスポンシブデザインで変わるウェブ制作のワークフロー
実例から見る、CMSとレスポンシブデザインで変わるウェブ制作のワークフロー実例から見る、CMSとレスポンシブデザインで変わるウェブ制作のワークフロー
実例から見る、CMSとレスポンシブデザインで変わるウェブ制作のワークフロー
 
そろそろレガシーな.Net開発をやめなイカ?
そろそろレガシーな.Net開発をやめなイカ?そろそろレガシーな.Net開発をやめなイカ?
そろそろレガシーな.Net開発をやめなイカ?
 
HTML5 Web Design Workflow
HTML5 Web Design WorkflowHTML5 Web Design Workflow
HTML5 Web Design Workflow
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
 

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 

2015.11.21第4回concrete5初心者勉強会「作るだけなら怖くない!concrete5でテーマを作ってみよう!」