某団体*1 のウェブページ担当になり(2014年7月から)、日本語版に加え、 英語版の作成も仰せつかったので、 WordPress を使って構築しました。 言語の選択をするときちんとページが変わる、恐らく多くの人が期待しているような、 そんな「本物っぽい」ページができました。 使ったテーマのデザインは触っていないので、 見ためのカッコよさなどは不十分とは思いますが、 それはまた別な人にお任せ*2。
これまでは、(前任者が何を使っていたのかはよくわからないのですが*3) 加筆修正に html コードを書き替えなければならず、 かなり面倒でした*4。 そこで、サーバが sakura で WordPress が簡単にインストールできることから*5、 WordPress を使って構築することにしました。 sakura では Open MovableType も使えるのですが、何となく MovableType は 私に合わない気がして、また、WordPress はドキュメントも、 無料の拡張機能も多そうだったので、 WordPress にしました*6。
多言語化のプラグインは Bogo を利用。 案内ページの浮世絵がちょっと分子生物学会ちっく。 もちろん、絵が面白いから選んだのではありません*7。 xili-language を試したところ、トップページの切り替えだけが上手くいかず、 泣く泣く諦めました。 トップページは英語で他の言語は別ページとするならば、 xili-language は第一の選択肢になると思います。 適当に作ったページ同士を紐付けするのも簡単なので。 polylang も次に試しましたが、これはテーマとの相性が悪かったのか、 上手くいきませんでした。評価できません。 ということで、最後に Bogo を試したところ、シンプルで使い勝手もよい。 言語のロケールの変換や後から紐付けができない点が不便ですが、 作成者が対応する気がないと宣言しているので、 慣れるしかありません。でも、慣れれば快適。
Bogo では、ロケールに依存して同じソースでも表示が変化する。 この Bogo の特徴を利用すると、投稿ページの切り替え、投稿カテゴリの表示、 更には、Display Posts Shortcode を使って「集めて」きた投稿も、 そのページのロケールの言語だけ表示される。 この特徴によりコードを減らせるのは、 xili-language に対する大きなアドバンテージ。 また、xili-language では、言語別のメニューを用意しなければならないのだけれど、 Bogo ではメニューはひとつで、表示言語の指定をすればよい。 メニューの設定画面にアイコンが沢山並んで 縦長になってしまうのがイヤという人はいるかもしれぬ。
ワタシの次の人に使えるようにして引き渡せるようにすること。 投稿(ブログ)機能を利用して、加筆修正がしやすく、 かつ、メンテナンスもしやすいようあまりマニアックにし過ぎないようなものを作る、 といったところです。 そこで、できるだけ php のソースコードやCSSを触らない、 過度にプラグインを多用しないようにしました。
以下に箇条書的メモを残します。
絵を付けたり、チュートルアル的なものを書くと1冊の本になってしまいそうなので、
そういうのは、ほかの人にお任せするとして、多言語化を中心に。
本番環境の構築はまだなので、これから変わる部分もあるかもしれません。
ドキュメントルートには、sakura では簡単にインストールできないことが発覚
「フォルダを指定して下さい」とのエラー
そこで、インストラクションに従ってインストールした。
データベース名:himitsu データベース文字コード:utf8;
/** WordPress のためのデータベース名 */ // define('DB_NAME', 'database_name_here'); define('DB_NAME', 'himichu'); /** MySQL データベースのユーザー名 */ // define('DB_USER', 'username_here'); define('DB_USER', 'koremo-himichu'); /** MySQL データベースのパスワード */ // define('DB_PASSWORD', 'password_here'); define('DB_PASSWORD', 'mochiron-himichu'); /** MySQL のホスト名 */ // define('DB_HOST', 'localhost'); define('DB_HOST', 'hogehoge.db.sakura.ne.jp'); ← sakura で指定されてたもの // $table_prefix = 'wp_'; $table_prefix = 'wp_****'; ← 自動でインストールしようとすると出てきたものを流用
サイトのタイトル:日本昆虫科学連合 ユーザー名:himitsu パスワード:motto_himitsu メールアドレス:koremo_himitsu
と入力
以下、そのほかのインストールと設定が相前後するけれども、 サイト構築は道具を作りながらの部分がどうしても必要なので、仕方ありません。
キャッチフレーズ:Union of Japanese Societies for Insect Sciences
と入力
WordPressアドレス (URL):http://www.insect-sciences.jp/ サイトアドレス (URL):http://www.insect-sciences.jp/
となっていることを確認
日付のフォーマット:2015-03-31
にチェック。
デフォルト言語が日本語なので、
ほかのフォーマットにすると月と日とか漢字が入ることもあり、
無難にコンピュータの表記を選ぶ。
変更を保存
これにてWordPress のインストール完了とする
以下、インストールと設定が相前後するけれども、 サイト構築は道具を作りながらの部分がどうしても必要なので、仕方ありません。
必要なプラグインをインストール&有効化。
プラグインのインストールは、
Items per page: 250 If showing both, which first: ●Pages first Show dates after posts: チェックする Show dates after pages: チェックする Date format (if showing dates): Y-m-d Sitemap navigation method: ● Pages: 1 2 3 4 5 Show sitemap navigation: ● At both top and bottom
<!-- ddsitemapgen -->と書く
いくつかカレンダーのプラグインを試してみたけれども、これがよさそうです。 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
日本昆虫科学連合 Union of Japanese Societies for Insect Sciences.と入力。ピリオド忘れぬように(ピリオドがないと、 All Rights Reserved と続いているように見えてしまう)。
キーカラー:#33cc00 キーカラー(明):#000080 ← これは、色名があり、Navy キーカラー(薄):#ccff99
●固定ページ(ラジオボタン)を選択ブログ主体のページではないので。
※「変更を保存」ボタンが一番下にあるので注意!
お知らせ → Info ブログ → Topics ← 完成したときによく見るので、英語で見てもいい単語に※ 設定画面の表記も書き変わって、次からは Info & Topics になるので注意
[1]タイトル [1]概要 [2]タイトル [2]概要 [3]タイトル [3]概要と思っていたのですが、本番では全部消しておくだけにしました。
php のコードをダッシュボードから変更できる。 はじめそれを知らなくて、 ssh でログイン、emacs で作業としていたのですが、 何と簡単なことか (ちょっとセキュリティが心配なような気もしないではないが)。
<!-- [ #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 ] -->
echo $footSiteName;をコメントアウトした。
○○.php の○○○○○○○○を●●●●●●●●した。BizVektor では、「Powered By」を消すキットを販売していたりもするので、 ここは書く訳にはいきません。 テーマは無料だけれども、付加価値の部分は有料という商売をしているようです。 Linux のような感じですな。 BizVektor へのリンクは作ったので、恩返しはできたでしょう。
<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 ?> (↑適宜改行を入れています)
少なくとも、トップページ用は作っておく。 そうしないとウィジェットの設定のとき、トップページが指定できなくなる。 後から指定すればいいだけだけど。
仮環境のときに
トップページを選ぶ(トップに置きたいものを選ぶ)
http://www.insect-sciences.jp/en/contact-us/と入力。 Contact Form 7 のショートコードを書いたページ。 日英に対応しないので、英語を基本とした。 この設定をするとテーマ BizVektor によって、 ウィジェットに「BV_お問いあわせ」が出現する。
この設定は重要。 一度設定すればいいのだが重要。 プラグイン追加後に調整のこと。 「保存」をクリックし忘れないように。
Bogo をインストールするとウィジェットに「日本語」と「英語(米国)」 で表示するかどうかチェックボックスが表われます。 このチェックを外すとその言語では見えなくなります。 間違って、英語(英国)をインストールしたことがあったのですが、 そのときは3つ選べました(wp-content/lauguage の下の関係する言語を消せば言語のアンインストールはできます)
ウィジェットが二ヶ国語対応のときは、両方チェックしたままでOK。
基本方針
仮環境のときに
で、xml ファイルを出力
メニューは復元するけれど、それぞれのメニューでの言語の選択は復元されないので、 ひとつひとつチェックし直す。
プラグインを有効化するとダッシュボードに「お問い合わせ」とのメニューができる。 それを使って設定し、ショートコードを固定ページに貼り付けておしまい。
<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> ※ この [confirm "確認"] [back "戻る"] が、 Contact Form 7 add confirm で使えるようになったもの
差出人:日本昆虫科学連合/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/
[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/
<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> (空行)
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/
[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 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 は対応できるのが素晴しい。
さてさて、文字コード UTF-8 には、4バイトで一文字を表すものがあって、 ……
http://freefielder.jp/blog/2013/03/wordpress-4-byte-chars.html
WordPress で 4バイト文字を扱えるようにする。
によると
&#x に続いて、埋め込みたい文字の16進コード、最後に ;
土に濁点は、𡈽