Twenty TwentyはWordPress 5.3の最新リリースに伴うWordPressの新デフォルトテーマです。この前身であるTwenty Nineteenと同じく、Twenty TwentyもGutenbergに特化してデザインされました。とは言え、この二つには大きな違いがあります。それは、Twenty Twentyはイチから造られたものではなくWordPressコミュニティの既存のテーマを土台としていることです。

WordPressの全てが好きですから、この新しいTwenty Twentyテーマも機能ファイルからスタイルシート、テンプレートに至るまで詳しく見てみました。

Twenty Twentyは多くの問題がまだ未解決であり、この記事の執筆時点で安定性からは程遠いのですが、今回はこのWordPressの新デフォルトテーマに関する第一印象をシェアします。

さっそくWordPressテーマのTwenty Twentyを見てみましょう！

WordPressテーマ「Twenty Twenty」のプレビュー
WordPressテーマ「Twenty Twenty」のプレビュー（画像ソース： Make WordPress Core)

Twenty Twentyの簡単な紹介

Twenty TwentyはWordPress5.3のデフォルトテーマのデザイン主導者でもあるAnders NorenによるWordPress無料テーマ、Chaplinを元にして作られました。

Anders氏によれば、WordPress.orgのレポジトリからダウンロードできるChaplinはブロックエディタを念頭に造られたそうです。

Chaplinは機能満載のワードプレステーマで、サイトのフォントと色を自在にコントロールできます。Chaplinは新しいブロックエディタを考慮してイチから作られ、投稿とページの両方において綺麗なレイアウトを簡単に作ることが出来ます。

ワードプレステーマ「Chaplin」
ワードプレステーマ「Chaplin」

Twenty Twentyにも同様の理念が用いられており、この新テーマの中核となるキーワードは柔軟性、明晰さ、可読性です。

Twenty Twentyは１カラムのレイアウトで、３つの投稿/ページ用のテンプレートを備えています。それにより、カラムや画像、グループブロックなどのGutenburg5.5で導入されたブロックで利用できるワイドや全幅のアラインメントを活かし、WordPressの管理者やデザイナーがブロックエディタを介して直接カスタムレイアウトを作成できる自由度を提供することを狙いとしています。

Anders氏の説明によれば、

Twenty Twentyは柔軟性を中心としてデザインされました。Twenty Twentyを組織やビジネス向けに利用したい場合には、カラムやグループ、画像などをワイドや全幅のアラインメントと組み合わせることで、サービスや製品を魅せるダイナミックなレイアウトに出来ます。また従来のブログなどに利用したい際には、中央揃えのカラムにすれば完璧です。

これとは別に、Twenty Twentyでは新しい書体「Inter」が使えます。これは無料のオープンソースのフォント群で、大小文字の混合や小文字のみの文章、その中でも特に小さなフォントサイズの際の可読性に特化してRasmus Andersonによりデザインされたものです。

Interのフォント群
Interのフォント群

Interは大見出しに使われると強い個性を出しますが、一番その威力を感じられるのは、以下のWordPress.orgのブログ投稿のテーマプレビューから分かるように文字サイズが混合している時です。

Twenty Twentyのフォント
Twenty Twentyのフォント：印象と可読性

フル機能のテーマである以上に、Twenty TwentyはWordPress編集のUIを将来的に進歩させるための重要な一歩を踏み出すテーマです。本質的にコンテンツのレイアウトや編集においてはブロックエディタを、ヘッダー、フッター、追加のカスタマイズにおいてはテーマカスタマイザーを拠り所としています。

そういう訳で、このWordPressテーマをインストールし、使ってみることにしましょう。

Twenty Twentyのインストール方法

今回のデフォルトテーマはWordPress5.3のリリース計画に沿ったものとなります。これはつまり、この記事の執筆時点ではWordPressテーマディレクトリからTwenty Twentyのダウンロードはできないうえに、WordPress5.3コア（本体）にも暫くは組み込まれないということです。

とにかく、Twenty Twentyの開発段階のバージョンはGitHubから入手でき、それを既存の安定したWordPressやWordPress5.3にインストールすることは可能です。テーマが一旦コアに組み込まれればGitHubのレポジトリは非推奨となります。それまでに、WordPress5.3のリリーススケジュールの次の日付を抑えておいた方がよいでしょう。

  • 2019年9月23日：ベータ１
  • 2019年9月30日：ベータ２
  • 2019年10月7日：ベータ３
  • 2019年10月15日：リリース候補１
  • 2019年10月22日：リリース候補２
  • 2019年10月29日：リリース候補３
  • 2019年11月5日：リリース候補４（必要に応じて）
  • 2019年11月12日：3リリースの目標期日

Twenty Twentyを使い始めるには、以下の手順を踏みましょう。

  1. GitHubからzipパッケージを入手する。
  2. ZipファイルをWordPressダッシュボードの開発設備にアップロードするか、SFTPを使う。
  3. 外観→テーマを開き、テーマプレビュー画像で有効化ボタンをクリック。
  4. 外観→カスタマイズからTwenty Twentyの設定をする。

これだけです！これで、ステージングサイトやローカル環境でテストを始めても大丈夫。

GitHubで未解決の問題
GitHubで未解決の問題

これで準備が出来たので、さっそく WordPressテーマ 「Twenty Twenty」を見てみましょう！

Twenty Twentyのテーマの特徴

Twenty Twentyはフル機能のWordPressテーマではありませんが、開発者やサイト管理者が投稿やページのコンテンツレイアウトをカスタマイズできる自由度を狙いとし、縮小化してミニマルになったテーマです。Twenty Nineteenと同様にGutenburgのために製作され、大方そのライフサイクルに依存しています（より詳しくは、Matt MullenwegのWCEU 2019でのこのビデオを参照）。

このテーマはコンテンツ幅（580）、自動フィードリンク、投稿のサムネイル、タイトルタグ、そしてHTML５の要素の幾つか（検索フォーム、コメントフォーム、コメントリスト、ギャラリー、キャプション）を始めとする数々のテーマの機能をサポートしています。

その他の機能はテーマカスタマイザーにオプションを追加するものです。これらにはカスタム背景やカスタムロゴがあります。下のコードスニペットではテーマのfunctionsファイルでこれらの機能が有効化されているのがわかります。

// Custom background color
add_theme_support(
	'custom-background',
	array(
		'default-color'	=> 'F5EFE0'
	)
);
// Custom logo
add_theme_support(
	'custom-logo',
	array(
		'height'      => 240,
		'width'       => 320,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	)
);
Twenty Twentyのテーマカスタマイザー
Twenty Twentyのテーマカスタマイザー

Twenty TwentyはGutenburgの特殊機能も幾つかサポートしています。一つ目がワイド及び全幅のアラインメントです。

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

ユーザーがカスタマイザー上でアクセントカラーを設定した場合には、エディタのカラーパレットが有効になります（デフォルトで有効化されています）。

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
	add_theme_support( 'editor-color-palette', $editor_color_palette );
}
テーマカスタマイザーにおける背景色とアクセントカラー
テーマカスタマイザーにおける背景色とアクセントカラー

Twenty Twentyはブロックエディタ上で４つのエディタフォントサイズが使えます。

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' 		=> _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 16,
		'slug' 		=> 'small',
	),
	array(
		'name' 		=> _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 18,
		'slug' 		=> 'regular',
	),
	array(
		'name' 		=> _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 24,
		'slug' 		=> 'large',
	),
	array(
		'name' 		=> _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 32,
		'slug' 		=> 'larger',
	),
) );
エディタのブロックの文字設定でのフォントサイズ
エディタのブロックの文字設定でのフォントサイズ

以上です。このテーマは機能性においても至極ミニマルですが、この後すぐご紹介するように子テーマで簡単に拡張できます。

Twenty Twentyの外観のカスタマイズ方法

Twenty Twentyには余計な機能は付いておらず、その代わりGutenburg（もしくは優秀なページビルダー）と合わせて使えば素晴らしい柔軟性を見せてくれます。

テーマ「Twenty Twenty」をカスタマイズする

サイトタイトル、サイトのディスクリプション、検索ボタン、モーダルメニューはヘッダーで扱います。これらは全て、テーマカスタマイザーのサイト基本情報とヘッダーの項目から有効化/無効化できます。

テーマカスタマイザーでサイトタイトルとタグラインの有効化/無効化が可能
テーマカスタマイザーでサイトタイトルとタグラインの有効化/無効化が可能

カスタマイザーのCover Templateの項目では、Cover templateページのテンプレートのカスタマイズ設定ができます。

  • 背景イメージでパララックス効果を有効にするオプション（固定の背景イメージ）
  • アイキャッチ画像のオーバーレイ表示の際に使用するカスタム背景色と文字色を設定するカラーピッカー
  • ブレンドモードと透過度を設定する二つのドロップダウンメニュー
カスタマイザーのCover Templateの項目
カスタマイザーのCover Templateの項目

メニューの項目にはメインメニュー、フッターメニュー、ソーシャルメニューの３つのメニューの位置があります。デフォルトでは、メインメニューはヘッダーの切り替え可能なモーダルボックスの中にあります。カスタマイザーでメニューモーダルを無効化すれば、メインメニューは通常のナビゲーションメニューとして表示されるようになります。

フッターではフッターメニューとソーシャルメニューの位置と、２つのウィジェットエリアを扱います。以下は、全ての要素を配備したテーマのフッターの画像です。

Twenty Twentyのテンプレートフッター
Twenty Twentyのテンプレートフッター

最後に、追加CSSの項目ではカスタムスタイルを追加することができます。以下は、Cover Templateのページヘッダーの外観を微調整するために使用した文字列です。

単一の投稿/ページテンプレート

投稿やページのレイアウトに関しては、３つのテンプレートからの選択が可能です。デフォルトテーマの他に、Twenty TwentyにはCover TemplateとFull Width Template（全幅テンプレート）が用意されており、コンテンツの外観や操作感を色々とカスタマイズできます。

Twenty Twentyの単一の投稿/ページテンプレート
Twenty Twentyの単一の投稿/ページテンプレート

Twenty Twentyのブロックエディタ

Twenty Twentyは、そのミニマルなアプローチのために外観の殆どをブロックエディタに依存しています。今回は、Gutenburgのバージョン6.4.0.を用いてTwenty Twentyをテストしました。このバージョンには十分な新規機能や改善点、バグの修正が加えられており、編集の操作感が大幅に改善されています。

特に単一ページのウェブサイト構築の際には、ブロックの使用は便利です。メディアと文章やカバーのようなブロックには改善が加えられ、商品や仕事用のポートフォリオなどを載せる際には素晴らしい見栄えとなっています。

メディアと文章のブロック
メディアと文章のブロック（全幅アラインメント）

とは言え、Gutenburgは進行中のプロジェクトなので、エディタにより多くのブロックを追加できるようにする人気のプラグインも気になるかもしれませんね。

以下は、試してみる価値がありそうなプラグインの簡潔なリストです。

テーマカスタマイザーやブロックエディタも外観やレイアウトのカスタマイズに関しては良い仕事をしてくれますが、ページの外観や操作感の調整には子テーマの方が良いでしょう。

Twenty Twentyの子テーマの作成方法

WordPressの子テーマの作成は楽しいだけでなく、WordPressテーマデベロッパとしてのキャリアを始めるのにも良い方法です。WordPressで子テーマを作成するなら、Twenty Twentyは良い親テーマになるでしょう。ですから、子テーマ作成に挑戦してみませんか？😉

子テーマにどこから手を付けてよいか分からないなら、WordPressで子テーマを作成する方法という長編ガイドをぜひ読んでみてください。

さて、Twenty Twentyの一つ目の子テーマを作ってみましょう！

wp-content/themes の下に新規ディレクトリを作成し、これに twentytwenty-childなどの任意の名前を付けます。

wp-content/themes/twentytwenty-child を開き、以下の文字列から始まるstyle.cssファイルを新規作成します。

/*
Theme Name: My Twenty Twenty Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty.
Author: Your Name
Author URI: https://example.com/
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

続いて、親テーマのスタイルシートを入れる必要があります。同じディレクトリに、次のようなfunctions.phpファイルを作成しましょう。

Activate the child theme

Twenty Twentyのほぼ全てに変更を加えられます。カスタムテンプレートやカスタムスタイルを追加したり、テーマのデフォルトのスタイルの変更もできます。

ここで、単一の投稿やページのための新規テンプレートの作成方法について見てみましょう。

Twenty Twentyでカスタム投稿/ページテンプレートを追加する方法

ここまでで、Twenty Twentyの子テーマを作成し、そのスタイルシートに親テーマのスタイルを紐づけることができました。次の例では、ヘッダーとフッターを除去し、投稿/ページテンプレートのファイルにページ本文の余白を作ります。

ステップ１

親テーマから子テーマのディレクトリに、以下のファイルをコピーペーストします。

  • template-full-width.php
  • header.php
  • footer.php

ステップ２

template-full-width.phpをtemplate-canvas.php（もしくは任意の名称）に名称変更します。ファイルを開き、既存の内容を消去し、以下をペーストします。

<?php
/*
Template Name: Canvas Template
Template Post Type: post, page
*/
get_template_part( 'singular' );

Template Nameはテンプレートファイルの名前をブロックエディタで表示されるのと同様に設定し、Template Post Typeはこのテンプレートファイルをサポートする投稿形式を定めます。get_template_partの機能はsingular.phpファイルを親テーマから読み込むことです（子テーマにこのファイルのコピーをする必要はありません）。

WordPressのダッシュボードを開き、新規投稿を作成してみてください。Post Attributesの項目に新しいページテンプレートが追加されているはずです。

Post Attributesで新しいテンプレートが利用可能に。
Post Attributesで新しいテンプレートが利用可能に。

ステップ３

さて、ここからが面白いところです。header.phpを任意のテキストエディタで開き、以下のifの文字列にheader要素を挿入しましょう。

<?php
if ( is_singular() && ! is_page_template( array( 'template-canvas.php' ) ) ) {
?>
	<header id="site-header" class="header-footer-group" role="banner">
		...
	</header><!-- #site-header -->

	<?php 
	// Output the menu modal
	get_template_part( 'template-parts/modal-menu' );
}

このコードは現在のページが単一投稿/ページ/カスタム投稿タイプであるか、またページテンプレートがtemplate-canvas.phpでないかを確認します。もしページテンプレートがtemplate-canvas.phpである場合、サイトヘッダーとモーダルメニューは取り入れません。

同様に、採用されているページテンプレートがcanvasのときに、投稿ページからフッターを消去することもできます。以下のようにfooter.phpに同様の条件を挿入しましょう。

<?php
if ( is_singular() && ! is_page_template( array( 'template-canvas.php' ) ) ) {
?>
	<footer id="site-footer" role="contentinfo" class="header-footer-group">
	...
	</footer><!-- #site-footer -->
<?php } ?>
	<?php wp_footer(); ?>

    </body>
</html>

コードはこちらからダウンロードできます。

ここまで終わったら新規投稿かページを作成し、Post/Page attributesでCanvasテンプレートを選択してサイト上でページを見てみましょう。

まとめ

Twenty Twentyは１カラムのミニマリストなWordPressテーマです。使い方は主にブロックエディタの進歩に依存することになるでしょう。Anders氏が強調するように、

「ブロックエディタが約束するのは、ユーザーがサイトを見たままに自由にデザイン・構築できるようになることです。」

Twenty Nineteenに続いて、この新しいデフォルトテーマであるTwenty Twentyは「マニュアルでのコード編集無しのウェブサイト構築を可能にする」ことを狙いとした新世代のテーマの2代目です。

もしプロジェクトに使うにはGutenburgの信頼性はまだ不完全だと考えているのなら、上記リストにあるプラグインを使って必要なブロックを追加すればよいでしょう。もしくは単純に、サードパーティーのページビルダーを利用するのも手です。

ここからはあなた次第です。新しいWordPressのデフォルトテーマをインストールして試してみて、その感想をコメント欄で教えてください！

Carlo Daniele Kinsta

ウェブデザインとフロントエンド開発をこよなく愛し、WordPress歴は10年以上。イタリアおよびヨーロッパの大学や教育機関とも共同研究を行う。WordPressに関する記事を何十件も執筆しており、イタリア国内外のウェブサイトや雑誌に掲載されている。詳しい仕事情報はXとLinkedInで公開中。