Edited at

XOOPSのテーマで1~3カラム対応にする方法

More than 5 years have passed since last update.

さて、12月1日から始まったXOOPSアドベント・カレンダー2012ですが、いよいよ私に順番が回ってきました。

前日の記事はこちら テーマのOGP対応方法

お題は「XOOPSのテーマで1~3カラム対応にする方法」です。


XOOPSの魅力 自由なブロック配置

XOOPS の魅力のひとつとして、色々なテーマを簡単に切り替えられる、テーマ内で自由にブロック配置ができるということがあります。

管理画面を見ていただくと判るのですが、基本的にブロックの配置は左・中央・右の3種類に加えて、中央全体・中央左・中央右の選択が可能。さらに、各ブロックについて並び順(weight)設定ができることから、思いどおりの配置を実現することができるんです。そのブロック配置の基本 「左・中央・右」 については、左カラム・中央カラム・右カラムというふうに、大きな配置のくくりで呼ばれたりします。

XOOPSのテーマでは、この 「左・中央・右」カラムを表示する3カラム表示 が基本なのですが、場合によっては 「左・中央」 とか 「中央・右」 のような2カラム表示や 「中央」 だけの1カラム表示としたい場合がありますよね?

ということで、管理画面でのブロック配置で 「左・中央」 だけを選択すれば2カラム表示となり、「中央」 だけを選んだら1カラム表示になる仕組みをテーマに持たせてあげると OK!となります。

3カラム 2カラム 1カラム

テーマが上手く対応出来ていると、上の図のように綺麗に表示してくれます。

では、どうしたらこのような1~3カラム対応できるのでしょうか?

ポイントは、<{$xoops_showlblock}> と <{$xoops_showrblock}> という2つのsmarty変数にあります。

これは「左ブロック表示状態」「右ブロック表示状態」を示してくれるもので、いずれも表示されている場合には1を表示がない場合は0を返してきます。つまり、これを使うと1~3カラムの判定ができるということですね。

現在、私が良く使っている方法は2通りあります。

ひとつが、bodyのclassに判定文を入れて、CSSで1~3カラム対応とする方法。もうひとつが、カラム用のdivに判定文を入れて、1~3カラム対応とする方法です。

前者は、ホダ塾ディストリビューションのデフォルトテーマだった HD_Default で採用されていた方法で、この方法が現在の標準的な方法だと思います。

後者は、Twitter Bootstrap に対応させるため、私が考えた方法です。


ひとつめの方法 「bodyに判定文を追加する」

では、一つ目の方法を説明しましょう。まず、HTMLのbodyに判定文を追加します。


theme.html

<body class="L<{$xoops_showlblock}>R<{$xoops_showrblock}>>


ここでは、classが L1R1になれば3カラム、L1R0なら左カラムと中央カラムの2カラム、L0R1なら右カラムと中央カラムの2カラム、L0R0なら1カラムということになります。

CSSで次のような設定をします。


style.css

body.L1R1 #center-column {

width:73%;
float:right;
}
body.L1R0 #center-column{
width:73%;
float:right;
}
body.L1R1 #left-column , body.L1R0 #left-column {
width:25%;
float:left;
}
body.L0R1 #center-column , body.L0R0 #center-column{
width:100%;
}
body.L0R0 .sidebar , body.L1R0 .sidebar{
display:none;
}
body.L0R0 .left-col , body.L1R0 .left-col{
width:100%;
}

表示しないカラムについては、CSSで display:none; として非表示設定するのも良いのですが、theme.html で smarty変数による分岐処理を併用したりもします。そう、こんな感じです。


theme.html

<{if $xoops_showlblock == 1}>

<div id="left-column">
<{foreach item=block from=$xoops_lblocks name=lbloop}>
<div>
<{if ! $block.title|strstr:"none"}><h4><{$block.title}></h4><{/if}>
<{$block.content}>
</div>
<{/foreach}>
</div>
<{/if}>


2つ目の方法 「TwitterBootstrap対応」

次は、2つめの方法。最近、私が使い出したもので、独自の方法になります。


theme.html

<{assign var="layoutL" value=L$xoops_showlblock}>

<{assign var="layoutR" value=R$xoops_showrblock}>
<{assign var="layout" value=$layoutL$layoutR}>

このように、まずsmarty変数をアサインします。つまり、ここではlayoutという変数が1~3カラムによって変化するということになりますね。

もちろん、主要な判定は先に紹介した方法を併用するのですが・・・


theme.html

<{if $xoops_showlblock == 1}>

<div id="side_bar"><{* side_bar left-column *}>
<{foreach item=block from=$xoops_lblocks name=lbloop}>
<div>
<{if ! $block.title|strstr:"none"}><h3><{$block.title}></h3><{/if}>
<{$block.content}>
</div>
<{/foreach}>
</div><{* /side_bar left-column *}>
<{/if}>

こうやって、ブロック(カラム)の存在確認をしておいて、もし「左ブロックがあれば表示」という感じにしてあげます。

そして、その場合の中央カラムの設定について、先にアサインしておいた layout で変化させてあげるという形にしています。


theme.html

<{* center contents *}>

<div id="center_contents" class="span<{strip}>
<{if $layout == "
L1R1"}>
6
<{elseif $layout == "L1R0"}>
9
<{elseif $layout == "L0R1"}>
9
<{else}>
12
<{/if}>
"><{/strip}>

ここでは、カラムの変化に応じて、3カラムなら span6、2カラムなら span9、1カラムなら span12 となり、これで1~3カラムに対応しているという訳です。

これはどういうことかというと、TwitterBootstrap の場合、12種類のブロック幅を持っていて、span1 から span12 までのクラスにより横幅を設定しているようですので、TwitterBootstrap を採用するなら、そのお作法に従わなくてはなりません。

ですので、通常の判定とは異なる方法を考案して、採用したということですね。

どうですか? 判りました???

ちょっと端折りすぎて判らないかなぁ・・・?

ちなみに、この記事は、こちらの記事をベースに作成しています。

xoops123.com にも是非ご訪問くださいね~(^O^)