theme.json を使ったテーマデザインの設定

以下は、Jeff Ong が書いた WordPress.org 公式ブログの記事「Configuring Theme Design with theme.json」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


WordPress 5.8以降、新しいツールである “theme.json” をテーマ開発に利用できるようになりました。初めて聞いたかもしれませんし、すでにこれを試用し、テーマを開発しているかもしれません。いずれにせよ、今は WordPress テーマにとってエキサイティングな時期ですので、この記事を読んでいただけて嬉しく思います。

当記事では、この新しいフレームワークを簡単に紹介し、実用的なヒントと例をいくつか共有することで、何ができるのかを説明していきます。

theme.json とは

技術的に言えば、theme.json はテーマのディレクトリのトップレベルにある単なるファイルです。

しかし、概念的に言えば、テーマの開発方法に大きな変化をもたらすものです。テーマの作成者は、サイトの作成者と訪問者に合わせて WordPress での体験を調整するための一元的なメカニズムを利用できるようになりました。theme.json は、テーマ作者がグローバルスタイル、ブロックスタイル、ブロックエディターの設定をきめ細かく制御できる方法を提供します。

これらの設定と制御を単一のファイルで提供することにより、theme.json は、テーマのデザインと開発の多くの側面をまとめる強力なフレームワークとなります。そして、ブロックエディターが成熟し、より多くの機能が追加されていくにつれ、theme.json は、テーマとエディターが連携するためのバックボーンとして活躍するでしょう 💪 。

これを使う理由

なぜ theme.json を使うのか – その理由は、テーマの未来がこの方向に進んでいるからです。しかし、私も最初はそうでしたが、皆さんも納得するためにもっと具体的な何かが必要かもしれません。現在 theme.json を使用する理由はいくつかあります。

  • 色、タイポグラフィ、間隔、レイアウトなどのエディター設定を制御し、設定を管理する場所を一元化します。
  • スタイルがサイト全体のブロックと要素に正しく適用されることを保証します。
  • テーマが提供していた土台となる CSS の量を減らします。theme.json は、スタイルシートを完全に置き換えるわけではありません。テーマに追加の特殊効果や装飾 (トランジション、アニメーションなど) を与えるために CSS が必要になる場合もあるでしょう。ですが、テーマに必要な基本 CSS を大幅に減らすことができます。

使い方

この記事の残りの部分では、試すことができる theme.json 設定をいくつかご紹介します。例では、今年のデフォルトテーマをベースとしたブロック版のテーマである tt1-blocks の theme.json を使用します。

既存のテーマから始める場合は、WordPress/theme-experiments リポジトリから theme.json をコピーし (例えば、@poena 作の fse-tutorial)、ご自分のテーマのディレクトリのルートに追加します。

サイトのタイポグラフィ設定をグローバル (全体的) に変更する

"settings": {
	"typography": {
		"fontSize": "30px",
		...

上記の theme.json に変更を加えると、テーマの body タイポグラフィスタイル (前と後) が次のように更新されます。

サイトの基本色設定をグローバル (全体的) に変更する

"styles": {
	"color": {
		"background": "#ffc0cb",
		"text": "#6A1515"
	},
	...
}

特定のブロックのスペースとパディングの設定を変更する

"styles": {
	"blocks": {
		"core/code": {
			"spacing": {
				"padding": {
					"top": "3em",
					"bottom": "3em",
					"left": "3em",
					"right": "3em"
				}
			}
		}
	}
}


エディター内でボタンなどの特定のブロックにカスタムカラーパレットを設定する

"settings": {
    "blocks": {
		"core/button": {
			"color": {
				"palette": [ 
					{
						"name": "Maroon",
						"color": "#6A1515",
						"slug": "maroon"
					},
					{
						"name": "Strawberry Ice Cream",
						"color": "#FFC0CB",
						"slug": "strawberry-ice-cream"
					}
				]
			}
		}
	}
}

タイポグラフィ制御の有効化と無効化

次の例では、すべての見出しブロックにカスタムフォントサイズと行の高さを指定する機能を無効化しています。

	"settings": {
		"blocks": {
			"core/heading": {
				"typography": {
					"customFontSize": false,
					"customLineHeight": false
				}
			}
		}
	}

これからについて

この記事を通じて、何が可能で、テーマがどこに向かっているのかが伝わっていることを祈ります。ここで紹介したのはテーマのデザイン設定でできることのほんの一例であり、テーマ作者の皆さんがこれからどのような作品を生み出すのか、とても楽しみにしています。

詳細については、 theme.json に関する開発者向けのメモ (英語) と、ハンドブックにある theme.jsonのドキュメントをご覧ください。


この投稿をレビューしてくれた @kjellr@chanthaboune@priethor@annezazu に感謝します。【訳者追記】また、翻訳レビューに協力してくださった @nukaga さんと @atachibana さん、ありがとうございました。

WordPress 3.7 リリース候補

以下は、Andrew Nacin が書いた WordPress.org 公式ブログの記事、「WordPress 3.7 Release Candidate」を訳したものです。

WordPress RC 1 日本語版は現在準備中です。リリースしました


RC 1 では、更新プロセスがより信頼できるものになるよう調節を行いました。来週には WordPress 3.7 をリリースする予定ですが、それまでご協力をお願いします。まだ 3.7 を試していないなら今がその時です。(危険を覚悟でない限り、本番環境での使用は避けてください。)

WordPress 3.7 では、セキュリティアップデートとマイナーリリースで自動バックグラウンドアップデートが利用できるようになります(たとえば 3.7 から 3.7.1 の更新など)。テストはとても簡単です — RC 1 は約12時間毎に最新の開発版に更新され、結果がメールされます。(メールは2通届きます: ひとつはデバック用、もうひとつは 3.7 のすべてのユーザーが受け取るものです。)なにか問題があった場合は、それを報告することができます。

もしバグを見つけたと思ったら、フォーラムのアルファ/ベータエリア日本語)に投稿してください。既知の問題はこちらで見つけることができます。

WordPress 3.7 RC1 をテストするには、WordPress Beta Tester プラグイン(”bleeding edge nightlies” をお勧めします)を試してみてください。または、こちらで候補版(ZIP)をダウンロードすることができます。WordPress 3.7 の新しい機能についてもっと知りたい場合は、ダッシュボードの素晴らしい「WordPress について」画面(ツールバー  → WordPress について) を訪れてください。そこでは、利用中の WordPress がバックグラウンドアップデート可能であるかも知ることができます。WordPress は Subversion や Git などのバージョンコントロールを使用している場合には自動アップデートを行いません。

開発者の方は、自分のプラグインやテーマを WordPress 3.7 用にテストしてください。そうすれば互換性の問題があっても最終版のリリース前に解決できます。問題があった場合はサポートフォーラムに投稿するようにください。

WordPress three seven
A self-updating engine
Lies beneath the hood

Ephemera 「短冊」ウィジェット

WordPress の新バージョン 3.2 の標準テーマ Twenty Eleven には、新しいウィジェット「短冊」が加えられています。このウィジェットの名称は、元の英語版では Ephemera 。これを日本語版ではなぜ「短冊」とすることになったのか、というお話です。

本題に入る前に、予備知識として投稿フォーマットについて見ておきましょう。投稿フォーマットとは、投稿記事の種類によって記事の見せ方に変化をつけるために、WordPress 3.1 から導入されました。複数の文章・段落から成る「ちゃんとした」記事を標準とすれば、ちょっとした短い記事はアサイド、リンクが主でそれにちょっとコメントする程度の場合はリンク、同様に引用が主の場合は引用、一枚の画像を対象とした画像、Twitter のひとつの tweet のような近況報告はステータス……ほかにもいくつかありますが、詳しくは Codex の各投稿フォーマットについての説明をご覧ください。投稿記事ごとにこの投稿フォーマットを指定しておけば、それぞれに応じた見せ方をテーマのほうで用意して、ブログ全体にメリハリをつけることができます。

さて、この「短冊」ウィジェットをたとえばサイドバーに配置すると何が表示されるのでしょうか。そこには、アサイド・ステータス・引用・リンクの各投稿フォーマットを指定されている記事のリストが現れます。

ではいよいよ、このような機能のウィジェットがなぜ英語では Ephemera 、そして日本語では「短冊」という名称なのか、という本題に入っていきます。

Ephemera は辞書を引くと、昆虫のカゲロウ(蜉蝣)、転じて短命なもの、という意味です。WordPress 日本語版作成チームは、3.2 のベータ版の頃、とりあえずこれを「カゲロウ」とそのまま訳していました。3.2 リリースが間近になって、ひとりが

Ephemera の訳「カゲロウ」はさすがに違和感がありますので良い日本語訳はないでしょうか ?

と疑問を投げかけました。カゲロウといえば「はかなきもの」の象徴だが英語でもそうなのだろうか、短命の美をポジティブにとらえた表現なのだろうか、でもなぜ上述の投稿フォーマットを指してそのカゲロウなのか……と議論しつつ、日本語では直截に「ひとこと」「短信」、それに「うたかた」などの案が出てきました。

そのうちに、ひとりが

Wikipediaによると
エフェメラ (ephemera) は一時的な筆記物および印刷物で、長期的に使われたり保存されることを意図していないものを指す。しばしば収集の対象となる。」

という情報をもたらしました。するとカタカナで「エフェメラ」にしておくのも選択肢のひとつ、ということになります。

後になって「エフェメラ」は、実は図書館情報学で用いられる学術用語であることがわかってきました。ここまでわかってからようやく google で「エフェメラ」を検索してみると、印刷業界では「端物印刷物」を愛着を込めて「エフェメラ」と呼ぶことがある、などということがわかりました。なるほど、それで上述の機能を持つウィジェットが英語で Ephemera という名称なんですね。

「一枚紙にまとめて」と言うときの一枚紙、あるいは一枚物、というのが近いとのことですが、今回は Webに表示される用語ですから一枚も何もないわけで、違和感があります。確かに日本でも「エフェメラ」で通用する分野があることはわかりましたが、一般的とは言えません。

日本語版作成チームで話すうちに、さらに「一筆もの」「一筆箋」などの案が出ましたが、どうもいまひとつです。そうするうちに7月7日になり、七夕ムードの中でひとりが Twitter で

Ephemera の訳語はもう「短冊」でいい気がしてきた

とつぶやきました。これに別のひとりが反応しました。

短冊は、短歌・俳句はもちろん、名言や座右の銘、それに日本画のものもよくあります。職場に目標や安全標語を書いて貼っているやつも短冊といいます。もちろん七夕に笹に飾るのも短冊です。その小ささといい、アサイド・リンク・引用・ステータスという投稿フォーマットを載せるのにはぴったりです。

この案にほかのメンバーの多くも賛意を示し、日本語では「短冊」ウィジェットと称することにしたのです。

「短冊」という語を目にして「何だこれ ?」と思われることもあるでしょう (おそらく英語圏での Ephemera も同じような反応ではないかと想像します)。今回の翻訳作業を通じて「エフェメラ」という語とその意味についての知識を得ることができ、せっかくなのでそれを広めたい (皆さんもうご存じのことでしたか ?)、そして WordPress 日本語版作成チームの活動の一端を紹介したいという気持ちで、ここに書いてみました。

テーマ審査実験の拡大

以下は、Joseph Scott が書いた WordPress.org 公式ブログの記事、「Expanding the Theme Review Experiment」を訳したものです。本文中のリンク先はすべて英語です。


私が子供の頃、父は (「本物」のタイプライターの) タイピング練習をする時、こういうフレーズを使っていました。

Now is the time for all good men to come to the aid of their country.
(今こそ立派な人々が現れて彼らの国を救う時だ)

なぜかは分かりませんが、このフレーズがずっと頭から離れませんでした。今日、これをちょっと書き直して以下のように使ってみたいと思います。

Now is the time for great theme developers to come to the aid of their community.
(今こそテーマ開発者が現れて彼らのコミュニティを救う時だ)

テーマディレクトリは1年以上の間順調に動いています。その間、審査プロセスや管理ツールを少しずついじってきましたが、思ったほどオープンにはできていませんでした。でも今こそばんそうこうを一気にはがして、行動に移す時です。ディレクトリのテーマを審査するのを手伝ってくれるコミュニティメンバーを募集したいと思います。

現在のところ、新年の抱負を実行するような気分で毎日過ごしています。やらなければいけないけれど、実際にやるにはどうすればいいのかまだ完全にはわかっていないといったところです。でも、このプロセスを形作っていくのもコミュニティの参加に委ねたいと思っています。

ディレクトリ向けのテーマの審査をするには何が必要か説明しましょう。まず、言うまでもなく PHP と WordPress テーマのコード (そしてテーマ開発チェックリスト) をよく理解し、セキュリティのことも考えられる必要があります。また、最新バージョンの WordPress インストールを、提出されたテーマのテストのために用意してもらいます。

才能あるテーマ開発者がこれを読んでいて、お手伝いしましょう ! と言ってくれるのを期待しています。スタートするには、新しいテーマ審査メーリングリストに参加してください。コミュニティを救うためのこの新しいチャンスをよく分かってもらえるよう、お手伝いします。