POPSブログ

BaserCMS 2.0 グローバルメニュー

136

  Category:  basercms2012/08/15 pops 

BaserCMS 2.0系の「グローバルメニュー」を改造する方法について考えてみました。別ページでも「グローバルメニュー」に関しては言及していますが、まとめ的なものです。


BaserCMS グローバルメニュー

「グローバルメニュー」は管理画面の「グローバルメニュー一覧」で概要確認し。項目の登録、修正、削除を行うことが出来ます。「使用する」「使用しない」の設定が可能ですので、「使用しない」時は使用者が直接HTMLでdefault.phpなどに記述する事になります。
必要なページにリンクする、サイトの基本的なナビゲーションになります。
テーマ「demo」の場合、グローバルメニューに登録の「URL」「タイトル」などが出力されます。一般的には「トップメニュー」「メインメニュー」などと呼ばれています。ページ下に表示すれば「ボトムメニュー」「フッターメニュー」と言えます。


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

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

何でもエレメント化し、好きな場所で表示できるのがウレシイ。メニューも同じ。


基本的「グローバルメニュー」配置は、レイアウトの default.php で行う


「グローバルメニュー」は出力が同じですから、一律的な使用に限定されます。

1. 登録「グローバルメニュー」は、1ブロックの構成ですから、分割したりまたは短くしたりなどは出来ません。中の項目の順序を変えることは可能です。
2. 「グローバルメニュー」の出力は「クラス」ですから複数箇所に配置できますので。CSSでの多少の変更などは可能です。
3. BaserCMS開発元では自由に設計できる手書きのメニューを推奨しています。単にHTMLを挿入するだけの作業です。エレメント化するかは使用者の判断です。長さ項目デザインなど自由になります。当然「URL」は手書きで入れることになります。
4. 「トップメニュー」には変更できるように「グローバルメニュー」を使い、「フッターメニュー」には変更を伴わない固定化したURLのメニューを記述するなどとするのも一考です。手書きですから自由です。
5. BaserCMS 2.0 拠り「管理画面用グローバルメニュー」は無くなりましたので登録できません。固定の様式になります。管理画面の変更はしないほうが賢明です。


「グローバルメニュー」はBaserCMS設置先の管理者が知識が無く、default.phpの変更を出来ないなど事情がある場合は有効手段となります。要するに配布テーマ用、代行業者用には便利です。


● 管理画面での登録

管理画面でのURL(パス)の登録の場合はサブフォルダなどは考慮しないURLを記入する。
タイトルはリンクに表示する文字列である。ページに登録したタイトルでなくとも良い。


HOMEの場合
	/ または /index
ABOUTの場合
	/about
ブログnewsの場合
	/news/index

サブフォルダは出力の際システムで自動で挿入されます。


● 出力させる場合

レイアウトの default.php などで次ぎのコードを実行させる。
テーマ「demo」ではフッターでも使用されている。勿論サイドに出力しても良い。CSSで調整するだけ。


<?php $bcBaser->element('global_menu') ?>


説明図


上図に示すよう、「グローバルメニュー」は分割できないので、レイアウト、デザインによっては手書きで挿入したほうが自由度がある。「グローバルメニュー」を利用するか、組み合わせるかなどの設計は使用者の判断である。


通常の「グローバルメニュー」


● 基本的グローバルメニューの中のリスト

「サイドバー」に収容するときは、h2、li要素はCSSで装飾される場合が多い。この例でのh2は SEO 対策でショウ。

次ぎは、テーマ「demo」での出力の例、サブフォルダのパスが自動で挿入されたのが判ります。


<div id="glbMenus">
	<h2 class="display-none">グローバルメニュー</h2>
	<ul class="global-menu clearfix">
		<li class="first menu01"><a href="/main/">ホーム</a></li>
		<li class="menu02"><a href="/main/about">会社案内</a></li>
		<li class="menu03"><a href="/main/service">サービス</a></li>
		<li class="menu04"><a href="/main/news/index">ニュースリリース</a></li>
		<li class="menu05"><a href="/main/contact/index">お問い合わせ</a></li>
		<li class="last menu06"><a href="/main/sitemap">サイトマップ</a></li>
	</ul>
</div>

li要素の .first .last はCSSでの修正用に使用されることが多い
.menu01 ....はメニューアイテムに個別の画像などを使用する場合の識別用である

テーマ「demo」の #glbMenus h2 そのままでは、非表示になるようになっています。(display-noneクラス)
早い話、これを default.php に手書きで挿入しても機能します。


メニューは手書きで書いたほうが自由に構成できる。


手書きトップメニュー

一般的にメニューはリスト形式で書かれることが多い。


● 手書きトップメニューの中のリスト

手書きのHTMLのリンクですから構成は自由です、下記はUL要素、LI要素で出来ていますが、構造設計は自由です。
h2要素を加えるか、無にするかは使用者の判断によります。またli要素のクラス設定も同じく使用者の設計の嗜好です。メニューのサンプルHTML,CSSは幾らでもフリーで有りますからデザインに困ることはないでしょう。


<div id="top-menu">
	<ul class="menu">
		<li class="first"><a href="/main/">ホーム</a></li>
		<li><a href="/main/about">会社案内</a></li>
		<li><a href="/main/service">サービス</a></li>
		<li><a href="/main/news/index">ニュースリリース</a></li>
		<li><a href="/main/contact/index">お問い合わせ</a></li>
		<li class="last"><a href="/main/sitemap">サイトマップ</a></li>
	</ul>
</div>

注意、URLのサブフォルダなどは自動出力ではありませんので、確認して記載します。
上の例では、サブフォルダのパスが入った例です。


サブフォルダが無く直接、ルートにBaserCMSを配置した場合のURL(パス)の書き方


<div id="top-menu">
	<ul class="menu">
		<li class="first"><a href="/">ホーム</a></li>
		<li><a href="/about">会社案内</a></li>
		<li><a href="/service">サービス</a></li>
		<li><a href="/news/index">ニュースリリース</a></li>
		<li><a href="/contact/index">お問い合わせ</a></li>
		<li class="last"><a href="/sitemap">サイトマップ</a></li>
	</ul>
</div>

フッターメニューの一例


<div id="footer-menu">
	<ul class="foot-menu">
		<li><a href="#">ポリシー</a></li>
		<li><a href="#">社歴</a></li>
		<li><a href="#">採用</a></li>
		<li><a href="#">お客様係り</a></li>
		<li><a href="#">グループ企業</a></li>
	</ul>
</div>

項目などは自由記載、パスはそれぞれのページの配置位置にあわせる。


簡単に書くならこれでも良い


<div id="footer-menu">
	<p><a href="#">ポリシー</a> | <a href="#">社歴</a> | <a href="#">採用</a> | <a href="#">お客様係り</a> | <a href="#">グループ企業</a></p>
</div>

メニューの加工に jQuery を使用すると簡単である


メニューを色違いにしたい場合には「LI要素」にID等を記述して、CSSを操作しなければならない、手書きの時は良いが「グローバルメニュー」の場合は定格の出力だから、追加のID等を記述出来ない。こんな時 jQuery を使用すると簡単である

● メニューを色違いにしたい場合


メニューを#top-menuとした場合、メニューの名前が違うなら#の名前を変更
すればよい、

$(function(){
	//色データ
	backcolors=['#6496ED','#FFA500','#20B2AA','#B0C4DE','#FFEFD5','#DB7093','#BC8F8F','#00CED1','#CCCCCC',' #CCCCCC','#CCCCCC','#CCCCCC'];
	//
	$('#top-menu ul li').each(function(i) {
		//backgroundを染める
		$(this).css({'background-color':backcolors[i]});
	});
});

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

ボーダーならば次ぎのようになる

	$('#top-menu ul li').each(function(i) {
		var set_text="3px solid " + backcolors[i];
		//borderを染める
		$(this).find('a').css({'border-bottom':set_text});
	});

● アクティブ状態のメニュー要素を着色したい場合

BaserCMSにない機能でも、JSと組み合わせると出来ることもある。何らかのphpの情報をHTMLに挿入して、それを手がかりに処理すればよい。


現在のアクセスしているページの情報と、メニューli要素のhrefを比較して「activeクラス」をあたえます。CSSでそれなりの処理を行えばよい。

HTMLにページの情報が記述されるように、default.php に次のHTMLを挿入します。CSSで非表示になるようにしてください。埋め込む場所は原則どこでもかまいませんが一応確認出来レイアウトに影響しない所が良い。


【注意】これはBaserCMS 2.0用です。1.6の場合は「location」情報で処理するJSを使用ください。



暫定#hereとする。IDの名前などは自由

<div id="here"><?php echo $bcBaser->getHere() ?></div>

--------------------------------------
次ぎの例のような文字が記載される。

/ または /index
/about
/固定ページカテゴリ/index
/news/index
--------------------------------------

現在JSで分解しているが、ここで分解した文字を入れても同じことである。


#here {display:none;}

この情報をJSで分解して比較します。HTMLにページ情報を記載していますが、getHere()情報を取得していますので、BaserCMSを何処に置いても情報は同じです。利点としては固定ページが増えてもそのままで良いこと。


JSはこのように書き、common.js あるいは別名で保存、呼び出して使用する。#top-menuになっていますが、使用メニューの ID にあわせる。このJSではliの中のa要素に色を与える形になっています。

404エラーなどの場合 body のIDに #Error が与えられます。これを判別してエラー時には処理しないようする。



$(function(){

	//情報を埋め込み、テーマヘルパーを使用しないやりかた
	var error=$('body').attr("id");
	var urldata=[];
	var here="";
	var heres=[];
	//Error以外で処理する
	if (error !='Error') {
		here=$('#here').text();
		heres=here.split("/");
		here=heres[1];
		if (!here) {here="index";}
	}

	//MENUブロックの処理
	$('#top-menu ul li').each(function(i) {
		//hrefのurlを取り出し分解
		var hf=$(this).find('a').attr('href');
		var url_hs=hf.split("/");
		if (!url_hs[2]) {url_hs[2]="index";}
		urldata[i]=url_hs[2];

		//#hereページの名前と一致したらactiveにする
		if (urldata[i] == here) {
			$(this).find('a').addClass('active');
			//直接JSで背景色を着色するとき
			//$(this).find('a').css({'background-color':'#4E7090'});
		}
	});
});

----------------------------------
BaserCMSサブフォルダに設置したので、url_hs[2] としています
サブフォルダを使用しない場合は、url_hs[1] となります

中のa要素に「activeクラス」を与えていますが、クラス名の都合が悪いときは好きな名前を与えればよい。


li要素に「activeクラス」を与えなら下記のようになる。当然CSSの書き方も変わる。


		//#hereページの名前と一致したらactiveにする
		if (urldata[i] == here) {
			$(this).addClass('active');
			//直接JSでli要素の背景色を着色するとき
			//$(this).css({'background-color':'#4E7090'});
		}

ここでは、HTMLに判別の情報を埋め込みましたが、JSでロケーション(location)情報からアクセスページを取得する方法もあります。
この場合はHTMLに判別の情報を埋め込む必要はありません。但し、BaserCMSを配置した階層により、分解した配列情報の位置が違いますので修正が必要です。
考えれば色々な方法があると思います。


BaserCMSにWordPress並の機能が無くとも、何らかの情報をHTMLに書き込み、JSで処理するなら結構機能を付加することが可能です。


JSの「location」情報で処理する。

メニューに記載するページ名などの情報をJSに書く、分解した配列情報の位置が違いますので修正などが必要です。 メニューの項目が増えた場合などはJSを直接修正しなければならない不便があります。


//baser_menu.js
$(function(){

	//アクセスページをactiveにする
	var data=[];
	var data2=[];
	var li_arr=['index','service','pops','tokusyuu','links','download'];
	var li_arr2=['about','contact','sitemap'];
	//サーチの場合/contents /404 NOT FOUND 等にいく場合あり、この場合は実行しない

	data=String(window.location).split("/");
	//indexの取得できない場合の修正、サブフォルダ階層に設置は4番目、サブフォルダ階層なしは3番目
	if (!data[4]) {data[4]='index';}
	var atv_name=data[4];
	var atv_name2=data[4];

	var len=$('#glbMenus ul li').length;

	//MENUは2つに分割されている
	//ページカテゴリー名とURLの一致をしらべる
	//一致したら a背景の色を変える(Classを与える)
	for (i=0;i< li_arr.length; i++) {
		if (li_arr[i]==atv_name) {
			//色をかえる
			//$('#glbMenus ul li a').eq(i).css({'background-color':'#EF9DC9'});
			//Classを与える
			$('#glbMenus ul li a').eq(i).addClass('active');

			break;
		}
	}
	//一致したら a背景の色を変える(Classを与える)
	for (i=0;i<li_arr2.length; i++) {
		if (li_arr2[i]==atv_name2) {
			//色をかえる
			//$('#top-submenu ul li').eq(i).css({'background-color':'#FF0000'});
			//Classを与える
			$('#top-submenu ul li').eq(i).addClass('active');

			break;
		}
	}
});

これは、現在のこのHPで使用されている、JSの内容です。

【注意】単なる例ですから、ご使用の際は、ページ名、ブログID、メニューIDなどの変更が必要です。メニューが2つに分かれて居ないならばもっと簡単です。



//ページカテゴリー名とURLの一致をしらべる
//一致したら a背景の色を変える(Classを与える)
$('#glbMenus ul li).each(function(i) {
	if (li_arr[i]==atv_name) {
		//Classを与える
		$(this).children("a").addClass('active');
	}
});

一致するかの判定だけですから、この辺は自由です。a要素からhref情報を直接取り出し比較しても良いが少し面倒なので配列 li_arr[] をつかった。


以上、メニュー作成の個人的見解です。



[ この記事のURL ]


タグ:jquery , memo , basercms2

 

ブログ記事一覧

年別アーカイブ一覧



[1]