親テーマ指定の web フォントを子テーマで変更する

まとめ

まとめを先に書いておきます。

<head> 内で

<link rel='stylesheet' id='libre-lora-css' href='https://fonts.googleapis.com/css...' ... />
...
(親テーマ指定のwebフォント用CSSの削除)
...
<link rel='stylesheet' id='libre-2-style-css' href='...' ... />

の順になってほしいため、子テーマの functions.php では

add_action( 'wp_enqueue_scripts', 'libre_kid_fonts', 9 ); /* style.css より先に読み込む必要がある */
function libre_kid_fonts() {
        wp_enqueue_style( 'libre-lora', libre_lora_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'libre_dequeue_google_fonts', 11 ); /* 優先度を落とす */
function libre_dequeue_google_fonts() {
        wp_dequeue_style( 'libre-2-fonts' );    
}

のように、add_action('wp_enqueue_scripts') に優先度を付ける必要があります。

WordPress のテーマ Libre 2 と Google web フォント Lora

では、結論を先に書いた後でゆっくり経緯を書いてみます。

ふと WordPress のテーマを変えてみました。もう自分で作る気力もないので、公式ディレクトリで人気順に見ていって、シンプルな Libre が気に入りました。すぐ後に WordPress.com のほうで後継 Libre 2 を見つけ、「ダウンロードしてインストール型 WordPress で使用できます」とあったので早速そうすることにしました。

いくつか直したいところがあったので、子テーマで手を入れることにしました。変更点を備忘録的にここに書いておくと、

  • フォント関連の変更。欧文フォントを Libre Baskerville からLora に変更した。
  • 装飾に Dashicons を使うことにした。
  • 記事の最初のメタ情報にカテゴリー・タグを表示することにした。記事の最後には表示しない。
  • 本文の段落は1字下げ。段落間は小さくする。箇条書きの上下のマージンも小さく。
  • 本文内の見出し(<h3>など)は上下にマージン。ただしその見出しが本文先頭なら上マージンなし。

このテーマは、やや長めの文章を見せるのに適するようにセリフ(serif)の書体 Libre Baskerville が指定してありました。そこで日本語で書かれるこのブログでも、セリフ(明朝体)にすることを考えます。ただ、よくあるヒラギノ明朝体や游明朝体の中に混ぜてみると Libre Baskerville は落ち着かない感じがして、同じく Google web フォント の Lora に変更することにしました。

wp_dequeue_style() の実行順序

親テーマの Libre 2 は、その functions.php で

function libre_2_scripts() {
        ...
        wp_enqueue_style( 'libre-2-fonts', libre_2_fonts_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'libre_2_scripts' );

と、webフォント Libre Baskerville 用の CSS を google から読み込むようになっています。子テーマでは、ここで enqueue しているものを dequeue すればいいのです。

が、子テーマの場合、そもそも functions.php の実行順は (1)子テーマの functions.php (2)親テーマの functions.php です。したがって、子テーマの functions.php に普通に dequeue を書いてもこれが先に実行され(つまりまだ enqueue されていないものを dequeue しようとする)、その後に親テーマで euqueue されることになります。

そこで、子テーマでは dequeue の実行の優先度を下げて(10より大きな数字にして)書いておかなければなりません。

wp_enqueue_style() の実行順序

子テーマでは、親テーマの libre_2_fonts_url() を真似して、別のwebフォントである Lora 用の CSS を指定する libre_lora_url() を書きます。

この CSS は Google Fonts から読み込まれますが、内容は

...
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v10/4vqKRIwnQQGUQQh-PnvdMA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
...

のような @font-face がいくつも並んでいるものです。子テーマの style.css では

body {
	font-family: Lora,Georgia,Times, ... ;
}

のように、この定義を利用して使用フォントを指定します。

ところでこの 定義 @font-face と指定 font-family の順序ですが、ブラウザー Chromium の場合 (Debian の Chromium で確認しました。おそらくどの OS でもブラウザー Chrome でも同じだろうと思います)、前もって @font-face がないと font-family での指定時にそれが存在しないものと扱われるようです。Firefox ではその順番は関係ないようでしたが。

そこで、子テーマの style.css より前にこの CSS が読み込まれるように、wp_enqueue_style() を呼ぶ add_action('wp_enqueue_scripts') の優先度を 9 にします。

著作権表示の年を自動的に付ける

最近 twitter に流れてくる話を見ているうちに、ふとその隣の記事を読みました。「年末年始恒例、WordPressの著作権表示更新作業をやっと自動化した」。そうか、「年末年始恒例」なのか。

大前提。著作権表示はただの飾りなので、ほんとうはどうでもいいです。

この記事では年号表示を (開始年)-(いま) としています。そもそも著作権表示の全部が要らないのですが、そのなかでもさらに不要と言われている後ろの年、この方法だと「見ているとき」になってしまいますよね。最後の記事を公開したのが2013年のうちで、見る人が見たのが2014年になってからだったら -2014 になってしまいます。やはりここは「公開されたとき」じゃないかと思うのです。

そういえば数年前に別の方の「WordPressで時差分ずれない著作権年号表示の仕方」という、実に細かな心配りの記事を見たときにも、「気にするのはそこじゃないのでは?」と思ったものです。

もう長いこと前に WordPress 1.5 対応の「boxy but gold」というテーマの footer.php にあったコードを見て、これはいいやと思ってそれを改良して、私は次のようにしていました。ただの飾りなのでほんとうはどうでもいいのですが。

<?php
/**
 * Boxy Copyright
 * Provides a dated copyright mark.
 *
 * Author: Kaf Oseo
 * Author URL: http://szub.net/
 *         Copyright (c) 2005, Kaf Oseo (http://szub.net)
 *         Boxy But Gold theme released under the GNU Public License (GPL)
 *         http://www.gnu.org/licenses/gpl.txt
 * Author: Mako N
 * Author URL: http://pasero.net/~mako/
 *         Copyright (c) 2007, Mako N
 */
function get_boxy_copyright($userid=1) {
	global $wpdb, $m, $post, $year;

	if(!$userid || $userid == 0) {
		$copy_owner = get_bloginfo('name'); /* use blog name for copyright owner */
	} else {
		$blog_owner = get_userdata($userid);
		$copy_owner = $blog_owner->user_firstname . ' ' . $blog_owner->user_lastname;
	}

	$first_post_date = @$wpdb->get_var("SELECT post_date from $wpdb->posts where post_status = 'publish' ORDER BY post_date ASC LIMIT 1");
	$last_post_date = @$wpdb->get_var("SELECT post_date from $wpdb->posts where post_status = 'publish' ORDER BY post_date DESC LIMIT 1");
	if(is_single() || is_page()) :
		$copydate = substr($post->post_date, 0, 4);
	else :
		if($m) :
			$copydate = substr($m, 0, 4);
		elseif($year) :
			$copydate = $year;
		else :
			if(substr($first_post_date, 0, 4) == substr($last_post_date, 0, 4))
				$copydate = substr($first_post_date, 0, 4);
			else
				$copydate = substr($first_post_date, 0, 4) . '-' . substr($last_post_date, 0, 4);
		endif;
	endif;
	return ( __('Copyright&#169;') . $copydate . ' ' . $copy_owner);
}
?>

きれいじゃないけど、まあいいや。元作者のページは制限がかかっているようだし、このテーマもいまは手に入らないかもしれません。これも元は後ろの年が単に date('Y') になっていたのですが、それを最新記事の公開時にするなどを付け足したり、適当な名前の関数にしたのは私なので、ふだんは書きませんけど著作権がらみの話でもあることだし、責任の所在を明らかにするためにも自分の名前を入れておきます。

  • 投稿の単独表示や固定ページでは (公開年) になる
  • 年別アーカイブや月別アーカイブでも (公開年) になる
  • その他の複数投稿が表示される場面では (最古投稿の公開年)-(最新投稿の公開年) になる
  • 年の後ろは、作者の名前(またはブログ名)になる

というものです。ここしばらく付けていませんでしたが、この投稿を書くのでこのブログにも一番下に付けてみました。

何度も言いますが、ただの飾りなのでほんとうはどうでもいいです。

テーマ Tewnty Fourteen の日本語化(非公式)

WordPress のバージョンが 3.7 になりました。インストールしてみたところ、次期デフォルトテーマの Twenty Fourteen が含まれていました。ただしバージョンは 0.1 なので、まだ完成形ではないのでしょう。

(追記)すみません。RCまでは含まれていたのですが、正式な3.7には含まれなくなっていました。重ねてインストールしていたので混乱していました。まあ、いいや。そのうちどこかで役立ててください。(追記終わり)

翻訳の作業は、公式には GlotPress で行われるのですが、バージョンが若すぎて、まだここに登場していません。当然、日本語パッケージにも翻訳は含まれていません。

そこで非公式の日本語リソースを個人的に作成しましたので、公開します。

中身は twentyfourteen-ja.po と twentyfourteen-ja.mo だけです。適当な場所 (wp-content/languages/themes/ の下とか)に 置いてください。

大部分は Twenty Thirteen のリソースを取り込み、それから変更されたり追加された分を訳しました。自分でもまだちゃんと使っていないので、どこに表示されるものかも確認しないままやったものもあり、おかしなところがあるかもしれません。

とにかくまだ Twenty Fourteen 自体が発展途上で固まっていないこと、今回公開するものは WordPress 3.7 パッケージに含まれる 0.1 に対応するものであること、元の文もどんどん変更されるかもしれませんし、あくまで非公式な作業なので訳語も変わりうること、やっつけでやったのでまだおかしな訳があるかもしれないこと(“Featured Content” の訳語ってどうしましょうね)、などをご了承の上、ご自由にお使いください。

Weaver II テーマ で Youtube を埋め込む

少し前の記事

Jetpack by WordPress.com プラグインで Youtube の画を埋め込んでいるのだけれど、説明どおりにやっても小さくできない。縦は縮むのに横幅はそのまま。別の環境で見るとまたちがうのだろうか。

と書いたけれど、原因がわかった。

youtube を埋め込むには、

  1. Weaver II テーマは独自にショートコード weaver-youtube を持っているので、これを使う。横幅は percent というパラメータで指定する。
  2. 上記を使わず、Jetpack by WordPress.com プラグインのショートコード youtube を使う。ただし Weaver II テーマで設定されているスタイルと干渉する。

のどちらかによる。はじめ (a)に気づいていなかったので (b)の方法にしていた。気づいたいま、どうするか。記事を書く際にテーマやプラグインに依存した記述をすると、そのテーマまたはプラグインを外したときに変なことになる可能性がある。将来 Weaver II テーマを使わなくなる可能性と Jetpack by WordPress.com プラグインを使わなくなる可能性を比べると、後者のほうが断然低そうなので、やはり (b)の記述のままにすることにした。

さてそうすると、どちらの方法でも youtube を埋め込む iframe には class="youtube-player" が指定されているのだが、 Weaver II テーマではそれに対するスタイルが

.youtube-player {
    width: 100%;
}

と設定されていたのであった。(a)の方法では、その上で画像の横幅を制御しているのであろう。そのまま (b)の方法を使うと、前に書いたように、w=320 のような横幅指定を付けてもそれが適用されない。

ここでは、記事の記述は(b)の方法にしたので、このスタイル指定をやめるため、Weaver II テーマの設定画面の advanced Options → <HEAD> Section の Custom CSS Rules に

.youtube-player {
    width: auto;
}

と書くことにした。これでうまくいくようになった。

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. この数字は単に「基準」であり、実際に表示されるあちこちのフォントはこれを元に拡大縮小される。

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 の無料テーマの翻訳をエクスポートする

Jabber と WordPress (補遺)

もたもたしている間に年が変わってしまいました。先日の記事に、これまで Jabber/XMPP と WordPress の連関について触れているところは少ない、というようなことを書いたのですが、前の記事を書く際に「WordPress勉強会「Automatticのワークスタイル」に参加しました」を見落としていました。

2009年8月とさらに1年遡って、その時点では Automattic 社内の事例として、P2im.wordpress.com のことに触れられています。その頃にはまったく気づいていませんでしたが。

P2 テーマと Jabber/XMPP

たとえば WordPress の翻訳に関わる人たちの情報交換の場が、昨年(2010年)9月末にメーリングリストから、この P2 を使った WP Polyglots に移行しました。私はもっぱら眺めているだけなのですが、私にとって P2 は非常に読みにくくて、移行後はもう読むこと自体をやめてしまっていました。

前の記事で触れた「ブログ投稿やコメントの即時配信」の記事を読んで、ようやく Jabber 通知を使えることを知り、さっそく継読するようにしました。コメントが投稿されるたびに通知されるので、以後はさっと流し読みだけでもできるようになりました。個人的には、Jabber/XMPP と組み合わせてはじめて P2 の力を見ることができました。

1年前や2年前の記事を見て何を今さら、と言われそうですが、私の検索能力が低いのか、やはり P2 を取り上げながら Jabber/XMPP に触れているのは、特に日本語では、上記の2009年の Automattic 社内の話以外には見つけることができません(このスライドも同じ時期のようです)。どうも Jabber/XMPP はあまり関心を持たれていないようです。