WordPress で多言語化(二言語化)サイトを構築する 2015年4月1日 & 追加4月25日

背景

某団体*1 のウェブページ担当になり(2014年7月から)、日本語版に加え、 英語版の作成も仰せつかったので、 WordPress を使って構築しました。 言語の選択をするときちんとページが変わる、恐らく多くの人が期待しているような、 そんな「本物っぽい」ページができました。 使ったテーマのデザインは触っていないので、 見ためのカッコよさなどは不十分とは思いますが、 それはまた別な人にお任せ*2

WordPress にする

これまでは、(前任者が何を使っていたのかはよくわからないのですが*3) 加筆修正に html コードを書き替えなければならず、 かなり面倒でした*4。 そこで、サーバが sakura で WordPress が簡単にインストールできることから*5、 WordPress を使って構築することにしました。 sakura では Open MovableType も使えるのですが、何となく MovableType は 私に合わない気がして、また、WordPress はドキュメントも、 無料の拡張機能も多そうだったので、 WordPress にしました*6

Bogo で多言語化

多言語化のプラグインは Bogo を利用。 案内ページの浮世絵がちょっと分子生物学会ちっく。 もちろん、絵が面白いから選んだのではありません*7。 xili-language を試したところ、トップページの切り替えだけが上手くいかず、 泣く泣く諦めました。 トップページは英語で他の言語は別ページとするならば、 xili-language は第一の選択肢になると思います。 適当に作ったページ同士を紐付けするのも簡単なので。 polylang も次に試しましたが、これはテーマとの相性が悪かったのか、 上手くいきませんでした。評価できません。 ということで、最後に Bogo を試したところ、シンプルで使い勝手もよい。 言語のロケールの変換や後から紐付けができない点が不便ですが、 作成者が対応する気がないと宣言しているので、 慣れるしかありません。でも、慣れれば快適。

Bogo の言語の表示(ロケール)について

Bogo では、ロケールに依存して同じソースでも表示が変化する。 この Bogo の特徴を利用すると、投稿ページの切り替え、投稿カテゴリの表示、 更には、Display Posts Shortcode を使って「集めて」きた投稿も、 そのページのロケールの言語だけ表示される。 この特徴によりコードを減らせるのは、 xili-language に対する大きなアドバンテージ。 また、xili-language では、言語別のメニューを用意しなければならないのだけれど、 Bogo ではメニューはひとつで、表示言語の指定をすればよい。 メニューの設定画面にアイコンが沢山並んで 縦長になってしまうのがイヤという人はいるかもしれぬ。

Bogo の仕様で注意点

作成目標

ワタシの次の人に使えるようにして引き渡せるようにすること。 投稿(ブログ)機能を利用して、加筆修正がしやすく、 かつ、メンテナンスもしやすいようあまりマニアックにし過ぎないようなものを作る、 といったところです。 そこで、できるだけ php のソースコードやCSSを触らない、 過度にプラグインを多用しないようにしました。

ということで

以下に箇条書的メモを残します。
絵を付けたり、チュートルアル的なものを書くと1冊の本になってしまいそうなので、 そういうのは、ほかの人にお任せするとして、多言語化を中心に。 本番環境の構築はまだなので、これから変わる部分もあるかもしれません。

sakura のサーバコントロールパネルで……、できなかった!

ドキュメントルートには、sakura では簡単にインストールできないことが発覚
「フォルダを指定して下さい」とのエラー
そこで、インストラクションに従ってインストールした。

インストール

WordPress のようこそ画面で

サイトのタイトル:日本昆虫科学連合
ユーザー名:himitsu
パスワード:motto_himitsu
メールアドレス:koremo_himitsu

と入力

以下、そのほかのインストールと設定が相前後するけれども、 サイト構築は道具を作りながらの部分がどうしても必要なので、仕方ありません。

WordPress ダッシュボード

設定→一般設定

キャッチフレーズ:Union of Japanese Societies for Insect Sciences

と入力

WordPressアドレス (URL):http://www.insect-sciences.jp/
サイトアドレス (URL):http://www.insect-sciences.jp/

となっていることを確認

日付のフォーマット:2015-03-31 

にチェック。 デフォルト言語が日本語なので、 ほかのフォーマットにすると月と日とか漢字が入ることもあり、 無難にコンピュータの表記を選ぶ。

変更を保存

これにてWordPress のインストール完了とする

以下、インストールと設定が相前後するけれども、 サイト構築は道具を作りながらの部分がどうしても必要なので、仕方ありません。

WordPress ダッシュボード

プラグイン

プラグイン追加

必要なプラグインをインストール&有効化。
プラグインのインストールは、

  1. ダッシュボードのプラグインをクリック
  2. 新規をクリック
  3. プラグイン名で検索
  4. 適切なものを選択
  5. インストールをクリック
  6. 有効化 の手順 URL は参考でしかありません(Dagon Design Sitemap Generator 除く)。

いくつかカレンダーのプラグインを試してみたけれども、これがよさそうです。 2日間以上のイベントの管理が微妙にずれるんだけども*11

設定→パーマリンク設定

カスタム構造のデフォルトを選び

 /%category%/%postname%/

とする

 NG NG NG NG NG NG NG NG NG NG NG NG
 オプション
 カテゴリーベースに「topics」と入力
 英語版でうまく動かないことがあるのでだめ
 英語側で投稿ページが表示できなくなる
 階層が異なってしまうためと思われる
 回避策はあるのかもしれないが深いことは考えないことにする
 NG NG NG NG NG NG NG NG NG NG NG NG  

設定→ディスカッション

投稿のデフォルト設定の

□他のブログからの通知 (ピンバック・トラックバック) を受け付ける
□新しい投稿へのコメントを許可する

のチェックを外す。 後から外すと、それまでに投稿されていた記事のひとつひとつチェックを 外さなければならなくなる(40個くらいやったら疲れました……)。

メディア→新規追加

写真などをアップロード

外観→テーマ→カスタマイズ

以下、テーマ関連は BizVektor のカスタマイズ。 テーマが異なれば、また別なものとなります。似てるけど。

サイトのタイトル:日本昆虫科学連合
キャッチフレーズ:Union of Japanese Societies for Insect Sciences

外観→テーマオプション

※「変更を保存」ボタンが一番下にあるので注意!

外観→テーマの編集

php のコードをダッシュボードから変更できる。 はじめそれを知らなくて、 ssh でログイン、emacs で作業としていたのですが、 何と簡単なことか (ちょっとセキュリティが心配なような気もしないではないが)。

固定ページを作る

少なくとも、トップページ用は作っておく。 そうしないとウィジェットの設定のとき、トップページが指定できなくなる。 後から指定すればいいだけだけど。

本番のときは

仮環境のときに

外観→テーマ→カスタマイズ

外観→ウィジェット

この設定は重要。 一度設定すればいいのだが重要。 プラグイン追加後に調整のこと。 「保存」をクリックし忘れないように。

Bogo をインストールするとウィジェットに「日本語」と「英語(米国)」 で表示するかどうかチェックボックスが表われます。 このチェックを外すとその言語では見えなくなります。 間違って、英語(英国)をインストールしたことがあったのですが、 そのときは3つ選べました(wp-content/lauguage の下の関係する言語を消せば言語のアンインストールはできます)

ウィジェットが二ヶ国語対応のときは、両方チェックしたままでOK。

外観→メニュー

あとは個々のページを調整していく

基本方針

外観→テーマ→カスタマイズ

引越すときには、

仮環境のときに

で、xml ファイルを出力

メニューは復元するけれど、それぞれのメニューでの言語の選択は復元されないので、 ひとつひとつチェックし直す。

Contact Form 7 の設定

プラグインを有効化するとダッシュボードに「お問い合わせ」とのメニューができる。 それを使って設定し、ショートコードを固定ページに貼り付けておしまい。

Display Posts Shortcode の例

[display-posts] 

とすると、全ての投稿のうち、その言語のものが新しい順に10コまで表示される。 そのページの言語ではないものは表示しない(Bogo の機能)。 したがって、同じコードを別々の言語の固定ページに貼り付けてOK。

include_date="true" 

とすると、日付が表示される。

include_excerpt="true"

とすると、本文が途中まで表示される。

posts_per_page="数字"

とすると、指定したカテゴリの投稿のうち、その言語のもののうち 新しいものから「数字」個が表示される。

category="fruitfly,butterfly,dragonfly,sawfly"

でカテゴリを指定。

tag="parasite"

で、タグが使える。カテゴリとタグの併用もできる。

include_content="true"

とすると、指定したカテゴリの投稿が全て表示される。

wrapper="div" 

とすると、div でラップされる。 そこで、

<div>
[display-posts category="hexapoda" wrapper="div" 
posts_per_page="1"  include_content="true"]
(適当に改行しています:以下同様)
</div>

とすると、指定したカテゴリ(hexapoda)の投稿のうち、その言語のもののうち 一番新しいものの全文が表示され、 ul のビュレット(箇条書きの印)が出ない(divだから)。 つまり、hexapodaカテゴリの投稿のうち、 今見ている言語で最新のものの全文が表示される。
同じコードでも、一方には posts_per_page="1"、 もう一方には posts_per_page を入れないとするページを作ると

が自動でできる。 しかも、新しく投稿すれば、最新は差し替わり、全てのページには追加される。

<div>
[display-posts category="arthropod" tag="parasite" wrap="div"  
posts_per_page="200000" wrapper="div"  include_content="true"]
</div>

とすると、指定したカテゴリ(arthropod)の投稿のうち、 タグに parasite をもつもので、 その言語のもの全て(200000個まで:対応していないかも) の投稿の全文が表示される。 これは長くなりそうだ……。

なお、副産物として、カテゴリの第2の階層を選ぶが、親の階層を選ばないでおくと、 リンクがあってもクリックできず、投稿した記事だけが裸になって 見えてしまうことがない。リンクできるように見えてしまうのが残念だけど。

新着情報の例

[display-posts category="fruitfly,butterfly,dragonfly,sawfly,
dobsonfly, whitefly,Spanishfly" posts_per_page="5" include_date="true" 
date_format="Y-n-j" include_excerpt="true"]

My Calendar の Shortcode の例

My Calendar も独自のカテゴリーがある。 作っておくと、Shortcode で利用できる。

月毎のカレンダーの表示

[my_calendar format="calendar" time="month" above="nav,jump" 
below="none"  category="butterfly"]

これから行われるイベントの箇条書き表示

[my_calendar_upcoming template="<strong>{daterange}</strong><br />
{linking_title}<br />{excerpt}" before="0" after="10000" type="event" 
order="asc" show_today="yes" category="arthropod"]

template= を使うと、html タグも使える。
{daterange}:日付の範囲 ← これがカレンダー表示とずれる原因なのだが解決できていない
{linking_title}:タイトルをクリックすると、そのイベントが表示される
{excerpt}:内容の一部を表示
before="0" after="10000" :これで、今日より前は含めず、将来を見せると指定
show_today="yes" : 今日のイベントを含める

既に終わったイベントの箇条書き表示

[my_calendar_upcoming template="<strong>{daterange}</strong><br />
{linking_title}<br />{excerpt}" before="1000" after="0" type="event"
order="desc" show_today="yes" category="fruitfly"]

my_calendar_upcoming:upcoming で間違いではない。before と after で制御しているので
template= を使うと、html タグも使える。
{daterange}:日付の範囲 ← これがカレンダー表示とずれる原因なのだが解決できていない
{linking_title}:タイトルをクリックすると、そのイベントが表示される
{excerpt}:内容の一部を表示
before="1000" after="0" :これで、今日より前だけを見せると指定
show_today="yes" : 今日のイベントを含める

予定がないとき

[my_calendar_upcoming template="<strong>{daterange}</strong>
{linking_title} {excerpt}" before="0" after="10" type="event"
fallback="連合関連のシンポジウム等の予定はありません" order="asc"
show_today="yes" category="insect,arthropod"]

fallback="文字列":イベントがないときに表示される。 昆虫連合そのもののシンポジウムなどはない期間があるので、代替文字列も必要。 My Calendar の shortcode は対応できるのが素晴しい。

4バイト文字の対応

さてさて、文字コード UTF-8 には、4バイトで一文字を表すものがあって、 ……

http://freefielder.jp/blog/2013/03/wordpress-4-byte-chars.html WordPress で 4バイト文字を扱えるようにする。
によると

&#x に続いて、埋め込みたい文字の16進コード、最後に ;

土に濁点は、&#x2123D;

*1 16の加盟学協会のいずれにも入会したこともまともに参加したこともないのに編集幹事に指名されてしまった。どの学会にも入っていなくてもよい、かつ、運営委員になっても入会する必要はないと言われ……。レフェリーはいくつかの学会のものをやったことあったものの
*2 文句があるなら対案を出せ、ということで
*3 どんなソフトを使っていたのか教えてほしいと尋ねたら、好きなものを何を使っても構わない、との有り難いお言葉をいただきました。便利なもの教えてくれ、という意味だったんだけど、必要なら作れってことか!ということで今回作ったという次第
*4 エディタで手打ちは時代に合いませんがな
*5 ところが、本番環境の、ホームディレクトリ直下にインストールしようとしたら、sakura のサーバコントロールパネルからはインストールできず、インストール用 php をアップロードする手間が要りました
*6 WikiMediaもインストールしてみたのだけれど、こういうサイトには向かないことがよくわかりました
*7 分子生物学会の会員でもないし
*8 <head><meta http-equiv="Refresh" content=0; URL=http://www.insect-science.jp/common/"></head>
*9 海外製のものがイヤというのではないのですが、日本の人が作ったものは、日本でのニーズが取り入れられていて、かつ、その機能が容易に使えるものが多い気がします。海外のものは、海外のニーズ優先になるからなんだと勝手に解釈
*10 ほんとは後からインストールしたのだけれど、ここに書いときます
*11 カレンダー表示に3日間見せようとすると、なぜか、4日間の期間を指定しなきゃならない

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 25 Apr 2015 (土) 20:49:25 (1907d)