concrete5 テーマ作成ハンズオン (ver5.6 まで)
DESCRIPTION
「concrete5 公式活用ガイドブック」のサンプルデータを使って、テーマ作成のハンズオンの資料です。 勉強会参加者じゃないと、ちょっと理解しづらいかも。 コンなご (concrete5 名古屋ユーザーグループ) 勉強会の資料。TRANSCRIPT
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
テーマ作成ハンズオン2014/8/9 ( 土 ) 第 37 回 コンなご勉強会
@ ベースキャンプ名古屋
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
紹介
Katz ( 上野勝之 )コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzuenoBlog: ja.katzueno.com
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
● 直近イベントの紹介o 東京ブートキャンプo 8/23 ( 土 ) @ KDDI ウェブコミュニケーションズ
セミナー @ 14 時 懇親会 18 時〜 ハッカソン 21 時〜 詳細はこちら
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
● 定期イベントについてo concrete5 の日
自習 @ ベースキャンプ名古屋 だいたい毎月第 2 水曜日 (?) 次回： 2014/9/10 ( )水
o 勉強会 セミナー形式 @ ベースキャンプ名古屋 だいたい第 4 土曜日 (?) 次回： 2014/9/27 ( 土 ) 「未定」
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
● 参加方法o Doorkeeper
次回告知・参加表明は下記コミュニティーに concrete5nagoya.doorkeeper.jp
o Facebook Group 勉強会までのいろんな議論はこちらに facebook.com/groups/concrete5nagoya/
コンなごconcrete5 名古屋 ユーザーグループ
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
書籍の紹介
「concrete5 公式活用ガイドブック」買ってねー
今日の内容の詳しくはこの本からです！
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 作成
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
スライドだけ見てる方へ反対に、わけがわからないかも・・・。本を直接読んでもらったほうがいいかもで
す。
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
サンプルファイル・ダウンロード● GitHub よりダウンロード
o ZIP ファイル直接ダウンロードリンク https://github.com/concrete5japan/concrete5_japanese_book/archive/master.zip
o ZIP ファイルを解凍● MAMP や XAMPP の作業ディレクトリに
解凍
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
配布データの確認
● 勉強会専用データo http://localhost/concrete5/index.php/login
設定によっては http://localhost:8088/concrete5/index.php/login
o ID: admino Pass: 123456
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 を使用する」をオフに
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
テーマ・コード集
【完全保存版】 concrete5 テーマスニペット集
http://ja.katzueno.com/2014/05/3104/
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
サンプルファイルの構成
● /mockupo HTML コーディングファイル
● /concrete5/themes/olive_sampleo concrete5 サンプルデータ
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
サンプルファイルの構成
● /mockupo HTML コーディングファイルここのファイルを
テーマ化します● /concrete5/themes/olive_sample
o concrete5 サンプルデータ● /concrete5/themes/nagoya/
o に作るぜ！
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
HTML ファイルを確認しましょう
● /mockupo HTML コーディングファイルを開いて、内容を確
認しよう
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
concrete5 のテーマの構造
● 必須ファイルo 日本語公式サイトテーマ作成クイックリファレンス
を参照 「構成ファイル一覧」を見よう
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
フォルダを作成
● /concrete5/themes/o nagoyao nagoya/elementso nagoya/imageso nagoya/javascriptso nagoya/stylesheets
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
そのまま使えるファイルをコピー
● /concrete5/themes/o olive_sample/ 以下のファイルを nagoya/ フォル
ダーにコピーo images/ 以下のファイルo javascripts/ 以下のファイルo stylesheets/ 以下のファイo main.csso main.js
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
テーマ定義ファイルを作成
● /concrete5/themes/o thumbnail.png を作成（今日はサボってコピペ )o description.txt を作成
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
Olive.html をコピー
● /mockup/olive.htmlo /concrete5/themes/nagoya/ にコピーo olive.html を default.php に名前を変える
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
共通パーツを作成
● elements/header.php & elements_footer.phpo まず、空白のテキストファイルを作りますo default.php を開きます
● 参考：日本語公式サイトテーマ作成クイックリファレンス
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
だんだん手抜きスライドここからコピペ用のコードだけ
詳しくは本を買ってねスライドを作る時間がなかった・・・
わけでは・・・
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'); ?>
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
テーマをインストールしてみよう！
● 管理画面● テーマ● 「名古屋勉強会」をインストールして● 「有効」
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(); ?>/
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
elements/header.php を作成
● グローバルエリア● <?php
$a = new GlobalArea('Masthead');$a->display();?>
● 他に「 Site Name 」「 Header Right 」「 Header Nav 」
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?>
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
elements/footer.php を作成<?php Loader::element('footer_required'); ?>
● <?php echo $this->getThemePath(); ?>/
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();?>
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
default.php を作成
● <?php$a = new Area('Main');$a->display($c);?>
● <?php$a = new Area('Sidebar');$a->display($c);?>
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>
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
home.php を作成
● default.php を home.php に複製
● $this->inc('elements/header_home.php'); ?>
● breadcrumb 部分を削除
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">
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
blog_entry.php を作成
● left_sidebar.php を blog_entry に複製
● <h1><?php echo $c->getCollectionName(); ?></h1>
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
blog_entry.php を作成<?php
if ($c->isEditMode()) {$a = new Area('Thumbnail Image');$a->display($c);echo '<hr>';
}?>
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
● 直近イベントの紹介o 東京ブートキャンプo 8/23 ( 土 ) @ KDDI ウェブコミュニケーションズ
セミナー @ 14 時 懇親会 18 時〜 ハッカソン 21 時〜 詳細はこちら
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
コンなごconcrete5 名古屋 ユーザーグループ
● 定期イベントについてo concrete5 の日
自習 @ ベースキャンプ名古屋 だいたい毎月第 2 水曜日 (?) 次回： 2014/9/10 ( )水
o 勉強会 セミナー形式 @ ベースキャンプ名古屋 だいたい第 4 土曜日 (?) 次回： 2014/9/27 ( 土 ) 「未定」
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
● 参加方法o Doorkeeper
次回告知・参加表明は下記コミュニティーに concrete5nagoya.doorkeeper.jp
o Facebook Group 勉強会までのいろんな議論はこちらに facebook.com/groups/concrete5nagoya/
コンなごconcrete5 名古屋 ユーザーグループ
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
書籍の紹介
「concrete5 公式活用ガイドブック」買ってねー
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
おわり：おつカレー
2014.8.9 ( 土 ) 第 37 回 コンなご勉強会 「テーマ作成ハンズオン」
紹介
Katz ( 上野勝之 )コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzuenoBlog: ja.katzueno.com