concrete5 テーマ作成ハンズオン (Ver5.6 まで)

2014.8.9 (土) 第37回コンなご勉強会「テーマ作成ハンズオン」
テーマ作成ハンズオン
2014/8/9 (土) 第37回コンなご勉強会
@ ベースキャンプ名古屋

紹介
Katz (上野勝之)
コンクリートファイブジャパン株式会社
取締役 Chief Communications Officer
TW: @katzueno
Blog: ja.katzueno.com

コンなご
concrete5 名古屋ユーザーグループ

コンなご
● 直近イベントの紹介
o 東京ブートキャンプ
o 8/23 (土) @ KDDIウェブコミュニケーションズ
 セミナー @ 14時
 懇親会 18時〜
 ハッカソン 21時〜
 詳細はこちら

コンなご
● 定期イベントについて
o concrete5 の日
 自習 @ ベースキャンプ名古屋
 だいたい毎月第2水曜日(?)
 次回： 2014/9/10 (水)
o 勉強会
 セミナー形式 @ ベースキャンプ名古屋
 だいたい第4土曜日(?)
 次回：2014/9/27 (土)「未定」

● 参加方法
o Doorkeeper
 次回告知・参加表明は下記コミュニティーに
 concrete5nagoya.doorkeeper.jp
o Facebook Group
 勉強会までのいろんな議論はこちらに
 facebook.com/groups/concrete5nagoya/
コンなご

書籍の紹介
「concrete5 公式活用ガイド
ブック」
買ってねー
今日の内容の詳しくは
この本からです！

本日のアジェンダ
● テーマ作成ワークショップ
o HTMLファイル確認
o テーマ構造
o テーマ定義ファイル (thumbnail.png, description.txt)
o header.php & footer.php 作成
o default.php 作成
o left_sidebar.php から blog_entry.php 作成

スライドだけ見てる方へ
反対に、わけがわからないかも・・・。本
を直接読んでもらったほうがいいかもです。

サンプルファイル・ダウンロード
● GitHub よりダウンロード
o ZIPファイル直接ダウンロードリンク
 https://github.com/concrete5japan/concrete5_japanese_book/archive/master.zip
o ZIPファイルを解凍
● MAMP や XAMPP の作業ディレクトリに解
凍

配布データの確認
● 勉強会専用データ
o http://localhost/concrete5/index.php/login
 設定によってはhttp://localhost:8088/concrete5/index.php/login
o ID: admin
o Pass: 123456

配布データの確認
● プリティURL設定の解除
o http://localhost/concrete5/index.php/dashboard/syste
m/seo/urls/
設定によってはhttp://localhost:8088/concrete5/index.php/dashboard/system/seo/urls/
o 「プリティURLを使用する」をオフに

テーマ・コード集
【完全保存版】 concrete5 テーマスニペット集
http://ja.katzueno.com/2014/05/3104/

サンプルファイルの構成
● /mockup
o HTML コーディングファイル
● /concrete5/themes/olive_sample
o concrete5 サンプルデータ

サンプルファイルの構成
● /mockup
o HTML コーディングファイルここのファイルをテー
マ化します
● /concrete5/themes/olive_sample
o concrete5 サンプルデータ
● /concrete5/themes/nagoya/
o に作るぜ！

HTML ファイルを確認しましょう
● /mockup
o HTML コーディングファイルを開いて、内容を確認
しよう

concrete5 のテーマの構造
● 必須ファイル
o 日本語公式サイトテーマ作成クイックリファレンス
を参照
 「構成ファイル一覧」を見よう

フォルダを作成
● /concrete5/themes/
o nagoya
o nagoya/elements
o nagoya/images
o nagoya/javascripts
o nagoya/stylesheets

そのまま使えるファイルをコピー
o olive_sample/以下のファイルを nagoya/ フォルダ
ーにコピー
o images/ 以下のファイル
o javascripts/ 以下のファイル
o stylesheets/ 以下のファイ
o main.css
o main.js

テーマ定義ファイルを作成
o thumbnail.png を作成（今日はサボってコピペ)
o description.txt を作成

Olive.html をコピー
● /mockup/olive.html
o /concrete5/themes/nagoya/ にコピー
o olive.html を default.php に名前を変える

共通パーツを作成
● elements/header.php & elements_footer.php
o まず、空白のテキストファイルを作ります
o default.php を開きます
● 参考：日本語公式サイトテーマ作成クイックリファレ
ンス

だんだん手抜きスライド
ここからコピペ用のコードだけ
詳しくは本を買ってね
スライドを作る時間がなかった・・・
わけでは・・・

default.php を作成
● <?php defined('C5_EXECUTE') or die("Access
Denied.");
$this->inc('elements/header.php'); ?>
● <?php $this->inc('elements/footer.php'); ?>

テーマをインストールしてみよう！
● 管理画面
● テーマ
● 「名古屋勉強会」をインストールして
● 「有効」

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(); ?>/

elements/header.php を作成
● グローバルエリア
● <?php
$a = new GlobalArea('Masthead');
$a->display();
?>
● 他に「Site Name」「Header Right」「Header Nav」

elements/footer.php を作成
Denied."); ?>
● <?php
$a = new GlobalArea('Footer');
$a->display();
?>
● Copyright © <?php echo date('Y')?> <?php echo
SITE?>

elements/footer.php を作成
<?php Loader::element('footer_required'); ?>
● <?php echo $this->getThemePath(); ?>/

Denied.");
$this->inc('elements/header.php'); ?>
● <?php
$a = new GlobalArea('Breadcrumbs');
$a->display();
?>

● <?php
$a = new Area('Main');
$a->display($c);
?>
● <?php
$a = new Area('Sidebar');
$a->display($c);
?>

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>

home.php を作成
● default.php を home.php に複製
● $this->inc('elements/header_home.php'); ?>
● breadcrumb 部分を削除

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">

blog_entry.php を作成
● left_sidebar.php を blog_entry に複製
● <h1><?php echo $c-
>getCollectionName(); ?></h1>

blog_entry.php を作成
<?php
if ($c->isEditMode()) {
$a = new Area('Thumbnail Image');
$a->display($c);
echo '<hr>';
}
?>

書籍の紹介
「concrete5 公式活用ガイド
ブック」
買ってねー

おわり：おつカレー

concrete5 テーマ作成ハンズオン (Ver5.6 まで)

Recomendados

Recomendados

Más contenido relacionado

Similar a concrete5 テーマ作成ハンズオン (Ver5.6 まで)

Similar a concrete5 テーマ作成ハンズオン (Ver5.6 まで) (20)

Más de Katz Ueno

Más de Katz Ueno (20)

concrete5 テーマ作成ハンズオン (Ver5.6 まで)