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

さて、１２月１日から始まったXOOPSアドベント・カレンダー2012ですが、いよいよ私に順番が回ってきました。
前日の記事はこちら　テーマのOGP対応方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

theme.html

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

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

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}>

２つ目の方法　「TwitterBootstrap対応」

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

theme.html

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

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

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

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}>

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

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

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

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

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

ちなみに、この記事は、こちらの記事をベースに作成しています。
xoops123.com にも是非ご訪問くださいね～(^O^)

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

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

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

２つ目の方法 「TwitterBootstrap対応」

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

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

２つ目の方法　「TwitterBootstrap対応」