Weaver II テーマ に変えてみた。それにプラグインも追加 (その2)

このサイトの見かけを変更するためにテーマを Weaver II に変えた、というのが前回のお話。ついでに、プラグインもいろいろ入れ替えたり追加したりした。

多機能プラグイン

いつからか Jetpack by WordPress.comWP Total Hacks のように、ひとつで多くの機能を持つプラグインを使うようになった。そのために不要になったプラグインを削除した。たとえば、サイト情報の統計情報のためのスマイリー[1]を隠すとか、SNS の共有ボタンの設置やそれらへの自動投稿とか、favicon の設定とか、リビジョンコントロールの制御とか……。

追加したプラグイン

Yet Another Related Posts Plugin

以前は別の何かのプラグインで表示させていたのだがいつの間にか外していたので、このプラグインでふたたび「関連するかもしれない記事」を表示させることにした。

Picasa Express x2

数か月前から写真を Google+ 経由で Picasa に置いてみている。それをこんなふうにこちらから参照するためのプラグイン。

WP-Footnotes

ずっと前から使っているのだが、その頃にはプラグインの公式ディレクトリはなかったのか、作者のサイトから直接もらってきたか何かで、更新の通知がないためにずっとバージョン 0.9.1 のままだった[2]。この機会に探してみたらうんとバージョンが上がっていた。

CSS を管理画面で設定できるようになって便利になっていた。しかし何かの拍子にこれも含め WP-Footnotes の設定全部が消えてしまうようだ[3]。そこで備忘録としてここに書いておく。

  • マークは [ ] で囲い、算用数字。上付
  • 脚注の最後の戻りマークは、カッコをつけず、↩

そして脚注の CSS は次のとおり。

ol.footnotes { 
    clear: both;
    border-top: solid 1px #444;
    font-size: 0.8em;
    line-height: 1.6em;
    padding: 0 2em;
}

AdSense Now!

これまでは不向きだと思って考えてもいなかったのだが、今後書いていきたい内容からすると、広告を載せてもいいかという気になってきた。サイドバーの広告はウィジェットの「テキスト」にそのまま書くことにして、個々の記事に付ける広告にはこのプラグインを使うことにした。

Amazon Widgets Shortcodes

これも広告。文中に画像や、文字へのリンクを簡単に埋め込めそうだったので、このプラグインを入れてみた。下書きで試した程度でまだ本格的には使っていないが、便利そうだ。ビジュアルエディターでしか使えないのがちょっと残念。

【2015年12月21日追記】このプラグインはその後 WordPress 本体がバージョンアップして以来、編集画面でうまく使えなくなっていた。手でショートコードを書き込めば使えていたのだが、2015年末、このブログ全体を SSL 化するに際して、とうとう対応できなくなってしまった。長らくメンテナンスされていないこのプラグインをあきらめ、AmazonJS に乗り換えることにした。

  1. 何もしないと画面の一番下あたりに表示される smily のこと。
  2. あまりに古いのでリンクにはしないが http://www.elvery.net/drzax/2006/02/10/footnotes-0-9-plugin-for-wordpress-2-0-x/ となっているのでその頃のものだったようだ。
  3. いまのところ明らかに、 Weaver-II テーマの設定を変更して保存するとこちらの設定が消えてしまう。

Weaver II テーマ に変えてみた。それにプラグインも追加 (その1)

いろいろあって、日々の暮らしとかそういうものが頭の中の多くを占めている。これからはそういうものを書いていこうかと考えている。すっかり別にブログを起ち上げるかとも考えたのだが、ここもこれまで主に WordPress とか PC まわりについて書いてきたものの、ほかの人より有用な情報をタイムリーに書けるわけでもなく、すっかり更新も滞っているので、この際ここをそのまま、そういう雑記帖のような場所にしてしまおうと考えた。

この記事はそういう転換のつなぎに当たるようなものだ。

これまではあまり見かけにもこだわらず、むしろ無機質なすっきりしたものにしていたけれど、これから書こうとしている日々の暮らしとか子どものこととか、多少はそういう記事に似合うような外見にしてみようと思った。

Weaver II テーマ

と言って、自分でテーマを書く気力もいまはなく、人気のテーマをいくつか見て回って、Weaver II を使ってみることにした。

このテーマの機能の多さには驚いた。テーマの中にサブテーマがいくつもある。実際の見かけは、そのサブテーマを選んで切り替えることができる。色などこれまで別のスタイルシートで指定していたようなことも管理画面で設定できるようになっている。設定項目は WordPress 本体より多いんじゃないかというくらい、たくさんある。従来ならプラグインの範疇だったページナビゲーションやパンくずリストも含んでいる。なるほど単に外観というより「テーマ」なのか、と思わされた。

使ってみて、ちょっと残念なこともいくつかある。サブテーマを切り替えると、設定値がそのサブテーマのデフォルトにリセットされてしまう。やっぱり別ファイルのスタイルシートや何かのほうがいいか、と思ってしまったりもする。

そういう訳なので、備忘録としてここに主な設定の変更点を書いておく。

  • サブテーマは Wp Weaver
  • レイアウトは右に1本のサイドバー
  • 基準となるフォントサイズは 10px[1]
  • リンクの色はデフォルトでは赤系だが
    • link: #002387
    • visited: #630087
    • hover: #83ACDB
    に変更
  • 個々の記事の著者、パーマリンク、コメント数の吹き出しは表示しない
  • 最下部の著作権表示はしない

設定項目が多いと言っても、それにない部分で変更したいものもある。そういう場合は advanced Options → <HEAD> Section の Custom CSS Rules に書くことができる。

body {
    font-family: "undefined";
}
p, #content p {
    text-indent: 1em;
    margin-bottom: 0.3em;
}
h3, h4, h5, h6 {
    margin: 0.4em 0 0.2em;
}
pre {
    font-size: 1em;
    margin-bottom: 0em;
}

font-family は以前「フォントの指定をやめる」に書いたとおりで、あり得ない値にする。<p> は、ここで書く記事は日本語なので、段落は1行空きではなく1字下げで表現したいからである。<h3> などは top-margin をあけて bottom-margin を少し詰め、<pre> はまさにここで使っているが、デフォルトでは小さくて見にくかったから。

長くなってきたので、プラグインについてはまたあとで。

  1. この数字は単に「基準」であり、実際に表示されるあちこちのフォントはこれを元に拡大縮小される。

プラグインやテーマの国際化を少し楽に

すっかり忘れていたのですが

と思い出させてもらったので、ここに書いておきましょう。

これは世界で人気のプラグインやテーマの開発者向けの情報です。もとより私はプラグインもテーマも書かないし、したがって世界中から言語ファイルを送られて「大変だー」なんて思いをしたことはないのですが、たまたまその声を聞いて Makefile を miya さん に贈り、それがここで使われています。

WordPress の国際化

おさらいです。WordPress では gettext ライブラリおよびツールを使用して国際化します

プラグインやテーマの開発者は、その中の翻訳されるべきメッセージに __()_e() などのマークを付けておきます。こうしたプラグインやテーマから、マークされた文字列を抽出して POT ファイルと呼ばれる、翻訳者にとって原本となるものを作成します。この作業は WordPress の本家で配布されているスクリプト wordpress-i18n tools を入手して、これで行います。

翻訳者はこの POT ファイルを元に、メッセージをそれぞれの言語に翻訳した PO ファイルと呼ばれるものを作り、これを開発者に送ります。

開発者は PO ファイルを、実行時にすばやく読み込まれるようにバイナリ化された MO ファイルと呼ばれるものに変換して、これをプラグインやテーマに同梱して配布することになります。

少し楽に

完全に出来上がっていてメッセージが不変で、たまに「新しい言語に翻訳したよ」と送られてくるものを追加するだけなら、手作業でもさほどでもないのでしょう。しかし現時点で既に各言語の翻訳ファイルがあるところに、元のプラグインやテーマに手を加えてメッセージが変わってしまい POT が変更になって、これをいちいち各言語の PO に反映して、MO を作りなおすのがメンドクサー、という工程を自動化するのがこの Makefile です。

プラグインやテーマの開発者にとって詳しい説明は不要でしょうから、あとは簡単に紹介します。

POT の生成には上述の wordpress-i18n tools が必要です。

make pot
で POT を生成します。あとは外部ファイル LINGUAS に作成したい言語の locale を書いておき、適宜
make

で、必要な MO までが生成されます。


POT 生成の部分は本家のスクリプトですし、後半の部分も gettext 関連のところでよく見かけるものから拝借して、前半に WordPress 特有の設定を加えたものです。私ができるのはこの程度です。あとは誰かすばらしいプラグインやテーマを作ってくださいね。

『本格ビジネスサイトを作りながら学ぶ WordPressの教科書』

著者のプライム・ストラテジーさんが『本格ビジネスサイトを作りながら学ぶ WordPressの教科書』を、「日本語作成チームに感謝の気持を込めて」と、この私にもご恵贈くださいました。ありがとうございました。

自分にできることを少しだけやったことが、巡り巡って還ってくるというのを実感できるというのは嬉しいものです。

それはさておき。

最近この種の本を手にすることはあまりなかったのですが、まずきれい。全ページカラーで見やすい。情報量はかなり多そうですが、全体の流れが掴みやすく工夫されていて、通読しやすそうです。一方で、目次がとても充実しており(実際には出版社のページにあるものよりもう一段深く、目次だけで10ページもあります)、あとで辞書的に調べたいところを探すのにも便利そうです。書籍というものの特長をあらためて感じました。

これからじっくり読んで、ここや自分が関わっているサイトももう少し見直してみようという気になりました。

Automattic製テーマ Coraline と Pilcrow の日本語化

Automattic は言わずと知れた WordPress の開発元、そしてブログサービス WordPress.com の運営元です。WordPress 公式テーマディレクトリで、その Automattic 製のテーマが公開されています。

Coraline は、TwentyTen の双子のようなテーマで、むしろこちらのほうが柔軟性があると私は勝手に思っています。Pilcrow は2012年になって登場し、Coraline の後継じゃないかとこれまた勝手に思っていますが、配布版 WordPress のデフォルトとなってもおかしくないと思える作りのテーマです。

たぶん WordPress.com のサービスでは、これらのテーマが様々な言語に対応して提供されているのでしょうが、この公式ディレクトリで配布されているものには言語リソースが(日本語に限らずどの言語のものも)同梱されていません。

「非公式」日本語リソース

そこでこの Coraline と Pilcrow の日本語リソースを作成したので公開します。と言っても、デフォルトのテーマ TwentyEleven とほとんど同じメッセージですのでそれを取り込んで、独自に訳す必要があったのはほんの数個です。

中身はそれぞれの ja.po と ja.mo だけです。テーマをインストールしたディレクトリの languages/ 以下に ja.mo を置いてください。

「公式」日本語リソース

Twitter でひょんなことからこの Automattic 製テーマの日本語リソースの話になったところ、Nao さんから

Naoko McCracken
@mako0901 @urepko こちらもよかったらどうぞー。http://t.co/SqfNQ51P WP.com アカウントでログインすればページの下の方からエクスポートできますが。。。 このやり方どっかに書いたほうが良いですね。
2012年3月20日 – 22:02

というリプライがありました。「公式」リソースが、普通には気付けないこんなところに隠れていました。「このやり方」をここに書いてみます。この短縮されているけれど本当は長い URL には、次のようにしてたどりつけます。

まず、http://translate.wordpress.com/にアクセスします。Projects の WordPress.com に進みます。さらに日本語の Japanese に進みます。ここで、右上の Log in で、WordPress.com のアカウントを使ってログインしておきます。

左端にある Filter↓ をクリックします。Term: に、絞り込みたい語を入力します。ここでは、coraline と入力します。その右側の選択肢は、Either と Current/waiting/fuzzy のままでかまいません。そして「Filter」ボタンをクリックすると、テーマ coraline に関するメッセージだけが抽出されます。

画面の一番下に行き、only matching the filter を po として、Export すれば、目的のものが手に入ります。テーマ pilcrow のものだったら、検索語を pilcrow にするだけです。

これで po が手に入りますので、ja.mo に変換して、適切な場所に配置します。


【追記】 Nao さんのところに、より詳しい解説が出ました。「GlotPress から WordPress.com の無料テーマの翻訳をエクスポートする

WordPress に記述できるプロトコル(スキーム)を拡張する

WordPress の記事の中などでリンクを記述する場合、特定のスキームしか書くことができません。たとえば http://mailto: は書くことができますが、git://skype: などと書こうとしても、自動的に削除され、http:// とみなされてしまいます (管理者権限で記事を書いている場合は適用されず、自由に書くことができます。権限が編集者以下の場合です)。

調べてみると、WordPress 3.3 からこの制限は wp-includes/functions.phpwp_allowed_protocols() に書かれています。そこを見てみると、スキーム名を追加するには kses_allowed_protocols というフックを使えばよさそうです。

いま xmpp: というスキームのリンクを記述したいので、テーマの functions.php あたりに

function ext_protocols ($protocols) {
  $protocols[] = 'xmpp';
  return $protocols;
}
add_filter('kses_allowed_protocols', 'ext_protocols');

と書きました。これで記事中にxmpp:mako@pasero.netxmpp:なんでも談話室@muc.step.im?join などのリンクを記述できるようになりました。

フォントの指定をやめる

久々に Windows を使う機会があって、この自分のページを見てみた。見難い。醜い。明朝体の表示がこうも汚いのは何かの陰謀だろうかと思えるほどだ。WordPress のテーマのカスタマイズの記事などで「まずゴシック系を指定して」という記述をよく目にするのはこういう訳だったのかと今更ながら思った。

身の周りにある本らしい本を見てみれば、見出はともかく、本文はたいてい明朝 (serif) 系ではないか、という信念で、この自分のページは明朝 (serif) 系で表示するようにしていたのだが、こんな表示では逆効果なのであった。Windows の設定をいろいろいじればもう少し何とかなるのかもしれないが、普段からしっかり使いこなしている訳でもないから、簡単にできることではなさそうだ。きっと大多数のユーザーもそんなものだろう。

さて、ではなるべく多くの人にきれいに見せるにはページの制作側では CSS での font-family をどう設定したものか、と考え始めた。いろいろ探しまわって考えているうちに、もうそういうのはやめて見る側にまかせてしまえばいいや、という気になってきた。

Vista以降の人は見慣れたメイリオで。
XP以前の人は見慣れたMSPゴシックで。
メイリオが気に入った人は、メイリオで。
Macの人はヒラギノ角ゴで。
明朝が好きな人は、明朝で。
へた字とか好きでたまらない特殊なフォントで。
(流儀 font-familyは指定すべきか)

WordPress 関連のページを見る機会が多くデザインを重視する記事をたくさん見ていたのですっかり忘れていたけれど、そもそも HTML というのは、見る側の環境によって違って当たり前なのだった。

「本文は明朝系」という信念の人 (私だ) はブラウザのデフォルトを serif に設定しているだろうし、Windows でも自分の好みの表示になるようにがっちり設定している人には、そのフォントで読めるようにしてあげればいいではないか。

という訳で、このページの本文の font-family の指定はやめることにした[1]。フォントに限らず横幅も何も、本来は見る側の自由なのだという気にだんだんなってきた。

  1. このページは coraline というテーマの子テーマで表示している【注:記事執筆時】。親テーマで font-family が指定されているので、子テーマでこれを消去はできず、そこで存在しないであろうフォント名を指定して上書きしている。
    body, input, textarea {
            font-family: undefined;
    }