コードノート

コードノートはwebを中心にテクノロジー・クリエイティブを伝えるWebメディアです。コードリンク代表、片岡亮が執筆しています。

海外Wordpressテンプレート(テーマ)の日本語化カスタマイズ Envato Market・Newspaper編

f:id:moba13:20180220183050p:plain

Wordpressのテンプレートも有料・無料問わず以前と比べるとだいぶ増えてきて、便利な世の中ですね。

国内で有名なものだと、「OPENCAGE」シリーズや「TCD」シリーズなどでしょうか。僕も何度かお世話になっています。

ただデザインに納得いかないなぁと思ったり、メディア向けデザインというよりもオシャレなブログデザイン止まりだよなぁと感じるところもあります。

そこで海外のWordpressテンプレートはどうなのだろう探して見ると目につくのは海外のデジタルコンテンツ販売ポータルサイトEnvato MarketのThemeForestです。

WordPressテンプレートカテゴリを見ると、1番売れているものだと60ドルのテンプレートが累計40万件も購入されていて、「累計約25億円分も売れてるの!?」と思ったりします。価格変更やセール期間もあったりするんでしょうけどね。

もちろんテンプレートのクオリティも国内のものより高く、そりゃこれだけ市場規模違うならこうなるよなというかんじです。

ただこれらのテンプレートは英語ベースで作られているわけで、英語のドキュメントを頑張って読むだけでなく、日本語を扱った時に生じるデザインの調整・バグの修正が必要となります。

というわけで、今回は海外WPテンプレートを日本語サイトで扱う場合、具体的にどんな変更が必要かメモ代わりにまとめていきます。

どのテンプレートにも共通することを書いていきますが、対象例として今回はブログメディア向けWPテンプレートの累計販売数1位のNewspaperを使っています。

themeforest.net

他にも海外WPテンプレートの日本語をしたことはあるのですが、ポイントはだいたい同じかなぁと思います。

1. インストールと英語ドキュメントの読み込み

テンプレートのインストールはだいたいどれも特にクセはないので割愛。

その後のセッティングについてですが、海外WPテンプレートは管理画面上で色々カスタマイズが出来るようになっている場合が多いです。

f:id:moba13:20180220165509p:plain

さすがお金がかかってるね!と思うところなのですが、一方でテンプレートのファイルを直接編集してなんとなく雰囲気でカスタマイズすることが出来ないというデメリットもあります。

そしてランキング上位の高機能なテンプレートほど、初期設定項目が多い傾向にあります。テンプレートいれればそのまますぐ使える!ということがなく、英語の設定画面を見ながらポチポチしなければいけません。

なので使い方が説明されたドキュメントはしっかり読むのが良いです。合い言葉はGoogle翻訳最高!

今回利用したテンプレート・Newspaperもドキュメントはweb上にあり(Documentation: Welcome to Newspaper WordPress Theme)、大抵は同様にwebページ上に準備されていることが多いです。

なのでポチッとChromeのGoogle翻訳拡張などを使えば、簡単にページ丸ごとに翻訳文章に変換できるのが便利ですね。

技術系の英文は翻訳された文章でおおよその雰囲気が掴めればどうにかなります。試しに上記ページでページ全体のGoogle翻訳を試してもらえれば「あ、大丈夫そう。」と思えるのでないでしょうか。

Wordpressテンプレートはカスタマイズする時に、どこまでが管理画面で出来ることで、どこからからファイルを直接編集しないと出来ないことがわからないと時間を消費するので、面倒ですがドキュメントは上から下まで読んだ方が最終的に効率的でしょう。

家電の説明書を読まず雰囲気で使う、という人には向いていないかもしれません(笑)

2.英語表記の修正&日本語に合わせてフォント周りのCSSの修正

英語のドキュメントをなんとか読んで設定を終えても、まだサイトは使い物になりません。

まず表記が英語のままな部分を日本語に書き換えないといけません。

WPの言語設定に応じて最低現のローカライズがされていることも多い(Search→検索 など)ですが、それでも所々英語のままだったり日本語が変なところがあるので修正が必要です。

そしてさらに大事なのが、CSSの変更。

海外テンプレは当然英語前提に作られているので、日本語を扱うとかなり見づらくなります。デモサイトではあんなにオシャレだったのに日本語にするとダサい…というのは多くの場合ここが原因でしょう。

とはいえ大きく分ければ、修正ポイントはそんなになく、以下のような部分を直せば良いです。

  • font-family (使用するフォントの設定。日本語には適さないフォントになっていることがほとんど。)
  • font-size (フォントのサイズ。英語の場合、日本語のサイトより本文中のフォントサイズが小さく設定されている場合が多い。一方でタイトルのフォントサイズが大きすぎたりも。)
  • line-height (行間。そのままでも大丈夫なこともあるけれど、日本語のサイトより行間が広く設定されていることが多い気がする。)
  • font-weight (フォントの太さ。英語だと文字サイズに応じてほどよく太字になったりするのですが、日本語だとbold指定した方がよい場所も。主にタイトルやメニュー部)

 

PC用とスマホ用で別のスタイルが当たっている部分もあるので、両端末でチェックが必要です。

どの部分もwebデザイナーさんであれば当たり前のところですが、そうでない人からすると「よくわからないけどなんか変…」としか感じられない部分かもしれないですね。

ただ文字を配置してるだけにしか見えないところでも、実は色々バランスが考えていたりするのです。

3.プラグインの日本語向け改造

技術に明るくない人の場合、海外製のWPテンプレートを使う上で一番面倒なのがここかもしれません。

例えば、どの海外テンプレートであれぶつかる問題が記事一覧ページでの抜粋文章の生成です。

日本語の場合は抜粋文は、記事本文の頭から30文字をカットして生成、なんて処理をしているのですが、英語の場合スペース区切りで5センテンス以上あったらそこから先をカットして生成、という処理がされます。

しかし日本語の場合は文章中にスペースがないため、この処理だと一切抜粋文章が省略されないという自体になります。以下のようなかんじ。

f:id:moba13:20180220200317p:plain

テンプレートによってはセンテンス単位でなく文字数単位に指定できる場合もありますが、それも個々に設定をする必要があったりして面倒なので、抜粋文章を生成している部分のプログラムを書き換える方が早いです。

今回カスタマイズしているNewspaperテンプレートの場合は、td_util.phpのexcerpt関数がそれに当たりましたが、テンプレートによってどこでこの処理がされているかは違うので、grep検索なりをして該当箇所を見つけて対応しましょうとしか言えなかったりします。

ファイルを読み込んでいくしかありませんね。

さいごに

ざっくりになりますが、以上が海外WPテンプレを日本語で使う際のポイントのなります。

どれも必要なスキル要件は高くないのですが、ある程度Wordpressの知識が必要・ある程度webデザインの知識が必要・ある程度プログラミング(PHP)の知識が必要、となっていて、どうしても利用されることが少ないのですよね。

これだけ細々やっても結局「日本語にするとこのデザイン微妙だな。」なんてことになって利用しないなんてケースもあり、海外WPテンプレートを採用するかの判断は難しいところです。(1個2個扱えば勘どころはわかりますけどね。)

ただ一方でEnvato Marketのテンプレートはだいたいが60ドル程度なので、最悪ダメでも60ドルと人件費分だけの損でしかありません。

それであれば、ダメで元々とりあえず使ってみる、という考えで利用するのが良いと思います。一から開発するよりは明らかに低コストですからね。

というわけで海外テンプレートで素敵なWordPressライフをどうぞ!