カスタムテンプレートを極める - 第38回コンなご勉強会 (concrete5 名古屋UG)

カスタムテンプレートを極める
2014/9/27 (土) 第38回コンなご勉強会
@ ベースキャンプ名古屋
2014.9.27 (土) 第38回コンなご勉強会「カスタムテンプレートを極める」

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

2014.9.28 (日) CMS の1つ、concrete5 のわかりやすい紹介
concrete5
日本語版とコミュニティを
2009年に立ち上げました
concrete5-japan.org

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

コンなご
● 直近イベントの紹介
o 9/28 (日) コンフジin 沼津
 車で一緒に行こうぜ！
o 10/11 (土) PHPカンファレンス@東京
o 10/18〜19 OSC 2014 Tokyo/Fall

コンなご
● 定期イベントについて
o concrete5 の日
 自習@ ベースキャンプ名古屋
 だいたい毎月第2水曜日(?)
 次回： 2014/10/8 (水) ← 申込
o 勉強会
 セミナー形式@ ベースキャンプ名古屋
 だいたい第4土曜日(?)
 次回：2014/10/25 (土)「5.7 とエンタープライズアドオン」

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

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

本日のアジェンダ
● カスタムテンプレート
o カスタムテンプレートの基本
o カスタムテンプレートを使ってみよう
o カスタムテンプレートを作ってみよう
 YouTube ブロック
 オートナビ：リンクリスト
 ページリスト
● お知らせ
● メニューリスト

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

おことわり
今日のセッションはHTML やCSS で
サイトコーディング出来る人向けです。
でも、出来る限りわかりやすく
説明できるよう頑張ります。

サンプルファイル・ダウンロード
● GitHub よりダウンロード
o ZIPファイル直接ダウンロードリンク
 https://github.com/concrete5japan/concrete5_japanese_book/archive/master.zip
o ZIPファイルを解凍
● MAMP やXAMPP の作業ディレクトリに解凍
o 中の「concrete5」フォルダを
o /htdocs/concrete5/ に移動してください

配布データの確認
● 勉強会参加者専用データの説明
o “concrete5_sql.zip”をphpmyadmin などで
インポート
o http://localhost/concrete5/index.php/login
 設定によっては
http://localhost:8088/concrete5/index.php/login
o ID: admin
o Pass: 123456

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

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

サンプルファイルの構成
● 本のサンプルデータ/concrete5/blocks/
o 実は、ここに答えが・・・
● 勉強会特別サンプル
o /answer/ ディレクトリに答えがあります

さーてやりましょう

カスタムテンプレートについて
● 簡単に言うと
o ブロックで出力されるHTML を変えます

カスタムテンプレート使い方
● というか実践してみましょう！
o サンプルサイトを開いてください
o カスタムテンプレートが適用されていない
デモサイトを用意しました

● というか実践してみましょう！
o サンプルサイトを開いてください(見比べ)
 localhost
 本のサンプルサイト
o カスタムテンプレートが適用されていない
デモサイトを用意しました

● パンくずのオートナビを適用してみよう
o メニューページに
o 編集モードに
o ブロックをクリック
o カスタムテンプレートをクリック
o 「Breadcrumb」を選択

● パンくずのオートナビを適用してみよう
o ファイルを見てみよう
o /concrete5/blocks/autonav/
o 「templates」というフォルダが有ります
o その中にPHP ファイルが有ります

カスタムテンプレートとは
● ブロックのview.php のコードを
o 自分の好きなように出力するように書き換えたもの
o 主な目的例
 CSS クラスを変えたい
 ページリスト、オートナビなどで別の追加情報
（ページ属性等）を出したい

● 実践：YouTubeブロックのview.php を書き
換えよう！
o トップページのカレーの動画
o サイズを変えてみよう

● 実践：ページリスト：お知らせ
o 最終的なサンプルを参考に
o 出力されるCSS を変えてみよう

ページリストのview.php の説明
実際のコードを見て説明します。
PHPコードがありますが、アレルギー無く
聞いてください。

● 恐れることはない！
o <?php foreach ($pages as $page):
o と
o <?php endforeach; ?>
o の間が繰り返される
o と覚えるだけ！

● 恐れることはない！
o あとは、実践でお教えします
o 時間があったらあとで解説します

● 実践：ページリスト：メニュー
o 最終的なサンプルを参考に
o ページ属性「thumbnail」を使おう
o 各メニューページのthumbnail属性を確認
o メニューに画像が表示されるよう
カスタムテンプレートを調整しよう

o 4行目：「$ih = Loader::helper('image');」のコメン
トスラッシュを削除
o 下記のコードを53~54行目にいれる
 $img = $page->getAttribute('thumbnail');
$thumb = $ih->getThumbnail($img, 208, 153,
false);

o 画像を表示させたいところに、下記のコードを入れ
る
 <img src="<?php echo $thumb->src ?>"
width="<?php echo $thumb->width ?>"
height="<?php echo $thumb->height ?>" alt="" />

o リサイズなし
o 4行目：「$ih = Loader::helper('image');」のコメン
トスラッシュを削除
o 下記のコードを53~54行目にいれる
 $img = $page->getAttribute('thumbnail');
$img_src = $img->getRelativePath();
list($img_width, $img_height) = getimagesize($img->getPath());

o リサイズなし
 <img src="<?php echo $img_src ?>"
width="<?php echo $img_width ?>"
height="<?php echo $img_height ?>" alt="" />

● 時間余ったかな？
o オートナビ
o ページリストのコードの説明

次回について
● 10月は5.7 やります
● 11月12月のスケジュールをお願いします
● だれか発表して！
● 議論はこちら
o facebook.com/groups/concrete5nagoya/
o 勉強会に一度でも参加したことがある人限定

おわり：おつカレー

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

カスタムテンプレートを極める - 第38回コンなご勉強会 (concrete5 名古屋UG)

More Related Content

What's hot (20)

Similar to カスタムテンプレートを極める - 第38回コンなご勉強会 (concrete5 名古屋UG) (20)

More from Katz Ueno (20)