ブロックベーステーマの作成

このチュートリアルの目的は基本的なブロックベーステーマの作り方の紹介と、テーマ開発者の「フルサイト編集 (full site editing)」への移行の支援です。

このチュートリアルでは、ブロックベーステーマに必要なファイルの一覧、テンプレートとテンプレートパーツの組み合わせ、グローバルスタイルへのプリセットの追加、サイトエディターでのブロックの追加とテンプレートのエクスポートについて学びます。

「フルサイト編集」は実験中の機能のため、以下の手順も変わる可能性があります。

このチュートリアルは Gutenberg Version 9.1 時点の最新です。

目次

  1. ブロックベーステーマを作成するには何が必要か ?
  2. テーマの作成
  3. テンプレートとテンプレートパーツの作成
  4. experimental-theme.json – グローバルスタイル
  5. ブロックの追加

ブロックベーステーマを作成するには何が必要か ?

ブロックベーステーマを使用するには Gutenberg をインストールし、「フルサイト編集」を有効化する必要があります。「フルサイト編集」は WordPress 管理画面の「Gutenberg」->「実験中」メニューから有効化できます。

ブロックベーステーマは HTML テンプレートとテンプレートパーツから構成されています。テンプレートはテンプレート階層内で使用されるメインのファイルで、たとえば index、single、archive などがあります。テンプレートはオプションで、ヘッダー、フッター、サイドバーなどの構造化テンプレートパーツを含むことができます。

各テンプレート、テンプレートパーツは、選択したブロックの HTML、ブロック文法を含みます。ブロック HTML は サイトエディター で生成し、エクスポートします。手動でテーマの HTML ファイルに追加することもできます。

必要なファイルとファイル構造

ブロックベーステーマには index テンプレートファイルの index.php ファイル、スタイル用 style.css ファイル、functions.php ファイルが必要です。

テーマはグローバルなスタイルを管理する experimental-theme.json ファイルをオプションで含むこともできます。さらにテーマには追加のテンプレートやテンプレートパーツを含めることができます。

テンプレートは block-templates フォルダー内に、テンプレートパーツは block-template-parts フォルダー内に配置します。

theme
|__ style.css
|__ functions.php
|__ index.php
|__ experimental-theme.json
|__ block-templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ block-template-parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

テーマの作成

/wp-content/themes/ 下にテーマ用の新しいフォルダーを作成してください。 フォルダーの中に block-templates フォルダーと block-template-parts フォルダーを作成します。

style.css ファイルを作成してください。style.css ファイルのヘッダーには通常のテーマと同じ要素を記述します

/*
Theme Name: My first theme
Theme URI: 
Author: The WordPress team
Author URI: https://wordpress.org/
Description: 
Tags:
Version: 1.0.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myfirsttheme

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

functions.php ファイルを作成してください。

このファイルで style.css ファイルをエンキューし、色、幅広ブロック、アイキャッチ画像など使用したいテーマサポートを追加します。

タイトルタグのテーマサポートの追加は不要です。すでにフルサイト編集では有効化されています。

What is functions.php?

Theme Support

<?php
if ( ! function_exists( 'myfirsttheme_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which runs
 * before the init hook. The init hook is too late for some features, such as indicating
 * support post thumbnails.
 */
function myfirsttheme_setup() {
 
    /**
     * Add default posts and comments RSS feed links to <head>.
     */
    add_theme_support( 'automatic-feed-links' );
 
    /**
     * Enable support for post thumbnails and featured images.
     */
    add_theme_support( 'post-thumbnails' );

    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( 'strong magenta', 'myfirsttheme' ),
            'slug' => 'strong-magenta',
            'color' => '#a156b4',
        ),
        array(
            'name' => __( 'very dark gray', 'myfirsttheme' ),
            'slug' => 'very-dark-gray',
            'color' => '#444',
        ),
    ) );

    add_theme_support( 'wp-block-styles' );

    add_theme_support( 'align-wide' );
}
endif; // myfirsttheme_setup
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

/**
 * Enqueue theme scripts and styles.
 */
function myfirsttheme_scripts() {
    wp_enqueue_style( 'myfirsttheme-style', get_stylesheet_uri() );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'myfirsttheme_scripts' );

index.php ファイルを作成してください。 このファイルはテーマは有効化されたものの、「フルサイト編集」が有効化されていない場合のフォールバックとして使用されます。このチュートリアルでは空のままで構いません。

この段階でテーマには次のようなファイルとフォルダーがあります。

theme
 |__ style.css
 |__ functions.php
 |__ index.php
 |__ block-templates
 	|__ (empty folder)
 |__ block-template-parts
 	|__ (empty folder)

テンプレートとテンプレートパーツの作成

2つのテンプレートパーツ footer.htmlheader.html を作成し、block-template-parts フォルダー内に保存してください。 ファイルの中身は空で構いません。

block-templates フォルダー内に index.html ファイルを作成してください。

2つの HTML コメントを追加することで index.html にテンプレートパーツを含めます。

HTML コメントは wp:template-part で始めます。これは template-part ブロックタイプの名前です。中括弧の中には2つのキーと値、テンプレートパーツのスラッグとテーマ名を含めます。

<!-- wp:template-part {"slug":"header","theme":"myfirsttheme"} /-->

<!-- wp:template-part {"slug":"footer","theme":"myfirsttheme"} /-->

テーマ名を変えるには theme キーの値に指定してください。

将来的にはテンプレートやテンプレートパーツを直接サイトエディターで作成し、組み合わせできるようになります。

experimental-theme.json – グローバルスタイル

experimental-theme.json ファイルはブロックのスタイルにデフォルトを設定し、ブロックのスタイルを支援します。

experimental-theme.json ファイルを使用することで以下が可能です。

  • CSS 変数 (または CSS カスタムプロパティとも呼ばれる) の作成。CSS 変数はフロントエンドでも、エディター内でもブロックのスタイルに使用されます。
  • グローバルスタイルの設定
  • 個別ブロックタイプのスタイルの設定

グローバルスタイルのドキュメントには利用可能なスタイルとスタイルの組み合わせの一覧があります。

メインのフォルダー内に experimental-theme.json ファイルを作成してください。

CSS 変数は グローバルプリセット を使用して生成されます。変数は、フロント表示時の :root と、エディター表示時の .editor-styles-wrapper クラスに追加されます。

テーマの style.css やエディターのスタイルシートに追加されたスタイルは、グローバルスタイルの後でロードされます。

experimental-theme.json ファイルに次のグローバルプリセットを追加してください。

{
    "global": {
        "setttings": {
            "color": {
                "palette": [
                    {
                        "slug": "strong-magenta",
                        "color": "#a156b4"
                    },
                    {
                        "slug": "very-dark-gray",
                        "color": "#444"
                    },
                ]
            },
            "custom": {
                "line-height": [
                    {
                        "small": "1.3"
                    },
                    {
                        "medium": "2"
                    },
                    {
                        large": "2.5"
                    }
                ]
            }
        }
    }
}

このコードは次の変数を生成します。

    --wp--preset--color--strong-magenta: #a156b4;
    --wp--preset--color--very-dark-gray: #444;
    
    --wp--custom--line-height--small: 1.3;
    --wp--custom--line-height--medium: 2;
    --wp--custom--line-height--large: 2.5;

グローバルスタイル を使用すると Web サイトとブロックのデフォルト値を設定できます。

この例では Web サイトの背景色としてダークグレイを追加します。 globals の中、presets の下にこのコードを追加してください。

    "styles": {
        "color": {
            "background": "var(--wp--preset--color--very-dark-gray)"
        }
    }

ブロックスタイル は特定のタイプのすべてのブロックにデフォルト値を設定します。

この例では CSS 変数を使用して h2 見出しブロックに、カスタムフォントサイズと組み合わせてテキスト色と行高を追加します。

見出しブロックにスタイルを追加する際は、h1 から h6 の見出しレベルを含めてください。

ブロックスタイルをグローバルスタイルから分離します。globals の下、閉じる括弧の前に次のコードを追加してください。

"core/heading/h2": {
    "styles": {
        "color": {
            "text": "var( --wp--preset--color--strong-magenta )"
        },
        "typography": {
            "fontSize": "2.5rem",
            "lineHeight": "var(--wp--custom--line-height--medium)"
        }
    }
},

フォントサイズ用の CSS 変数は、editor-font-sizes テーマサポートを使用するか、グローバルプリセットに追加することで生成されます。 https://ja.wordpress.org/team/handbook/block-editor/developers/themes/theme-support/#block-font-sizes

テーマがカスタムフォントサイズを追加しない場合、変数はデフォルトサイズを使用して作成されます。 この例では段落ブロックにデフォルトの medium フォントサイズを追加します。

フォントサイズに単位は指定しません。calc が使用されるのはこのためです。https://developer.mozilla.org/en-US/docs/Web/CSS/calc

"core/paragraph": {
    "styles": {
        "typography": {
            "fontSize": "calc(1px * var( --wp--preset--font-size--medium ))"
        }
    }
},

CSS 変数の仕様はオプションです。この例ではグループブロックのデフォルトの背景色をカラーコードを使用して白に変更します。

"core/group": {
    "styles": {
        "color": {
            "background": "#ffffff"
        }
    }
}

以下はプリセットとスタイルを組み合わせた結果です。

{
    "global": {
        "setttings": {
            "color": {
                "palette": [
                    {
                        "slug": "strong-magenta",
                        "color": "#a156b4"
                    },
                    {
                        "slug": "very-dark-gray",
                        "color": "#444"
                    },
                ]
            },
            "custom": {
                "line-height": [
                    {
                        "small": "1.3"
                    },
                    {
                        "medium": "2"
                    },
                    {
                        large": "2.5"
                    }
                ]
            }
        }
    },

    "core/heading/h2": {
        "styles": {
            "color": {
                "text": "var( --wp--preset--color--strong-magenta )"
            },
            "typography": {
                "fontSize": "2.5rem",
                "lineHeight": "var(--wp--custom--line-height--medium)"
            }
        }
    },

    "core/paragraph": {
        "styles": {
            "typography": {
                "fontSize": "calc(1px * var( --wp--preset--font-size--medium ))"
            }
        }
    },

    "core/group": {
        "styles": {
            "color": {
                "background": "#ffffff"
            }
        }
    }
}

ブロックの追加

原文

最終更新日: