POPSブログ

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

397

  Category:  basercms2016/12/24 pops 

「無料レスポンシブHTMLテンプレート」を利用して「baserCMSテーマ」を制作テストしますが、結構簡単に出来上がります。
最新のVertrigoServをローカル環境にインストールしてテストしました。主にレイアウトとサイドバーの説明になります。

 

responsive

 

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

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


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

旧式のブラウザが淘汰され、iphone ipad などデバイスが多用化され、モバイルがiphoneに切り替えられている事情もあって、最近はレスポンシブデザインが急速に普及しています。(コンテンツによってはiphoneでは見づらい面はあります)
googleの「レスポンシブデザインのサイトを優先させる」とのアナウンスも影響しているとは思いますが...
ともあれ、「レスポンシブデザイン」にして見ます。


ページ容量の都合で、何ページかに分割して説明します。このページでは主にレイアウトについて述べます。


1. 「無料ホームページテンプレート」を利用します。
(TOPページを「HTMLテンプレートNo.028」と同じ」にします)
2. ローカルにbaserCMS4.0.1をインストールしてのテストです。
3. 「HTMLテンプレートNo.028」のCSSでデザインしてブログもそれに似合うようにCSSを追加。
4. basercms層に展開させた。直接ルートに展開も可能です。
5. レスポンシブデザインの検証などには、検証サービスを利用しました。


baserCMS4.0.1の変更点

baserCMS4系のメンテナンスリリースであるbaserCMS4.0.1がリリースされましたが、baserCMS4.0.0と少し違いがありますので、下記「リリースノート」を良く確認ください。

【リリースノート】: baserCMS 4.0.1 リリースノート

「ブログ」にアクセスする際のURLの書き方に注意が必要です。「問い合わせ」も同様のようです。(特にメニューでのリンクの際に注意が必要)


無料ホームページテンプレート

レスポンシブデザインについては、商用利用可能な無料WordPressテーマ・ホームページテンプレートを配布している下記サイトの「HTMLテンプレート」を利用して、baserCMSテーマに書き換えました。テーマ変更の過程などは追って説明します。

利用に関しては「利用規定」に従ってください。(リンクを貼るだけで自由に使えます、選り取りミドリ赤白黄色)

【参照】: 無料ホームページテンプレート.com


f-tpl

 

取り合えず「無料レスポンシブHTMLテンプレートNo.028」を利用してみます。http://f-tpl.com/sample/tpl_028/

WordPressテーマであれ、ナンであれ出力するhtmlおよびCSSがあれば、多少時間はかかるが再現して「baserCMSテーマ」に転用は可能です。


DEMO(模擬出力)

PHPバージョンの違いで実際サイトにはインストール出来ませんのでローカルの結果を表示します。

ローカルで作った各ページの模擬出力です。デザインなどを確認できます。表示の「TOPページ」よりこちらに戻れます。

TOPページ他の模擬出力HTML (HTML5)、メインメニューと一部が機能します。

TOPページのDEMO


 

テーマ制作の実際

暫定的に大まかな配置を、「レイアウト」で決めて細部を「テンプレート」「サイドバー」などで表示します。
テーマはbc_sampleフォルダの「baserCMSサンプルテーマ(bc_sample)」を書き換えて利用します。初期状態ではbc_sampleがテーマに指定されています。


「無料レスポンシブHTMLテンプレート」の特徴

PCとスマートフォンがレスポンシブになるようにCSS設定されていますので、特別にbaserCMSでスマートフォン向けのレイアウトなど必要としません。大まかな流れは...


1.「無料レスポンシブHTMLテンプレート」のCSS設定を優先させて、baserCMSコンテンツなどのCSSを設定。
2. baserCMSスマートフォン設定を「サブサイト管理」で「非表示」にする。
3. モバイル向けはレイアウトで「対応していません」の表示をして、除外する。


baserCMSテーマの改造

baserCMSを利用するにが、「テーマ」必要ですから初期設定の「bc_sample」を書き換えてゆくのが効率的と思います。

大まかに図示すれば、レイアウトで下記の様に分割されます。中をエレメント、コンテンツなどで埋めますが、すべてHtmlを書く作業をしているだけです。


zu

 

1.「レイアウト」は default.php を書き換えます。
2. meta および大まかなhtml構造を設定します。ページの条件により構造を変更可能です。
(これらの判定などはユーザーが行います、初めての方はかなり戸惑います)
3. CSS JS を読み込みますが直接htmlで書くことも可能です。(phpすなわちhtmlを書くことですから...)
4. サイドバーはgetHere()で該当ページを判定して表示内容を違わせます。isHome()はTOPページの判定に用います。(判定などの方法はユーザーが考えます、参考例などは少ない)
5. 今回メインメニューは手書きで書きます。global_menu.phpで設定も可能です。
6. TOPページの画像などの設定は自由です。(JSで動かすことも可能です、模擬デモ2.3参照)
7. 各ページは「レスポンシブデザイン」に合う様にCSSを書き換えています。
(「無料レスポンシブHTMLテンプレートNo.028」CSSを優先させて、それに追加する)


模擬デモ1、TOPページ

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

模擬デモページ (http://pops-web.com/main/baserhtml/top2.html) : TOPページの模擬出力HTML

レスポンシブWebデザインの表示確認ツールで見た場合 : 確認ツールで見た場合の表示

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。


 

demo

 

模擬デモ2、画像フエード付きTOPページ

詳細については、後日に別ページで説明します。

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

模擬デモページ (http://pops-web.com/main/baserhtml/top3.html) : TOPページの模擬出力HTML

 

模擬デモ3、画像Transit付きTOPページ

詳細については、後日に別ページで説明します。

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

模擬デモページ (http://pops-web.com/main/baserhtml/top4.html) : TOPページの模擬出力HTML

 

構造

baserCMS4.0系インストール後の初期状態の構造は大体次の図の様になります。(一部略しています)
レイアウト、テンプレート、エレメントなどを目的のデザインにの構造に変更する作業を行います。

webrootフォルダが隠れたのでスッキリして、以前より構造など判り易く作業がはかどり快適です。


[説明図] インストール後、初期状態の構造 /「baserCMSサンプルテーマ(bc_sample)」利用

重要、以下説明などは、サブフォルダ「basercms」層に展開しての説明になります。

zuzu

● baserCMS4.0.0では初期状態で、各mobileフォルダが生成されていたが、baserCMS4.0.1ではmobileフォルダが生成されませんので注意。今般スマートフォンの普及が著しいのでmobile対応が必要かは考えものです。
● ページ用のテンプレートは説明書ではtenplatesフォルダが正規の場所とあるが、外にある場合があった。(機能はしましたが)、日々修正されていますのでDOWNLOAD時期によっては少しの違いがあると思います。


レイアウト

最初は「レイアウト」を行います。通常は自動的に default.php が実行されます。(指定も可能になります)

●「無料レスポンシブHTMLテンプレート」tpl_028/index.htmlの構造を default.php に書き換えます。
● コンテンツ部分は「TOPページ」に保存します。
● サイドバー部分はエレメントに書き換えます。

●「無料レスポンシブHTMLテンプレートの、CSS JS 画像などは「テーマ」内の各フォルダに移動させます。
はじめ、baserCMSのCSSは使用しません。必要な箇所は表示を確認しながら追加して行きます。


default.php

レイアウト default

「tabスペース」が入っていますが、実際のHTML出力は全て左詰めになります。
baserCMS4.0.1からの「ブログ」および「お問い合わせ」indexページへのリンク表記に注意ください。


<?php
/**
 * レイアウト
 * 呼出箇所:全ページ
 */
?>
<?php $this->BcBaser->docType('html5') ?>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<?php $this->BcBaser->title() ?>
<meta name="keywords" content="kokekokkou">
<meta name="description" content="houhokekyo">
<link href="/basercms/images/favicon.ico" type="image/x-icon" rel="icon" />
<link href="http://localhost/basercms/news/index.rss" type="application/rss+xml" rel="alternate" title="ニュースRSS 2.0" />
<!--[if lt IE 9]>
<script src="/basercms/theme/bc_sample/js/html5.js"></script>
<script src="/basercms/theme/bc_sample/js/css3-mediaqueries.js"></script>
<![endif]-->

<?php $this->BcBaser->css(array(
	'style'
)); ?>
<?php $this->BcBaser->js(array(
	'jquery-1.11.3.min',
	'script',
	'common'
)); ?>
<?php $this->BcBaser->scripts(); ?>

</head>
<body id="<?php $this->BcBaser->contentsName() ?>">
<?php
$blogs=false;
$active=[];
$p=$this->BcBaser->getHere();
if ($this->BcBaser->isHome()) {
	$no="2";$active[0]='active';
}
if (!$this->BcBaser->isHome()) {
	$no="2";
	if (ereg('/news',$p)) {$no="";$blogs=true;$active[1]='active';}
	if (ereg('/service',$p)) {$no="1";$active[2]='active';}
	if (ereg('/sample',$p)) {$no="2";$active[3]='active';}
	if (ereg('/about',$p)) {$no="2";$active[4]='active';}
	if (ereg('/contact',$p)) {$no="3";$active[5]='active';}
	if (ereg('/search_indices',$p)) {$no="3";$active[6]='active';}
}
?>

<div id="Page">

<!-- /Elements/header.php -->
<?php $this->BcBaser->header() ?>

<nav id="mainNav">
 <div class="inner">
  <a class="menu" id="menu"><span>MENU</span></a>
  <div class="panel">
   <ul>
    <li class="<?php echo $active[0] ?>"><a href="/basercms/"><strong>トップページ</strong><span>Top</span></a></li>
    <li class="<?php echo $active[1] ?>"><a href="/basercms/news/"><strong>新着情報</strong><span>News</span></a></li>
    <li class="<?php echo $active[2] ?>">
     <a href="/basercms/service/"><strong>サービス</strong><span>Service</span></a>
     <ul class="sub-menu">
      <li><a href="/basercms/service/service1">サービス1</a></li>
      <li><a href="/basercms/service/service2">サービス2</a></li>
      <li><a href="/basercms/service/service3">サービス3</a></li>
     </ul>
    </li>
    <li class="<?php echo $active[3] ?>"><a href="/basercms/sample"><strong>サンプル</strong><span>Sample</span></a></li>
    <li class="<?php echo $active[4] ?>"><a href="/basercms/about"><strong>会社案内</strong><span>About</span></a></li>
    <li class="<?php echo $active[5] ?>"><a href="/basercms/contact/"><strong>お問い合わせ</strong><span>Contact</span></a></li>
   </ul>
  </div>
 </div>
</nav>

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

<div id="wrapper" class="clearfix">
	<?php if (!$this->BcBaser->isHome()): ?>
		<!-- /Elements/crumbs.php -->
		<div class="crumbsBox"><?php $this->BcBaser->crumbsList(); ?></div>
	<?php endif ?>
	<div id="content" class="clearfix">
		<?php if ($blogs): ?>
			<div id="ContentsBody" class="blogs-body">
		<?php else: ?>
			<div id="ContentsBody" class="c-body"><!-- contents-body -->
		<?php endif ?>
			<!--<p id="body-wide">WIDTH</p>-->
			<?php $this->BcBaser->flash() ?>
			<?php $this->BcBaser->content() ?><br><hr />
			<!-- /Elements/contents_navi.php -->
			<?php $this->BcBaser->contentsNavi() ?><br>
		</div><!-- / ContentsBody -->
	</div><!-- / content -->

	<aside id="sidebar" class="side">
	<?php
		if ($this->BcBaser->isHome()) {
			$this->BcBaser->element('sidebar2');
		}
		if (!$this->BcBaser->isHome()) {
			$this->BcBaser->element('sidebar'.$no);
		}
	?>
	</aside>

</div><!-- / wrapper -->

<!-- /Elements/footer.php -->
<?php $this->BcBaser->footer() ?><!-- / footer -->

</div><!-- / Page -->

<?php $this->BcBaser->func() ?>

</body>
</html>


初期メタ部分のJS読み込み実行時に「何らかのエラー」を発生させると「コメント認証画像」を表示しない場合があります。


<?php $this->BcBaser->scripts() ?>


コンテンツ表記部分の構造を少し修正

tpl_028/index.htmlの構造ではコンテンツ収納部分が次のようなっていますが、内部の間隔が狂うために、修正して合わせた。


<div id="wrapper">
	<div id="content">
		<section>
		ページの記事
		</section>
	</div>
	<!-- / content -->
	<aside id="sidebar">
	サイドバー明細
	</aside>
</div>
<!-- / wrapper -->

以下の構造になるように変更。ブログは「HTMLテンプレート」の影響を受けない独自のスタイルになるように工夫した。


blogの場合
	<div id="content" class="clearfix">
		<div id="ContentsBody" class="blogs-body">
		</div>
	</div>
-----------------------------------------------
blog以外の場合
	<div id="content" class="clearfix">
		<div id="ContentsBody" class="c-body">
		</div>
	</div>

他に方法などあればこの辺の設計は自由です。レスポンシブに成れば良いだけです。


bodyのIDとPage

bodyのIDは contentsName() で入れます。DivタグのPageは無くとも構成は出来ます。
Pageでラップしているのは、baserCMSの例でこの構成が多いからクセになっているだけです。


<body id="Home">
<div id="Page">

	HTMLテンプレートの構造を挿入

</div>
</body>

bodyのID、contentsName()の値は、以下の通りで、CSSの切り替えなどに活用可能です。(使ったことは有りませんが...)
通常の固定ページはDefaultになるようです。


TOPページ		Home
サービスページ		Service
新着情報ページ		News
サンプルページ		Default
会社案内ページ		Default
コンタクトページ	Contact
カテゴリーなど		News
検索			SearchIndices

CSS JS 画像の読み込み

JS CSSの読み込みと画像の表示には専用の関数が用意されているのでそちらを使用しても良いし、判り難い場合は直接Html形式で書いても良い。(正しいパスにファイルがあれば正常に読み込み、あるいは表示します)
JS CSS IMGの保管場所によってパスの設定が異なるので注意ください。特にCSSの背景画像の場合は判り難い。
ここでは、テーマ「bc_sample」内に各収容フォルダがあるとします(初期状態)。

先頭にスラッシュをつけた場合は、/app/webroot からのパスとなる。


CSS

css()関数で読み込めます。CSSはJSより先に読み込みます。拡張子は省略します。CSSフォルダはテーマ内直下にある。


css()関数、複数形式
<?php $this->BcBaser->css(array(
	'style',
	'style2'
)); ?>

Html形式
<link type="text/css" rel="stylesheet" href="/basercms/theme/bc_sample/css/style.css"/>
/を略した場合、マチガイ易い
<link type="text/css" rel="stylesheet" href="theme/bc_sample/css/style.css"/>

実際使用したCSSはこのページ最終段「作成したCSS」参照。


● CSS bacground:url() の指定方法
以外と難しいのが、背景画像の指定方法ですが、テーマ内 img フォルダに画像があれば下記の様になります。


background:url(../img/xxx.jpg);

/basercms/.. で記述すれば
background:url(/basercms/theme/bc_sample/img/xxx.jpg);

/basercms 直下、imagesフォルダに画像があれば
background:url(/basercms/images/xxx.jpg);

JS

js()関数で読み込めます。拡張子は省略します。JSフォルダはテーマ内直下にある。


js()関数、複数形式
<?php $this->BcBaser->js(array(
	'jquery-1.11.3.min',
	'xxx'
)); ?>

Html形式
<script type="text/javascript" src="/basercms/theme/bc_sample/js/jquery-1.11.3.min.js"></script>
/を略した場合、マチガイ易い
<script type="text/javascript" src="theme/bc_sample/js/jquery-1.11.3.min.js"></script>

IMG

img()関数で読み込めます。拡張子は省略出来ません。imgフォルダはテーマ内直下にある。


img()関数、複数形式も可能です
<?php $this->BcBaser->img('mainImg.jpg') ?>

Html形式
<img src="/basercms/theme/bc_sample/img/mainImg.jpg" />
/を略した場合、マチガイ易い
<img src="theme/bc_sample/img/mainImg.jpg" />

テーマ以外の場所にファイルを保存してアクセスする

ルート直下にも、css js img フォルダがありますのでそちらを利用しても良い。但しfilseフォルダはアップローダーを使用した場合の保管場所となります。
仮にbasercms直下に「images」フォルダを作り画像を管理するとすれば、

画像表示例


Html形式ならば、下記の様にで画像にアクセスできます
背景画像の記述も同じに書けます

/basercms/images/xxx.jpg の利用が判り易い

<img src="/basercms/images/xxx.jpg" />

background:url('/basercms/images/xxx.jpg');

---------------------------------------

img()関数ならば
<?php $this->BcBaser->img('../images/mainImg.jpg') ?>
/をつけた場合は
<?php $this->BcBaser->img('/../basecms/images/mainImg.jpg') ?>

「テーマ」で使用する以外のファイル(画像、JS)は、この様に一括管理したほうが便利である。但し「アップローダー」プラグイン以外の手段でサイトアップしなければならない。


htmlファイルの例


直下にある場合
<a href="/basercms/subpage.html">リンク</a>
直下の「html」フォルダにある場合
<a href="/basercms/html/subpage.html">リンク</a>

favicon表示

faviconをicon()で出力する場合は、root直下、ここでは/basercms直下にfavicon.icoが存在しなければならない様です。
初期時、basercms直下にBaserCMSのfavicon.icoがありますので、使用するアイコンを上書きします。


faviconタグの出力、/basercms直下にfavicon.icoがあること
<?php $this->BcBaser->icon() ?>

こちらの場合は画像の場所を指定出来る
<link href="/basercms/images/favicon.ico" type="image/x-icon" rel="icon" />

RSS

RSS表示は次の様にすれば「ブログ」indexのRSSを設定できるようです。(ここでは localhost に書いています)

実際にWebで使用する場合は「ドメイン」を記述ください。


<link href="http://localhost/basercms/news/index.rss" type="application/rss+xml" rel="alternate" title="ニュースRSS 2.0" />

Google Analytics トラッキングコードの生成

ほとんどのサイトではGoogle Analyticsを利用してアクセス状態を把握している事と思います。baserCMSでは、Analyticsの「ID」があれば簡単にコードを生成できます。パラメータの引渡しも出来るが詳細は知りません。

事前にGoogle AnalyticsのトラッキングIDを取得し、システム管理で登録しておきます(システム管理でのトラッキングIDの登録が無い場合はコードは生成されない仕組みになっています)。
レイアウトのメタ部分などで、googleAnalytics()関数を記述します。

但し、ローカルで使用すると、実際のサイトに「不要なアクセス」がカウントされますので、baserCMSをサイトアップして各ページなどの充分な検証を行い、最終的にOKの時点でgoogleAnalytics()関数を有効にすべきと思います。



<?php $this->BcBaser->googleAnalytics() ?>

単なるJSスクリプトですから、直接レイアウトにJSコードを記述してもOKです。

複雑なanalytics設定を行う方はテーマのエレメントに有る、google_analytics.php を書き換えても良い。

途中でコード変更のある場合 googleAnalytics() の利用で一括変更できる利便性はある。


 

[説明図] サブサイト管理、サイドバー

zuzuzu

 

サブサイト管理

baserCMSでは、モバイル、スマートフォンを判定して自動的にそれぞれの画面、機能に合ったレイアウト、テンプレートを設計表示できるようになっています。

モバイル、スマートフォンの管理は「サブサイト管理」で行うようになりました。初期時はモバイル、スマートフォンも表示する設定になっています。管理者ダッシュボード左側に利用状況が表示されますので便利です。


1. 「無料レスポンシブHTMLテンプレートNo.028」はスマートフォンにも対応しています。
(baserCMSスマートフォン用にレイアウト、テンプレートなど機能させる必要は有りません)
2. よって、baserCMSスマートフォンの機能を利用しませんので、「サブサイト管理」で「非表示」にしておきます。
他の画面でも「非表示」切り替えなどありますが、機能しませんので必ず「サブサイト管理」で行ってください。
3. モバイルの場合、「サブサイト管理」で非表示にしますと、PC用のコンテンツを表示しますが、画面が小さく実際には大変見苦しい。よって、「サブサイト管理」で表示にし、レイアウトで「モバイル非対応」の文字を表示させます。
(つまり、今回は強制的に何も表示させない手段を講じます)
4. モバイル用にモバイル専用コンテンツを作り、表示させるのは自由です。


ウィジェットエリアとサイドバー

ウィジェットエリアを追加してサイドバーエレメントで取り込み表示します。
複数のコンテンツページの目次表示のために、ページサイドバーを作り「ローカルナビ」を設定します。

PHPですから、エレメントを作ることは、Htmlを記入する作業です。


1. ウィジェット管理でウィジェットを追加します。番号は覚えておきます。
2. ドラッグで、好みのパーツを選定配置できます。後で追加編集も出来ます。
3. ここでは、PHP、TEXT等は原則、サイドバーエレメントなどに直接記述して保存します。
4. サイドバー(エレメント)などに事前に登録したウィジェットを読み込み表示します。
5. サイドバー(エレメント)には、別のエレメントも読み込めます。(エレメントにまとめておけば一括して変更などが出来る利点がある)
6. エレメントの読み込みはサイドバーに限ったものでは有りません。(どこででも行えます)
7. テンプレートもエレメントですから、さほど区別はいらないと思います。


● ウィジェットエリアの呼び出し
ウィジェットエリア管理で作った「ウィジェットエリア」の番号でエレメント等から呼び出せば、そのリストなどを表示出来ます。
「ウィジェット」によっては「ページ」次第で呼び出しても機能しない場合も有ります。

下記「ウィジェット」は「ローカルナビ」のため、複数固定ページ登録のページで使用します。(「サービス」など)


サイドバーなどから登録の「ウィジェットエリア」を呼び出し表示させます

<?php $this->BcBaser->element('widget_area',array('no'=> 3)) ?>

● elementの呼び出し
サイドバーの中から、別のelementを呼び出します。表示したいものをelementに区分けしておくと便利な場合も有ります。


<?php $this->BcBaser->element('side_menu2') ?>

エレメントの例、ここではhtmlのリストを書いてある。どのサイドバーからでも呼び出せる。当然、baserCMSの関数も処理出来ます。エレメントを更新すれば使用箇所表示を一括して変更出来る利便性がある。


<?php
/**
 * サイドMENU2
 *
 * BcBaserHelper::element() で呼び出す
 * (例)<?php $this->BcBaser->element('side_menu2') ?>
 */
?>
<section class="widget">
	<h3><span>新講座を開講しました</span></h3>
	<ul>
		<li><a href="/basercms/html/subpage.html">新サービスを開始しました</a></li>
		<li><a href="/basercms/html/subpage.html">環境への取り組みについて</a></li>
		<li><a href="/basercms/html/subpage.html">新講座を開講しました</a></li>
		<li><a href="/basercms/html/subpage.html">リニューアルを開始</a></li>
		<li><a href="/basercms/html/subpage.html">新講座を開始</a></li>
		<li><a href="/basercms/html/subpage.html">環境への取り組みについて</a></li>
	</ul>
</section>

● 簡易形の「サイト内検索」
勝手に小さくしたもので、一応機能するようです。


<div class="widget widget-search-box widget-search-box-2">
<h2>サイト内検索</h2>
<form action="/basercms/search_indices/search/num:10" novalidate="novalidate" id="SearchIndexSearchForm" method="get" accept-charset="utf-8">
<input name="q" type="text" id="SearchIndexQ" class="search-box"/><input type="hidden" name="s" value="0" id="SearchIndexS"/><input class="submit_button" type="submit" value="検索"/></form>
</div>

ローカルナビ用サイドバー

「サービス」の様に沢山の「固定ページ」がある場合に「ローカルナビ」(そのページの目次)を表示すれば便利です。
事前に「ウィジェットエリア」に登録しておいて使用します。


<?php
/**
 * サイドバー1/ローカルナビ用
 *
 * BcBaserHelper::element() で呼び出す
 * (例)<?php $this->BcBaser->element('sidebar1') ?>
 */
?>

<?php $this->BcBaser->element('side_menu2') ?>
<section class="widget">
<?php $this->BcBaser->element('widget_area',array('no'=> 3)) ?>
</section>
<div class="widget widget-search-box widget-search-box-2">
<h2>サイト内検索</h2>
<form action="/basercms/search_indices/search/num:10" novalidate="novalidate" id="SearchIndexSearchForm" method="get" accept-charset="utf-8">
<input name="q" type="text" id="SearchIndexQ" class="search-box"/><input type="hidden" name="s" value="0" id="SearchIndexS"/><input class="submit_button" type="submit" value="検索"/></form>
</div>
<br>
<section class="widget">
	<!-- image -->
	<?php $this->BcBaser->img('baser01.gif') ?>
</section>
<p>sidebar1</p>

ブログページ用サイドバー

ブログページなので「ウィジェットエリア」で作った「2番ブログサイドバー」が機能します。
上部は手書きのリンクを書いているが、上の例の様にエレメントでも処理できる。これらの構成は自由である。
(将来、どのページでも使えるようになるかは不明)


<?php
/**
 * サイドバー
 *
 * BcBaserHelper::element() で呼び出す
 * (例)<?php $this->BcBaser->element('sidebar') ?>
 */
?>
<section class="widget">
	<h3><span>新講座を開講しました</span></h3>
	<ul>
		<li><a href="subpage.html">新サービスを開始しました</a></li>
		<li><a href="subpage.html">環境への取り組みについて</a></li>
		<li><a href="subpage.html">新講座を開講しました</a></li>
		<li><a href="subpage.html">リニューアルを開始</a></li>
		<li><a href="subpage.html">新講座を開始</a></li>
		<li><a href="subpage.html">環境への取り組みについて</a></li>
	</ul>
</section>

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

<section class="widget">
<p> </p>
<h3><span>タグクラウド</span></h3>
<ul id="tag_cloud" class="tag-cloud">
<?php $this->PostTags->getTagList() ?>
</ul>
</section>
<p>sidebar</p>


「問い合わせ」ページ用サイドバー

「問い合わせ」ページは別段サイドバーを必要としないが、バランスを保つために画像のみ表示しています。


<?php
/**
 * サイドバー3
 *
 * BcBaserHelper::element() で呼び出す
 * (例)<?php $this->BcBaser->element('sidebar') ?>
 */
?>
<section class="widget">
	<!-- image -->
	<?php $this->BcBaser->img('baser01.gif') ?>
</section>
<p>sidebar3</p>

TOPページ用サイドバー

テキトウなものを表示しているだけですが、「ブログ」ページ以外で「ウィジェットエリア」で作った「最近の投稿」は表示出来ません(以前と仕様が違うので、今後どうなるか不明)ので blogPosts() で表示しました。
「タグクラウド」は単なる「タグ一覧」ですが、まだサポートされていませんから、「テーマヘルパー」で処理して表示しています。
TOPに何を表示するかはブログの利用目的によって違ってくると思います。


<?php
/**
 * サイドバー2
 *
 * BcBaserHelper::element() で呼び出す
 * (例)<?php $this->BcBaser->element('sidebar2') ?>
 */
?>
<?php $this->BcBaser->element('side_menu1') ?>
<?php $this->BcBaser->element('side_menu2') ?>

<div class="widget widget-search-box widget-search-box-2">
<h2>サイト内検索</h2>
<form action="/basercms/search_indices/search/num:10" novalidate="novalidate" id="SearchIndexSearchForm" method="get" accept-charset="utf-8">
<input name="q" type="text" id="SearchIndexQ" class="search-box"/><input type="hidden" name="s" value="0" id="SearchIndexS"/><input class="submit_button" type="submit" value="検索"/></form>
</div>
<br>

<section class="widget blog-entries-list">
<h3><span>最近の投稿</span></h3>
<?php $this->BcBaser->blogPosts('news',10,array('direction'=>'DESC','template'=>'recent_entries_list')) ?>
</section>
<br>

<section class="widget">
<h3><span>タグクラウド</span></h3>
<ul id="tag_cloud" class="tag-cloud">
<?php $this->PostTags->getTagList() ?>
</ul>
</section>
<p>sidebar2</p>

blogPosts

● blogPosts()で「最近の投稿」リスト表示
blogPosts()は使い道多く、条件を変え「テンプレート」を指定して処理します。(bc_sample/Blog/default/recent_entries_list.php)
ここではサイドバーに合う様にクラス名を整形して「リンク付きのタイトル」を表示しています。
利用の際は「ブログ名」を指定して下さい。


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

bc_sample/Blog/default/にあるのは「ブログテンプレート」ですから、どの様な処理を行っているかを知ると「テンプレート」を作る際の参考になります。


● blogPosts()で「新着情報」表示
「テンプレート」指定なしの場合は posts.php が使用されます。(bc_sample/Blog/default/posts.php)
ここでは「タイトル」と「記事の一部」を表示しています。「アイキャッチ画像」があれば画像も表示します。


<h2 class="title"><span>新着情報</span></h2>
<?php $this->BcBaser->blogPosts('news', 5) ?>

これで、TOPページに「ブログ」表示は可能とは思いますが、レスポンシブのため表示が乱れたりして上手く行かないと思います。


● 「テーマヘルパー」で「タグ一覧」表示
baserCMSのヘルパーも利用しますので、「テーマヘルパー」で処理します(bc_sample/Helper)。
方法は幾つかありますが一例を挙げますと、

注意。aリンクを作る場合、BcBaserHtmlで文字間のスペースが除去されるので、BcHtmlで処理しました。
ブログ名などは手書きで修正ください。(どの固定ページのサイドバーでも機能します)


初期のブログ名は news です
$url='/ブログ名/archives/tag/'....


<?php
/**
 * PostTagsHelper
 * テーマヘルパー タグ一覧表示
 *
 * 利用例:<?php $this->PostTags->getTagList() ?>
 */

class PostTagsHelper extends AppHelper {

	//BcBaserヘルパーなどを使用できるようにする
	var $helpers=array('BcBaser','BcForm','BcHtml','Javascript');

	public function getTagList() {

		$tagModel=ClassRegistry::init('Blog.BlogTag');
		$options=$tagModel->find('all');
		$name="";

		if($options){
			$name="";
			$spter=" ";//区切り文字(スペース)BcHtmlで処理
			foreach($options as $option) {
				$base=$option['BlogTag']['name'];
				$url='/news/archives/tag/'.$base;
				$baselink=$this->BcHtml->link($base,$url);
				$name .= $baselink.$spter;
			}
			$name = rtrim($name,$spter);//最後の区切り文字を除去
			echo $name;
		}else{
			echo 'NONE';
		}

	}

}

無料レスポンシブHTMLテンプレートの 画像 JS CSS を移動する

「無料レスポンシブHTMLテンプレート」の部材を「baserCMSサンプルテーマ(bc_sample)」の img js css に移動させます。

「無料レスポンシブHTMLテンプレート」のCSSと取替えこちらを基本として、表示状態を見ながら各ページ、ブログなどのCSSを追加して整えます。


● 「テーマ」に関するものはテーマに移動する。
● ページなどに関わる画像は、他の階層に保存しても構いません。
● basercms階層直下、既存の css img js フォルダも利用できます。
● アップローダーの画像はbasercms階層直下、filesに収容されます。

初期時、ブログの犬猫画像は bc_sample/filse フォルダにありますが使用しません。


basercms階層直下に「images」フォルダを置いて画像を収容すれば、下記の様にアクセスできる。
js css 各種ファイルなども同様に成ります。
特にcssのbackground画像の場合は書き方が単純で重宝する。


IMG
<img src="/basercms/images/xxx.jpg" />

CSS背景画像
background-image:url("/basercms/images/xxx.jpg");

html階層のxxx.htmlにリンク
<a href="/basercms/html/xxx.html">sub-page</a>

メインメニュー

グローバルメニューと言えるが、独自デザインを保持するために「HTMLテンプレート」のhtmlを使用して手書きで書いた。
getHere()を利用して「activeクラス」設定を追加した。
下記「baserCMSグローバルメニュー」と違い自動出力でないためページなどの追加がある場合は手書きで修正しなければならない。手書きの強みは構造表示順序など自由に出来ることに有る。

「無料レスポンシブHTMLテンプレート」の「メインメニュー」をBaserCMSのページと合わせたもので、手書きで書いています。
アコーディオンの開閉は、script.jsで行っています。

baserCMS4.0.1から「お問い合わせ」「ブログ」のURLの設定が変更になりましたので注意ください。


active判定はサイドバー分岐の判定も兼ねています。$blogsはブログページの判定です。


<?php
$blogs=false;
$active=[];
$p=$this->BcBaser->getHere();
if ($this->BcBaser->isHome()) {
	$no="2";$active[0]='active';
}
if (!$this->BcBaser->isHome()) {
	$no="2";
	if (ereg('/news',$p)) {$no="";$blogs=true;$active[1]='active';}
	if (ereg('/service',$p)) {$no="1";$active[2]='active';}
	if (ereg('/sample',$p)) {$no="2";$active[3]='active';}
	if (ereg('/about',$p)) {$no="2";$active[4]='active';}
	if (ereg('/contact',$p)) {$no="3";$active[5]='active';}
	if (ereg('/search_indices',$p)) {$no="3";$active[6]='active';}
}
?>

手書きメニュー本体

該当ページの場合に「activeクラス」にしているだけ。JS処理でないのでメニュー表示でCSSが有効に成るから早い。


<nav id="mainNav">
 <div class="inner">
  <a class="menu" id="menu"><span>MENU</span></a>
  <div class="panel">
   <ul>
    <li class="<?php echo $active[0] ?>"><a href="/basercms/"><strong>トップページ</strong><span>Top</span></a></li>
    <li class="<?php echo $active[1] ?>"><a href="/basercms/news/"><strong>新着情報</strong><span>News</span></a></li>
    <li class="<?php echo $active[2] ?>">
     <a href="/basercms/service/"><strong>サービス</strong><span>Service</span></a>
     <ul class="sub-menu">
      <li><a href="/basercms/service/service1">サービス1</a></li>
      <li><a href="/basercms/service/service2">サービス2</a></li>
      <li><a href="/basercms/service/service3">サービス3</a></li>
     </ul>
    </li>
    <li class="<?php echo $active[3] ?>"><a href="/basercms/sample"><strong>サンプル</strong><span>Sample</span></a></li>
    <li class="<?php echo $active[4] ?>"><a href="/basercms/about"><strong>会社案内</strong><span>About</span></a></li>
    <li class="<?php echo $active[5] ?>"><a href="/basercms/contact/"><strong>お問い合わせ</strong><span>Contact</span></a></li>
   </ul>
  </div>
 </div>
</nav>

アコーディオンの開閉 script.js の内容です common.jsに書いても良い。


$("div.panel").hide();$(".menu").click(function(){$(this).toggleClass("menuOpen").next().slideToggle();

baserCMSグローバルメニュー

「baserCMSグローバルメニュー」を表示します。サービス1、サービス2、等表示する階層(子要素)も指定出来ます。
但し順序はコンテンツページ登録順に成ります(baserCMS4.0.0)。(手書きで書かれる場合が多く、余り利用されないようです)

baserCMS4.0.1の途中で直っていますので、管理画面のツリーと同じ構造になります。(12/15日確認済)


<nav><?php $this->BcBaser->globalMenu(2) ?></nav>

グローバルメニュー用のテンプレートglobal_menu.phpの出力htmlが汚い。左詰めで少し修正したが完全ではない。
何時の日か直るでショウ。


<?php
/**
 * [PUBLISH] サイトマップ、少し修正
 */

/**
 * カテゴリの階層構造を表現する為、再帰呼び出しを行う
 * $this->BcBaser->contentsMenu() で呼び出す
 */

if (!isset($level)) {
	$level = 1;
}
if(!isset($currentId)) {
	$currentId = null;
}
?>

<?php if (isset($tree)): ?>
<ul class="ul-level-<?php echo $level ?><?php echo ($level > 1) ? ' sub-nav-group': ' nav-menu' ?>">
<?php if (isset($tree)): ?>
<?php foreach ($tree as $content): ?>
<?php if ($content['Content']['title']): ?>
<?php
if (!empty($content['Content']['exclude_menu'])) {
continue;
}
$liClass = 'menu-content li-level-' . $level;
if ($content['Content']['id'] == $currentId) {$liClass .= ' current'; }
$options = [];
if (!empty($content['Content']['blank_link'])) {$options = ['target' => '_blank']; }
?>
<li class="nav-item <?php echo $liClass ?>"><?php $this->BcBaser->link($content['Content']['title'], $content['Content']['url'], $options) ?>
<?php if (!empty($content['children'])): ?>
<div class="sub-nav"><?php $this->BcBaser->element('contents_menu', array('tree' => $content['children'], 'level' => $level + 1, 'currentId' => $currentId)) ?></div>
<?php endif ?>
</li>
<?php endif ?>
<?php endforeach; ?>
<?php endif ?>
</ul>
<?php endif ?>

hooterメニュー

hooterメニューなどはページ子要素を含まない単純なメニューで良いでショウ。但しリストのためレスポンシブデザイン中央表示の設定が難しい。hooterメニューの必要性も個人では考えが違うと思います。

完全中央表示はP要素で手書きで書くほか無いと思います。(面倒だが、テーマヘルパーで出力可能かも知れない)


<?php $this->BcBaser->globalMenu() ?>

--------------------------------------------------

<div id="footer-menu2"><?php $this->BcBaser->globalMenu() ?></div>

出力
<div id="footer-menu2">
<ul class="ul-level-1 nav-menu">
<li class="nav-item menu-content li-level-1 current"><a href="/basercms/">トップページ</a></li>
<li class="nav-item menu-content li-level-1"><a href="/basercms/news/">新着情報</a></li>
<li class="nav-item menu-content li-level-1"><a href="/basercms/service/">サービス</a></li>
<li class="nav-item menu-content li-level-1"><a href="/basercms/sample">サンプル</a></li>
<li class="nav-item menu-content li-level-1"><a href="/basercms/about">会社案内</a></li>
<li class="nav-item menu-content li-level-1"><a href="/basercms/contact/">お問い合わせ</a></li>
</ul>
</div>

レスポンシブデザインのリスト形式では margin、text-align、での「中央よせ」設定が効かない。そのためpositionで調整する。

但し、リスト幅がWindow横幅より小さい内は「中央よせ」になるが、狭いと「左よせ」に成る。


/* footermenu2 中央よせ */
#footer-menu2{
clear:both;
position:relative;
width:100%;
}
#footer-menu2 ul{
position:relative;
left:50%;
padding:0;
margin:0;
float:left;
}
#footer-menu2 ul li{
position:relative;
left:-50%;
margin-right:10px;
float:left;
}

手書きhooterメニュー

これはP要素に手書きで「リスト形式」ではないので中央表示の設定が少しし易い。「中央よせ」にこだわりたい場合には有効。
自動出力ではないので、ページの変更があれば手書きで修正します。
(HTML5ではP要素に text-aligen は効かない、従来と違う面が多々あるので大変です)


<p id="footer-menu"><a href="/basercms/">トップページ</a> <a href="/basercms/news/">新着情報</a> <a href="/basercms/service/">サービス</a> <a href="/basercms/sample">サンプル</a> <a href="/basercms/about">会社案内</a> <a href="/basercms/contact">お問い合わせ</a></p>

ページ毎にサイドバーを変える

ページ毎のサイドバーエレメントを作り、ページの判定に合わせて表示する。ブログウィジェットを作り、サイドバーエレメント毎に編集して利用する。
カテゴリー別の表示などの「ブログウィジェット」は「ブログ」ページのみで利用できます。現在他のページで使えません。


getHere()でページの判定して複数のsidebarエレメントより割り当てる。if文 elesif文の使い方によっては書き方が違ってくる。
(注意、getHere()で得られる文字列は / の付いたURLです)
isHome()はTOPページ判定に用いる。(TOPページの場合に true である)


確実に指定のサイドバーを表示するか確認のこと。isHome()判定と組み合わせるのがベターと思います。
条件分岐文が適正でない場合は2種類のサイドバーを表示したりしますので注意ください。


ページの判定

$p=$this->BcBaser->getHere();
$no="2";
if (!$this->BcBaser->isHome()) {
	if (ereg('/news',$p)) {$no="";}
	if (ereg('/service',$p)) {$no="1";}
	if (ereg('/sample',$p)) {$no="2";}
	if (ereg('/about',$p)) {$no="2";}
	if (ereg('/contact',$p)) {$no="3";}
	if (ereg('/search_indices',$p)) {$no="3";}
}

--------------------------------------------
サイドバーを割り当てる

<aside id="sidebar" class="side">
<?php
	if ($this->BcBaser->isHome()) {
		$this->BcBaser->element('sidebar2');
	}
	if (!$this->BcBaser->isHome()) {
		$this->BcBaser->element('sidebar'.$no);
	}
?>
</aside>
--------------------------------------------
. はPHPの接続詞です、分岐が簡単で短いコードですむ。

element('sidebar'.$no)

element('sidebar'.$no)形式以外の分岐はelseif文と組み合わせます。番号意識の必要は有りません。
分岐の書式を間違うとサイドバーに他のサイドバーが2重に表示されたりしますのでマチガイに気がつく。
switch文の方が確実かも知れない。


if($no==''){$this->BcBaser->element('sidebar');}
elseif($no=='1'){$this->BcBaser->element('sidebar1');}
elseif($no=='2'){$this->BcBaser->element('sidebar2');}
elseif($no=='3'){$this->BcBaser->element('sidebar3');}
else{$this->BcBaser->element('sidebar3');}

パンくずリスト

パンくずリストの表示は簡単です。TOPページ以外での表示が通常のようです。
リストが長くなると隠れるので、折り返す様CSSを少し修正しました。



<div class="crumbsBox"><?php $this->BcBaser->crumbsList(); ?></div>

モバイルのレイアウト

初期状態でモバイルのレイアウトは有りませんので、Layoutsフォルダにmobileフォルダを作り、以下のdefault.phpを保存します。
mobile用は他にファイルがありませんのでdefault.phpを表示して停止します。(つまりモバイル拒絶です)

注意、「無料レスポンシブHTMLテンプレートNo.028」を利用しているため、今回のみの処置です。



<?php
/**
 * mobileレイアウト
 */
?>

<?php $this->BcBaser->docType('html5') ?>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8">
<?php $this->BcBaser->title() ?>
</head>
<body>
<p style="text-align:center;">mobileには対応していません</p>
</body>
</html>

モバイルの確認、FireMobileSimulatorの機能拡張をChromeに導入して確認しました。
FireMobileSimulator




作成したCSS

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

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


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


 

個別のページ構成などの詳細は次ページで述べる。

 


[ この記事のURL ]


タグ:cakePHP , CMS , basercms4

 

ブログ記事一覧



[1]