プラグイン・テーマ 開発翻訳
WordPressのプラグインやテーマの開発、日本語への翻訳等を行っています。

フォトログ、写真アルバムのWordPressテーマ Gentoki

フォトログ、フォトアルバムのWordPressテーマ Gentoki

Lightbox Gallery pluginというプラグインを作成・公開した際に、Lightbox Galleryプラグインを使用した写真アルバム(フォトログ)サイトである、記憶の記録@GENTOKIをプラグインのデモとして公開したわけだが、このWordPressのテーマファイルも公開してほしいという声をいくつかいただいたのでこの度公開することにした。

ダウンロード
Gentokiという名前のWordPressテーマで、フォトログ、フォトアルバム、写真サイトを作成するのに最適なテーマである。 ダウンロードは下記から行ってほしい。圧縮ファイルを解凍して出てきたディレクトリgentokiをwp-content/themesにアップロードし、管理メニューのテーマ からGentokiというテーマを選べば使用できる。

必須条件
WordPress 2.5以上(WordPress 2.5以上ではないと、[gallery]が使用できないため)

使用方法
基本的には、投稿時に写真をアップロードし、[gallery]を投稿欄に入力するだけである。[gallery]の前後に何かしら写真に関連する内容を記載してもいいだろう。[gallery]の詳しい使い方については、WordPress 2.5の新機能 ギャラリー[gallery]を使って画像一覧表示するを見てほしい。例えば、一列に5枚写真を並べる場合は[gallery columns=”5″]と投稿欄に入力する。

また、トップページやアーカイブで表示される写真は投稿時に最初にアップロードした写真が表示されるようになっている。写真のサイズはサムネイルのサイズであるが、160×120に最適化されている。サムネイルの大きさは管理メニューの設定 - その他の設定で変更できる。

右上の自己紹介やサイトマップといった項目はheader.phpで直接入力してあるので必要なかったら削除してほしい。その他、デザイン的なものは適宜修正(style.cssなど)していただきたい。

投稿欄とフッターの間に、Google Adsense(300×250の広告)に最適な欄とその右側にウィジェットで表示するところを用意してある。ウィジェットは横に3つ表示できる。ウィジェットの指定は、管理メニューのテーマ - ウィジェットから行ってほしい。

対応プラグイン
下記のプラグインをインストールすることをお勧めしたい。特にLightbox Galleryは画面遷移なしに写真を次々と見ていくことができるのでお勧めしたい。

デモ
記憶の記録@GENTOKIを見てほしい。

ライセンス
ライセンスはWordPressと同じGPLで、フッターにあるリンクはできれば残していただけるとうれしい。

その他、何かおかしい点、改善案などあったらコメント欄かお問い合わせしていただけるとありがたい。

Lightbox Gallery plugin

WordPress 2.5の新機能 ギャラリー[gallery]を使って画像一覧表示するという記事でWordPress 2.5からの新機能である[gallery]の使い方を説明したが、このgalleryを使ってフォトログや写真アルバムサイトを構築するにはいまいち役不足だったので、[gallery]を拡張してプラグイン化してみた。その名も、Lightbox Galleryというプラグインである。

Lightbox Gallery プラグインタイトル
Lightbox Gallery [ English here ]

必須条件
WordPress 2.5以上

特徴
Lightbox Galleryは、[gallery]の機能を拡張し、Lightboxで画像・写真を表示できるように変更するプラグインである。Lightbox Galleryの主な特徴は以下のとおり。

  • Lightboxで画像・写真を表示
  • Tooltip(ツールチップ)で画像のキャプションを表示
  • 写真の一覧表示はローディングっぽく遅延表示
  • 写真の付随情報(機種・絞り値など)を表示

ヒストリー

  • 2008.05.08 Lightbox Gallery 0.2.1 公開
    • [gallery]のclass属性の追加。
  • 2008.05.08 Lightbox Gallery 0.2 公開
    • ショートコードの[gallery]を使わずにlightboxで画像を表示する(rel="lightbox")のサポート
  • 2008.04.22 Lightbox Gallery 0.1 公開

ダウンロード
Lightbox Galleryプラグインのダウンロードは下記のリンクをクリックしてください。

または

インストール

  1. Lightbox Galleryプラグインをインストールするには、上記の圧縮ファイルを解凍し、lightbox-gallery.jsの2行目のパスをご利用の環境に合わせて設定する。
  2. lightbox-galleryディレクトリをそのままwp-content/pluginsディレクトリにアップロードし、Lightbox Galleryを有効化する。

使用方法
Lightbox Galleryを使用方法は、WordPress 2.5以降に搭載されているギャラリーと基本的には同じである。写真を複数登録し、[gallery]タグを投稿欄に挿入するだけである。写真のキャプションは、マウスが画像の上にくるとtooltip(ツールチップ)として表示され、写真の説明はLightboxが表示される際に表示される。

上級設定
[gallery]のショートコードのオプションは全て使用できる。詳しいオプションについては、WordPress 2.5の新機能 ギャラリー[gallery]を使って画像一覧表示するを参照してほしい。ここでは、標準のオプションに加えて、Lightbox Galleryで付け加えたオプションを説明する。

  • lightboxsize
    lightboxsizeに指定した大きさでLightboxを表示する。デフォルトではmedium になっているが、full に指定することも可能。

    CODE:
    1. [gallery lightboxsize="full"]

  • meta
    metaは写真の付随情報を表示するかどうかを指定する。デフォルトではfalseになっており、表示されない。表示したい場合はtrueを指定する。写真の付随情報は、カメラの機種、絞り値、焦点距離、シャッタースピード、撮影日時をLightboxに表示する。

    CODE:
    1. [gallery meta="true"]

  • class
    classはgalleryのクラス属性を追加する。デフォルトではgallery1になっている。

    CODE:
    1. [gallery class="gallery2"]

[実例] Lightbox Galleryプラグインを使用した写真アルバム(フォトログ)サイト
このLightbox Galleryプラグインを使用し、テーマもカスタマイズしたサイトを作成した。記憶の記録@GENTOKIというサイトで、筆者が実際に撮った写真を掲載している写真アルバム(フォトログ)サイトである。

Lightbox Galleryプラグインの実例 記憶の記録@GENTOKI
記憶の記録@GENTOKI

もし需要があるようならテーマファイルも公開したいと思う。要望はコメント欄やお問い合わせから。その他、不具合やご質問・感想等があれば何なりとおっしゃってほしい。

Lightbox Gallery
This plugin changes the view of galleries to the lightbox.

Requirement
WordPress 2.5

Features

  • Lightbox display of Gallery
  • Tooltip view of caption of images
  • Displays the associated metadata with images

Download

OR

Install

  1. Edit the `lightbox-gallery.js` and check the path of line 2 according to your settings.
  2. Copy the `lightbox-gallery` directory into your `wp-content/plugins` directory
  3. Activate the plugin through the 'Plugins' menu in WordPress
  4. That's it! :)

History

  • 2008.05.08 Lightbox Gallery 0.2.1 Release
    • Adds a class attribute into [gallery].
  • 2008.05.08 Lightbox Gallery 0.2 Release
    • Supports rel="lightbox" to make regular images appear in a lightbox.
  • 2008.04.22 Lightbox Gallery 0.1 Release

How to use
How to use this plugin is basically the same as the way to add [gallery] which has been adopted by over WordPress 2.5. Lightbox Gallery plugin automatically converted the default view of gallery into the lightbox view. Photo captions are displayed as tooltips. Photo descriptions are displayed when the lightbox pops up.

Frequently Asked Questions
How can I make regular images appear in a lightbox without [gallery] shortcode?
Just add rel="lightbox" into "a" tag. Here is a sample.

<a href="image.jpg" rel="lightbox" title="this is a caption">
<img src="thumbnail.jpg" alt="" />
</a>

How can I handle multiple galleries in one page as saparate ones?
You need to do two steps. If you would like to handle galleries separately, add different class names into [gallery] and add codes as many as class names into `lightbox-gallery.js`.

  1. Edit `lightbox-gallery.js` and add some codes. Look at the comment of the file.
  2. Add a class attribute into [gallery]. ex) [gallery class="gallery2"]

Advanced settings
There are three additional options to extend the shorttag [gallery].

  • lightboxsize
    The image size when the lightbox pops up. The default is medium, but you can change to full.

    CODE:
    1. [gallery lightboxsize="full"]

  • meta
    Defines whether the exif information is displayed. The default is false. If you want to show the photo info, set true. The exif shown on the lightbox includes camera body, aperture, focal length, shutter speed, and created timestamp.

    CODE:
    1. [gallery meta="true"]

  • class
    Adds a class of the gallery. The default is 'gallery1'.

    CODE:
    1. [gallery class="gallery2"]

Demo
See Record of memory @ GENTOKI.
It's my photo album site.

Thanks.

翻訳ファイルを用意してプラグインを日本語化する

WordPressの便利なところはプラグインによる拡張性だが、多くのプラグインが英語で提供されている。英語のままでも別に問題はないのだが、企業サイト、商用ホームページを作成するにあたって、クライアントが直接触れるようなところはなるべく日本語化しておきたいところだ。また、顧客の要望に応じたプラグインを作成する必要性が生じた際に初めから国際化できるように対応しておくと有益なプラグインができた時に公開することもできるだろう。

プラグインの国際化(ローカライズ)、翻訳はどのようにして行えばいいのだろうか。WordPressの翻訳については、本家サイトのTranslating WordPress « WordPress Codexに詳しく書かれているので一度見ていただきたいが、翻訳に際して、大きく2つのステップがあることがわかる。

  1. プログラムの開発者が国際化対応のコードを書く
  2. 翻訳リソースファイルを編集して翻訳する

WordPressの翻訳の仕組み
WordPressの国際化は、gettextを用いている。gettextについては、PHPでメッセージカタログはgettextしかありえないでしょ(何故gettextか?編)あたりを読んでいただけるといいと思うが、要は多言語化するためのライブラリとコマンドのことである。仕組みとしてはこうである。プログラムのコードから、メッセージカタログである翻訳リソースファイル(.poファイル)を作成し、それを各言語用に翻訳し、バイナリファイル(.moファイル)を生成し読み込むのである。

国際化対応のコードとは?
実際にインストールしてあるプラグインのソースコードを見てみてほしい。国際化に対応してあるプラグインはたいていソースのはじめに下記のようなコードがあるはずだ。

CODE:
  1. load_plugin_textdomain('cforms');

これは複雑なお問い合わせフォームを作成するプラグイン cforms II
で紹介したcforms IIのコードである。この関数を読み込むと、__()と_e()で囲まれた部分が自動的に翻訳対象となる仕組みである。ちなみにこの関数は第一引数に任意のドメイン(通常はプラグイン名か)を、第二引数に翻訳ファイル(.moファイル)を読み込むディレクトリを指定できる。デフォルトではプラグインディレクトリのwp-content/pluginsとなっているので、このcforms IIの翻訳ファイルはwp-content/pluginsにアップロードしなくてはいけない。

CODE:
  1. load_plugin_textdomain('cforms','wp-content/plugins/contactforms');

このようにディレクトリを指定すると、翻訳ファイルの位置が変わる。余談だが、多くのプラグインはディレクトリ構造を持っており、wp-content/pluginsにディレクトリごとアップロードする仕組みだ。このcformsのように翻訳ファイルの位置がプラグインディレクトリの直下にある(つまりcforms II本体はwp-content/plugins/contactformsなのにcforms-ja.moはwp-content/pluginsにあるということ)となんだか気持ち悪い気がするのだが、まぁ、好みの違いか。

翻訳対象となる関数 __()と_e()
さて、翻訳対象となる関数が2つ用意されている。__()と_e()である。どちらも翻訳するメッセージを引数にとるが、違いは翻訳されたメッセージをreturnで返すか、echoで返すかの違いである。第1引数に翻訳するメッセージを、第2引数にload_plugin_textdomain()で指定したドメインを代入する。ドメインを指定しない場合はWordPress本体の翻訳ファイルを参照するようになるので忘れずに指定したい。

__($message, $domain)
翻訳された$messageをreturnで返す
_e($message, $domain)
翻訳された$messageをechoで返す

例文を見てみよう。

CODE:
  1. $message = __('This is an example.', 'wordpressgogo');
  2. _e('This is an example.', 'wordpressgogo');

上の__()は$messageに値を代入するのに対し、_e()はメッセージを出力するコードである。そのため、以下のコードは同じことだ(冗長的だけど)。

CODE:
  1. _e('This is an example.', 'wordpressgogo');
  2. echo __('This is an example.', 'wordpressgogo');

ちなみに動的な値を翻訳する場合はどうすればよいのだろうか。sprintf()を利用すると変数を$message内に含ませることができる。下記のような感じだ。

CODE:
  1. $name1 = 'WordPress';
  2. $name2 = 'Go Go';
  3. echo sprintf(__('I am %s.','wordpressgogo'), $name); // 1つの時
  4. echo sprintf(__('I am %1$s %2$s.', 'wordpressgogo'), $name1, $name2); // 2つ以上の時

gettextの翻訳関連ファイル
gettextの翻訳関連ファイルは3つある。プラグインを翻訳するには、.potファイルが用意されている場合は、各言語用に.poファイルを編集し、.moファイルを作成する。.potファイルがない場合はソースコードから.potファイルを生成することになる。

POT (Portable Object Template)
ソースコードの中から先ほどの__()と_e()のメッセージをすべて抽出した翻訳リソースのもとになるファイルだ。実質的には.poファイルと同じだと思うが、元の翻訳リソースファイルとして.potファイルといわれる。ちなみに.potはPowerPointのテンプレートファイルと同じ拡張子である。
PO (Portable Object)
上の.potファイルをもとに各言語に翻訳したものが.poファイルである。
MO (Machine Object)
その名の通り、.poファイルを機械が効率よく読み込めるようにしたバイナリファイルが.moファイルである。

実際に翻訳するには?
さて、実際に翻訳するには翻訳ファイルを編集できるツールを使う必要がある。広く紹介されているのがpoEditというエディタでWindows、Mac OS X、Linuxに対応している。現在の最新バージョンは1.3.9のようだ。インストールの仕方や使い方は、お問い合わせフォームを簡単に作成するプラグイン Contact Form 7で取り上げたプラグインの開発者のmiyoshiさんが、poEdit で翻訳ファイルを作る « iDeasiloで詳しく解説してくださっているのでそちらを参照してほしい。ここでは簡単に流れだけを追っておく。

poEdit

  1. poEditをダウンロードし、インストールする
  2. .potファイルもしくは.poファイルをpoEditで開く
  3. 翻訳する
  4. 保存する(自動的に.moファイルが生成されるはず)
  5. できた.moファイルをload_plugin_textdomain()で指定されたディレクトリにアップロードする

以上の流れで、プラグインの翻訳が完成するはずである。poEditは使い方に少し癖がある気がするのでmiyoshiさんの解説をしっかり読んだ方がいいかもしれない。

翻訳ファイル.moファイルのファイル名
さて、最後に注意しておかなければならないのが、翻訳ファイル.moのファイル名についてだ。このファイル名がきちんと設定されていないと翻訳がうまくいかない。ファイル名の規則としては、load_plugin_textdomain()で指定した{ドメイン}-{ロケール}.moとなる。ロケールの確認方法は、wp-config.phpの下記の部分。

CODE:
  1. define ('WPLANG', 'ja');

おそらく'ja'となっているはずだ。そのため、上記のcforms IIの場合だと、ドメインがcforms、ロケールがjaなので、cforms-ja.moとなる。間違えないようにしたい。

テーマファイルの翻訳
上記まではプラグインの翻訳を中心に見てきたが、テーマファイルの翻訳も可能である。しかしながら、国際化対応されたテーマファイルは多くないかもしれない。テーマファイルの翻訳にはまず、load_theme_textdomain()を読み込んでおく必要がある。通常はfunctions.phpで呼び出される。引数は1つだけで、ドメインを指定するのみである。翻訳ファイルの位置は自動的にテーマディレクトリの中(wp-content/themes/theme-name)となる。また、翻訳ファイル.moファイルの名前は、{ロケール}.moと決まっており、上記の例だと、ja.moとなる。テーマファイルも翻訳できるということを知っておくといいだろう。

最後に
さて、長々とプラグインの日本語化について述べてきたが、複雑そうに見えても一度仕組みさえ知ってしまえば簡単だと思う。早い話、プラグインの翻訳はpoEditで.poファイルを編集し、生成した.moファイルをアップロードするだけである。WordPressは海外のプラグインが多くまだまだ日本語化されていないプラグインも多いのでぜひ日本語化に挑戦してもらいたい。そして、翻訳ができたら積極的に公開するのがいいだろう。また、新たにプラグインを作成する場合もはじめからローカライズ対応しておくとよいだろう。

参考にしたページ

cforms II 日本語翻訳ファイル

cforms II 日本語翻訳ファイル

複雑なお問い合わせフォームを作成するプラグイン cforms IIを紹介したが、プラグイン制作者のOliverさんから依頼を受けて日本語翻訳ファイルを作成した。一部誤訳やタイプミスがあるかもしれないので、この日本語翻訳ファイルを使用された方で何かしら発見されたらぜひご報告いただきたい。

日本語翻訳ファイルの適用方法は以下の通り。

  1. 圧縮ファイルを展開する。
  2. cforms-ja.moをwp-content/pluginsディレクトリにアップロードする。
  3. p*-title.jpg(*は1-5)をwp-content/plugins/cforms/imagesにアップロードする。

以上である。管理画面で正常に日本語化されているか確認してほしい。cforms IIは大変高機能なお問い合わせフォーム作成プラグインなので、すべての機能を使いこなすのは難しいかもしれないが、日本語化したので少しでも使いやすくなって(言語の障壁がなくなるので)いればと思う。

cforms II v8.5 更新情報 2008年5月24日

  • カスタムファイルサポート
  • デフォルトのフォーム参照方法の追加変更 <!--cforms name="XYZ"-->
  • バグフィックス

cforms II v8.4.2 更新情報 2008年5月15日

  • バグフィックス

cforms II v8.4.1 更新情報 2008年5月5日
バージョンアップはバックアップをしてから行ってください。

  • バグフィックス

cforms II v8.4 更新情報 2008年4月27日

  • {custom var}の向上
  • インプットフィールド用[id:ID]
  • バグフィックス

cforms II v8.3 更新情報 2008年4月18日
主な更新点は以下の通り。もしかしたら、トラッキングのフォームの名前が文字化けしてるかも・・・。

  • トラッキング機能リニューアル
  • トラッキング:XMLダウンロード
  • トラッキング:編集可能フィールド
  • バグフィックス

cforms II v8.2 更新情報 2008年4月11日
主な更新点は以下の通り。

  • 日付入力機能の強化
  • バグフィックス

cforms II v8.02 更新情報 2008年3月21日
主な更新点は以下の通り。
ディレクトリ構造が変更になっているので注意してほしい。バージョンアップに際し、新しいcformsをアップロードして、古いcformsを取り除く場合、独自のスタイリングをコピーするのを忘れないようにしたい。

  • WordPress 2.5対応
  • /contactforms/ディレクトリから/cforms/ディレクトリへ変更(プラグイン自動更新対応)
  • バグフィックス

cforms II v7.51 更新情報 2008年2月19日
主な更新点は以下の通り。

  • バグフィックス

cforms II v7.5 更新情報 2008年2月13日
主な更新点は以下の通り。

  • WPコメント機能刷新
    • wp-comments-post.phpに依存しない
    • SPAM対策
    • Ajax化
  • admin UI xHTML準拠
  • バグフィックス

cforms II v7.4 更新情報 2008年2月6日
主な更新点は以下の通り。

  • カスタム処理の変更、向上(my-functions.php)
  • 現在のログインユーザーを参照する新しいシステム変数
  • バグフィックス

cforms II v7.3 更新情報 2008年1月26日
主な更新点は以下の通り。

  • {Author} の追加
  • トラッキングのGeoMapLookupのサポート
  • カレンダーナビゲーションの向上
  • 特定ページのみにcformsヘッダーを表示
  • バグフィックス

cforms II v7.2 更新情報 2008年1月12日
主な更新点は以下の通り。

  • CSS (cforms themes) を無効にできる
  • Captchaイメージのカスタマイズ
  • バグフィックス

cforms II v7.1 更新情報 2008年1月5日
主な更新点は以下の通り。

  • テーマの追加 (monospace light&dark, fancy white/blue)
  • トルコ語利用可
  • バグフィックス

cforms II v7.0 更新情報 2007年12月29日
主な更新点は以下の通り。

  • T-A-F {VARIABLES}のオプションサポート追加
  • インプットフィールドの代替Name/IDのサポート(例: cf_field_12)
  • 高度なエラー表示
  • Hiddenフィールドのサポート
  • テーマのCSS向上

cforms II v6.5 更新情報 2007年12月27日
主な更新点は以下の通り。

  • フォーム作成支援 ウィザードモード
  • 新しいフィールドの追加をワンクリックで
  • リードオンリーインプットフィールドのサポート
  • CSSテーマの追加: dark_XL & grey_blocks
  • 管理画面UIの向上

cforms II v6.4 更新情報 2007年12月4日
主な更新点は以下の通り。

  • フォーム送信数の制限
  • SSL・TLSをサポートするPHPmailer 2.0
  • リダイレクトオプション向上: HIDE mode
  • 管理画面UIの向上

cforms II v6.3 更新情報 2007年12月2日
主な更新点は以下の通り。

  • 新しいインプットフィールドの追加: masked password field
  • リダイレクトオプションの強化: hide form
  • TinyMCEの強化
  • ドラッグアンドドロップ時の管理画面Javascript UIの改良(特にIE)
  • クイックスタート用プリセットフォーム(basic, T-A-F, WP Comment and custom err)
  • 必須項目のテキストがない場合、HTMLが完全に省略される