XOOPSTips集 - テーマカテゴリのエントリ
今度のリニューアルではテーマでtableタグを一切使わない試みをした。
空いた時間で約１ヶ月。その大半,感覚的にはおよそ９割以上はバカブラウザ対策に費やされた結果となった。その顛末はおいおいコラムで書くつもり。本当にFireFoxは救世主。
レイアウト決定にtableタグを使わなかった理由は：
- tableタグを本来の目的にしか使いたくない
- レイアウト固定のためにスペーサーを噛ますような愚は避けたい
- ダウンロードを少しでも軽くしたい
- html文はコンテンツが主役のはず
- というか、文書構造を正しく書くべき
結果的にこれらはSEO対策にもなりうるし。
今回作成したテーマはliquidな3 columnsタイプ。
左200pxと右160pxをposition absoluteで固定してある。
しかし、linuxとかxoops関連ページでコードを書く関係上codeタグが多いので、気をつけないと横にどんどん伸びてしまう。時間をかけてコンテンツを修正しないと見づらいページになってしまうようだ。
別にテーマチェンジャーを使うほどもないレベルの話。
例えば、cssのbodyなどで指定した背景色は、pm送信ウィンドウなどのポップアップ画面の背景色ともなる。そこで、濃い色、ドギツイ色を使うと場合によっては非常に見にくいことになる。
そこで回避策。bodyにidを使えば解決。
たとえば、cssは、
body {......
background-color: #FFF; /* default */
........
}
body#main { background-color: #cc0000; /* xoopsの通常ページ用 */}<body id="main">
XOOPS Hackersサイトを参考にxoopsのrootディレクトリ直下にex_assign.phpを作る。
参考）XOOPS Hackers XOOPSのソースに手をいれないで、使えるテンプレート変数を増やす方法
まずex_assign.phpに以下を追加。
global $xoopsRequestUri;
if ( is_object($xoopsModule) ) {
$this->assign('ex_moduledir', $xoopsModule->getVar('dirname'));
$this->assign('ex_modulename', $xoopsModule->getVar('name'));
if( count($xoopsModule->subLink()) > 0 ) {
$replacedUri = preg_replace("/\/modules\/".$xoopsModule->getVar('dirname')."\/(.*)$/i", "$1", $xoopsRequestUri);
foreach( $xoopsModule->subLink() as $sublink ) {
if( $sublink['url'] == $replacedUri ) {
$this->assign('ex_sublinkname', $sublink['name']);
}
}
}
}
<{include_php file="$xoops_rootpath/ex_assign.php"}>
<div id="breadcrumb">»
<{if $ex_modulename}><a href="/">HOME</a> »
<{if $ex_sublinkname}><a href="/modules/<{$ex_moduledir}>/"><{$ex_modulename}></a> » <{$ex_sublinkname}>
<{else}><{$ex_modulename}>
<{/if}>
<{else}>HOME
<{/if}>
</div>
以下のdropdownmenu.htmlを作成。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>drop down</title>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
li { /* all list items */
float: left;
position: relative;
width: 10em;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul { /* to override top and left in browsers other than IE, which will position to the top right
of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul{ /* lists nested under hovered list items */
display: block;
}
#content {
clear: left;
}
</style>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
//-->
</script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li>フォトアルバム
<ul>
<li><a href="">投稿する</a></li>
<li><a href="">自分の投稿</a></li>
<li><a href="">高人気</a></li>
<li><a href="">トップランク</a></li>
</ul>
</li>
<li>ニュース
<ul>
<li><a href="">ニュース投稿</a></li>
<li><a href="">アーカイブ</a></li>
</ul>
</li>
<li>リンク集
<ul>
<li><a href="">登録する</a></li>
<li><a href="">人気リンク</a></li>
<li><a href="">高評価リンク</a></li>
</ul>
</li>
</ul>
<div id="content">
<hr>
dropdownメニューのサンプル。<br>
カーソルを置いてみてください。
</div>
</body>
</html>
サブメニューをもつモジュール名の頭に「＋」（展開するリンク）印を付け、これをクリックするとサブメニュー一覧が展開される。一方「ー」（折り畳むリンク）印をクリックするとサブメニュー一覧表示を解消する。
前稿のカレントモジュール識別ハックを前提に。
modules/system/block/system_blocks.phpに以下を追加。
まずホームがカレントかどうか。
if(empty($xoopsModule)) {
$block['ishomecurrent'] = "current";
} else {
$block['ishomecurrent'] = "no-current";
}
if((!empty($xoopsModule)) && ($i == $xoopsModule->getVar('mid'))) {
$block['modules'][$i]['current'] = "current";
} else {
$block['modules'][$i]['current'] = "no-current";
}<a class="menuTop" href="<{$xoops_url}>/"><{$block.lang_home}></a>
これを以下に変更。
<a class="menuTop" id="<{$block.ishomecurrent}>" href="<{$xoops_url}>/"><{$block.lang_home}></a>
次いで、
<a class="menuMain" href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a>
を以下に変更。
<a class="menuMain" id="<{$module.current}>" href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a>
td#mainmenu a#current {
該当モジュールがカレントのときの記述
}モジュールの吐き出す内容の横幅が広がると、メニュー欄も縮小して見にくくなる。これを回避するには、default/theme.htmlの場合、style.cssで：
body { width:100%;......}
td#mainmenu a,td#usermenu a { width:152px; ... }
td#mainmenu a.menuSub { width:146px; ... }