xoopsのブロックへの個別スタイル指定

2012
1/25

こちらにとても参考となる記事があったので、備忘録として記載します。

・・・と以前に非公開で書いていたのですが、既にそのサイトは消滅してしまい・・・ここで公開するのもいいかと思い、公開設定としました。(2014.3.21)

 

以下、引用

ブロック,特に左側のブロックはすべて同じclassになっているため,個別のスタイル定義が出来ません。ブロックに独自のidやclassを指定する方法を解説

Tips|ブロックへの個別スタイル指定

デフォルトのコード

とにかく,テーマファイルの左ブロックのコードを見てみましょう。

<td id=”leftcolumn”>
<!– Start left blocks loop –>
<{foreach item=block from=$xoops_lblocks}>
<div class=”blockTitle”><{$block.title}></div>
<div class=”blockContent”><{$block.content}></div>
<{/foreach}>
<!– End left blocks loop –>
</td>

ご覧になって分かるように,どのブロックも,タイトルが「blockTitle」class,本体部分が「blockContent」classになっています。このため,どのブロックも同じデザインになってしまうんですね。

例えば,メインメニューブロックとユーザーメニューブロックのデザインを変えたいとき,このままでは,うまくいきません。それぞれのブロックのデザインを個別に指定したいのであれば,このclass名やid名をそれぞれ固有の名前にするか,ブロックのテンプレートをカスタマイズすることになります。

ブロックのテンプレートをカスタマイズするのは,大変な手間になりますし,モジュールがバージョンアップしたときのことを考えると,現実的ではありません。

ブロックそれぞれを識別できるとすれば,どこで出来るでしょうか。最も簡単なのは,「ブロック名」です。そこで,ブロック名にちょっとした工夫を施します。「ブロック名|class名」のように記述し,表示するブロックタイトルは「縦棒(|)」の左側,class(id)名は右側,というルールを決めればいいでしょう。

ブロック名とクラス名を取り出す

ブロック管理画面で「特選メニュー|mymenu」とした時を例にします。ブロック名は,前述のコードで分かるように「$block.title」に代入されています。

【ブロック名を取り出す】
<{$block.title|regex_replace:"/^(.*)|(.*)$/":"\\$1"}> 
【クラス名を取り出す】
<{$block.title|regex_replace:"/^(.*)|(.*)$/":"\\$2"}> 

あっけないくらい簡単ですね。あとはこれを前述のコードに組み込むだけです。また,取り出したクラス名はタイトル部分と本文部分別々に使いたいので,適当なプレフィックス文字を加えればいいでしょう。
また,すべてのブロックにクラスを指定する必要はありません。ですから,ブロック名に「|class名」が記述されているとは限りませんので,縦棒(|)のあるなしで処理を分岐するコードも必要です。それらを考慮してカスタマイズしたコードを以下に示します。

<td id=”leftcolumn”>
<!– Start left blocks loop –>
<{foreach item=block from=$xoops_lblocks}>
<{* ブロックタイトル部分の処理 *}>
<{if mb_strpos($block.title,”|”)}>……【1】
<div class=’block_title_<{$block.title|regex_replace:”/^(.*)|(.*)$/”:”\\$2″}>’>……【2】
<{$block.title|regex_replace:”/^(.*)|(.*)$/”:”\\$1″}>……【3】
</div>
<{else}>……【4】
<div class=”blockTitle”><{$block.title}></div>
<{/if}>
<{* ブロック本文部分の処理 *}>
<{if mb_strpos($block.title,”|”)}>……【5】
<div<{$block.title|regex_replace:”/^(.*)|(.*)$/”:”\\$2″}>>
<{else}>
<div class=”blockContent”>
<{/if}>
<{$block.content}>
</div>
<{/foreach}>
<!– End left blocks loop –>
</td>

【ブロックタイトル部分】

【1】ブロック名に縦棒(|)があるかどうかを判別します。「mb_strpos関数」はphp関数ですが,第2引数で指定した文字が,第1引数の文字列のどの位置にあるかを返します。該当する文字がなかった場合「false」を返します。

【2】変数からブロック名を取りだし「block_title_」の後ろに結合し,クラスに指定します。

【3】変数からブロック名(縦棒の左部分)を取り出します。

【4】if文が成立しなかった(縦棒がない)場合の処理で,クラス名に「blockTitle」を指定します。

【ブロック本文部分】

【5】以降のコードは「ブロックタイトル部分」の処理と同じですね。

トラックバック・ピンバックはありません

ご自分のサイトからトラックバックを送ることができます。

新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ