WordPress 5.0はもうすぐリリースされますが、嬉しくても心配している方が多いでしょう。GutenbergはWordPressの使い方を大きく変化しますので、十分に試験せずにインストールするとウェブサイトがどうなるかという懸念が多いでしょう。ご心配なく！サポートされていないテーマやプラグインがウェブサイトを壊さないように、WordPressエディタGutenbergを（一時的に）無効にする方法についての記事をご用意しております。

驚くことですが、今でもWordPressの皆さんはすでにWordPress 5.0を使用しています！Make WordPressブログの Mattがこう述べました：

5.0を4.9.8 + Gutenbergのみにしておけば、メジャーでも新しいコードの観点でイベントのないリリースになります。試験済みです。いくつかのホストではすでにGutenbergが新規インストールを対象にインストールされますので、5.0は既に使用されることも言えるでしょう。

つまり、WordPress 5.0はGutenbergをコアに追加したWordPress 4.9.8だけであるため、私たちはすでに5.0を使用しています。実際にはもちろん、それだけではありません。なぜなら、WordPress 5.0には新たなTwenty Nineteenのデフォルトテーマも追加されるからです。

WordPressテーマTwenty Nineteen
WordPressテーマTwenty Nineteen

それでは、変更点を確認しましょう。

GutenbergとTwenty Nineteenについて

Gutenbergが嫌い方もいるでしょう。新しいエディタに関する議論はまだ終わっていませんが、Gutenbergの宣言範囲を考慮しましょう：

カスタムブロックは、リッチなWebコンテンツを簡単かつ直感的に作成するようにユーザー、開発者、およびホストなどがWordPressとやりとりすることにより変更するため、技術的なスキルに関係なく誰もが公開ができるようになります。

上記はGutenbergが目指すことであり、Twenty NineteenはGutenbergに基づきGutenbergのために設計されているため目的は同様です。Twenty Nineteenはシンプルで、タイポグラフィーを中心にしたブログテーマで、レイアウトは1欄のみです。個人的なブログをはじめ中小企業のウェブサイトなど幅広いウェブサイトのために適切です。

Twenty Nineteenについて記事を書くということは、主にGutenbergについて書くということです。Twenty Nineteenでは、Gutenbergを使用しリッチコンテンツを作成するだけでなく、エディタでウェブサイト全体を構築することさえできます。Make WordPressブログのAllan Coleはこう述べています：

Gutenbergには、ウェブサイトのレイアウトまたはデザインをカスタマイズための前例のない自由度があります。自分の考えを完全に実現できるには、Gutenbergの創造的自由のために構築されたフレキシブルな新世代のテーマが必要になります。
そのことを念頭に置いて、WordPress 5.0は、新しいデフォルトのテーマTwenty Nineteenで立ち上げます。

Twenty Nineteenテーマでは、Gutenbergはコンテンツビルダーだけでなくサイトビルダーであり、WordPressユーザーはブロックを利用することによりウェブサイト全体を構築することができます。Gutenbergの自信のない方には、人気の高いページビルダープラグインの多くはGutenbergのサポートを追加しています。

Twenty Nineteenをインストールする

Twenty Nineteenのリリース日は本当だとWordPressのメジャーリリースのに合わせるはずですが、WordPress 5.0は11月19日にリリースされる予定で、その日までにTween Nineteenの最新版が準備できない可能性があります。WordPress 5.0のすべてのリリース予定日をご参照ください。とにかく、テーマはコアに統合されるまでGithubからダウンロードできるようになっています。

Twenty Nineteenは、_sとgutenberg-starter-themeの両方に基づいており、Sass付きです。.zipファイルを入手すると、テーマを抽出し、テーマフォルダを開発インストールの/wp-content/themesディレクトリにアップロードまたは移動します。WordPressのダッシュボードからアップロードすることもできます。

新しいテーマをアップロードする
WordPressダッシュボードから新しいテーマをアップロードする

Kinstaのお客様はステージング環境にインストールできます。Kinstaのお客様でないあなたなら、ローカルマシンにインストールすればよいでしょう。

Twenty Nineteenが正常にインストールされました
Twenty Nineteenが正常にインストールされました

Twenty Nineteenの外観

一欄のみのレイアウトはコンテンツを強調し、フルで幅の広いブロックに最適です。テーマはフッターサイドバーをサポートするようになった為、ページヘッダーに配置されたプライマリメニューとソーシャルリンクメニュー並びにフッターに配置されたフッターメニュの3つのナビゲーションメニューが付きます。

Twenty Nineteenヘッダー
Twenty Nineteenヘッダーのサイトタイトル、説明または、メニュー

ブログページは、アイキャッチ画像が有効になっている通常のブログページの見た目です。別当の投稿とページはサイトビルダーとしてのGutenbergの大きな可能性を示しています。

完全にGutenbergに基づいているため、Twenty Nineteenの機能の利用可能性は主にGutenbergの開発サイクルとブロックの利用可能性によります。ウィジェットブロック、ショートコードブロック、ギャラリー、HTMLコードなどが追加できます。しかし、これらのブロックだけだまだ足りないでしょう。幸いなことに、Atomic Blocks、Advanced Gutenberg、StackableなどのGutenbergに新しいブロックを追加できるプラグインがいくつかあります。 急成長してきたGutenberg Cloudなどのプロジェクトもあります。

Twenty Nineteenは少しシンプルすぎると感じている方なら、まだ進行中の作品であることを忘れないでください。WordPress 5.0がリリースされる日にコアに統合されるかどうかはわかりませんし、今後は追加機能またはバグ修正もいくつか来るでしょう。さらに、まだ解決されていない課題および実装すべき機能もあります。Twenty Nineteenはサブメニューをサポートするようになりましたが、カスタムヘッダーもビデオヘッダーをまだサポートしていません。これらの機能は妥当な時間内に追加される予定です。

本テーマの状態に興味のある方は是非、Githubの課題リストをご確認ください。

Gutenberg向けのテーマ準備：開発者のアプローチ

Gutenbergは、追加設定なしでもテーマのブロックスタイルの基本的なサポートを提供しています。テーマ開発者は、Gutenbergのデフォルトスタイルをカスタムスタイルで上書きすることさえできますが、カスタムスタイルを完全に止めて、サイトのフロントのブロックのスタイルを完全にGutenbergに任せることもできます。

作成されたコンテンツにより筆者の執筆エクスペリエンスが向上し、誰もがUIに慣れることができるエディタです。

とにかく、Gutenbergのスタイルとプレゼンテーション機能の中には、専用のサポートを追加する必要のあるものもあります。after_setup_themeアクションがトリガーされたときにfunctions.phpファイルでadd_theme_supportを呼び出すことにより、その専用のサポートを追加ができます。例を次に示します：

function mytheme_setup() {
    // Add support for Block Styles
    add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

以下は、上記のGutenberg機能の一覧です。その一部はTwenty Nineteenでもサポートされています。機能の完全なリストについては、Gutenbergハンドブックをご参照ください。

Gutenbergブロックプレゼンテーションスタイルのサポートの追加

Gutenbergチームの目標の1つは、テーマ内のスタイリングのためのフレキシブルなシステムを構築し、できるだけ「フロントエンドとエディタのビジュアルを近づける」ことでした。目的は、コンテンツのフロントサイトの姿の正確なプレビューをユーザーに提供することです。

その目標を達成するために、チームはプレゼンテーションスタイルと構造スタイルを分離しました。デフォルトでは、サイトの外観に影響を与えないように、プレゼンテーションスタイルはフロントエンドに読み込まれません。とにかく、新しいテーマではGutenbergのプレゼンテーションスタイルを次のレジストレーションで有効にすることにより採用できます（詳細についてはハンドブックを参照）。

// Add support for Block Styles
add_theme_support( 'wp-block-styles' );

さすがに、Twenty NineteenはGutenbergのブロックスタイルをサポートしています。投稿ページは、投稿編集ページに非常に似ていますが、デスクトップ上に表示されるアイキャッチ画像は、ビューポート全体をカバーする背景画像になっています。次の画像は、バックエンドでのGutenbergのイメージです。

WordPressエディタGutenberg
WordPressエディタGutenbergのフルスクリーンモード

同じ投稿のフロントサイトは次のとおりです。

Twenty Nineteenでの投稿
Twenty Nineteenでの投稿

ワイド揃え、全幅揃え

Gutenbergには、ワイド揃えと全幅揃えのアライメントの2つの新しいおプシンがありますが、ワイド揃えまたは全幅揃えが選択できるのは、利用のテーマでサポートされている場合に限ります。サポートされている場合には、Gutenbergでは2つの追加のアライメントアイコンが表示されます。

Gutenbergにてのワイド揃えと全幅揃えのボタン
Gutenbergにてのワイド揃えと全幅揃えのボタン

次の画像は、Twenty Nineteenでの中央揃え、ワイド揃えと、全幅揃えの画像を示しています。

中央揃え、ワイド揃えと、全幅揃えの比較
中央揃え、ワイド揃えと、全幅揃えの比較

テーマの開発者は、単一のステートメントで関数ファイル内でワイド揃えと全幅揃えを有効にすることにより、サポートを追加できます。

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

ワイド揃えと全幅揃えのサポートを追加すると、追加の2つのCSSクラス（alignfull と alignwide）のCSS宣言書を提供する必要があります。Twenty Nineteenでは次のスタイルが提供されます：

.entry-content > *.alignwide,
.entry-summary > *.alignwide {
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .entry-content > *.alignwide,
    .entry-summary > *.alignwide {
        margin-left: calc(1 * (100vw / 12));
        margin-right: calc(1 * (100vw / 12));
        max-width: calc(10 * (100vw / 12));
  }
}

.entry-content > *.alignfull,
.entry-summary > *.alignfull {
    margin-top: calc(2 * 1rem);
    margin-right: 0;
    margin-bottom: calc(2 * 1rem);
    margin-left: 0;
    max-width: 100%;
}

.entry-content .wp-block-image.alignfull img {
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
}

注：テーマを切り替えると異常が発生する可能性があるため、このオプションを使用する際には十分にご注意ください。（詳細についてはGithubをご参照ください。）

エディタスタイル

エディタスタイルとはWordPress 3.0で導入され、テーマの開発者がTinyMCEエディタにカスタムスタイルを追加できる機能です。Gutenbergもこの機能もサポートしていますが、旧型エディタではエディタのiframeにスタイルが直接読み込まれるに対し、Gutenbergではiframeがないため、特定のCSSセレクタが追加されます。

エディタスタイルのサポートは次のように追加できます：

// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );

この機能はTwenty Nineteenでもサポートされています。Gutenbergのエディタスタイルの詳細については、この記事をご確認ください。

ブロックカラーパレット

Gutenbergでは、エディタのカラー設定パネルで一般的なカラーセレクタが用意されています。テーマの開発者は、カスタムカラーパレットを追加することによりこのツールを拡張できます。そうすると、ユーザーがブロックの背景やテキストの色を素早く選択できるようになります。2段階のプロセスです。

まず、色の配列を指定します。

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __( 'hot pink', 'themeLangDomain' ),
        'slug' => 'hot-pink',
        'color' => '#f865b0',
    ),
    array(
        'name' => __( 'classic rose', 'themeLangDomain' ),
        'slug' => 'classic-rose',
        'color' => '#fbcaef',
    ),
) );

次に、テーマのスタイルシートに関連するスタイルを指定します。

.has-hot-pink-background-color {
    background-color: #f865b0;
}

.has-hot-pink-color {
    color: #f865b0;
}

クラス名はhas-に、ケバブケース (kebab case)でのカラースラッグとコンテキスト（color または background-color）の順です。現在、Tween Nineteenではブロックカラーパレットがサポートされていませんが、子テーマを使用することによりこの問題は簡単に解決できます。

Gutenbergのカスタムカラーパレット
Gutenbergのカスタムカラーパレット

カスタムカラーパレットを無効にするには、テーマまたは子テーマの関数ファイルに次の行を追加します。

add_theme_support( 'disable-custom-colors' );

ブロックフォントサイズ

テーマというものは、Gutenbergのフォントサイズのデフォルトセットを上書きすることもできます。関数ファイルに追加するコードの例を次に示します。

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'extra-small', 'themeLangDomain' ),
        'shortName' => __( 'XS', 'themeLangDomain' ),
        'size' => 10,
        'slug' => 'extra-small'
    ),
    array(
        'name' => __( 'small', 'themeLangDomain' ),
        'shortName' => __( 'S', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'regular', 'themeLangDomain' ),
        'shortName' => __( 'M', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => __( 'large', 'themeLangDomain' ),
        'shortName' => __( 'L', 'themeLangDomain' ),
        'size' => 26,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'larger', 'themeLangDomain' ),
        'shortName' => __( 'XL', 'themeLangDomain' ),
        'size' => 36,
        'slug' => 'larger'
    ),
    array(
        'name' => __( 'huge', 'themeLangDomain' ),
        'shortName' => __( 'XXL', 'themeLangDomain' ),
        'size' => 56,
        'slug' => 'huge'
    )
) );

新しいフォントサイズは、Gutenbergのテキスト設定のフォントサイズに追加されます。

Gutenbergのカスタムフォントサイズ
Gutenbergのカスタムフォントサイズ

次に、テーマのスタイルシートに関連するスタイルを指定します。クラス名はhas-に、ケバブケース (kebab case)でのフォントサイズ名と-font-sizeの順です。

.has-huge-font-size {
    font-size: 56px;
}

Twenty Nineteenではカスタムのフォントサイズがなく、Gutenbergのデフォルトフォントサイズのままです。

注：このコードが正常に機能するには、after_setup_themeアクションを使用してコードをフックする必要があります。

まとめ

Twenty Nineteenは個人的なブログに適切で、どちらかというと完全に機能的なWordPressのテーマではなく、白いキャンバスのようなものです。シンプルなアプローチであるため、ビジネスまたは電子商取引用のウェブサイトを構築するには、まだ足りないかもしれませんが、ご心配なく！新しい機能はまもなく実装されるはずであるため、Twenty Nineteenは今後より強力なテーマになるでしょう。

一方、 Atomic Blocks、GeneratePress、GutentypeまたはDiviなどのすでにGutenbergをサポートしているテーマを確認することもできます。WordPress 5.0は近づいているため、Gutenbergをサポートすることはプラスではなく、マストです。テーマの開発者は新しいWordPressエディターをできるだけ早く受け入れないと、競争に勝てません。

Twenty NineteenまたはGutenbergをサポートしているその他テーマをインストールしたことがありますでしょうか。ご意見をお寄せください。

Carlo Daniele Kinsta

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