View
3.411
Download
4
Category
Preview:
DESCRIPTION
2012/03/10 BaserCMS勉強会 Vol.6のLTのスライド。テーマの考え方とか触るポイントとか。
Citation preview
ねカやネゼ�オねカやマ【ヴ構成め作ぽむ��ぱべ
CGFM LLC. 金内 透 | BaserCMS勉強会 | 2012.3.10
座右の銘
泥臭い力技
自己紹介
@Garyuten
金内 透( かねうち とおる ）
• 1975年生 36才 福岡市在住• Blog http://blog.cgfm.jp/garyu/• 合同会社CGFM 代表社員• 職業：マークアップエンジニア• 相方デザイナー(カネウチカズコ) の2人SOHOスタイルで仕事中
@Garyuten
1.テーマの構成
慣れたら簡単
テーマ
全共通ファイル群app/プラグインのインストールとか
baser/BaserCMSの本体
アップグレードは上書き
cake/PHPのフレームワーク
baserCMSが使うものカラーボックスとか
ファイルアップロードの保存先とか
全体の構成
layout/default.ctp
elements/header.ctp
elements/footer.ctp
elements/sidebar.ctp
[各コンテンツ]HOME
固定ページブログ
メールフォーム
ウィジェット
themed/skelton
全体のレイアウト大枠
共通パーツ群
ブログ用テンプレート
一覧・TOP
カテゴリ・アーカイブ
個別エントリー
メールフォーム用
入力画面
確認画面
送信完了画面
固定ページの出力結果のキャッシュ保存場所※カスタマイズ不要
フィード出力
BaserCMSのいいところ
細かいパーツはいじらなくても
デフォルトで出力してくれる
細かいパーツの
テンプレートが
どこにあるのかわからない
baser/views/
baser/views/elements
アップグレードで
[/baser] 上書きしたら
カスタマイズ前に戻る
テーマ内に同名ファイル
優先的に読み込まれる
baser/views/elementsthemed/{テーマ}/elements
カスタマイズしたいテンプレートをコピー
全体のレイアウト大枠
共通パーツ群ブログ別に
テンプレートを準備
記事出力用
メールフォーム用
メール送信本文
blog用コンテンツ枠ブログのタグ出力用
HOME用コンテンツ枠
ページ用コンテンツ枠
ソーシャル関係(Twitter,Facebook)
検索フォーム
力技テーマ例
pluginのviewも触りたい
テーマにコピペすれば
好きなだけ触れる
[blog][feed][mail]の3つはデフォルトで/baser/plugins/
/baser/plugins//app/plugins/
自分で追加インストールする場合は/app/plugins/
[mail]の例themed/{テーマ}/ baser/plugin/***/view/app/plugin/***/view/
メールフォームの枠<form>、<table>、各input要素、画像認証、
送信ボタンの表示位置
メールフォームの画面テンプレート{入力/確認/完了画面}
それ以外はテーマ直下にコピペでOK
view/elements 配下は{テーマ}/elements 以下に
コピペ
力技
分岐処理
home / blog / page
layouyt/default.ctp<?php if($baser->isTop()): //HOME専用 ?> <?php //$baser->element('home') ?> <?php include('./themed/{テーマ名}/elements/home.ctp'); ?><?php elseif( empty( $blog ) ) : //ページ専用 ?>! <?php! //$baser->element('page');! include('./themed/{テーマ名}/elements/page.ctp');! ?><?php else : //ブログ専用 ?> <?php include('./themed/{テーマ名}/elements/blog.ctp');?><?php endif; ?>
baserCMSは
記事本文にphpやbaserの
コードを直接書ける
お客さんに触られる可能性も出てくる
index本文
elements/home.ctpに直接記述しておく
グローバルメニューで
現在位置表現したい
CSSシグネチャ
CSSシグネチャでメニュー制御
.menu01 .menu02 .menu03 .menu04
body / menu
ctg-A
ctg-B
ctg-C
ctg-D
.menu01 .menu02 .menu03 .menu04
<body id=”{pageID}” class=”{カテゴリ等}”>
body.ctg-A .menu01, body.ctg-B .menu02,body.ctg-C .menu03, body. ctg-D .menu04 { backgroud: *****; color : red;/* 現在位置の表現を指定*/}
ex)CSS
CSSシグネチャでメニュー制御
.menu01 .menu02 .menu03 .menu04
body / menu
ctg-A
ctg-B
ctg-C
ctg-D
.menu01 .menu02 .menu03 .menu04
<body id=”{pageID}” class=”ctg-A”>
body.ctg-A .menu01, body.ctg-B .menu02,body.ctg-C .menu03, body. ctg-D .menu04 { backgroud: *****; color : red;/* 現在位置の表現を指定*/}
ex)CSS
.menu01
CSSシグネチャでメニュー制御
.menu01 .menu02 .menu03 .menu04
body / menu
ctg-A
ctg-B
ctg-C
ctg-D
.menu01 .menu02 .menu03 .menu04
<body id=”{pageID}” class=”ctg-B”>
body.ctg-A .menu01, body.ctg-B .menu02,body.ctg-C .menu03, body. ctg-D .menu04 { backgroud: *****; color : red;/* 現在位置の表現を指定*/}
ex)CSS
.menu02
CSSシグネチャでメニュー制御
.menu01 .menu02 .menu03 .menu04
body / menu
ctg-A
ctg-B
ctg-C
ctg-D
.menu01 .menu02 .menu03 .menu04
<body id=”{pageID}” class=”ctg-C”>
body.ctg-A .menu01, body.ctg-B .menu02,body.ctg-C .menu03, body. ctg-D .menu04 { backgroud: *****; color : red;/* 現在位置の表現を指定*/}
ex)CSS
.menu03
CSSシグネチャでメニュー制御
.menu01 .menu02 .menu03 .menu04
body / menu
ctg-A
ctg-B
ctg-C
ctg-D
.menu01 .menu02 .menu03 .menu04
<body id=”{pageID}” class=”ctg-D”>
body.ctg-A .menu01, body.ctg-B .menu02,body.ctg-C .menu03, body. ctg-D .menu04 { backgroud: *****; color : red;/* 現在位置の表現を指定*/}
ex)CSS
.menu04
body id,class付与例(1)
<body id=‘home’ class=‘Home’>
HOMEの場合
<body id=‘{pageID}’ class=‘Page Ctg-{カテゴリ名} SubCtg-{カテゴリ名}’>
固定ページの場合
body id,class付与例(2)
<body class=‘BlogIndex Index Blog-{Name}’>
blogの場合 blogのトップ
<body class=‘ BlogCategory Category" Blog-{Name}’>blogのカテゴリ一覧
<body class=‘BlogArchives Archives BlogDate Date BlogDate-2012-03’>
blogのアーカイブ一覧
<body class=‘BlogArchives Archives BlogTag Tag-{tag No}’>blogのタグ一覧
<body class=‘BlogEntry Entry BlogEntry-{カテゴリ名}’>blogのエントリー
誰か作ってhelperさん
判別系
isPage()
固定ページかどうか
BlogHelper > BlogHelper 出力系命令 > [postImg]• 画像のサイズ指定(small,large)• 元画像へのリンク• 具体的な凡例• 記事中に何枚画像が格納されてるか
$blog->category( $post,[$options] )
• オプションの具体的な凡例
$blog->isBlogHome()
• ブログのHOMEかどうかの判別
$blog いろいろ
• ブログのHOMEのHOMEのURL• ブログのタイトルとURL、リンク付き
ありがとうございました
@Garyuten
Recommended