WordPress で多言語化（二言語化）サイトを構築する
某団体のウェブページ担当になって（2014年7月から）、日本語版に加え、英語
版の作成も仰せつかったので、WordPress を使って構築しました。
これまでは、何を使っていたのかはよくわからないのですが、加筆修正に、
htmlを書き替えなければならず、かなり面倒でした。
サーバが sakura なので、WordPress が簡単にインストールできることから、
WordPress を使って構築することにしました。
sakura では Open MovableType も使えるのですが、何となく、MovableType は
私に合わない気がして、また、WordPress はドキュメントも、無料での拡張機
能も多そうだったので、WordPress にしました。
以下に箇条書的メモを残します。
絵を付けたり、チュートルアル的なものを書くと１冊の本になってしまいそう
なので、そういうのは、ほかの人にお任せするとして、多言語化を中心に。
本番環境の構築はまだなので、これから変わる部分もあるかもしれません。
○sakura のサーバコントロールパネルで
・WordPress をインストール（ディレクトリはwp）
引越しに備え、いままで、home (~/) にあったファイルを ~/common にコピーし、
index.html で飛ばすようにしました。
なお、WordPress のディレクトリの下に、index.html を置いても全く問題ない
ことも確認しています。
WordPress は、index.html は使わず、index.php を使うので、
~/wp/index.html はきちんと動きます。
○WordPress のようこそ画面で
・サイトのタイトル：日本昆虫科学連合
・ユーザー名：himitsu
・パスワード：motto_himitsu
・メールアドレス：koremo_himitsu
と入力
・設定→一般設定
- WordPressアドレス (URL)：http://www.insect-sciences.jp/wp
- サイトアドレス (URL)：http://www.insect-sciences.jp/wp
とする ← 本番環境では「wp」を取る予定
- 日付のフォーマット：2015-03-31 にチェッック
WordPress のインストール完了
以下、インストールと設定が相前後するけれども、サイト構築は道具を作りな
がらの部分がどうしても必要なので、仕方ありません。
○WordPress ダッシュボード
・WordPress をバージョンアップ
・外観→テーマ
- 新規追加→テーマのアップロード
- biz-vektor_v_1_6_3.zip をアップロード
- BizVektor を有効化＝テーマに選択したことになる
テーマは、たまたま買った本、その本を買うときに眺めた（ざっと立ち読みし
た）本で紹介されていた BizVektor を利用。
日本製、ビジネス用に作られており、カスタマイズ化、無料。
レスポンシブでスマートフォンやタブレットにもそのまま対応する。
WordPress のテーマは、姿形だけでなく、様々な機能もパックされているもの
をいうそうです。
・プラグイン
- WP Multibyte Patch を更新
- WP Multibyte Patch を有効化
日本語を扱うには、これを有効化しておくとよいとのこと。
WordPress をインストールすると入っている。
バージョンアップして、有効化するだけ。
・プラグイン追加
必要なプラグインをインストール＆有効化。
プラグインのインストールは、
ダッシュボードのプラグインをクリック
→ 新規をクリック
→ プラグイン名で検索
→ 適切なものを選択
→ インストールをクリック
→ 有効化
の手順
- Bogo
多言語対応のためにインストール。
Contact Form 7 と同じ作者（日本人）
これで日英を実現しているので、必須
プラグインそのものの設定は不要
- Display Posts Shortcode
トップページの更新情報などで利用、必須
はじめ、List category posts を使ったのですが、上手く動かないことがあったので、
使わないことにしました。
使い方は別途
- Contact Form 7
本の推奨のもの
Bogo と同じ作者（日本人）
これでウェブフォームを実現しているので、必須
- Contact Form 7 add confirm
Contact Form 7 とは違う作者（でも日本人）
Contact From 7 に確認ボタンを追加するプラグイン、必須
- TinyMCE Advanced
入力のとき、表が作りやすくなる
上付き文字などのアイコンも増やせるが使っていない
インストールして調子が悪くなるといけないのでテストでも入れておく
- XML Sitemap Generator
本の推奨のもの
とりあえずは、設定はしない、URLが変更になるかもしれないので
インストールして調子が悪くなるといけないのでテストでも入れておく
・設定→パーマリンク設定
カスタム構造のデフォルトを選び
/%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個くらいやったら疲れました……）
・メディア→新規追加
写真などをアップロード
・外観→テーマ→カスタマイズ
- サイトのタイトル
日本昆虫科学連合
- キャッチフレーズ
Union of Japanese Societies for Insect Sciences
- ヘッダー画像選択→新規画像
トップに使う大きな図を選択、切り抜かない
- デザイン設定
* ヘッダーロゴ画像 → 画像を選択
横長の図を選択
- 連絡先の設定
* フッター左下とフッターコピーライトに……
日本昆虫科学連合 Union of Japanese Societies for Insect Sciences.
と入力。ピリオド忘れぬように（ピリオドがないと、All Rights Reserved と続いているように見えてしまう。
- Rebuild カラー設定
* キーカラー
#33cc00
* キーカラー（明）
#000080 ← これは、色名があり、Navy
* キーカラー（薄）
#ccff99
- 固定フロントページ
* 「固定ページ」（ラジオボタン）を選択
ブログ主体のページではないので。
・外観→テーマオプション
※「変更を保存」ボタンが一番下にあるので注意！
- お知らせ & ブログ
表記の変更のところを書き換え
お知らせ → Info
ブログ → Topics ← 完成したときによく見るので、英語でもいいものとする
※ 設定画面の表記も書き変わって、次からは Info & Topics になるので注意
※ 今のところ Info は使う予定なし
- トップページ3PRエリアの設定
BizVektor の宣伝みたいな文言が例として入っているので、本番環境では
適切なものにすること！！単に消すだけでもいいのだが……。残っていて
も被害があるようなものではない。
[1]タイトル
[1]概要
[2]タイトル
[2]概要
[3]タイトル
[3]概要
・固定ページを作る
少なくとも、トップページ用は作っておく。
そうしないとウィジェットの設定のとき、トップページが指定できなくなる。
後から指定すればいいだけだけど。
Bogo の仕様で注意点
- 作ったページは、作ったときの言語のロケールになる。後から変更はできない。
- 対応する別な言語のページを作るときは、まず、言語を選び直す。ダッシュボード右上プロパティの左あたりに言語のセレクタがあるので、言語を変える。
- ロケールが変わると、その言語の翻訳版を作るためのボタンが出るので、
それをクリックする。
- 新たなタブが開き、元の言語の内容（本文とタイトル）がコピーされる。
- タイトルを id にしたいときなどは、一度タイトルを消して、下書き、ま
たは、公開をするとよい。
- 別々に作ったページを紐付ける機能はない。今後も実装の予定はないそう
なので、必ず、元のページから生成する必要がある。
・外観→ウィジェット
この設定は重要。
一度設定すればいいのだが重要。
プラグイン追加後に調整のこと。
「保存」をクリックし忘れないように。
Bogo をインストールするとウィジェットに「日本語」と「英語（米国）」で
表示するかどうかチェックボックスが表われます。このチェックを外すとそ
の言語では見えなくなります。間違って、英語（英国）をインストールした
ことがあったのですが、そのときは３つ選べました((wp-content/lauguage
の下の関係する言語を消せば言語のアンインストールはできます))
ウィジェットが二ヶ国語対応のときは、両方チェックしたままでＯＫ。
言語切り替え ← Bogo
BV_問い合わせボタン ← BizVektor
○○ ← BizVektor
などは、和英に対応しています。
なお、「BV_」のウィジェットは、BizVektor
- コンテンツエリア（トップページ）
に以下のウィジェットを並べる
-- BV_トップ用_固定ページ本文
→ 「トップページ」を選ぶ ← 日本語用のトップページを選ぶ
→ 「タイトルを表示させる」のチェックを外す
→ 「英語（米国）」のチェックを外す
-- BV_トップ用_固定ページ本文
→ 「TopPage」を選ぶ ← 英語用のトップページを選ぶ
→ 「タイトルを表示させる」のチェックを外す
→ 「日本語」のチェックを外す
- サイドバー（お知らせページ） ← 使う予定はないが一応
に以下のウィジェットを並べる
-- 言語切り替え
- サイドバー（トップページ）
に以下のウィジェットを並べる
-- 言語切り替え
-- 検索
→ タイトルに「サイト内検索」と入力
→ 「英語（米国）」のチェックを外す
-- 検索
→ タイトルに「Search the Site」と入力
→ 「日本語」のチェックを外す
-- BV_問い合わせボタン
- サイドバー（投稿ページ）
に以下のウィジェットを並べる
-- 言語切り替え
-- BV_最近の投稿
→ タイトルに「新着情報」と入力
→ 表示件数を「5」とする
→ 「英語（米国）」のチェックを外す
-- BV_最近の投稿
→ タイトルに「What's New」と入力
→ 表示件数を「5」とする
→ 「日本語」のチェックを外す
-- 検索
→ タイトルに「サイト内検索」と入力
→ 「英語（米国）」のチェックを外す
-- 検索
→ タイトルに「Search the Site」と入力
→ 「日本語」のチェックを外す
-- BV_問い合わせボタン
- サイドバー（固定ページ）
に以下のウィジェットを並べる
-- 言語切り替え
-- BV_最近の投稿
→ タイトルに「新着情報」と入力
→ 表示件数を「5」とする
→ 「英語（米国）」のチェックを外す
-- BV_最近の投稿
→ タイトルに「What's New」と入力
→ 表示件数を「5」とする
→ 「日本語」のチェックを外す
-- 検索
→ タイトルに「サイト内検索」と入力
→ 「英語（米国）」のチェックを外す
-- 検索
→ タイトルに「Search the Site」と入力
→ 「日本語」のチェックを外す
-- BV_問い合わせボタン
・外観→メニュー
- メニュー構造を調整
インポートした場合は全て入っているが言語の設定ができていないので、
適宜選ぶ
フッターナビゲーションでは英語のメニューも日本語で表示するよう設定
・外観→テーマの編集
php のコードをダッシュボードから変更できる。はじめそれを知らなくて、
ssh でログイン、emacs で作業としていたのですが、何と簡単なことか
（ちょっとセキュリティが心配なような気もしないではないが）。
- header.php
２行追加
トップページにはヘッダロゴの絵を見せないようにするため
<!-- [ #headLogo ] -->
<?php if ( !is_front_page() ): ?> <?php /* 追加 28 Mar 2015 tomaru */ ?>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<a href="<?php echo home_url( '/' ); ?>" title="<?php bloginfo('name'); ?>" rel="home">
<?php biz_vektor_print_headLogo(); ?>
</a>
</<?php echo $heading_tag; ?>>
<?php endif; ?> <?php /* 追加 28 Mar 2015 tomaru */ ?>
<!-- [ /#headLogo ] -->
- theme-options.php
* footer に表示される自サイト名を削るため
548行目の
echo $footSiteName;
をコメントアウトした。
* フッタに WordPress と BizVektor の文字列が出るのを止める。
テーマ BizVektor の利用条件では消してもいいとのこと
○○.php の ○○行目の
○○○○○○○○
を●●●●●●●●した。
BizVektor では、Powered By を消すキットを販売していたりもするので、
ここは、書く訳にはいきません。テーマは無料だけれども、付加価値の
部分は有料という商売をしているようです。Linux のような感じですな。
- module_mainfoot.php
Contact us を設定するとフッタにしつこいメールのリンクが出るので、
<!-- [ .mainFootContact ] -->
と
<!-- [ .mainFootContact ] -->
の間の
<div class="mainFootContact">
<p class="mainFootTxt">
<?php biz_vektor_mainfootContact(); ?>
</p>
<?php // 問い合わせページのURLが設定されている場合に表示
$options = biz_vektor_get_theme_options();
if ($options['contact_link']) :?>
<div class="mainFootBt"><a href="<?php echo $options['contact_link'] ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/<?php _e('bt_contact.png', 'biz-vektor'); ?>" alt="<?php _e('Contact us by e-mail', 'biz-vektor'); ?>" /></a>
</div>
<?php endif; ?>
</div>
を全てコメントアウトした。
コメントアウトが面倒だったので、コメントアウト後のソースを下に
<?php // comment out 29 Mar 2015 tomaru BEGIN ?>
<?php
// <div class="mainFootContact">
// <p class="mainFootTxt">
?>
<?php // biz_vektor_mainfootContact(); ?>
<?php
// </p> ?>
<?php // 問い合わせページのURLが設定されている場合に表示
// $options = biz_vektor_get_theme_options();
// if ($options['contact_link']) :?>
<?php
// <div class="mainFootBt"><a href=" ?><?php //echo $options['contact_link'] ?><?php // "> ?>
<?php
// <img src=" ?><?php //echo get_template_directory_uri(); ?><?php // /images/ ?><?php // _e('bt_contact.png', 'biz-vektor'); ?><?php // " ?> <?php //alt=" ?><?php // _e('Contact us by e-mail', 'biz-vektor'); ?><?php //" /> ?><?php //</a>
//</div> ?>
<?php // endif; ?>
<?php // </div> ?>
<?php // comment out 29 Mar 2015 tomaru END ?>
<<<<<<<<<<<<<<<< ココマデ
あとは個々のページを調整していく
基本方針
「投稿」はスラッグは数字（id）にする
「固定ページ」は考えて作る
Dagon Design Sitemap Generator の導入
「野良」なのだけれども、大丈夫そうです。2009年のもの
http://www.dagondesign.com/articles/sitemap-generator-plugin-for-wordpress/
http://saizou01.com/dagon-design-sitemap-generator-8928
流行？の PS Auto Sitemap はよくなかった。
これは無骨だけど、ま、いっか、の感じ。
ソースを検証すべきなか？？？
<<<<<<<<<<<< Contact Form 7
日
お問い合わせフォーム
フォーム
<p>お名前 (必須)<br />
[text* your-name 60/] </p>
<p>ご所属<br />
[text your-affiliation 60/]
<p>メールアドレス (必須)<br />
[email* your-email 60/] </p>
<p>お問い合わせ内容<br />
[textarea your-message 70x] </p>
<p>[submit "送信"][confirm "確認"] [back "戻る"]</p>
メール
差出人：
日本昆虫科学連合／Union of Japanese Societies for Insect Sciences <contact2@insect-sciences.jp>
件名：
UJSIS Contact Mail／日本昆虫科学連合お問い合わせ
メッセージ本文
日本昆虫科学連合−お問い合わせフォームより送信がありました。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 お名前 】 [your-name]
【 ご所属 】 [your-affiliation]
【 Email 】 [your-email]
【 お問い合わせ内容 】
[your-message]
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
送信日時：[_date] [_time]
IPアドレス：[_remote_ip]
ブラウザ： [_user_agent]
問い合わせのページURL：[_post_url]
このメールは自動送信でお送りしています。
--
日本昆虫科学連合
Union of Japanese Societies for Insect Sciences
http://www.insect-sciences.jp/
メール (2)
[your-name] 様
日本昆虫科学連合：お問い合わせありがとうございました。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【 お名前 】 [your-name]
【 ご所属 】 [your-affiliation]
【 Email 】 [your-email]
【 お問い合わせ内容 】
[your-message]
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
このメールは自動送信でお送りしています。
問い合わせページURL： [_post_url]
--
日本昆虫科学連合
Union of Japanese Societies for Insect Sciences
http://www.insect-sciences.jp/
英
Contact-us
フォーム
<p>Name (Required)<br />
[text* your-name 60/] </p>
<p>Affiliation<br />
[text your-affiliation 60/]
<p>Email address (Required)<br />
[email* your-email 60/] </p>
<p>Message<br />
[textarea your-message 70x] </p>
<p>[submit "Send"][confirm "Confirm"][back "Back"]</p>
メール
こちらの受信用なので日本語版と同じ
メール (2)
メール本文
Dear [your-name]
Thank you for your message to the Union of Japanese Societies for Insect Sciences.
===============================================
Name: [your-name]
Affiliation: [your-affiliation]
Email: [your-email]
Message:
[your-message]
===============================================
This email was automatically sent.
Contact us URL: [_post_url]
--
Union of Japanese Societies for Insect Sciences
http://www.insect-sciences.jp/
<<<<<<<<<<<< Contact Form 7
・外観→テーマ→カスタマイズ
- ナビゲーション
* Header Navigation
GlobalNavigation
* Footer Navigation
フッターサイトマップ
* Footer SiteMap
（選択せず）
- 連絡先の設定
* 問い合わせページのURL
http://www.insect-sciences.jp/wp/en/contact-us/
と入力（本番環境では「wp」を抜くこと）
- 固定フロントページ
* 「フロントページ」（プルダウンメニュー）は「トップページ」を選択
引越すときには、
仮環境のときに
・ツール→エクスポート
で、xml ファイルを出力
・ツール→インポート→WordPress
- WordPress Importer をインストール
- プラグインを有効化してインポートツールを実行
- エクスポートしていた xml ファイルをアップロード
- エラーが出るが気にしない
メニューは復元するけれど、それぞれのメニューでの言語の選択は復元され
ないので、ひとつひとつチェックし直す。
Display Posts Shortcode の例
とすると、指定したカテゴリの投稿のうち、その言語のものが全て、新しい順
に表示される。そのページの言語ではないものは表示しない。したがって、同
じコードを別々の言語の固定ページに貼り付ければよい。
とすると、指定したカテゴリの投稿のうち、その言語のもののうち一番新しい
ものが表示される。
ふたつを別なページで使うと、
現役員および運営委員
歴代役員および運営委員
が自動できる。
しかも、新しく投稿すれば、現役員は差し替わり、歴代には追加される。
同様に学会賞でも使っているが、学会賞では、タグとの二重の判断とする。
カテゴリは学会賞を指し、各学会をタグで指定。
こうすることでカテゴリが見づらくならない。
副産物として、カテゴリの第２の階層を選ぶが、親の階層を選ばないでおくと、
リンクがあってもクリックできず、投稿した記事だけが裸になって見えてしま
うことがない。リンクできるように見えてしまうのが残念だけど。
投稿したもの
新着情報の例
![[PukiWiki]](image/tomarufront.png "[PukiWiki]")
