POPSブログ

baserCMS4.0系 レスポンシブデザインのテーマ制作2

398

  Category:  basercms2016/12/25 pops 

baserCMS4.0系をローカル環境にインストールし、レスポンシブデザインでテーマを制作テストして問題点などを探ってみます。前ページの続きで主に各種「固定ページ」「ページテンプレート」「その他」の説明になります。

 

responsive

 

Apacheのlibssh2モジュールの警告が出る場合、ブログの新規追加でエラーが出る場合は、
下記ページ最終段「MySQLのsql_modeとApacheのlibssh2モジュールについて」を参照ください。

【参照】当方の記事: baserCMS4.0系をローカルにインストールする


baserCMS4.0系 レスポンシブデザインのテーマ制作2

前ページでは「レイアウト」「サイドバー」を主に説明しましたが、ここではそれ以外について述べます。

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作1

 

ページテンプレート

コンテンツページ用のテンプレートです。ページの記事は該当のページに内容を記述して保存しますが、何らかの理由で事前処理などを行いたい場合は、コードを書き込むか、default以外のテンプレートを作り指定します。


● ページ用のテンプレートは説明書では「tenplates」フォルダが正規の場所とあるが、外にある場合があった。(機能はしましたが)、日々修正されていますのでDOWNLOAD時期によっては少しの違いがあると思います。
固定ページテンプレートは「tenplates」フォルダ内、 default.php です

page-temp

 

下図は、固定ページの編集画面の例です。「固定ページテンプレート」「レイアウトテンプレート」の指定が出来ます。

page

 

1. 通常は default 指定です。(コンテンツを表示する命令がかいてあるだけ)
2. 指定フォルダにテンプレートを登録すれば、管理画面より指定出来ます。
(コンテンツ一覧/フォルダ編集/固定ページテンプレート)
3. 管理画面より、ページ編集で設定などのコードの登録可能です。(直接テンプレートに書いても良い)
4. 複雑なサイトを作るには必要かも知れませんが、通常はdefaultで間に合うでショウ。
5. ブログ、問い合わせ、は別の専用テンプレートが使用されます。


固定ページテンプレートの保存場所。(テーマ bc_sample とすれば)


bc_sample/Pages/templates/

固定ページテンプレート default は非常に簡単にできています。保存されたページ記事の出力だけになっています。

記事の出力 content() の前後に処理を追加すればその「固定ページ」の共通のレイアウトとなる訳です。勿論、エレメントと組み合わせることも可能です。オリジナルなものを作り保存して、各「固定ページ」の設定で指定すれば良い訳です。

各「固定ページ」の設定の最後に「コード」を書けますので、簡単な処理ならば「コード」の記入でも実行出来ます。


<?php
/**
 * 固定ページデフォルトテンプレート
 * 
 */
$this->BcPage->content();

同類の複数ページは「管理画面」で「フォルダ」を作り収容する

初期に生成される「サービス」の様に サービス1 サービス2 サービス3 の関連する固定ページが収納されています。
これには目次ページになる「indexページ」が有りませんが、新規に登録可能です。詳しい「ローカルナビ」目次ページを作ることが出来ます。
フォルダは仮想フォルダで実際にフォルダを作る訳では有りません。


1.「indexページ」が無い場合は、自動で「目次」ページが出力されます。
(「ローカルナビ」の登録が無くとも同様な目次が表示されます)
2.「indexページ」を登録した場合は「目次」は自動表示されません。必要なら「ローカルナビ」を登録して表示します。
3. サンプルでは「サイドバー」で目次である「ローカルナビ」を表示しています。


固定ページの「indexページ」

一応は、サイドバーに「ローカルナビ」を表示してはいますが、登録した「indexページ」に目次が必要な場合は、「ローカルナビ」を表示すれば良い。また「indexページ」をどのように利用するかは使用者の自由です。



<section class="widget"><?php $this->BcBaser->element('widget_area',array('no'=> 3)) ?></section>

作成した模擬デモ「サービスindex」ページを表示します。リンクなどは機能しません。ブラウザの「戻る」ボタンで戻ってください。

模擬デモページ (http://pops-web.com/main/baserhtml/service-index2.html) : サービスindeページの模擬出力HTML

 

ブログ

ブログ機能はプラグインにて提供されています。標準では「新着情報」として使用されていますが、ブログ名、利用目的などは自由です。複数設置も可能とありますが、現在、管理画面が開発途上であるゆえ、1つのブログ設置の条件で説明します。
baserCMSの目的は「コーポレートサイトにちょうどいいCMS」をコンセプトとして開発されている国産オープンソース CMS。
個人的な「ブログ」として利用するには少し機能がない事も事実ですが、今まで多くの要望を取り入れられてきました。あくまでも「コーポレートサイト」用途であり「WordPress」では有りません。このことを念頭におきましょう。


Mysqlバージョンの違いで「ブログ」「問い合わせ」の複数設置が出来ない場合がある

MySQLバージョンの違いで「ブログ」「メールフォーム」の「新規追加」を実行すると「エラー」に成り「複数設置」出来ません。
integerのカラムに空文字を挿入する仕様の為エラーになっているとの事。


dameda

 

1. MySQL5.6 か らsql_mode 設定が追加になり、この設定が合わない場合は、「エラー」に成ります。
(エラー: SQLSTATE[HY000]: General error: 1366.....)
2. sql_mode 設定が無い場合、sql_mode 設定をMySQLは「scripts/mysql_install_db」で自動で作ります。
3. よって、my.iniファイルの設定は sql_mode="" でなければ成りません。
4. このテストはローカルサーバー環境であるから、MySQL my.iniの変更は問題は無い。


【重要】MySQL my.ini


MySQL5.6から下記の様に設定されている
sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES

sql_mode無効にはならない、sql_modeが無いとみなし自動的に設定してしまう
#sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES

このように設定します
sql_mode=''

MySQL my.iniの変更が出来ないサーバー、またはMySQL5.6以上にSQLファイルを転送する場合など問題になります....
この辺は自己解決ください。


ブログテンプレート

ブログテンプレートには標準で次の種類があります。デザイン、目的、などによっては少し手を加えます。
ブログテンプレートはテーマの、/bc_sample/Blog/default/ に有ります。


1. archives.php :ブログarchives出力用(カテゴリー、年月日記事、などの出力)
2. index.php :ブログindexページ用(ページャー付きブログ目次)
3. posts.php :ブログ記事リスト一覧出力用(記事タイトルのみ出力)
4. recent_entries_list.php :blogPosts()リスト出力用
5. single.php :ブログ一記事出力用(ブログ一記事レイアウト用)


single.phpテンプレートの書き換え

ブログ記事を表示の際のデザインなどをHtml構成を変えながらsingle.phpを書き換えます。
レスポンシブデザインのために、多少構造を変えたりして、目的にあうレイアウトになるかCSSを設定しながら確認していきます。
レスポンシブデザインの場合は単純に構成した方がよい様です。


● ブログ記事出力、postContent($post)

index.php single.php 等での「ブログ記事出力」に利用します。パラメーター次第で色々な形態で出力出来ます。
ブログテンプレート内に記述することで、記事の本文を取得することができます。

ver4/関数リファレンス/postContent: ver4/関数リファレンス/postContent


<?php $this->Blog->postContent([$post],$moreText,$moreLink,$cut); ?>

ブログ記事出力際に「新規投稿」でキーボードより入力した「TABキー」等は除去されます。


● ブログ記事本文の中で、baserCMSの関数は使用できません。(但し、個別ページでは使用できます)

よって必要な処理がある場合は、postContent($post) 以外の所に処理を記載します。慣れないとしないと思いますが、....


● single.php記載の一例。(レスポンシブデザイン用)
1記事の全てを出力するので、postContent($post) とする。
最後にコメントの表示を行っています。コメントの利用は「管理画面」で設定できます。


<?php
/**
 * ブログ記事詳細ページ
 * 呼出箇所:ブログ記事詳細ページ
 */
$this->BcBaser->setDescription($this->Blog->getTitle() . '|' . $this->Blog->getPostContent($post, false, false, 50));
?>


<!--<h2><?php $this->Blog->title() ?></h2>-->

<h3><?php $this->BcBaser->contentsTitle() ?></h3>

<article class="post-box">
	<div class="meta">
		<p><?php $this->Blog->category($post) ?> <?php $this->Blog->postDate($post) ?> <?php $this->Blog->author($post) ?></p>
	</div>
	<p>&nbsp;</p>
	<div class="blog-post">
	<div class="eye-catch">
		<?php $this->Blog->eyeCatch($post, array('width' => 150)) ?>
	</div>
	<?php $this->Blog->postContent($post) ?>
	</div>
	<div class="meta">
		<span><?php $this->BcBaser->element('blog_tag', array('post' => $post)) ?></span>
	</div>
	<p>&nbsp;</p>
</article>
<div class="contents-navi">
	<?php $this->Blog->prevLink($post) ?> | <?php $this->Blog->nextLink($post) ?>
</div>
<p>&nbsp;</p>
<!-- /Elements/blog_related_posts.php -->
<?php $this->BcBaser->element('blog_related_posts') ?>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- /Elements/blog_comennts.php -->
<?php $this->BcBaser->element('blog_comments') ?>

コメントのデザインは各エレメントである、blog_related_posts blog_comments で行えます。コメント表示を実行しなければ、その部分は表示しません。

初期メタ部分のJS読み込み実行時に「何らかのエラー」を発生させると「コメント認証画像」を表示しない場合があります。
修正して確認する場合は、システムのキャッシュ、ブラウザのキャッシュをクリアして行ってください。


index.phpテンプレートの書き換え

ブログindexページ、目次のページでページャーを利用出来ます、ブログ概要、本文記事等の配置を自由に変更出来、テンプレートの書き方次第で大きく変わります。

pager

index.ph、parchives.php は paginations() が設定されて、ページャーボタンが生成されますので、最後に空白を作っておきますとバランスが取れます。


● index.php記載の一例。(レスポンシブデザイン用)
概要部分の出力なので、postContent($post,true,false,false) とする。


<?php
/**
 * ブログトップ
 * 呼出箇所:ブログトップ
 */
$this->BcBaser->setDescription($this->Blog->getDescription());
?>


<h2><?php $this->Blog->title() ?></h2>
<br>
<?php if ($this->Blog->descriptionExists()): ?>
<div class="blog-description"><?php $this->Blog->description() ?></div>
<br>
<?php endif ?>

<?php if (!empty($posts)): ?>
	<?php foreach ($posts as $post): ?>
<article class="post clearfix">
	<?php $this->Blog->eyeCatch($post, array('link' => false, 'width' => 100)) ?>
	<h4><?php $this->Blog->postTitle($post) ?></h4>
	<p>&nbsp;</p>
	<?php $this->Blog->postContent($post, true, false, false) ?>
	<p>&nbsp;</p>
	<div class="meta">
		<?php $this->Blog->category($post) ?>
		 
		<?php $this->Blog->postDate($post) ?>
		 
		<?php $this->Blog->author($post) ?>
		<?php $this->BcBaser->element('blog_tag', array('post' => $post)) ?>
	</div>
</article>
	<?php endforeach; ?>
<?php else: ?>
<p class="no-data">記事がありません。</p>
<?php endif; ?>

<!-- /Elements/paginations/simple.php -->
<?php $this->BcBaser->pagination('simple'); ?>
<p>&nbsp;</p>
<p>&nbsp;</p>

archives.phpテンプレートの書き換え

ブログ検索表示などの汎用テンプレートです。どのような作業の結果なのか表示が曖昧なので少し修正しました。
カテゴリ別、タグ別、年別、月別、日別、のブログ記事一覧に利用されています。

作業の種類を表示しました。ページャーボタンが生成されますので、最後に空白を作っておきますとバランスが取れます。


● archives.php記載の一例。(レスポンシブデザイン用)
概要部分の出力なので、postContent($post, false, false)


<?php
/**
 * ブログアーカイブ一覧
 * 呼出箇所:カテゴリ別ブログ記事一覧、タグ別ブログ記事一覧、年別ブログ記事一覧、月別ブログ記事一覧、日別ブログ記事一覧
 */
$this->BcBaser->setDescription($this->Blog->getTitle() . '|' . $this->BcBaser->getContentsTitle() . 'のアーカイブ一覧です。');

$target_name="";
if($this->BcBaser->isBlogCategory()){$target_name="カテゴリ";}
if($this->BcBaser->isBlogDate()){$target_name="日";}
if($this->BcBaser->isBlogMonth()){$target_name="月";}
if($this->BcBaser->isBlogYear()){$target_name="年";}
if($this->BcBaser->isBlogTag()){$target_name="タグ";}
?>

<?php if($this->BcBaser->isBlogSingle()): ?>
	<h2><?php $this->Blog->title() ?></h2>
<?php else: ?>
	<h2><?php echo $target_name.'別 検索記事一覧' ?></h2>
	<br /><p>「ブログ記事検索結果」のブログアーカイブ一覧を表示します。</p>
<?php endif; ?>

<h3><?php $this->BcBaser->contentsTitle() ?></h3>
<hr /><br />
<?php if (!empty($posts)): ?>
	<?php foreach ($posts as $post): ?>
<article class="post clearfix">
	<h4><?php $this->Blog->postTitle($post) ?></h4>
	<?php $this->Blog->eyeCatch($post, array('link' => false, 'width' => 100)) ?>
	<?php $this->Blog->postContent($post, false, false) ?>
	<div class="meta">
		<?php $this->Blog->category($post) ?>
		 
		<?php $this->Blog->postDate($post) ?>
		 
		<?php $this->Blog->author($post) ?>
		<?php $this->BcBaser->element('blog_tag', array('post' => $post)) ?>
	</div>
</article>
	<?php endforeach; ?>
<?php else: ?>
<p class="no-data">記事がありません。</p>
<?php endif; ?>

<!-- /Elements/paginations/simple.php -->
<?php $this->BcBaser->pagination('simple'); ?>
<p> </p>
<p> </p>

アイキャッチ画像

アイキャッチ画像の場合は、標準で「アップローダー」を利用するようになっています。

zudaze

1. アイキャッチ画像が利用できる所では、「ファイルを選択」ボタンがあります。
2. 「アップローダー」でルートのfilesフォルダに分類されて保存されます。
3. 手書きで「アイキャッチ画像」を利用する場合は、下記の例の様にクラスを付ければ良い。
(注意、blogPosts()のテンプレート次第では表示しない場合有り)


● ブログでのアイキャッチ画像を手書きで挿入する場合。
ブログ概要の文章の前に事前にサイト保存の画像を取り込みます。クラス名 img-eye-catch を記入します。

注意、blogPosts()のテンプレート次第では表示しない場合があります。例、TOPページ中段の「新着情報」参照。
方や、ブログindexページ「新着情報」では表示しています。(postContent()処理)


ブログ概要の先頭

<img alt="" class="img-eye-catch" src="/basercms/images/lady01m.jpg" width="150" />
文章、記事などを書く....

クラス名 img-eye-catch を与えれば回り込みをする。単にそれだけです。


TOPページ装飾画像の大きさ

zu

 

TOPページに「トップページメイン画像」大型の装飾画像を配置することが多いと思いますが、何らかのエフェクト、アニメーションなどの処理の無い場合は、画像の大きさは自由です。「無料レスポンシブHTMLテンプレートNo.028」のCSS読み込みで上図の様に適正に処理されます。
単なる中央表示ですからレスポンシブデザインで在ってもデバイス幅によって伸縮します。

通常は画像横幅の大きさで伸縮されます。但しipad等では大きく表示されてぼける場合も有ります。



<!-- image -->
<div id="mainImg">
<?php if ($this->BcBaser->isHome()): ?>
<?php $this->BcBaser->img('mainImg.jpg') ?>
<?php endif ?>
</div>

---------------------------------------------------
これでもOK

<div id="mainImg">
<?php if ($this->BcBaser->isHome()): ?>
<img src="画像までのパス" alt="" />
<?php endif ?>
</div>

横幅をブラウザ一杯に広げる

zuzu

 

画像横幅設定の%に応じて、ブラウザ一杯に「中央表示」に成ります。画像を取り替える場合はブラウザキャッシュをクリアしてください。上図、画像サイズ1260x400です。

画像は拡大される可能性が多いので、解像度の大きいきれいなjpgが必要です。表示品質はブラウザにより異なる。


<div>
<?php if ($this->BcBaser->isHome()): ?>
<img id="topImage" src="/basercms/images/main_image_2.jpg" alt="" />
<?php endif ?>
</div>


#topImage{width:98%;height:auto;text-align:center;}

marginでも中央に出来る
#topImage{width:98%;height:auto;margin:2%;}

固定ページ、ブログでの画像表示大きさ

コンテンツ内部の画像が対象です。
100x100ピクセル程度の画像はともかく、大きな画像はレスポンシブデザインの為デバイスに合わせて「伸縮」するように設計しなければなりません。(デバイスの方向により大きさは変わります)
そのために横幅は「px」では無く「%」で設定します。
下の例では横幅を98%にしています。

クリックすれば、原寸で表示するようにも可能です。

zudayo

<img class="responsive" src="/basercms/images/xxxxx.jpg" />

responsive画像のCSS


img.responsive{
width:98%;
height:auto;
margin-left:1%;
text-align:center;
}

Clickで実寸画像表示する、表示される画像が大きいとは限らない。common.js等に記述すればよい。


//案内タイトル
$('.responsive').attr('title','Click 実際画像表示');
//実際画像表示
$('.responsive').click(function(e){
	var url=$(this).attr('src');
	//window.open(url);//新規window
	window.location=url;
});

アクセスマップの表示

会社案内などでGoogleマップを利用します。以前は登録なしで利用できましたが、現在は登録を行わなければ新規には表示出来ません。

1. 新規の利用は登録してAPIキーを取得してGoogleマップを利用します。
2. 以前に利用していたサイトはそのままで表示出来るそうです。(期間は不明)
3. 利用回数が多いと課金されますので注意。(突然貧乏になる)
4. 昔、地図は手書き画像であった。(課金され無いそうです)


baserCMSアクセスマップの表示

baserCMSでは、Google登録を行い、システム管理に住所を登録してGoogleマップを表示します。
会社案内ページで次を実行します。但し、レスポンシブ対応では有りません。


600x400Googleマップを表示
<?php $this->BcBaser->googleMaps() ?>

レスポンシブ対応Googleマップ表示

地図をGoogleマップで表示します。マーカーが中央に来るように配置しますが、レスポンシブ対応では資料が乏しく構造とCSSが大変です。(四苦八苦して、ナントカ表示できた、疲れるゼ)

この「HTMLテンプレートNo.028」以外では違うかも知れません。(レスポンシブで他に良い方法があれば考えてください)


map

 

DEMO

ローカルで作った「会社案内」ページの模擬出力です。

レスポンシブ対応Googleマップ表示の模擬出力HTML (HTML5)

TOPページのDEMO

 

1. V3、登録してのAPI利用方法です。レスポンシブ用途です。(ローカルでも表示出来ます)
2. NET上の実際のマップで「該当場所をクリック」マーカーを表示すると「経緯度」を取得出来ます。
下記スクリプトの様に、.LatLng()に記入します。例 new google.maps.LatLng(35.677045,139.752267)
3. 下記の様式では、会社名、住所地番を記載できます。
4. 縮尺は zoom の値を変えてください。現在 zoom:16
5. その他の詳細はNETで調べてください。


● HTMLとJS (表示箇所に直接書きます)

出来る方はテーマのエレメントに有る、google_maps.php を書き換えても良い。


<h3>アクセスマップ</h3>

<div id="map-box">
<div id="map-wrap">
<div id="map" style="width:600%px;height:400px;">&nbsp;</div>
<script src="http://maps.google.com/maps/api/js?key=API_KEY"></script><script>
var latlng = new google.maps.LatLng(35.677045,139.752267);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
mapTypeControl: true,
scaleControl: true,
scrollwheel: false,
};
var map = new google.maps.Map(document.getElementById("map"), options);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"会社名"
});
var infowindow=new google.maps.InfoWindow({
content: '<span class="sitename">会社名</span><br><span class="address">住所地番</span>'
});
infowindow.open(map,marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
</script></div>
</div>

● CSS (レスポンシブGoogleマップ用)
#map-box、padding-bottom:0% が無いとマップの下の記事などがマップ下に競り上がりますので重要。


#map-box{
width:auto;
height:400px;
padding-bottom:0%;/*map-wrap padding補正*/
}
#map-wrap{
position:relative;
/*padding-top:40%;*/
padding-bottom:60%;
height:0;
}
#map{
position:absolute;
width:95%;
top:0;
}

「お問い合わせ」ページ

標準で「お問い合わせ」ページがあるのは大変重宝です。管理画面にて入力画面の設計など行えるのも特徴です。これらの説明は省略します。

レスポンシブデザインのCSS

レスポンシブデザインのためにCSSを変更しなければなりません。
基本的には「無料レスポンシブHTMLテンプレートNo.028」のCSSを優先的に機能させて、それに合わせて「お問い合わせ」ページCSSを変更、設定します。(「お問い合わせ」はテーブル構成です)
簡単ですが次の様にしました。

● CSS


/* table */
.data-table{width:95%}
.col-head{
padding:5px;
font-weight:bold;
border-bottom:1px solid #d5d5d5;
background-color:#eeeeee;
}
.col-input{padding-left:5px;}
.col-text{
padding:5px 5px 5px 10px;
border-bottom:1px solid #ffffff;
background-color:#f5f5f5;
}

「お問い合わせ」ページのURL

baserCMS4.0.1から「ブログ」のURLの設定が変更になりました。「お問い合わせ」も「ブログ」同様なページですから、同じ「URL表記」で無ければ「お問い合わせ」ページに行けません。(現在その説明は無い)

「お問い合わせ」最初の画面は contact/index で有るから、


baserCMS4.0.0
<a href="/basercms/contact">お問い合わせ</a>

baserCMS4.0.1は次でなければ最初のページにリンクしない
<a href="/basercms/contact/">お問い合わせ</a>

但し、「お問い合わせ」「ブログ」以外の通常の「固定ページ」等は関係有りません。従来通りのリンク表記です。


● メール設定
通常はレンタルサーバー等でドメインを取得しての運用になりますので、メールも新たに設定するはずです。
よって、管理画面の「メール設定」はメール送信文字コードを「ISO-2022-JP」にするだけでOKと思います。


● メール文のテンプレート
メール文のテンプレートは下記のmail_default.phpに有ります。内容の変更が可能です。


bc_sample/Emails/text/mail_default.php

出力HTMLのインデントなどは除去されます

PHPでのHTMLの出力は、大変見苦しいものが有ります。よってbaserCMS4の出力HTMLのインデントなどは除去されます。
よって、一部の関数を除いては全てのHTMLは左詰に整形されます。


1. レイアウトのインデントなどは除去されます。(BcAppHelperのafterLayout()関数で実行されている)
2. 「ブログ」記事のインデントなども除去されますが、実行場所は不明。
3. 但し「半角スペース」は除去されませんので、コード記述で間隔など必要な場合は使用できます。
4. 通常の利用では余り関係の無い事です。


出力HTMLにインデントをいれる

除去されてしまいますので、使用できません。必要ならば下記の様にします。


● 「半角スペース」を入れる。(キー入力できるので簡単です)
「tabスペース」て記述しているコードならエデッタなどで「半角スペース」に変換して用いる。


<div class="inner">
  <div class="panel">
   <ul>
    <li>ABC</li>
    <li>DEF</li>
   </ul>
  </div>
</div>

記事本文中の「preタグ」も整形されますので、工夫します。


記述「半角スペース」を入れる
function xxxxxx(){
 $(".xxxxx").each(function(){
  $(this)...
 });
}

表示
function xxxxxx(){
 $(".xxxxx").each(function(){
  $(this)...
 });
}

● コード記述で「tabスペース」が必要な場合は「&#9;」を記述する方法もあると思います。(非常にメンドウです)


記述
function resizeFunc(){
&#9;window_width=$(window).width();
&#9;.....
}

表示
function resizeFunc(){
	window_width=$(window).width();
	.....
}

ブログ記事をTOPページに表示するテンプレート

レスポンシブデザインのために、ブログ記事をTOPページに表示する場合に、TOPページのCSSの影響を受けるので別に専用のテンプレートを作り表示します。
「コーポレートサイト」用途では必要はないのですが、余りも要望が多いので対応したようで、大変親切なことで有ります。

各ブログテンプレートと同じ所に top_blog_view.php として保存します。blogPosts()を利用しています。TOPページのCSSの影響の無い様にCSS記述も工夫が必要になります。


top

● 呼び出し方法

固定ページである、TOPページで以下の様に記述します。固定ページの中ではbaserCMSヘルパー関数 blogPosts() を記載できます。1ページ以上の表示も可能です。


<?php $this->BcBaser->blogPosts('news',1,array('direction'=>'DESC','template' => 'top_blog_view')) ?>

top_blog_view.php


<?php
/**
 * パーツ用ブログ記事一覧2/1記事表示用です
 * TOPページ用/top_blog_view.php
 * BcBaserHelper::blogPosts( コンテンツ名, 件数 ) で呼び出す
 * (例)<?php $this->BcBaser->blogPosts('news',1,array('direction'=>'DESC','template' => 'top_blog_view')) ?>
 */
?>

<p>top_blog_view</p>

<div id="top-blog-1">
<h2 class="title"><span><?php $this->Blog->title() ?></span></h2>
<p>&nbsp;</p>
<?php if ($posts): ?>
<ul class="top-post-list">
	<?php foreach ($posts as $key => $post): ?>
		<?php
		$class = array('clearfix', 'post-' . ($key + 1));
		if ($this->BcArray->first($posts, $key)) {
			$class[] = 'first';
		} elseif ($this->BcArray->last($posts, $key)) {
			$class[] = 'last';
		}
		?>
	<li class="<?php echo implode(' ', $class) ?>">
		<p>&nbsp;</p>
		<h3 class="padding_pink"><?php $this->Blog->postTitle($post) ?></h3>
		<p class="meta"><?php $this->Blog->category($post) ?> <?php $this->Blog->postDate($post) ?> <?php $this->Blog->author($post) ?></p><br />
		<?php $this->Blog->eyeCatch($post, array('width' => 150, 'link' => false)) ?>
		<p><?php $this->Blog->postContent($post, true, false, false) ?></p>
		<?php $this->BcBaser->element('blog_tag', array('post' => $post)) ?><br />
	</li>
	<hr />
	<?php endforeach; ?>
</ul>
<?php else: ?>
<p class="no-data">記事がありません</p>
<?php endif ?>
<p>&nbsp;</p>
<p class="">新着情報INDEX: [ <a href="/basercms/news/"><strong>INDEXページに進む</strong></a> ]</p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
</div>

common.js

最初に読み込む、共通処理のJSです。script startなど人それぞれ違う名前で書いている場合も有ります。色々と処理を作っておくと便利です。CSSは下の「作成したCSS」参照。
メニューパネルは、script.jsです。common.jsに書いても良い。

● 実際画像表示
ページ中の画像は縮小されてる事が多いので「クリック」で原寸画像を表示します。必ずいる機能でもない。

● サイドaccordion
ブログなどでのサイドメニューを折りたたみます。最初は「開いて」います。

● accordion-bar
ページ内でのブロック単位で「開閉」するaccordionです設定バー、直下のDIV要素を「開閉」します。以外と便利です。


<p class="accordion-bar">common.js</p>
<div>

この中を「開閉」する

</div>

● メニューパネル
sprict.jsです。ここに纏めても良い。


common.js


//common.js
//共通処理

(function($){
	$(function(){

		//実際画像表示
		$('.responsive').attr('title','Click 実際画像表示');
		//実際画像表示
		$('.responsive').click(function(e){
			var url=$(this).attr('src');
			//window.open(url);//新規window
			window.location=url;//window開かず
		});

		//サイドaccordion
		$('.blog-widget').each(function(i){
			if(i==0){$(this).find('h2').addClass("active");}
			if(i>0){
				$(this).find('ul').hide();
			}
		});
		$('.blog-widget h2').click(function(){
			//$(this).addClass("active");//この場合設定しない
			$(this).toggleClass("active");
			if ($(this).hasClass('active')) {
 				$(this).next('ul').slideToggle(200);
			}else{
				$(this).next('ul').slideToggle(200);
			}
		});

		//.accordion-bar
		$('.accordion-bar').next('div').each(function(i){
			$(this).hide(100);
		});
		$('.accordion-bar').click(function(){
			//$(this).addClass("active");
			$(this).toggleClass("active");
			if ($(this).hasClass('active')) {
 				$(this).next('div').slideToggle(200);
			}else{
				$(this).next('div').slideToggle(200);
			}
		});

		//メニューパネル
		//$("div.panel").hide();$(".menu").click(function(){$(this).toggleClass("menuOpen").next().slideToggle();
	});

})(jQuery);

● Accordion用背景画像




作成したCSS

「HTMLテンプレートNo.028」のCSSをベースに、画面を確認しながらbaserCMSのCSSを追加しました。一部テンプレートで生成されるリストのクラス名など変更、または追加して整えてゆきます。(良い方法などあれば改変自由)
ローカル theme/bc_sample/css/ に保存した実際のCSSです。簡素に作っています、スライドショーなどのCSSをも含みます。

sample-css 注意、ブラウザによっては文字化けします。


【参照】当方の記事: baserCMS4.0系をローカルにインストールする

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作1


 

次ページで「TOPページ画像のエフェクト」について述べる。

 


[ この記事のURL ]


タグ:cakePHP , CMS , basercms4

 

ブログ記事一覧

年別アーカイブ一覧



[1]