concrete5.7.x 対応カスタムテンプレートを極める - 第58回コンなご勉強会

2016.3.19 (土) 「オートナビ & ページリスト」
concrete5.7.x 対応
カスタムテンプレートを極める
2016/3/19 (土) コンなご

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

本日のアジェンダ
● カスタムテンプレート
○ カスタムテンプレートの基本
○ カスタムテンプレートを使ってみよう
○ カスタムテンプレートを作ってみよう
■ YouTube ブロック
■ オートナビ：リンクリスト
■ ページリスト
● お知らせ
● メニューリスト
○ 上級編
■ Controller を変更する
■ Edit を変更する
■ src で追加する (メールブロック)
● テーマ作成＆カスタムテンプレート上級編

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

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

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

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

サンプルファイルの構成
● 勉強会特別サンプル
○ /answer/ ディレクトリに答えがあります

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

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

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

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

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

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

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

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

ページリストの view.php の説明
実際のコードを見て説明します。

● Page List ブロックの基本
○ <?php foreach ($pages as $page):
○ と
○ <?php endforeach; ?>
○ の間が繰り返される
○ と覚えてください

● Page List ブロックの基本
○ あとは、実践でお教えします
○ 時間があったらあとで解説します

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

● 実践：ページリスト：メニュー①
○ 6行目：「$ih = Loader::helper('image');」のコメントス
ラッシュを削除
○ 下記のコードを42~43行目にいれる
■ $img = $page->getAttribute('thumbnail');
$thumb = $ih->getThumbnail($img, 208, 153,
false);
※ 古い Image ヘルパーを使っています。

● 実践：ページリスト：メニュー①
○ 画像を表示させたいところに、下記のコードを入れる
■ <img src="<?php echo $thumb->src ?>" width="
<?php echo $thumb->width ?>" height="<?php
echo $thumb->height ?>" alt="" />
※古い Image ヘルパーを使っています。

● 実践：ページリスト：メニュー②
○ リサイズなし
○ 下記のコードを53~54行目にいれる
■ $img = $page->getAttribute('thumbnail');
$img_src = $img->getRelativePath();
list($img_width, $img_height) = getimagesize($img->getPath());

● 実践：ページリスト：メニュー②
○ リサイズなし
■ <img src="<?php echo $img_src ?>" width="<?
php echo $img_width ?>" height="<?php echo
$img_height ?>" alt="" />

● 実践：ページリスト：メニュー③
○ 新しい 5.7 サムネイルの仕組み
■ 管理画面 - システムと設定 - ファイル - サムネイル
● 「menu_list」サムネイルを作成
● 208 x 153 ピクセルで設定
■ ページリストの表示部分
● $thumbnail = $page->getAttribute('thumbnail');
if (is_object($thumbnail)) {
$src = $thumbnail->getThumbnailURL('menu_list');
echo HtmlObjectImage::create($src)->alt('');

● 上級編
○ Controller を変更する
■ namespace を変更する
■ 継承する (use で親を指定して継承する)
○ Edit を変更する
○ src を追加する (メールブロック miniSurvey)

● 参考資料
○ 【完全保存版】 concrete5.7.x テーマスニペット集
○ ブロック
■ 既存のブロックのカスタマイズ

TIPS 紹介
● テーマ作成 & ブロック作成 TIPS
○ スニペット：現ページのユーザー情報の取得
○ フォームブロック：確認者メールを送る
○ ページテンプレート：リダイレクト専用ページを作る
○ Google Map ブロック: 地図リンクを追加する
○ ファイルブロック：ファイルサイズを表示する
○ ブロックIDの取得
○ ページリストで表示ページの Main エリアの最初のブロックを表示する (120-124行目)
○ 強引技：ページリストなどでブロックの表示内容を取得する
○ ページリストで、表示ページの Mainエリアすべてのブロックを表示する (122-126行目)
○ ページリスト表示の応用編：属性、ユーザー、サムネイル画像
○ オートナビブロック：サンプル

TIPS 紹介
● ページネーション
○ ページリストブロックのページ送りのカスタマイズ
● API
○ Blocks

concrete5.7.x 対応カスタムテンプレートを極める - 第58回コンなご勉強会

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

More from Katz Ueno

More from Katz Ueno (20)