*WordPress で多言語化（二言語化）サイトを構築する [#v4430b8d]
#contents
** 背景 [#e977749c]
[[某団体:http://www.insect-sciences.jp/]]のウェブページ担当になって
（2014年7月から）、日本語版に加え、英語版の作成も仰せつかったので、
WordPress を使って構築しました。
言語の選択をするときちんとページが変わる、恐らく多くの人が期待しているような、
そんな「本物っぽい」ページができました。
使ったプラグインのデザインを変更していないので、
見ためのカッコよさなどは不十分とは思いますが、
それはまた別な人にお任せ((文句があるなら対案を出せ、ということで))。
これまでは、（前任者が何を使っていたのかはよくわからないのですが）加筆修正に、
htmlコードを書き替えなければならず、
かなり面倒でした((エディタで手打ちは時代に合いませんがな))。
そこで、サーバが sakura で WordPress が簡単にインストールできることから、
WordPress を使って構築することにしました。
sakura では Open MovableType も使えるのですが、何となく MovableType は
私に合わない気がして、また、WordPress はドキュメントも、
無料の拡張機能も多そうだったので、WordPress にしました。
目標は、ワタシの次の人に使えるようにして引き渡せるようにすること。
そこで、投稿（ブログ）機能を利用して、加筆修正がしやすく、
かつ、メンテナンスもしやすいようあまりマニアックにし過ぎないようなものを作る、
といったところです。
以下に箇条書的メモを残します。~
絵を付けたり、チュートルアル的なものを書くと１冊の本になってしまいそうなので、
そういうのは、ほかの人にお任せするとして、多言語化を中心に。
本番環境の構築はまだなので、これから変わる部分もあるかもしれません。
**sakura のサーバコントロールパネルで [#pf331f7c]
- WordPress をインストール（ディレクトリはwp）~
引越しに備え、いままで、home (~/) にあったファイルを ~/common にコピーし、
index.html で飛ばすようにしました((<head><meta http-equiv="Refresh" content=0; URL=http://www.insect-science.jp/common/"></head>))。~
なお、WordPress のディレクトリの下に、index.html を置いても全く問題ない
ことも確認しています。~
WordPress は、index.html は使わず、index.php を使うので、~/wp/index.html はきちんと動きます。
**WordPress のようこそ画面で [#le00846e]
サイトのタイトル：日本昆虫科学連合
ユーザー名：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 ダッシュボード [#ff361aa7]
-WordPress をバージョンアップ
-外観→テーマ
-- 新規追加→テーマのアップロード
-- biz-vektor_v_1_6_3.zip をアップロード
-- BizVektor を有効化＝テーマに選択したことになる~
テーマは、たまたま買った本やその本を買うときに眺めた
（ざっと立ち読みした）本で紹介されていた BizVektor を利用。
日本製、ビジネス用に作られており、カスタマイズ化、無料。
レスポンシブでスマートフォンやタブレットにもそのまま対応する。~
WordPress の「テーマ」は、姿形だけでなく、
様々な機能もパックされているものをいうそうです。
***プラグイン [#f7dd02d5]
- WP Multibyte Patch を更新
- WP Multibyte Patch を有効化~
日本語を扱うには、これを有効化しておくとよいとのこと。~
WordPress をインストールすると入っている。~
バージョンアップして、有効化するだけ。~
***プラグイン追加 [#ce8686d4]
必要なプラグインをインストール＆有効化。~
プラグインのインストールは、
+ ダッシュボードのプラグインをクリック
+ 新規をクリック
+ プラグイン名で検索
+ 適切なものを選択
+ インストールをクリック
+ 有効化
の手順
- Bogo~
多言語対応のためにインストール。
Contact Form 7 と同じ作者（Takayuki Miyoshi）。
日本人((海外製のものがイヤというのではないのですが、日本の人が作ったものは、日本でのニーズが取り入れられていて、かつ、その機能が容易に使えるものが多い気がします。海外のものは、海外のニーズ優先になるからなんだと勝手に解釈))。
これで日英を実現しているので、必須。
プラグインそのものの設定は不要。有効化するだけ。
- Contact Form 7~
本の推奨のもの。
Bogo と同じ作者（日本人）。
これでウェブフォームを実現しているので、必須。
- Contact Form 7 add confirm~
Contact Form 7 とは違う作者（でも日本人）。
Contact From 7 に確認ボタンを追加するプラグイン、必須。
- Display Posts Shortcode~
トップページの更新情報などで利用、必須~
はじめ、List category posts を使ったのですが、上手く動かないことがあったので、
使わないことにしました。~
使い方は別途- TinyMCE Advanced~
入力のとき、表が作りやすくなる。
上付き文字などのアイコンも増やせるが使っていない。
インストールして調子が悪くなるといけないのでテストでも入れておく。
- XML Sitemap Generator~
本の推奨のもの。とりあえずは、設定はしない、URLが変更になるかもしれないので
インストールして調子が悪くなるといけないのでテストでも入れておく。
***設定→パーマリンク設定 [#n3ae3560]
カスタム構造のデフォルトを選び
/%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
*** 設定→ディスカッション [#dc66af8e]
投稿のデフォルト設定の~
□他のブログからの通知 (ピンバック・トラックバック) を受け付ける~
□新しい投稿へのコメントを許可する~
のチェックを外す~
後から外すと、それまでに投稿されていた記事のひとつひとつチェックを
外さなければならなくなる（40個くらいやったら疲れました……）
*** メディア→新規追加 [#b36f744b]
写真などをアップロード
***外観→テーマ→カスタマイズ [#wb08966a]
- サイトのタイトル：日本昆虫科学連合
- キャッチフレーズ：Union of Japanese Societies for Insect Sciences
- ヘッダー画像選択→新規画像：トップに使う大きな図を選択、切り抜かない
- デザイン設定
-- ヘッダーロゴ画像 → 画像を選択~
横長の図を選択
- 連絡先の設定
-- フッター左下とフッターコピーライトに……~
日本昆虫科学連合 Union of Japanese Societies for Insect Sciences.
と入力。ピリオド忘れぬように（ピリオドがないと、
All Rights Reserved と続いているように見えてしまう。
- Rebuild カラー設定
-- キーカラー：#33cc00
-- キーカラー（明）：#000080 ← これは、色名があり、Navy
-- キーカラー（薄）：#ccff99
- 固定フロントページ
--「固定ページ」（ラジオボタン）を選択~
ブログ主体のページではないので。
***外観→テーマオプション [#d89f6848]
※「変更を保存」ボタンが一番下にあるので注意！
- お知らせ & ブログ~
表記の変更のところを書き換え
-- お知らせ → Info
-- ブログ → Topics ← 完成したときによく見るので、英語でもいいものとする~
※ 設定画面の表記も書き変わって、次からは Info & Topics になるので注意~
※ 今のところ Info は使う予定なし
- トップページ3PRエリアの設定~
BizVektor の宣伝みたいな文言が例として入っているので、
本番環境では適切なものにすること！！
単に消すだけでもいいのだが……。
残っていても被害が出るようなものではない。
[1]タイトル
[1]概要
[2]タイトル
[2]概要
[3]タイトル
[3]概要
*** 固定ページを作る [#b4a6ebfc]
少なくとも、トップページ用は作っておく。
そうしないとウィジェットの設定のとき、トップページが指定できなくなる。
後から指定すればいいだけだけど。
*** Bogo の仕様で注意点 [#m51f8303]
- 作ったページは、作ったときの言語のロケールになる。後から変更はできない。
- 対応する別な言語のページを作るときは、まず、言語を選び直す。ダッシュボード右上プロパティの左あたりに言語のセレクタがあるので、言語を変える。
- ロケールが変わると、その言語の翻訳版を作るためのボタンが出るので、それをクリックする。
- 新たなタブが開き、元の言語の内容（本文とタイトル）がコピーされる。
- タイトルを id にしたいときなどは、一度タイトルを消して、下書き、または、公開をするとよい。
- 別々に作ったページを紐付ける機能はない。今後も実装の予定はないそうなので、必ず、元のページから生成する必要がある。
*** 外観→ウィジェット [#qb2a7d1d]
この設定は重要。
一度設定すればいいのだが重要。
プラグイン追加後に調整のこと。
「保存」をクリックし忘れないように。
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_問い合わせボタン
*** 外観→メニュー [#ja30ff25]
- メニュー構造を調整~
インポートした場合は全て入っているが言語の設定ができていないので、適宜選ぶフッターナビゲーションでは英語のメニューも日本語で表示するよう設定
*** 外観→テーマの編集 [#y2e7050a]
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 ?>
（↑適宜改行を入れています）~
*** あとは個々のページを調整していく [#y5e2e3f7]
基本方針~
-「投稿」はスラッグは数字（id）にする
-「固定ページ」は考えて作る
*** プラグイン [#nb3ecaa8]
- 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 [#m58aa35c]
-日~
お問い合わせフォーム
--フォーム
<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 <******@********.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/
*** 外観→テーマ→カスタマイズ [#s13f99b1]
- ナビゲーション
-- Header Navigation: GlobalNavigation
-- Footer Navigation: FooterNavigation
-- Footer SiteMap: （選択せず）
- 連絡先の設定
-- 問い合わせページのURL
http://www.insect-sciences.jp/wp/en/contact-us/
と入力（本番環境では「wp」を抜くこと）
- 固定フロントページ
--「フロントページ」（プルダウンメニュー）は「トップページ」を選択
***引越すときには、 [#y18de9ad]
***仮環境のときに [#a9520b10]
- ツール→エクスポート~
で、xml ファイルを出力
- ツール→インポート→WordPress~
-- WordPress Importer をインストール
-- プラグインを有効化してインポートツールを実行
-- エクスポートしていた xml ファイルをアップロード
-- エラーが出るが気にしない
メニューは復元するけれど、それぞれのメニューでの言語の選択は復元されないので、
ひとつひとつチェックし直す。
***Display Posts Shortcode の例 [#xab24ade]
コレカラ
とすると、指定したカテゴリの投稿のうち、その言語のものが全て、
新しい順に表示される。そのページの言語ではないものは表示しない。
したがって、同じコードを別々の言語の固定ページに貼り付ければよい。
コレカラ
とすると、指定したカテゴリの投稿のうち、その言語のもののうち
一番新しいものが表示される。
ふたつを別なページで使うと、
-現役員および運営委員
-歴代役員および運営委員
が自動できる。
しかも、新しく投稿すれば、現役員は差し替わり、歴代には追加される。
同様に学会賞でも使っているが、学会賞では、タグとの二重の判断とする。~
カテゴリは学会賞を指し、各学会をタグで指定。~
こうすることでカテゴリが見づらくならない。
副産物として、カテゴリの第２の階層を選ぶが、親の階層を選ばないでおくと、
リンクがあってもクリックできず、投稿した記事だけが裸になって
見えてしまうことがない。リンクできるように見えてしまうのが残念だけど。
***投稿したもの [#te08c90b]
コレカラ
***新着情報の例 [#a737ef0c]
コレカラ
![[PukiWiki]](image/tomarufront.png "[PukiWiki]")
