TOP  >  健忘録  >  健忘録 : WordpressテーマをXOOPS用に書き換える by etupirka
今日の一言

生きることの意味とか考えている余裕のある人と、そんな余裕もなくずっと自分のことに没頭している人。本当の意味で生きてるのはどちらなんだろう(答え出ず)。

2007年12月4日(火曜日)

WordpressテーマをXOOPS用に書き換える

カテゴリー: - etupirka @ 16時16分56秒

書いてる途中でやる気をなくしたので・・・。いろいろ適当です。

Wordpressはユーザーが多く、テーマも豊富です。逆にXOOPSテーマは配布している人やサイトがそんなに多くないですよね。
今回は豊富なWordpressテーマを最手抜きモードでXOOPS用に書き換えるメモを書いてみます。ローカル環境にXOOPSが用意出来る/出来ている・過去にXOOPSテーマをイジったことある・HTMLとCSSの予備知識がある方が対象です。

1.テーマを選ぶ
テーマ配布サイトが結構便利です。xoops.orgにもこういう仕組みがあるみたいですが、キーワード検索の他、色やキーワード、ジャンルでテーマを探せたりします。
構造は2カラムないし3カラム、1カラムくらいが無難でしょうが、4カラム1カラムのテーマでも対応出来ます。大切なポイントは、XOOPSテーマにした後のイメージが出来るのか?という点です。
Wordpress用によく手の行き届いたテーマは、見栄えがよい物が多いですが、XOOPSモジュールで使うときは必ずしも良いものにはなりませんし、事実上無理な場合も多いです。
XOOPSモジュールはWordpressとは違い、それぞれのモジュールが雑多なHTMLを生成します。そういった状況でも利用出来そうか検討してみましょう。

2.デモのソースをみる
Wordpressのテーマサイトは、XOOPS同様にデモが見られるようになっているところが多いです。
お好みのテーマが見つかったら、それをダウンロードしつつ、デモのソースを表示して、そのままにしておきましょう。ソースもブラウザもまだ消さないでくさいね。

3.テーマの雛形をつくる
XC-TokaiでHinagata-Akikoテーマなるものが配布されています。もしあなたがXOOPSテーマについての知識を持ち合わせていないのなら、まずこのテーマを読んでXOOPSテーマの構造を掴んでください。ここではXOOPSテーマの基礎知識がわかっているものとして話を進めます。
まず、themesディレクトリに好きな名前のディレクトリ(テーマ名)をつくり、テーマの核となるtheme.htmlという名前の空ファイルをつくってください。
もうわかりましたね?そうです、それにさきほどのデモのソースを貼り付けます :-D
ダウンロードしたテーマのアーカイブを解凍したら、画像フォルダやスタイルシートをさきほどつくったテーマのディレクトリに保存します。
これが済んだらXOOPSにログインして、一般設定から今つくったテーマを表示出来るようにしてみましょう。あなたは今、Wordpressのデモサイトと同じ構造のページを見ているはずです。うまくいっていますか?

4.とりあえずXOOPS用に書き換えをする
このままではテーマとして使えませんので、不要なものを削り、必要なものを付け加える作業に入ります。テーマで利用できる変数の知識が必須です。
まず、先頭からbodyタグ直前まではdefaultファイルからすべてコピペして構わないと思います。xoops_module_headerやxoops_block_headerが書かれているのを確認したら、スタイルシートが適用されているはずですので、一度リロードしてみてください。
続いてURLを書き換えます。デモサイトのURLが色々ありますから、それらをすべてxoops_urlやxoops_imageurl等に適宜置換してください。footer内のコピーライトは消してしまわないように注意してくださいね。

5.ブロックとコンテンツを組み込む
Wordpressテーマには、カテゴリ、カレンダー、リンク、ウィジェット等を表示する場所があるでしょう。これらのスペースをうまく利用して、それぞれのブロックを配置してみましょう。defaultテーマ等からコピペすると楽ですね。
ブロックを配置するときに注意するのは、コピペで持ってきたHTML構造を消さないようにすることです。特にclassやid属性は消さないでください。後々調整するときに面倒になります。
それが終わったらコンテンツ要素の配置です。これはもちろんブログ記事が配置されていた場所へ挿入ですね。postやmetaなどのブログ独特の名前のclassやidがあると思いますが、これはもうばっさり消してもよろしいかと思われます。ごっそり削って、xoops_cententsの一行に書き換えてください。
一連の作業を通して、何かやったらリロード、という地味な気配りを忘れないようにしましょう。あなたが消した要素が構造上非常に重要なものかもしれないし、違う何かが挿入されたことにより、作者が想定していたHTML構造が崩れてしまうかもしれないからです。が
これでXOOPSがWordpressテーマの中で表示されたでしょう?デザインが何かおかしかったら、まず組になっていないタグや閉じタグがないか確認してみてください。コピペや修正をしたときにあなたの勘違いで写されたゴミがあるかもしれません。

6.ロゴ、ヘッダー、フッター、メニューなど
今度はもうちょっと細かいパーツを見ていきます。
ヘッダー・フッター等は文章の見直しがメインです。ブログの説明が書かれてたところをxoops_sloganにしたり、ブログタイトルをxoops_title等に置き換えてください。Poworted by Wordpress なんて表示が残っていたら恥ずかしいですから、それらを直しておくのもお忘れなく。
Wordpressにはメインメニュー・ユーザーメニューブロック等の気の利いたメニューはありません。アルバムやアバウトなどのリンクがテーマに直書きされていることが多いと思いますので、そのスペースを書き換えて利用すると良いでしょう。不要なら消したり、パンくずなんかを表示するのもありでしょう。他にも何か良い有効活用手段があれば教えてくださいね。

7.細部にスタイルシートを適応する
このままでは殺風景ですね。スタイルシートが適応されていないからでしょう。どこかからブロックをコピペしていたら、block_title等のclassまたはid要素がソース内にあるでしょう。でも、当たり前ですが、スタイルシートにはそれらの項目がありません。
idやclassはリンク、カテゴリ、ウィジェット等にかけられていたものを再利用出来たらめちゃくちゃ楽になります。運良くそれが使えたら儲け物。ダメなら奥の手としてブログ記事にかけられていたpost等のclassをダメ元で書いてみてください。意外に使えます。スタイルシートをにらめっこして、使えそうなものを探し出しましょう。
ブロック等への適応がだいたい終わったら、不要な要素をスタイルシートから消してください。コメントフォーム用のスタイルシートなどはtextareaで使えます。使えるものと使えないものを分けながら作業してください。

8.スタイルシートを書き足す
この状態では、oddやeven等XOOPSで多用されるclassがありません。ニュースモジュールがあるのなら、それ用のスタイルシートもない。
というわけで、XOOPSでは良く使うけど、特殊な名前、という具合のスタイルシートを、これまたdefaultのスタイルシートとお使いのモジュールをXOOPSで表示したHTMLソースなどを参考に書き足しましょう。このときも先ほど残したスタイルシートの一部がコピペ・改変して利用出来るかもしれません。なにを卑怯な、と言わずに試してみたら、意外に統一感のあるサイトが仕上がって笑えます。
モジュール単位でスタイルシートを持っている場合は少なくありませんので、それらで上書きしている要素はわざわざ用意しなくても良いですよね。

9.完成
気になるところを調整したら、HTMLチェッカなどを利用して、おかしな部分がないか確認してください。お疲れ様でした! 思い描いていた通りのXOOPSサイトが出来上がりましたか?

おまけ - 超完成度の高いWordpressテーマをXOOPSモジュール版Wordpressに適応する
最初の断っておきますが、ほとんどの場合、素のWordpress+素晴らしいテーマで運用を考えた方が幸せになれるでしょう :-)
しかし、XOOPSにそれを組み込む手だてもなくはないのです。のぶのぶさんが書かれたWordpressモジュールは、書き換え可能なテーマを持っています。バージョンによって違いますが、themesディレクトリを探し出してください。何も触っていなければdefaultテーマがあると思います。
Wordpressモジュール内にはテーマをスイッチする機能がありません。テーマの切替は、XOOPS本体で利用しているテーマ名を見て、それと同じ名前のWordpressテーマとして存在するか確認しています。defaultテーマをディレクトリごとコピーまたはディレクトリ名を書き換え、利用したいテーマと対になるようにしましょう。このxoops_contents内に表示されるソースは部分で決まります。
さきほどの手順を踏襲して、XOOPSのthemesディレクトリにテーマを用意してください。xooops_contents以外にはXOOPSに設定されたテーマが適応されるからです。
後はさきほどと同じ理由で調整を繰り返します。さっきの作業に付け加わるのは、WordpressテーマのPHPファイルとXOOPS版wordpressモジュールのテーマを比較して、classとid属性から構造まですべて同じものにしなければならないところです。index-temlate.p​hpが記事の表示される部分になります。その後コメント関係のソースもイジらなくてはなりません。
素のWordpresとXOOPSモジュール版はまったく同じ動作をするスクリプトではありません(XOOPSモジュール版はかなり古いWordpressのコードを利用しています)。このあたりをいかに調整するか、あなたの腕の見せ所です。私はdogreenをある程度仕上げた時点でもう嫌になりました :-D

今回は作業内容を中心に紹介しましたが、実際にこのテーマを利用するとなるとライセンスの問題が発生します。
テーマ作者もまさか自分が書いたテーマが他のCMSで利用されるだなんて思いもしていないでしょうから、readmeで詳細を確認出来ない場合は、直接問い合わせてみてください。
実はreadmeも説明も書かれていないテーマが多かったりするんですけどね・・・。じゃあソースの行頭に書かれているのかな?と思いきややっぱり何も書かれていない。そういうときもテーマ内のクレジット表示はたいていしっかりしていますから、使いたいなら必ず作者のサイトに答えを求めてください。ね、コピーレフトを残して正解だったでしょう? :hammer:


このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをNifty Clipに追加このエントリをBuzzurl(バザール)に追加このエントリをNewsingに追加

コメント

このコメントのRSS

TrackBack URL : http://xoops.etupirka.org/modules/wordpress/wp-trackback.php/332

この投稿には、まだコメントが付いていません

コメントの投稿

改行や段落は自動です
URLとメールアドレスは自動的にリンクされますので、<a>タグは不要です。
以下のHTMLタグが使用可能です。
<a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <br> <code> <em> <i> <strike> <strong>




17 queries. 0.044 sec.
Powered by WordPress Module based on WordPress ME & WordPress

健忘禄の検索
最近のアレ
過去のアレ