concrete5 テーマ作成ハンズオン (ver5.6 まで)
DESCRIPTION
「concrete5 公式活用ガイドブック」のサンプルデータを使って、テーマ作成のハンズオンの資料です。 勉強会参加者じゃないと、ちょっと理解しづらいかも。 コンなご (concrete5 名古屋ユーザーグループ) 勉強会の資料。TRANSCRIPT
![Page 1: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/1.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
テーマ作成ハンズオン2014/8/9 ( 土 ) 第 37 回 コンなご勉強会
@ ベースキャンプ名古屋
![Page 2: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/2.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
紹介
Katz ( 上野勝之 )コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzuenoBlog: ja.katzueno.com
![Page 3: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/3.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
![Page 4: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/4.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
● 直近イベントの紹介o 東京ブートキャンプo 8/23 ( 土 ) @ KDDI ウェブコミュニケーションズ
セミナー @ 14 時 懇親会 18 時〜 ハッカソン 21 時〜 詳細はこちら
![Page 5: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/5.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
● 定期イベントについてo concrete5 の日
自習 @ ベースキャンプ名古屋 だいたい毎月第 2 水曜日 (?) 次回: 2014/9/10 ( )水
o 勉強会 セミナー形式 @ ベースキャンプ名古屋 だいたい第 4 土曜日 (?) 次回: 2014/9/27 ( 土 ) 「未定」
![Page 6: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/6.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
● 参加方法o Doorkeeper
次回告知・参加表明は下記コミュニティーに concrete5nagoya.doorkeeper.jp
o Facebook Group 勉強会までのいろんな議論はこちらに facebook.com/groups/concrete5nagoya/
コンなごconcrete5 名古屋 ユーザーグループ
![Page 7: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/7.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
書籍の紹介
「concrete5 公式活用ガイドブック」買ってねー
今日の内容の詳しくはこの本からです!
![Page 8: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/8.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
本日のアジェンダ● テーマ作成ワークショップ
o HTML ファイル確認o テーマ構造o テーマ定義ファイル (thumbnail.png, description.txt)o header.php & footer.php 作成o default.php 作成o left_sidebar.php から blog_entry.php 作成
![Page 9: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/9.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
スライドだけ見てる方へ反対に、わけがわからないかも・・・。本を直接読んでもらったほうがいいかもで
す。
![Page 10: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/10.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
サンプルファイル・ダウンロード● GitHub よりダウンロード
o ZIP ファイル直接ダウンロードリンク https://github.com/concrete5japan/concrete5_japanese_book/archive/master.zip
o ZIP ファイルを解凍● MAMP や XAMPP の作業ディレクトリに
解凍
![Page 11: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/11.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
配布データの確認
● 勉強会専用データo http://localhost/concrete5/index.php/login
設定によっては http://localhost:8088/concrete5/index.php/login
o ID: admino Pass: 123456
![Page 12: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/12.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
配布データの確認
● プリティ URL 設定の解除o http://localhost/concrete5/index.php/dashboard/syste
m/seo/urls/設定によっては
http://localhost:8088/concrete5/index.php/dashboard/system/seo/urls/
o 「プリティ URL を使用する」をオフに
![Page 13: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/13.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
テーマ・コード集
【完全保存版】 concrete5 テーマスニペット集
http://ja.katzueno.com/2014/05/3104/
![Page 14: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/14.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
サンプルファイルの構成
● /mockupo HTML コーディングファイル
● /concrete5/themes/olive_sampleo concrete5 サンプルデータ
![Page 15: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/15.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
サンプルファイルの構成
● /mockupo HTML コーディングファイルここのファイルを
テーマ化します● /concrete5/themes/olive_sample
o concrete5 サンプルデータ● /concrete5/themes/nagoya/
o に作るぜ!
![Page 16: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/16.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
HTML ファイルを確認しましょう
● /mockupo HTML コーディングファイルを開いて、内容を確
認しよう
![Page 17: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/17.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
concrete5 のテーマの構造
● 必須ファイルo 日本語公式サイトテーマ作成クイックリファレンス
を参照 「構成ファイル一覧」を見よう
![Page 18: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/18.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
フォルダを作成
● /concrete5/themes/o nagoyao nagoya/elementso nagoya/imageso nagoya/javascriptso nagoya/stylesheets
![Page 19: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/19.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
そのまま使えるファイルをコピー
● /concrete5/themes/o olive_sample/ 以下のファイルを nagoya/ フォル
ダーにコピーo images/ 以下のファイルo javascripts/ 以下のファイルo stylesheets/ 以下のファイo main.csso main.js
![Page 20: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/20.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
テーマ定義ファイルを作成
● /concrete5/themes/o thumbnail.png を作成(今日はサボってコピペ )o description.txt を作成
![Page 21: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/21.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
Olive.html をコピー
● /mockup/olive.htmlo /concrete5/themes/nagoya/ にコピーo olive.html を default.php に名前を変える
![Page 22: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/22.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
共通パーツを作成
● elements/header.php & elements_footer.phpo まず、空白のテキストファイルを作りますo default.php を開きます
● 参考:日本語公式サイトテーマ作成クイックリファレンス
![Page 23: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/23.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
だんだん手抜きスライドここからコピペ用のコードだけ
詳しくは本を買ってねスライドを作る時間がなかった・・・
わけでは・・・
![Page 24: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/24.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
default.php を作成
● <?php defined('C5_EXECUTE') or die("Access Denied.");$this->inc('elements/header.php'); ?>
● <?php $this->inc('elements/footer.php'); ?>
![Page 25: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/25.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
テーマをインストールしてみよう!
● 管理画面● テーマ● 「名古屋勉強会」をインストールして● 「有効」
![Page 26: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/26.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
elements/header.php を作成● <?php defined('C5_EXECUTE') or die(_("Access
Denied.")); ?>● <html class="no-js" lang="<?php echo LANGUAGE?>">● <meta charset="utf-8" /> を削除● <title></title> を削除● <?php Loader::element('header_required'); ?>● <?php echo $this->getThemePath(); ?>/
![Page 27: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/27.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
elements/header.php を作成
● グローバルエリア● <?php
$a = new GlobalArea('Masthead');$a->display();?>
● 他に「 Site Name 」「 Header Right 」「 Header Nav 」
![Page 28: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/28.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
elements/footer.php を作成● <?php defined('C5_EXECUTE') or die("Access
Denied."); ?>● <?php
$a = new GlobalArea('Footer');$a->display();?>
● Copyright © <?php echo date('Y')?> <?php echo SITE?>
![Page 29: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/29.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
elements/footer.php を作成<?php Loader::element('footer_required'); ?>
● <?php echo $this->getThemePath(); ?>/
![Page 30: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/30.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
default.php を作成
● <?php defined('C5_EXECUTE') or die("Access Denied.");$this->inc('elements/header.php'); ?>
● <?php$a = new GlobalArea('Breadcrumbs');$a->display();?>
![Page 31: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/31.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
default.php を作成
● <?php$a = new Area('Main');$a->display($c);?>
● <?php$a = new Area('Sidebar');$a->display($c);?>
![Page 32: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/32.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
elements/header_home.php を作成
● header.php を header_home.php にコピー● <section id="featured" class="row">
<div class="twelve columns"><?php $a = new Area('Header');$a->display($c);?>
</div></section>
![Page 33: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/33.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
home.php を作成
● default.php を home.php に複製
● $this->inc('elements/header_home.php'); ?>
● breadcrumb 部分を削除
![Page 34: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/34.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
left_sidebar.php を作成
● default.php を left_sidebar.php に複製
● <section id="main" class="eight columns push-four" role="main">
● <aside class="sidebar four columns pull-eight" role="complementary">
![Page 35: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/35.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
blog_entry.php を作成
● left_sidebar.php を blog_entry に複製
● <h1><?php echo $c->getCollectionName(); ?></h1>
![Page 36: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/36.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
blog_entry.php を作成<?php
if ($c->isEditMode()) {$a = new Area('Thumbnail Image');$a->display($c);echo '<hr>';
}?>
![Page 37: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/37.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
![Page 38: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/38.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
● 直近イベントの紹介o 東京ブートキャンプo 8/23 ( 土 ) @ KDDI ウェブコミュニケーションズ
セミナー @ 14 時 懇親会 18 時〜 ハッカソン 21 時〜 詳細はこちら
![Page 39: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/39.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
● 定期イベントについてo concrete5 の日
自習 @ ベースキャンプ名古屋 だいたい毎月第 2 水曜日 (?) 次回: 2014/9/10 ( )水
o 勉強会 セミナー形式 @ ベースキャンプ名古屋 だいたい第 4 土曜日 (?) 次回: 2014/9/27 ( 土 ) 「未定」
![Page 40: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/40.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
● 参加方法o Doorkeeper
次回告知・参加表明は下記コミュニティーに concrete5nagoya.doorkeeper.jp
o Facebook Group 勉強会までのいろんな議論はこちらに facebook.com/groups/concrete5nagoya/
コンなごconcrete5 名古屋 ユーザーグループ
![Page 41: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/41.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
書籍の紹介
「concrete5 公式活用ガイドブック」買ってねー
![Page 42: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/42.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
おわり:おつカレー
![Page 43: concrete5 テーマ作成ハンズオン (Ver5.6 まで)](https://reader036.vdocuments.net/reader036/viewer/2022062313/5585c9b4d8b42a860a8b4a8c/html5/thumbnails/43.jpg)
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
紹介
Katz ( 上野勝之 )コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzuenoBlog: ja.katzueno.com