POPSブログ

BaserCMS 2.0 テーマの制作/3

134

  Category:  basercms2012/08/09 pops 

BaserCMS 2.0系のテーマの「ブログレイアウト」を改造する方法について考えてみました。


BaserCMS 2.0 テーマの制作 3、ブログレイアウトの変更

ブログ記事レイアウト(single.php)を「自サイト専用」に改造する方法です。ブログはプラグインの形式で提供されています。複数のブログを使用することも可能ですが、ここでは初期状態と同じ1個の使用に限定して説明します。
但し、通常では修正出来ない場所(baser階層)にphpファイルがありますので、修正できるように目的ファイルをコピーし指定場所に移しそれを書き換えます。


baser階層にあるファイル修正の規定

  • 原則 baser階層の中のファイルは直接修正しない規定です。バージョンアップで上書きされてしまうからです。
  • ファイルをコピーし指定場所に移動して修正出来る仕組みになっています。移動場所に規定があります。
  • 説明以外の操作は行わないでください。またこの作業も「自己の責任」で行うものです。

また、BaserCMSの設置条件を下記のようにします。

  • 説明上、サブデレクトリ main とします。
  • テーマ名を popsline とします。ブログIDはそのまま news とします。
  • 画像などはテーマ内部に保存されているものと仮定します。

baser階層のフォルダ、ファイルは直接書き換えはしないのが原則です。


ブログのファイルをコピーし指定場所に移動させる


baser/plugins/blog/views/blog/default 、フォルダをコピーして、defaultフォルダごと、新規のテーマ、themed/popsline/blogフォルダの中ににペーストします。(下図のようになる)
mobile 階層の中にも default がありますが関係ありません。間違わないよう注意ください。
これで、システムは自動で認識して、テーマに在るファイルを実行するようになります。
今回は、「新規のテーマ」を使用していますので、「新規のテーマ」にいれましたが、もしテーマ「demo」を使用するならば「demo」にペーストします。


下記、説明図のような構成になります。(helpers はテーマヘルパーを使う場合新規作成する)

説明図


● defaultフォルダの中身


在る場所と中身
baser/plugins/blog/views/blog/default
archives.php
index.php
posts.php
single.php

1. archives.php 月別、タグ別などのタイトルと明細の一部表示ページに使用される。
2. index.php ブログの目次ページに使用される。
3. posts.php 汎用のリスト表示用の編集に使用される。追加可能。
4. single.php 標準のブログ記事表示ページに使用される。デザイン及びレイアウトなどの変更は自由です。


通常のサイトでは、ブログ「はニュースリリース」などの目的で使用されています。ブログの目的で使用されているのは少ないようです。
ブログ記事表示ページである、single.phpの修正は使用者の自由です。レイアウトで、default.phpを修正したように行えば良い訳です。変更といっても記事前後のデザインが主と思います。


ブログの各ページ表示まえに、ブログのCSSを読み込んでいる。


● single.php、について

ブログ記事表示ページである、single.php でブログ用CSSである「style.css」及び ライトボックスJSである、「colorbox.js」の読み込みと設定を行っています。JSが必要ないならば削除します。
もし、ブログ専用にJSを設定したければここで設定すれば良い訳です。(重要、CSSを先に読み込むこと)
なお、index.php archives.php でもブログ用CSSを読み込んでいますので、必要な場合は修正ください。


説明文を入れています


ブログCSS、colorboxCSSの読み込み
$bcBaser->css(array('/blog/css/style','colorbox/colorbox'), array('inline' => true));

colorboxJSの読み込み
$bcBaser->js('jquery.colorbox-min', false);

説明文の作成
$bcBaser->setDescription($blog->getTitle().'|'.$blog->getPostContent($post,false,false,50));

?>
rel要素にcolorboxの設定があればfadeで実行するようにする
<script type="text/javascript">
$(function(){
	if($("a[rel='colorbox']").colorbox) $("a[rel='colorbox']").colorbox({transition:"fade"});
});
</script>

ブログの名前を表示
<!-- blog title -->
<h2 class="contents-head">
	<?php $blog->title() ?>
</h2>

記事のタイトルを表示
<!-- post title -->
<h3 class="contents-head">
	<?php $bcBaser->contentsTitle() ?>
</h3>

postクラスの中に記事のメタと本文を表示
<!-- post detail -->
<div class="post">

本文を表示
	<?php $blog->postContent($post) ?>

メタを表示
	<div class="meta"><span>
		<?php $blog->category($post) ?>
		 
		<?php $blog->postDate($post) ?>
		 
		<?php $blog->author($post) ?>
	</span></div>
	<?php $bcBaser->element('blog_tag', array('post' => $post)) ?>
</div>

ナビを表示
<!-- contents navi -->
<div id="contentsNavi">
	<?php $blog->prevLink($post) ?>
	 | 
	<?php $blog->nextLink($post) ?>
</div>

管理でコメント表示の設定が有効なら、コメントを表示、
<!-- comments -->
<?php $bcBaser->element('blog_comments') ?>

デザインなどを変えると言っても、既存のBaserCMS関数を使用しての範囲内になります。記事中ではphpは使用できませんのである程度アイデアが必要です。
元来BaserCMSは「コーポレートサイト」用のCMSです。現在「WordPress」並のブログ機能はまだありませんが、年月が経過すれば色々な機能が強化されるとおもいます。
JSを利用しても色々操作できますので、一般のブログとしての使用も遜色はあまり感じません。


● ブログCSSの変更について

ブログCSSはbaser階層にありますので書き換えできません。そこで新しいブログCSSを「テーマ」のCSSフォルダに作りそこから読み込むようにします。(別の方法でも良い)
ブログCSSは以下の通りです。(修正なしのそのまま)



/blog/css/にはないので在る場所を指定する
$bcBaser->css(array('/main/themed/popsline/css/style'), array('inline' => true));
---------------------------------
こちらの書き方でも可
<link rel="stylesheet" type="text/css" href="/main/themed/popsline/css/style.css" />

レイアウト、default.php で読み込んでも、他のCSSと一緒にしてOKと思う

style.css


保存されている場所
baser/plugins/blog/vendors/css
style.css


/* blog-description
---------------------------------------------------*/
.blog-description {
	margin-left:30px;
}
/* post
---------------------------------------------------*/
.post {
	margin-left:20px;
	margin-right:20px;
	margin-bottom:30px;
}
.post-body,
#post-detail {
	margin-left:10px;
	margin-right:10px;
	margin-bottom:30px;
	line-height:2em;
}
.more {
	text-align:right;
	margin:20px 10px 40px 10px;
}
/* meta
---------------------------------------------------*/
.meta {
	background-color:#F3F3F3;
	color:#999999;
	font-size:0.85em;
	padding-bottom:5px;
	padding-right:10px;
	padding-top:5px;
	text-align:right;
}
/* tag
---------------------------------------------------*/
.tag {
	color:#999999;
	font-size:0.85em;
	padding-bottom:5px;
	padding-right:10px;
	padding-top:5px;
	text-align: right;
}
/* calendar
----------------------------------------------- */
.widget-blog-calendar table {
	margin-left:15px;
}
.widget-blog-calendar th {
	border-bottom:1px solid #e2e2e2;
}
.widget-blog-calendar th,
.widget-blog-calendar td {
	padding:2px 3px;
	font-size:12px;
	text-align: center;
}
.widget-blog-calendar .sunday {
	color:#ff6633;
}
.widget-blog-calendar .saturday {
	color:#3366FF;
}
.widget-blog-calendar .today {
	background-color:#e2e2e2;
}

/* BlogComment
----------------------------------------------- */
#BlogComment {
	margin-top:40px;
	padding:0 10px;
}
#BlogCommentList {
	padding:10px 20px;
	margin-top:20px;
}
#BlogCommentAddForm {
	padding:10px 20px;
}
#BlogCommentList .comment {
	padding-bottom:8px;
	border-bottom:1px dashed #CCCCCC;
	margin-bottom:20px;
}
/* contentsNavi
----------------------------------------------- */
#contentsNavi {
	text-align:center;
}

重要なのはpostクラスなどのマージン設定位である。固定ページにはマージンがないのでpostクラス等と同様なクラスでラップしてやると全てのページが揃ってキレイになる。
あとは使用者の自由である。


関数、blogPosts() は使いこなせば結構役にたつ機能である。


● posts.php について

少し判り難いと思います。「ブログ記事一覧出力」の場合の処理とリスト表示HTML処理をするものです。標準ではposts.phpが使用されますが、新たに作り指定することが可能です。
標準では最近の投稿出力がWidgetsにあります。「ブログ記事一覧出力」はその外指定の絞込み検索の結果をリスト表示できます。
結果は配列で渡されますので、使用者がさらに何らかの絞込みなどをして再加工して出力も出来るようです。



[blogPosts] ブログ記事一覧出力
BlogHelper 出力系命令
$bcBaser->blogPosts($contentsName, [$num] , [$options] )
ページ編集画面等で利用する事ができる。
利用例: <?php $bcBaser->blogPosts('news', 3) ?>
ビュー: app/webroot/themed/{テーマ名}/blog/{コンテンツテンプレート名}/posts.php

コンテンツテンプレート名は初期状態では default です。複数の人が使用した場合の登録IDです。普通は書き込みません。(説明が少ないので完全なことは言えない)
ブログ出力のphpファイルをテーマ内に移動していますので、何ら指定がなければ posts.php が使用されます。
出力数を指定できます。指定なしは全てを、指定数に足りなければ合致数分を表示します。


別の posts.php が必要なら同じところにposts2.php なりの名前でつくれば良い(名前は自由)。呼び出すときtemplateで指定する。(下記[実際の例]説明参照)


【参照】basercms.net baserCMS 2系関数リファレンス: ブログ記事一覧出力


[実際の例]


ブログID、news 拠り 3記事、「リンクつき記事タイトル」を出力します
ブログIDが違う場合は、管理画面で登録したID名になります
<?php $bcBaser->blogPosts('news', 3) ?>

category「新製品」、keyword「アウトレット」で絞込み検索します
$bcBaser->blogPosts('news', 5, array('category' => '新製品','keyword' => 'アウトレット'));

category「新製品」、tag「訳あり」、keyword「アウトレット」で絞込み検索します、結果をposts2.phpで出力します
$bcBaser->blogPosts('news', 5, array('category' => '新製品','tag' => '訳あり','keyword' => 'アウトレット','template' => 'posts2'));

注意、template の指定なき場合または、'template' => 'Default'は posts.php にゆきます
posts2.php の名前は何でも良い、posts.php のあるテーマの default 階層に保存して使用します

年、月、日、での絞り込みは余りないとおもいます。

絞込み検索での「keyword」とは「ブログ記事」あるいは「記事タイトル」の中にある「文字列」です。但しデータベースの検索機能で実行していますので必ず検索するとは限りません。
ヒット率をあげるには「文字列」の前後に半角スペースをいれる。特別な記号などでくくっておく。段落の先頭に置くなど少し工夫が必要です。ヒット率を確約できませんので使用者が実際に色々テストして決定してください。


記事の中での keyword「文字列」の書き方例


ヒットし易い
------------------------------------------
この商品はお勧めの アウトレット です。
この商品は期間限定の[アウトレット]商品です。
アウトレット 商品となっていますのですぐ壊れますますがお買い得です。

ヒット不安定「文字」の種類長さなどで違う
------------------------------------------
アウトレット商品となっていますのですぐ壊れますますがお買い得です。

ヒットし難い
------------------------------------------
本日一押し商品となっていますのですぐ壊れますますがアウトレットでお買い得です。

● 類似記事表示機能

blogPosts()を利用して「類似記事表示機能」などを作ることも可能ですが、現段階ではかなり難しい。

1. 完全に検索する「keyword」を記事に仕込んでおくなどの「事前の段取り」があれば利用できる。
2. 複数「tag」の検索を出来るように工夫すれば利用できる。(原則cakephpは1つのtag検索のみ対応)
3. 独自の「tag」を沢山登録して「tag」検索(tagは問題なく完全に検索するので一番有効な手段)するのも方法ですが、余り多くの「tag」があるのも見苦しい。
4. 以上の機能を組み合わせる。(かなり面倒)

blogPosts()である程度絞込み、posts.phpでさらに絞込みの処理をしてリスト表示すれば良い理屈ですが。これは個人で考えてください。2系からはテーマヘルパーが使用できるので、BaserCMの処理に精通していれば作れるでしょうが素人では難しい。


最後に posts.php などで出力されますが、書き方などは posts.php を参考にしてください。


● index.php archives.php について

index.php は全ブログ記事目次のページを出力します。
archives.phpは「ブログ記事」「ブログ記事目次」以外のブログ関連の「共通の出力ページ」となっています。
ともにブログCSSの読み込みが先頭で設定されていますので、注意ください。デザインの変更などは余り必要としないでしょう。


● 「この記事へのコメント」の上に変な文字がある

ブログ記事の最後、「この記事へのコメント」の上に、/main/blog/blog_comments/captcha 等の文字が表示される場合。(オリジナルに改造しているので、CSSが違いおきる場合あり)
CSSが抜けていますので、下記のCSSクラスを追加してください。


.display-none {
	display:none;
}

ファイルを移動した場合の注意

上記の作業のようにsingle.php他を移動した場合、バージョンアップで修正があるか確認してください。
基本的なレイアウト用ファイルですから、余り修正はないと思いますが確認は必要です。


以上、テーマ作成の個人的見解です。



[ この記事のURL ]


タグ:basercms2 , series , Theme

[ BaserCMS 2.0 テーマの制作 シリーズ記事 ]

BaserCMS 2.0 テーマの制作/42012.08.11
BaserCMS 2.0 テーマの制作/32012.08.09
BaserCMS 2.0 テーマの制作/22012.08.07
BaserCMS 2.0 テーマの制作/12012.08.06

 

ブログ記事一覧

年別アーカイブ一覧



[1]