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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートを極める2014/9/27 ( 土 ) 第 38 回 コンなご勉強会

@ ベースキャンプ名古屋

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

自己紹介

Katz ( 上野勝之 )コンクリートファイブジャパン株式会社

取締役 Chief Communications Officer

TW: @katzuenoBlog: ja.katzueno.com

2014.9.28 ( 日 ) CMS の 1 つ、 concrete5 のわかりやすい紹介

concrete5日本語版とコミュニティを2009 年に立ち上げましたconcrete5-japan.org

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

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

● 直近イベントの紹介o 9/28 ( 日 ) in コンフジ 沼津

車で一緒に行こうぜ！o 10/11 ( 土 ) PHP カンファレンス @ 東京o 10/18 〜 19 OSC 2014 Tokyo/Fall

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

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

● 定期イベントについてo concrete5 の日

自習 @ ベースキャンプ名古屋 だいたい毎月第 2 水曜日 (?) 次回： 2014/10/8 ( )水 ← 申込

o 勉強会 セミナー形式 @ ベースキャンプ名古屋 だいたい 第 4 土曜日 (?) 次回： 2014/10/25 ( 土 ) 「5.7 とエンタープライズアドオン」

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

● 参加方法o Doorkeeper

次回告知・参加表明は下記コミュニティーに concrete5nagoya.doorkeeper.jp

o Facebook Group 勉強会の内容や日程の議論はこちらで facebook.com/groups/concrete5nagoya/

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

書籍の紹介

「concrete5 公式活用ガイドブック」買ってねー。というか売るよ〜

今日の内容の詳しくはこの本からです！

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

本日のアジェンダ● カスタムテンプレート

o カスタムテンプレートの基本o カスタムテンプレートを使ってみようo カスタムテンプレートを作ってみよう

YouTube ブロック オートナビ：リンクリスト ページリスト

● お知らせ● メニューリスト

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

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

す。

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

おことわり 今日のセッションは HTML や CSS で

サイトコーディング出来る人向けです。

でも、出来る限りわかりやすく説明できるよう頑張ります。

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

サンプルファイル・ダウンロード● GitHub よりダウンロード

o ZIP ファイル直接ダウンロードリンク https://github.com/concrete5japan/concrete5_japanese_book/archive/master.zip

o ZIP ファイルを解凍● MAMP や XAMPP の作業ディレクトリに解凍

o 中の「 concrete5 」フォルダをo /htdocs/concrete5/ に移動してください

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

配布データの確認

● 勉強会参加者専用データの説明o “concrete5_sql.zip” を phpmyadmin などで

インポートo http://localhost/concrete5/index.php/login

設定によってはhttp://localhost:8088/concrete5/index.php/login

o ID: admino Pass: 123456

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

テーマ・コード集

【完全保存版】 concrete5 テーマスニペット集

http://ja.katzueno.com/2014/05/3104/

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

サンプルファイルの構成

● /mockupo HTML コーディングファイル

● /concrete5/themes/olive_sampleo concrete5 サンプルデータ

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

サンプルファイルの構成

● 本のサンプルデータ /concrete5/blocks/o 実は、ここに答えが・・・

● 勉強会特別サンプルo /answer/ ディレクトリに答えがあります

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

さーてやりましょう

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートについて

● 簡単に言うとo ブロックで出力される HTML を変えます

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレート使い方

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

デモサイトを用意しました

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレート使い方

● というか実践してみましょう！o サンプルサイトを開いてください ( 見比べ )

localhost 本のサンプルサイト

o カスタムテンプレートが適用されていないデモサイトを用意しました

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレート使い方

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレート使い方

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

● ブロックの view.php のコードをo 自分の好きなように出力するように書き換えたも

のo 主な目的例

CSS クラスを変えたい ページリスト、オートナビなどで別の追加情報（ページ属性等）を出したい

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

ページリストの view.php の説明

実際のコードを見て説明します。PHP コードがありますが、アレルギー無く聞いてください。

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

ページリストの view.php の説明

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

ページリストの view.php の説明

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

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

カスタムテンプレートを調整しよう

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

● 実践：ページリスト：メニューo 4 行目：「 $ih = Loader::helper('image'); 」のコメン

トスラッシュを削除o 下記のコードを 53~54 行目にいれる

$img = $page->getAttribute('thumbnail');$thumb = $ih->getThumbnail($img, 208, 153, false);

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

● 実践：ページリスト：メニューo 画像を表示させたいところに、下記のコードを入れ

る <img src="<?php echo $thumb->src ?>"

width="<?php echo $thumb->width ?>" height="<?php echo $thumb->height ?>" alt="" />

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

● 実践：ページリスト：メニュー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());

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

● 実践：ページリスト：メニューo リサイズなし

<img src="<?php echo $img_src ?>" width="<?php echo $img_width ?>" height="<?php echo $img_height ?>" alt="" />

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

カスタムテンプレートとは

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

次回について

● 10 月は 5.7 やります● 11 月 12 月のスケジュールをお願いします● だれか発表して！

● 議論はこちらo facebook.com/groups/concrete5nagoya/o 勉強会に一度でも参加したことがある人限定

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

● 参加方法o Doorkeeper

次回告知・参加表明は下記コミュニティーに concrete5nagoya.doorkeeper.jp

o Facebook Group 勉強会の内容や日程の議論はこちらで facebook.com/groups/concrete5nagoya/

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

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

おわり：おつカレー

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

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

● 定期イベントについてo concrete5 の日

自習 @ ベースキャンプ名古屋 だいたい毎月第 2 水曜日 (?) 次回： 2014/10/8 ( )水 ← 申込

o 勉強会 セミナー形式 @ ベースキャンプ名古屋 だいたい 第 4 土曜日 (?) 次回： 2014/10/25 ( 土 ) 「5.7 とエンタープライズアドオン」

2014.9.27 ( 土 ) 第 38 回 コンなご勉強会 「カスタムテンプレートを極める」

紹介

Katz ( 上野勝之 )コンクリートファイブジャパン株式会社

取締役 Chief Communications Officer

TW: @katzuenoBlog: ja.katzueno.com