「こんなサイトをこんなテーマ構成で作ってみました」basercms 勉強会vol6

ねカやネゼ�オねカやマ【ヴ構成め作ぽむ��ぱべ

CGFM LLC. 金内透 | BaserCMS勉強会 | 2012.3.10

座右の銘

泥臭い力技

自己紹介

@Garyuten

金内透( かねうちとおる）

• 1975年生 36才福岡市在住• Blog http://blog.cgfm.jp/garyu/• 合同会社CGFM 代表社員• 職業：マークアップエンジニア• 相方デザイナー(カネウチカズコ) の2人SOHOスタイルで仕事中

@Garyuten

http://blog.cgfm.jp/garyu/

http://blog.cgfm.jp/garyu/

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


<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



body / menu

ctg-A

ctg-B

ctg-C

ctg-D


<body id=”{pageID}” class=”ctg-A”>


ex)CSS

.menu01



body / menu

ctg-A

ctg-B

ctg-C

ctg-D


<body id=”{pageID}” class=”ctg-B”>


ex)CSS

.menu02



body / menu

ctg-A

ctg-B

ctg-C

ctg-D


<body id=”{pageID}” class=”ctg-C”>


ex)CSS

.menu03



body / menu

ctg-A

ctg-B

ctg-C

ctg-D


<body id=”{pageID}” class=”ctg-D”>


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

「こんなサイトをこんなテーマ構成で作ってみました」basercms 勉強会vol6

Technology