WordPress のテーマフレームワークを使ってみた

endunham さんが WordPress のテーマフレームワーク thematic を使われていらっしゃるのをみて、おもしろそうだったのでぼくもいじってみました!。 自分は HTML とか CSS のほうはてんでできないので、sandbox とかも興味はあったのですが実際には使ったことがなかったのです。

ということで素人がつかうテーマフレームワークの巻、、はじまりはじまり。。

まずは endunham さんの紹介を熟読。。

[WP徒然]テーマをthematicに変更

私が気になってた主なフレームワークテーマ達、Sandbox, Carrington, hybrid, そしてthematicWordPress公式サイトの無料テーマ配布サイトでは、thematicが一番ユーザーの評価が良かった感じなので、単純に使ってみようと思ったのでした。フレームワークなので、とーってもシンプル。これから自分用にちまちまと色着けして行くのも楽しみです。

すっぴんに近いものに色づけをしていく、という感じでしょうか! 🙂

とりあえず、 hiromasa.another に適応してみる。

another01

なるほど、シンプル。 (まぁ .another はもともと白いのもあってこれだけでも十分な気がしてきます(笑)

なんとなく style.css を使って、気合いで CSS を適応していくのだろうというイメージは持っていましたが、実際にはどうするのだろうとファイル構成を見ると、 thematic/thematic-sample-child-theme というフォルダがあって、こいつをひな形として移動して wp-content/themes 直下にいれるとのこと。 なるほど~。

another03

ちょっと見づらいですが、another という名前でコピーしました。 コピーしたひな形の style.css をみると、

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');
 
/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');
 
/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');
 
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

なんて感じで本体の CSS を import する仕組みになっているようです。 この下に追加で CSS を指定して思い通りのデザインにしていけばよいわけですね! この仕組みは child theme という言葉が使われていました。

で、ぼくはできない CSS をがんばり、試験的に style.css を追加設定し .another と同じようなデザインをつくってみる。。

another00

な、なんとか似たようなのはできました(笑)

ここで注目すべきは再現できていない部分で、たとえば上のメニューに HOME というのがなかったりします。 これは現行、ページ一覧のテンプレートタグの直前に手書きで HOME としてトップページのリンクをいれていますが、こういったことは style.css の修正だけではできません。

あと、記事名の横に青いイメージ日付がなかったり、お天気や月齢がなかったりもします。 これらもタグを直接 index.php などに記入している部分で、同じように再現できません。

で、実はこういった”ないもの”を入れ込むための仕組みが thematic にはいろいろ備わっているようです。

  • サイドバーだけではなく、エントリヘッダ、コメント前、エントリフッタ、かつ条件付きで widget がいろいろなところに設定できる。
  • テーマの任意出力をいかにも入れ込みそうなところに、do_action がいろいろ設定されている。 そこに echo するように function.php に関数を登録すると好きなものを出力できる。
  • header.php や footer.php などの、”いつもの”ファイル名でチャイルドテーマ内にファイルをおくと、フレームワーク側ではなくこちらが優先されて使われる。

全部見切れていませんが、こういう仕組みを使うことで出力内容もある程度柔軟に行うことができるようです。 たとえば、wp-jrelated の独自画像付き出力は現在、テーマに直接記入していますが、2番目の do_action の適切な場所の関数に書き込むことで実現できそうです。

こうあっても、メニューの HOME とか、お天気とか月齢はなかなか難しそうですね。 WordPress に本来備わるプラグインのfilter を駆使していれるか、index.php をコピーしてそれに直書きするしかなさそうです。 ただ、後者はやってしまうとフレームワークを使う意味があまりなくなってしまうかもしれません。

WordPress のテーマはお約束的な PHP の記述がいくつもあります。 たとえば、ループであったりコメントフォームであったり、ヘッドに wp_head かくトカトカですが、1からつくると意外に忘れがちなことがあったりします。 コメントクローズ時の処理とか、admin ログイン時の編集ボタンの出力とか、、widget の記述も面倒だったり。

またそういったテンプレートタグも、コアのバージョンアップとともに非推奨になったり削除されたりすることがあります。

テーマフレームワークはこういったお約束部分の PHP を書くことをしなくていいのはもちろんのこと、本体と修正部分のファイルが分離できますので、なにが良いかと言えばこういった骨格(フレームワーク)部分をファイル上書きでアップデートすることができることにあると思います。

たとえばコアでコメントネストが対応され、フレームワーク側もそれに追従したとすればフレームワークファイルを上書きすれば、今の修正済みのテーマとのマージに悩ませることなく対応することができる感じです。

とりあえず!、好きな出力を好きな位置というのが最大の難関。

結構、フレームワークのコードよまなければいけないこともあったりしそうですが、できあがれば普通のテーマよりも運用はずいぶん楽になりそうです。

自由出力のキモは widget かもで、場合によっては widget 非対応のプラグインの出力を widget に変換したりしてやらなければいけないこともありそうですが、これは意外に簡単。 しかも 2.8 でつくりも綺麗になりますので、、やり方をそのうち書いてみようと思います。 🙂

Ubuntu 9.04 の USB メモリ起動

Ubuntu には USB・スタートアップディスク作成機能というのがあり、これを使うと手軽に USB 外部記憶に OS をインストールすることができます。

似たようなものに CD に OS を焼き付けて起動する LiveCD というのがありますが、USB スタートアップディスクは記憶可能なデバイスを指定することで、設定や追加アプリケーションのインストール状態も記憶することができるまっことにありがたい機能であります。

ということで、ためしに最新版のUbuntu 9.04 を “USB メモリ”にインストールしてみました。 🙂

IMG_0028

PC にささっているのが USB メモリです。 高速タイプ OCZ の 180倍速というやつで、リード 30M くらいでるようです。 昔のハードディスク規格 ATA33 とか 66 と同程度ですね。(普通の USB メモリはリード 3M~5M くらいらしい)

USB スタートアップディスクの作り方は以下が参考になります。(Ubuntu を使ってつくっていますが、Windows からもつくれるようです

USBスタートアップ・ディスクを作成するには – Ubuntu Japanese Wiki

UbuntuのLive CDと同等の機能を、USBストレージデバイス(USBメモリ、SDカード、USB外付けハードディスク)上に作成するためのアプリケーションの解説です

さて、まずいきなりですが、どうやら Ubuntu 9.04 のスタートアップディスク作成は不具合があるようで、記憶領域を指定してもなぜか設定やファイルが保存がされません。

詳しくないですが、casper-rw 領域用のイメージファイルが作成されないのが原因のようです。

Ubuntu日本語フォーラム / 9.04 Make USB Startup Disk ブートCDについて

別件ですが、今回の9.04のMake USB Startup Diskでは、casper-rwが作成されませんでした。

参考になります。 🙂

casper-rw ファイルを作成して、できた USB メモリのルートにおけばよいようです。 ぼくは 3G の空イメージを以下からダウンロードしました。

USB Ubuntu 9.04 Persistent install (Windows) | USB Pen Drive Linux

3GB casper-rw loop file

最近の PC は USB の外付け外部記憶からブートできるように BIOS が設定できます。 これができる場合は、USB メモリを PC にさすだけで直接起動できます。 できない場合は、別途起動時のみに使う CD をつくると良いようです。(CDブートして USB 側に制御をうつす)

IMG_0029

一番上に、USB HDD があってその下に OCZ ということで USB メモリがみえます。 この状態で PC の電源を起動させればOKです。

じゃーやってみよう!:-)

ちょっとOS/アプリとも起動に少し時間がかかりますが、動いてしまえば割と普通です。 ポータブル可能な自分の環境ができるとおもうとなかなかに便利かもしれません。

ちなみに、ネットカフェの PC は BIOS にロックがかかっていることが多くて、ブートシーケンスが USB-HDD に変更できないこともあるので、ブートCD も持っていた方が安全です。(コンパクトな8cm CD 用のブートイメージもあるようです)

容量は 4G メモリに、LiveCD 相当のアプリ群に追加フォントと Acrobat とか Flash、screenlets を入れた状態で残り 1G をきっています。 使わないアプリをけずれば多少空きそうですが、欲を言えば 8G あったほうが安心だと思います。

あと動画見てもらうと分かりますが、高速タイプの USB でも起動は少し時間がかかりますので低速だと若干ストレスかもしれません。 ほんの少し高いだけですので、新規に買う場合速いやつのほうがいいでしょう。

いずれにしてもフラッシュメモリは書き換え寿命がありますので、こんな使い方をしていると、そのうち壊れるんじゃないかという恐怖はあります(笑)

USB メモリは SSD と違ってあまりそういう対策もしていないような気もするので、つくったファイルなどはネットワーク上とか、外で使うなら dropbox とかにおいた方がいいと思います。

まぁまぁ、ファイル作成なんかしなくても Firefox にお気に入りの拡張入れて持ち歩くだけでもずいぶん嬉しいですね。

あと、Ubuntu ってどんなもんだと興味があっても、ハードディスクに入れるのはおっくうという場合にもいいかもしれません。 LiveCD より設定が保存できる分ずっと長く楽しめます。

というわけで、よければお試しください。 🙂

ガラクタ大捜索

前エントリ、「家に外付け USB DVD ドライブない、むきー」。

ここは、15年来の PC 自作ユーザの意地。 ないものはつくりだすっ、ざわざわっ・・・。

外付け USB DVD ドライブと言うことは、要は DVD ドライブと USB がつながればいいわけでってことで、IDE の DVD ドライブと USB-IDE 変換ケーブルくらいたしかうちのどこかにあったハズ。。 大捜索です。

毎年すてられる危機におちいる、ぼくの宝物箱をオープン。。

IMG_0026

スロットの PentiumII とかスロットソケット変換下駄とかがでてきました。。

PentiumII という CPU はダイが大きくなりすぎてパッケージに入らなくなってしまい、なんとファミコンのカセットみたいな形をしていたバージョンがありました。(真ん中の黒いやつ

で、技術的にふつうの大きさにできるようになってきたのでソケット型にその後移行するのですが、スロット->ソケットの変換をする下駄をはかせてCPUをアップグレードする手法がはやっていた時期があります。 左の2枚のカードがその下駄です。

あとは HDD とか SCSI(!!) の DVD ドライブとかがでてきました。。 今回は IDE DVD さがしているので、こいつは使えない。。

USB-IDE 変換ケーブルはでてきました。 これでむき身の DVD ドライブと USB を接続します。 電源は下のケーブルから AC でつなげてしまうすんぽうです。

IMG_0027

で、結局、、

[tegaki]IDE DVD ドライブない~ orz[/tegaki]

ということであえなく材料不足で敗退。。 いっぱいもっていたハズだったのですが、壊れたりあげたりで在庫切れしてしまっていたようです。。

あきらめて買います、、買います。。 orz

書き込みとかできなくていいから、300円くらいで売っていればいいと思ったのですが(笑)、残念ながら 6000円前後はしてしますようです。

ふつうに考えたらもちろん安いんですが、インストールだけと考えると涙ちょちょぎれですね。。

ぼくはともかく、どうやらこの手の外付けドライブは、ネットブックユーザが増えたため結構売れているみたいですね。 🙂

アマゾンさんでぽちったので今週届くでしょう~。 経験的に再インストールまでにもうひと罠ありそうなきがするのですが、とりあえず到着を待つとします。。