【WordPressテーマ作成】Create Block Themeプラグインとは

大体のソフトウェア開発に言えることですが、顧客や自社にとって価値ある製品は、必ずしもゼロから構築する必要はありません。

例えば、WordPressのブロックテーマは、WordPressのプラグインディレクトリから入手可能なCreate Block Themeプラグインを使って簡単に構築することができます。

Create Block Themeは、WordPressサイトエディターのテーマ構築機能を利用するプラグインで、テーマ開発に非常に便利です。ただし注意点として、サイトに恒久的な変更を加えることができるため、ステージング環境で使用することを強くおすすめします。Kinstaのお客様は、サイトのステージング環境を素早く簡単に立ち上げることができます。

なお、このプラグインはブロックテーマにのみ対応しており、クラシックテーマでは動作しません。今回はCreate Block Themeプラグインを取り上げ、その特徴と使い方をご紹介します。

Create Block Themeプラグインの使用方法

Create Block Themeプラグインにアクセスするには、プラグインを有効化した後、WordPress管理画面の 「外観」＞「ブロックテーマを作成」を開きます。

このページには、現在使用中のテーマ（以下スクリーンショットではTwenty Twenty-Five）への変更の保存、新規テーマの作成、テーマのエクスポートなどの項目がありますが、サイトエディターと比べると機能が制限されます。

そのため、サイトエディター内でプラグインを使用するのがおすすめです。サイトエディターを開き、レンチのアイコンを選択するとプラグインの機能にアクセスできます。変更をリアルタイムでプレビューしながら、カスタマイズ可能です。

Create Block Themeプラグインの機能

Create Block Themeプラグインを使用すると、WordPressブロックテーマを効率的に作成、編集、エクスポートすることができます。以下、各機能を見ていきましょう。

1. テーマへの変更を保存

このプラグインのコンセプトと使い方は非常にシンプルです。サイトエディターでスタイル、テンプレート、パターンを現在使用しているテーマに合わせて変更し、保存します。

なお、「テーマへの変更を保存」はエクスポートしたい内容を保存するためのものであり、テーマの変更を保存するものではありません。保存した変更は、WordPressのリビジョンから（プラグインなしで）いつでもロールバック可能です。

テーマをエクスポートするには、以下8つの方法があります。

• フォントを保存
• テンプレートの変更を保存
• 変更されたテンプレートのみを処理
• 同期パターンを保存
• テキストのローカライゼーション
• 画像のローカライゼーション
• ナビゲーション参照を削除

2.テーマバリエーションの作成

Create Block Themeを使用すると、スタイルのバリエーションだけでなく、カラーパレットやタイプセット（本文、リンク、見出し、キャプション、ボタンに適用できるフォントのセット）も作成できます。

下の例では、「My New Variation」と称したスタイルを作成しています。これを行うには、少なくともスタイルバリエーションに関連づける新たなカラーパレットとタイプセットを作成する必要があります。なお、この画面には作成したバリエーションのみ表示され、デフォルトのカラーパレットとタイプセットは表示されません。

以下は任意のスタイルバリエーションに適用可能な2色のカラーパレットの例です。新規パレットに2つの色を追加し（左）、保存（中央）、独自のカラーパレットが表示（右）されているのがわかります。

以下はタイプセットの作成例です。Robotoフォントが追加され、テキストと見出し要素に割り当てられています（以下のスクリーンショットでは見えませんが）。

タイプセットにフォントを追加し（左）保存（中央）、新たなタイプセットが表示されているのがわかります（右）。

このように、完全なスタイルバリエーションではなく、個別のカラーパレットやタイプセットを作成し、自由にテーマに適用することができます。

3. 空のテーマを作成

デザインにとらわれないクリーンなテーマから構築を始めたい場合は、「空のテーマを作成」がおすすめです。これは、クラシックテーマ開発が主流だった時代に開発者の間で人気だったUnderscoresテーマに似ています。

ブロックテーマを作成すると、以下を特徴とする定型テーマが生成されます。

• インデックステンプレートのみ
• スタイルのバリエーションなし
• ヘッダーとフッターのテンプレートパーツは1つのみ
• 最小限のtheme.jsonファイル
• functions.phpファイル

新規テーマの作成やスタイルバリエーションの作成とは異なり、これは新たにテーマを作成するものです。「外観」ページには以下のように表示されます。

4. zipファイルをエクスポート

便利な機能として、使用中のテーマを新たなサイトに効率的に移行することができます。このエクスポート機能は、別のサイトで使用できる標準テーマのzipファイルを作成してくれます。

WordPress標準のエクスポート機能との違いは特にありませんが、使用中のテーマのエクスポートに非常に有用です。

ちなみに、WordPressの標準機能を使って使用中のテーマをエクスポートするには、エディター右上の3つの点を選択して、「エクスポート」をクリックします。

5. テーマを作成

テーマの作成には2つのアプローチがあります。空のテーマと同様、「外観」＞「テーマ」に表示され、作成後は自動的に使用中テーマになります。

テーマの複製、子テーマの作成のいずれを選んでも、空のテーマと同じ選択肢が表示されます。

テーマを複製する

テーマの複製は、使用中のテーマに保存されている変更を複製します。複製するテーマ名を指定したら、以下のメタデータを設定します。

• テーマ名
• テーマの説明
• テーマ URI
• 作者名
• 作者 URI
• WordPressの最小バージョン

子テーマの作成

子テーマを作成すると、開発者はコーディングなしでテーマに変更を加えることができます。

メタデータの設定はテーマの複製と同様になります。

6.テーマのメタデータを編集

使用中のテーマのメタデータを編集することも可能です。具体的には、いかのメタデータ項目を変更できます。

• テーマ名：WordPressのテーママネージャーに表示される名前
• テーマの説明：テーマの目的や機能の簡単な説明
• テーマ URI：テーマのドキュメントやデモを指すURL
• 作者：テーマ作成者の名前
• バージョン：テーマのバージョン番号
• WordPressの最小バージョン：テーマと互換性のある最も古いWordPressのバージョン
• テーマタグ：テーマを分類して説明するためのキーワード
• 推奨プラグイン：テーマに必須または推奨プラグイン
• フォントのクレジット：テーマで使用されているフォントのクレジット
• 画像のクレジット：テーマで使用されている画像のクレジット
• スクリーンショット：WordPressテーママネージャーに表示されるプレビュー画像

配布するテーマをプロフェッショナルに見せるには、これらの項目の設定が欠かせません。

7. theme.jsonの表示

theme.jsonファイルを確認したい場合には、テーマのtheme.jsonファイルの読み取り専用ビューを使用することができます。このファイルには、色、タイポグラフィ、レイアウト設定など、テーマのグローバルスタイルと設定が含まれています。

このファイルを確認することで、テーマに適用されたカスタマイズを素早くチェックすることができます。

8. カスタムスタイルの表示

子ブロックテーマの場合、theme.jsonファイルには親テーマに影響しない変更が含まれます。これにより、子テーマに特定の変更を実装する間、親テーマが変更されないことが保証されます。

これらのカスタムスタイルの表示形式は、親テーマのtheme.jsonファイルと同様になります。

9.テーマをリセット

スタイル、テンプレート、テンプレートパーツを含むテーマに加えた変更を、最後の保存操作時の状態にロールバックすることも可能です。

なお、WordPress標準のリビジョンはこれよりも高度な機能になります。変更内容の詳細な履歴を表示し、任意のものを選択してテーマを以前の状態に正確に復元可能です。

まとめ

ブロックテーマの開発を始めるなら、Create Block Themeプラグインが便利です。「テーマ構築ツール」としてのWordPressの機能をフル活用して、テーマを簡単に作成できます。

また使いはじめには、次のステップを説明するメッセージがブラウザに表示されるため、使い方もわかりやすいのが特徴です。

データベースからファイルシステムへのデータ転送を可能にするため、テーマに変更を加えると、その変更内容がデータベースに保存されます。保存された変更内容によって、新規テーマに必要なファイル、必要に応じてエクスポートに必要なファイルが生成されます。

Create Block Themeプラグインは現在も開発中であり、機能がさらに強化されることが予想されますが、潜在的な変更には注意するようにしてください。特定の機能をテストする際には、ステージング環境を使用することをおすすめします。Kinstaでは、WordPressのテーマ開発を簡素化するツールを提供しています。

Kinstaのサーバーにご興味がありましたら、ぜひ一度お試しください。