HTMLの大枠の構造を移植する 
まずは、それぞれのテーマの外枠を比較してみましょう。
- WordPress のテーマに、XOOPS のコンテンツ・ブロック書き出し用のコードを埋め込んでいく
だけです。
今回の説明には、以下のテーマをサンプルとして使います。
- XOOPS:akiko01
- WordPress:Acosmin v4
XOOPS 側の akiko01 は大変シンプルなテーマで見やすいと思います。
一方、WordPress のテーマ Acosmin v4 は、たまたまこの間、colissさんのサイトで紹介されていたというだけで、それ以外の理由はありません。説明に適していたかどうかは不明。
それぞれ、ソースコードを見て、外枠で使われている div の id を拾っていきます。ただし、WordPress のテーマは幾つかの PHP ファイルに分かれて作られているので、貼りあわせてやる必要があります（「PHPファイル」といっても、中身はほとんどHTMLなのでたぶん大丈夫でしょう）。
Acosmin v4 にはたくさんの php ファイルが含まれていますが、このうち外枠で使われているのは以下の4つです。
- header.php
- page.php
- sidebar.php
- footer.php
XOOPSのテーマとして使いますので、これら4つの中身をこの順番につなげて、theme.html という名前（XOOPSテーマの決まりごとです）で同じフォルダに保存してください。
さて、akiko01 と Acosmin v4 の構造を比べたのが下図です。
対応関係を見ると、
- header == headColumn
- posts == CenterColumn
- sidebar == RightColumn
- footer == FooterBar
になりそうです。この辺りは勘ですが、なんとなく分かりますよね？
次に、これらにXOOPSのコンテンツ・ブロックを表示させるためのコードを埋め込みます。
それはどんなコードかというと、akiko01 の theme.html から拾えます。
まずは右カラム（id:RightColumn）を取り上げてみましょう
右カラム
<{if $xoops_showrblock == 1}></span>
<div id="RightColumn">
<dl>
<{foreach item=block from=$xoops_rblocks}>
<dt class="BlockTitle"><{$block.title}></dt>
<dd class="BlockContent"><{$block.content}></dd>
<{/foreach}>
</dl>
</div>
<{/if}>html は WordPress のソースを使いますので、重要なのは PHP (Smarty) のコードの部分です。
つまり、<{ }> の部分です。実際に抜き出すと、
<{if $xoops_showrblock == 1}>
<{foreach item=block from=$xoops_rblocks}>
<{$block.title}>
<{$block.content}>
<{/foreach}>
<{/if}>左カラム、中央右、中央左、中央真ん中の各ブロックも、ほぼこの形になっているのがすぐ分かると思います。
ただし、これらのブロックは Acosmin v4 のテーマには該当するものがないので今回は使われません。
さて、実際に、Acosmin v4テーマの右カラム（id=sidebar）に当てはめてみましょう。
Acosmin v4 の sidebar はごちゃごちゃ書かれていますが、重要なのは、
- ブロックの見出しは H4 で囲まれている。
- ブロックの中身は UL でリストになっている
という点です。
この点に気をつけて書き直すと、次のような短いHTMLになります。
<div id="sidebar">
<{foreach item=block from=$xoops_rblocks}>
<h4 class="recentarticles"><{$block.title}><span></span></h4>
<{$block.content}>
<{/foreach}>
</div>ヘッダ
ヘッダは、中身を調べてみると以下の図のようになっているのが分かると思います。
- XOOPSでは、h1にサイト名($xoops_sitename)、h2にサイト副題（$xoops_slogan）を入れている。一方、WordPress にはサイト名しかなく、h2に入れている。ちなみに h1 は記事のタイトルに使われている。
- WordPress のテーマには、検索窓用のスタイルが指定されている。
- WordPress のテーマでは、メインメニューが横に並ぶようになっている。
さて、ヘッダでも WordPress の html に、XOOPS のコードを埋め込んでやります。
ロゴ部分+検索部分の書き換え
Acosmin v4 の元のソース
<div class="logopart">
<h2 id="logo"><a href="<?php echo get_option('home'); ?>">Alexandru Cosmin blog<span></span></a></h2>
<div id="search">
<form method="get" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" class="searchformtop" />
<input type="image" src="<?php bloginfo('template_url'); ?>/images/trans.png" class="gosearch" />
</form>
</div>書き換え後
<div class="logopart">
<h2 id="logo"><a href="<{$xoops_url}>"><{$xoops_slogan}> - <{$xoops_sitename}><span></span></a></h2>
<div id="search">
<form method="get" action="<{$xoops_url}>/search.php">
<input type="text" name="query" value="" id="s" class="searchformtop" />
<input type="image" src="<{$xoops_imageurl}>images/trans.png" class="gosearch" />
</form>
</div>h2 には、$xoops_sitename と $xoops_slogan の両方を詰め込みました。
get_option('home'); となっている部分は、サイトのトップのURLが入ります。XOOPS の場合は、<{$xoops_url}> と書きます。
bloginfo('template_url'); は、テーマファイルの置いてある場所になります。XOOPS の場合は <{$xoops_imageurl}>
検索窓は、XOOPS の検索ブロックを参考に修正します。
メニュー+RSS部分の書き換え
Acosmin v4 の元のソース
<div id="menu">
<ul class="left">
<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php $pages = wp_list_pages('title_li=0'); ?>
<li style="background:none;"><a href="http://www.acosmin.com/ro/">RO</a></li>
</ul>
<ul class="rss">
<li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments RSS</a></li>
<li><a href="<?php bloginfo('rss2_url'); ?>">Full RSS</a></li>
</ul>
</div>書き換え後
<div id="menu">
<ul class="left">
<li><a href="<{$xoops_url}>/">Home</a></li>
</ul>
<ul class="rss">
<li><a href="<{$xoops_url}>/rss">Comments RSS</a></li>
<li><a href="<{$xoops_url}>/fullrss">Full RSS</a></li>
</ul>
</div>本当はメニュー部分に、メインメニューの内容を流し込みたいのですがそれは後回しにします(^ ^;
フッタ
本当はもう少しまじめに書いたほうがいいのですが、とりあえずはこんな感じで。
<div id="footer">
<div class="copy">
<div id="footermenu">
<ul class="menu">
<li><a href="<{$xoops_url}>/">Home</a></li>
</ul>
</div>
</div>
<{$xoops_footer}>
</div>メインコンテンツ
メインコンテンツは、サイドバーと似ています。XOOPS の id=Content の内容を移植します。
<div id="posts">
<{if $xoops_contents}>
<div id="Content" class="<{$xoops_dirname}>"><{$xoops_contents}></div>
<{/if}>
</div>外枠の完成
これで、外枠ができました。こんな感じになります。
次回は、コンテンツまわり（item）とブロックの中身の移植について解説する予定です。
Attach file:
xoops.trpg-labo.com_gate.php 1186DL
[Info] 
lh5.ggpht.com_theme_from_wp3.png 1DL
[Info] 
lh6.ggpht.com_theme_from_wp2.jpg
[Info] 
lh6.ggpht.com_theme_from_wp.jpg 1DL
[Info]
