2008.09.05.

applemint

screenshot Theme Name: applemint (BETA) version: 0.01
固定幅、2コラム、ウィジェット対応。

WordPress 用のフリーテーマです。まだ、テストバージョンです。お気づきの点がございましたら、指摘していただけるとありがたいです。
MacのFirefox をメインに、Safari、Opera、WindowsのFirefox、Safari、IE6、IE7 で表示テストをしています。IEに関しては、ほんの少しだけ細かいデザインが変わっていますが、気にならない程度だと思っています。IE5.5 以下および Mac 版 IE は、対象外です。

ヘッダーは、数年前に富良野へ行ったときに写した写真です。ラベンダー以外でもいろんな種類の花畑がたくさんあって、とてもきれいです。とはいえ、アップで撮った写真では、富良野だかどこだかわかりませんね。

2008.08.31.

ivy

screenshot Theme Name: ivy (BETA) version: 0.01
固定幅、3コラム、ウィジェット対応。

WordPress 用のフリーテーマです。まだ、テストバージョンです。お気づきの点がございましたら、指摘していただけるとありがたいです。
MacのFirefox をメインに、Safari、Opera、WindowsのFirefox、Safari、IE6、IE7 で表示テストをしています。IEに関しては、一部透過している影が付かないとか、丸めたコーナーが四角いままなど細かいデザインが変わっていますが、基本的には大きく表示が崩れない程度にはなっています。IE5.5 以下および Mac 版 IE は、対象外です。Safari でもコメント欄で一部表示が崩れているところがあります。

2008.08.09.

「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応

「IE7.js」、「IE8.js」は、IE6 で対応していなかった透過 PNG、疑似クラス :hover、マージン:auto、min-、max-などなどが表示できるようになるという javascript です。
googleコードから直接読み込めるので、「Google Code」のページにある「IE7.js」または「IE8.js」のコードをコピーして<head>内に埋め込むだけ。簡単です。
「IE7.js」は、IE5と6用。「IE8.js」は、IE5から7まで。標準的な XHTM/CSSの 解釈をしてくれるようになるはず。なるはず、というのはまだベータ版だから。
私のサイトでは、ページに少しだけ影を付けていたり、メニュー部分で :hover や min-width を使っていますが、IE6 表示用にそれぞれの要素に対して個別に対応しなければなりませんでした。これらが「IE7.js」を使うだけでまとめて解決できれば、ずいぶん楽ちん。さっそく入れてみたのでした。

「IE7.js」を使った結果。
:hover はうまく動作しています。IE6 でもドロップダウンメニューが動くようになりました。min-width はうまく働きませんでした。透過 PNG 自体はちゃんと表示されますが、リピート表示が出来ない仕様になっていました。影表示の透過 PNG は、縦方向にリピートさせているので意図した形にはなりませんでした。とりあえず、メニュー部分が崩れてしまうと大変読みにくくなるので :hover だけでもありがたいです。
「IE8.js」のほうは、疑似要素の:after、:before にも対応しています。でもその要素をマイナスのマージンを指定して親要素の枠に重ねたり外に出したりの移動が出来なくて、思った形には使えませんでした。この辺は細かいデザインの話なので、今まで通り出来なければ出来ないなりに個別に対応するしかないですね。

とりあえず最小限の対応ということで「IE7.js」を使うことにしました。

2008.08.08.

WordPressのオリジナルテーマを国際化してみる

国際化。なんかかっこいい。
基本形は英語表示で、日本語で使用する場合のみ日本語表示になるようにします。
たとえばサイドバーの各タイトル。英語で見ているときは「Archives」だけど、日本語で見ているときは「アーカイブ」に切り替わって表示されるという具合。ん、単にカタカナにしただけ?
どうせフリーのテーマを作るなら、世界に通用するものをと、志だけは高く掲げます。

そもそも WordPress のファイルの中、wp-content フォルダ > languages フォルダの中に ja.mo と ja.po というファイルが入っていて、この人たちが英語を日本語に翻訳してくれているんですね。
それでテーマの PHP ファイルの中で、_e(‘Archives’)とか、__(‘(more…)’)と書いておくと、「アーカイブ」とか「(続きを読む…)」というふうに翻訳して表示してくれる。WordPress のディフォルトテーマではこの仕組みで日本語表示をしています。
自分でテーマを作るときは、標準的なものは上記 ja.po の中に英文と日本語訳が入っているから、それを見ながら日本語にしたい部分に書いていけばだいたい足りるみたい。
ところがやっぱりこれは、標準的なものしか入ってなくて、たとえば「月別アーカイブ」という語句を使いたくて、 ja.po の中で検索してみても
英文: “A monthly archive of your blog’s posts”
日本語訳: “ブログ投稿の月別アーカイブ”
なんていうのしか出てこない。ちょっと冗長すぎるからもっと簡潔にいきたいよね。

そこで活躍するのが、「Poedit」というソフト。
これは、ja.po を編集して新しい訳文に入れ変えたりした後、翻訳機能の本体である ja.mo を書き出してくれる。
Windows 用の他に、Mac 版も出ているようなので、さっそくMac 用をダウンロードして使ってみた。ところが、私の環境(Mac OS X の10.5.4)では、うまく動いてくれなかった。途中でかたまってしまう。しかたなく、Windows で作業。こちらは大丈夫みたい。

必要なファイル

  • pot ファイル:どのファイルの何行目の語句を訳しますよという、基本ファイル。たいてい訳語の方は空白になっている。
  • ja.po ファイル:編集作業を行うためのファイル。これを Poedit で読み込んで、対訳を編集していく。
  • ja.mo ファイル:Poedit では、ja.po を保存するときに同時に書き出してくれる。これが翻訳機能の本体。オリジナルテーマと同じ場所に置いておくと、翻訳してくれる。

今回は pot ファイルとして、WordPress 日本語ローカルサイトWordPress を翻訳するで翻訳ツールに関して説明してあり通りに、まずは公式 WordPress POT ファイル をダウンロードして使ってみる。

正直言って、Poedit の使い方はいまだによくわかっていない。なんとなく動いてくれてるからいいかというレベル。
詳しい使い方は一番下の参考サイトなど、細かく教えてくれるサイトがいろいろあるので探してみてください。

ここでは、私がやった方法の概略だけ記しておきます。

  1. Poeditを起動。
  2. ファイル > pot ファイルを元に新しいカタログを作成します… でダウンロードした wordpress.pot を選択
  3. プロジェクトの設定
  4. 原文を確認しながら対訳を書き込んでいく
  5. 保存するときに ja.po というファイルにする
  6. ja.po と同時に ja.mo というファイルが書き出される
  7. ja.po と ja.mo ファイルを自分で作ったオリジナルテーマのフォルダの中にアップロード
  8. functions.php の中に「 load_theme_textdomain(‘適当な名前’); 」を書き足す。私は、’ezorisu’ と付けました。
  9. オリジナルテーマの日本語化したい部分を修正
    たとえば、「月別アーカイブ」と表示したい部分に <h2><?php _e(‘Archives by Month’, ‘適当な名前’); ?></h2>
    と書き込む。
    ’適当な名前’のところに functions.php の中に書いたのと同じ名前を付けてやることで、オリジナルテーマフォルダ内の ja.po を読みに行くようにする。
    これを付けないと、もともとあった languages フォルダ内の ja.po を読みに行くことになる。
  10. 完了

で、ここで気が付いた。翻訳数が少ないのなら、最初に読み込んだ pot ファイルを直接編集しちゃった方が早いかも。
今回は、一般的な語句はもともとあった languages フォルダ内の ja.po の翻訳を使い、少し足りないところや、オリジナルの訳語を使いたいところだけ付け足してるだけだし。jp.po を編集して新しい語句を作る方法もよくわからなかった。
それなら pot ファイルをエディタで開いて直接編集したほうが楽。

#: ファイル名. php :行数
msgid “英語の原文”
msgstr “対訳”

と書いていって、不要な部分を消してしまいます。
再度、Poedit で ja.po を開きます。 「カタログ > POT ファイルを元に更新します…」で更新。数が少ないとこっちの方が簡単。