XOOPSのテーマで１～３カラム対応にする方法

さて、１２月１日から始まった[XOOPSアドベント・カレンダー2012](http://qiita.com/advent-calendar/2012/xoops-themes-templates/participants "XOOPSアドベント・カレンダー2012")ですが、いよいよ私に順番が回ってきました。
前日の記事はこちら　[テーマのOGP対応方法](http://qiita.com/items/ffb69aaca39ebe8c3ce6 "テーマのOGP対応方法")

お題は「XOOPSのテーマで１～３カラム対応にする方法」です。


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

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

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

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

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

![３カラム](http://xoops123.com/uploads/wp-content/uploads/theme_001_SS.jpg "３カラム")　![２カラム](http://xoops123.com/uploads/wp-content/uploads/theme_002_SS.jpg "２カラム")　![１カラム](http://xoops123.com/uploads/wp-content/uploads/theme_003_SS.jpg "１カラム")


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

では、どうしたらこのような１～３カラム対応できるのでしょうか？

ポイントは、&lt;{$xoops_showlblock}&gt; と &lt;{$xoops_showrblock}&gt; という２つのsmarty変数にあります。

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

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

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

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

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


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

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

```html:theme.html
<body class="L<{$xoops_showlblock}>R<{$xoops_showrblock}>>
```

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

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

```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変数による分岐処理を併用したりもします。そう、こんな感じです。

```html: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}>
```

##２つ目の方法　「TwitterBootstrap対応」

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

```html:theme.html
<{assign var="layoutL" value=L$xoops_showlblock}>
<{assign var="layoutR" value=R$xoops_showrblock}>
<{assign var="layout" value=$layoutL$layoutR}>
```

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

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

```html: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 で変化させてあげるという形にしています。

```html: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}>
```

ここでは、カラムの変化に応じて、３カラムなら span6、２カラムなら span9、１カラムなら span12 となり、これで１～３カラムに対応しているという訳です。

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

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

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

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

ちなみに、この記事は、[こちらの記事](http://xoops123.com/modules/wordpress/?p=329 "こちらの記事")をベースに作成しています。
[xoops123.com](http://xoops123.com "xoops123.com") にも是非ご訪問くださいね～(*^O^*)