タグ: テーマ

WordPress の新テーマ Twenty Nineteen での日本語フォント

WordPress, , コメントを残す

2018年12月に WordPress 5.0 がリリースされ、それに含まれるデフォルトテーマは Twenty Nineteen という新しいものになりました。

WordPress 5.0 のリリース告知 に、Twenty Nineteen の特長として次の点が挙げられています[1]。

Simple, type-driven layout

Featuring ample whitespace, and modern sans-serif headlines paired with classic serif body text, Twenty Nineteen is built to be beautiful on the go. It uses system fonts to increase loading speed. No more long waits on slow networks!

WordPress 5.0 “Bebo”

この部分が日本語では

シンプルなタイポグラフィ主導のレイアウト

たっぷりとった余白と、モダンなゴシック体の見出し、クラシックな明朝の本文テキストの組み合わせが特色の Twenty Nineteen は、出先でも美しくあるために造られました。システムフォントを使用して、読み込みスピードを向上させました。もう、遅いネットワークで長時間待つ必要はありません !

WordPress 5.0 “ベボ”

と、「ゴシック体」「明朝」と訳されています。

バージョン 1.0 での日本語への対応

確かに、元々の Twenty Nineteen では sans-serif と serif を使い分けるようにスタイルシートで設定されています。しかし WordPress 5.0 の最初のリリース時点 (Twenty Nineteen バージョン 1.0) では、日本語 (など非ラテン文字言語) の場合の議論が十分に間に合わず、非常に乱暴な対処がなされました。スタイルシート style.css を見ると、

/* Japanese */
html[lang="ja"] .site * {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important;
}

と、すべてのタグに同一の sans-serif 系の font-family が指定されています (しかも !important 付きで)。これはもう本文テキストと見出しが同じどころか、<pre> も <code> も monospace ですらなく何もかもが一緒くたという指定です。はっきり言って「看板に偽りあり」です。

バージョン 1.3 での改善点

さすがに全称セレクターと !important だと思わぬところにも影響が及ぶということもあり、最初のリリースには間に合いませんでしたが、WordPress 5.1 とともに配布される Twenty Nineteen (バージョンはおそらく 1.3) では、根本的な対応がなされることになりました。

Twenty Nineteen のスタイルシートは Sass で開発されています。@each と@mixin を使うことで既存部分の変更は最小限で書き足す部分もほんのわずかで済み、さらに @extend (と placeholder) を使って、生成される style.css のサイズ増加をできるだけ抑えるという変更案が出されました。

これにより Twenty Nineteen バージョン 1.3 では、元々あった font-family の一つ一つに対して、非ラテン文字言語ごとのバリエーションが設定されました。1.0 とは対極の、実に丁寧な対処です。

改善されなかった点

スタイルシート内にたくさんある font-family に埋め込む値は、sass/variables-site/_fonts.scss に記述されているのですが、元々、ラテン文字言語に対して

$font__body: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
$font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans"
$font__code: Menlo, monaco, Consolas, Lucida Console, monospace;
$font__pre: "Courier 10 Pitch", Courier, monospace;

のように、4つに分けて設定されています。非ラテン文字言語に対しては、下2つ ($font__code, $font__pre) のそれぞれは手を付けずそのままとなったのはいいとして、上2つ ($font__body, $font__heading) は区別せずに合わせて同じフォントとされてしまいました。

私は、本文用と見出し用のそれぞれ別のフォントが設定できてしかるべきと考えています (各言語ごとに合意を形成する段階で、本文用と見出し用のフォントを同一にするという結果に達すればそれはそれでいいことです)。しかしこの時点では、既にリリースしたものからの大幅な変更は避けたい、非ラテン文字言語での serif 系と sans-serif 系の使い分けの合意はない、まとめられるものはまとめようということで、別々の実装は退けられました。

もうひとつの問題は、style.css のサイズがかなり大きくなってしまうことです。ラテン文字言語しか使わない人たちにとっては無用の記述が大量に追加されたことになります。今回の追加部分は別ファイルにして、不要な人たちは読み込まずにすむようにできればよりいいでしょう。

WordPress のデフォルトテーマは、そのまま使われるだけでなく、「標準」としてしばしば参照されます。非ラテン文字言語フォントの扱いの例としてきちんとした形に残してほしかったのですが、リリース時期の制約などもあってそれが叶いませんでした。次の機会には何とかしてほしいものです。GitHub でのやりとり (それに、それが回送された Trac でのやりとり) はそのうち埋もれて忘れられそうなので、こうしてここにメモしておくことにしました。

  1. WordPress 5.0 をお使いなら、管理画面の左上隅の「W」マークをクリックして「新着情報」でも見ることができます。↑

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

WordPress, , , 1件のコメント

まとめ

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

<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 にします。

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

WordPress, 1件のコメント

最近 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, , 1件のコメント

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 を埋め込む

WordPress, , コメントを残す

少し前の記事に

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, コメントを残す

いろいろあって、日々の暮らしとかそういうものが頭の中の多くを占めている。これからはそういうものを書いていこうかと考えている。すっかり別にブログを起ち上げるかとも考えたのだが、ここもこれまで主に 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 の日本語化

WordPress, , , 1件のコメント

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