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

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

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

@ ベースキャンプ名古屋

http://basecamp-nagoya.jp/


自己紹介

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

取締役 Chief Communications Officer

TW: @katzuenoBlog: ja.katzueno.com

https://twitter.com/katzueno

http://ja.katzueno.com/

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

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

http://concrete5-japan.org/


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



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

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

http://concrete5-japan.org/news/con-fuji-numazu/



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

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

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


https://www.facebook.com/events/653257604769559/


http://concrete5nagoya.doorkeeper.jp/events/15702


● 参加方法o Doorkeeper

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

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


http://concrete5nagoya.doorkeeper.jp/


書籍の紹介

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

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

http://www.amazon.co.jp/gp/product/4839943842/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4839943842&linkCode=as2&tag=katz515-22

http://www.amazon.co.jp/gp/product/4839943842/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4839943842&linkCode=as2&tag=katz515-22


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

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/ に移動してください

https://github.com/concrete5japan/concrete5_japanese_book/archive/master.zip


配布データの確認

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

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

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

o ID: admino Pass: 123456

http://localhost/concrete5/index.php/login

http://localhost/concrete5/index.php/login


テーマ・コード集

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

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

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


サンプルファイルの構成

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

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


サンプルファイルの構成

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

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


さーてやりましょう


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

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


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

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

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



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

localhost 本のサンプルサイト

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

http://book.concrete5-japan.org/concrete5/



● パンくずのオートナビを適用してみよう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 を変えてみよう

http://book.concrete5-japan.org/concrete5/


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

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



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



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



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

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

http://book.concrete5-japan.org/mockup/menu.html



● 実践：ページリスト：メニュー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 勉強会に一度でも参加したことがある人限定

http://www.facebook.com/groups/concrete5nagoya/


● 参加方法o Doorkeeper

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

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


http://concrete5nagoya.doorkeeper.jp/

http://www.facebook.com/groups/concrete5nagoya/


おわり：おつカレー



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

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

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


https://www.facebook.com/events/653257604769559/


http://concrete5nagoya.doorkeeper.jp/events/15702


紹介

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

取締役 Chief Communications Officer

TW: @katzuenoBlog: ja.katzueno.com

https://twitter.com/katzueno

http://ja.katzueno.com/

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

Design

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