WordPress老人から脱却！vol:05 テーマの基本構造を理解する！グーテンベルク対応テーマの作成ステップ

SHARE

WordPressは、長年にわたりウェブサイト構築の主要なプラットフォームとして進化し続けてきました。

最初はブログ作成ツールとしてスタートしましたが、現在ではeコマース、ポートフォリオ、ニュースサイト、企業サイトなど、あらゆる用途に対応できるフル機能のCMS（コンテンツ管理システム）となっています。

その中で最大の進化のひとつが、グーテンベルクエディタの導入です。

グーテンベルクエディタは、従来のクラシックエディタに比べて、ビジュアル的な直感操作を重視したブロックベースのエディタです。

これにより、コードの知識がないユーザーでも、ドラッグ＆ドロップで簡単にカスタマイズ可能なウェブページを作成できるようになりました。

このエディタは、テキスト、画像、動画、ギャラリー、コールトゥアクションボタンなど、個々の「ブロック」でコンテンツを構築する方式を採用しており、従来の固定的なテンプレート構造にとらわれず、レイアウトの自由度が大幅に向上しています。

この大きな変化により、テーマ開発者はグーテンベルクエディタに対応したテーマを設計する必要が生じています。

古いクラシックエディタに依存したテーマでは、最新のWordPress機能を活用できないため、開発者にとってグーテンベルク対応は避けて通れない重要なステップとなっています。

この記事では、クラシックエディタに慣れ親しんだ「WordPress老人」が、どのようにしてこの新しい技術に対応できるかを具体的な手順で説明していきます。

グーテンベルク対応テーマを作成することで、最新のトレンドを取り入れ、未来に向けた柔軟なテーマ開発が可能になります。

目次

テーマの基本構造を再確認する

WordPressのテーマは、ウェブサイトの外観と機能を定義する非常に重要な要素です。

テーマの構造を理解することで、独自のデザインや機能を持つサイトを構築する第一歩を踏み出せます。

特に、グーテンベルク対応のテーマでは、従来のテーマの構造を踏襲しつつ、ブロックエディタに適応させるための特別な要素が追加されています。

基本的に、WordPressテーマは以下のようなファイル構成と役割で成り立っています：

  1. style.css（スタイルシート）
    これはテーマの外観を定義するCSSファイルです。サイト全体のデザイン、レイアウト、色などがここで指定されます。また、このファイルにはテーマの名前やバージョン、作成者情報などのメタ情報も含まれます。これは必須のファイルです。
  2. index.php
    すべてのページに適用される、テーマのメインテンプレートファイルです。WordPressは、このファイルが他の特定のテンプレートファイル（例: single.php, page.php）が存在しない場合に使用されます。
  3. header.php
    サイトのヘッダー部分、主にナビゲーションメニューやロゴを表示するファイルです。WordPressでは多くのページで共通のヘッダーを持たせるために、このファイルが繰り返し使用されます。
  4. footer.php
    フッター部分を定義するファイルです。サイトのコピーライトや追加のナビゲーションリンク、ソーシャルメディアリンクなどがここに配置されます。
  5. functions.php
    テーマの機能を追加するためのPHPファイルです。たとえば、カスタムメニューの作成、ウィジェットエリアの登録、グーテンベルクブロックのサポートを追加する場合に、このファイルにコードを記述します。
  6. single.php
    個別の投稿ページ（ブログ記事など）を表示するためのテンプレートファイルです。各投稿に特有のデザインやレイアウトを反映させたい場合、このファイルをカスタマイズします。
  7. page.php
    固定ページ（静的なページ）を表示するテンプレートファイルです。たとえば、「会社概要」や「お問い合わせ」ページがここで処理されます。
  8. sidebar.php
    サイドバーウィジェットを表示するためのファイルです。ウィジェットエリアとして設定された部分が表示され、ユーザーが自由にウィジェットを追加・編集できます。
  9. archive.php
    投稿タイプごとにアーカイブページを表示するテンプレートです。カテゴリーやタグ、月別アーカイブのページがこのテンプレートを通じてレンダリングされます。

これらのテンプレートファイルを連携させることで、WordPressテーマはサイト全体の一貫したデザインと機能を提供します。

グーテンベルク対応のテーマでは、これに加えてブロックエディタ向けのスタイルや関数を用意する必要があります。

例えば、functions.phpでadd_theme_support( ‘align-wide’ )やadd_theme_support( ‘editor-styles’ )を使用して、ブロックの広い幅やエディタスタイルをサポートする設定が行われます。

グーテンベルク対応テーマの基本要素

グーテンベルクエディタ（ブロックエディタ）は、WordPress 5.0から導入された画期的な編集体験を提供するシステムです。

従来のクラシックエディタとは異なり、コンテンツを「ブロック」として扱うことで、より視覚的かつ直感的にウェブサイトのデザインやレイアウトを管理できます。

この新しいエディタに対応するために、テーマにもいくつかの基本的な要素が必要となります。ここでは、グーテンベルク対応テーマに含まれるべき基本的な要素について説明します。

1. エディタスタイル（Editor Styles）

グーテンベルクエディタを利用する際、バックエンド（管理画面）とフロントエンド（ユーザーが見る画面）のデザインが一致することが重要です。

これを実現するためには、エディタスタイルを追加する必要があります。

add_theme_support(‘editor-styles’)をテーマのfunctions.phpに追加することで、エディタ内で使用するスタイルを読み込めるようになります。

PHP
// エディタスタイルのサポートを有効化
add_theme_support('editor-styles');
add_editor_style('style-editor.css'); // エディタ用スタイルシートの読み込み

これにより、投稿編集画面がフロントエンドのデザインに近い形で表示されるため、編集者にとって使いやすくなります。

2. 幅広ブロックのサポート（Wide Alignment Support）

グーテンベルクでは、ブロックを「全幅」や「幅広」に設定することができます。

この機能をテーマでサポートするためには、以下のコードを追加します。

PHP
// 幅広アライメントのサポートを有効化
add_theme_support('align-wide');

これにより、画像や動画などのコンテンツを画面幅いっぱいに広げることができ、よりダイナミックなレイアウトが可能になります。

3. ブロック用カラーパレットの定義

エディタ内でカスタムカラーパレットを提供することで、テーマに合った色を簡単に選択できるようにすることができます。

これには、add_theme_supportでカラーパレットを定義します。

PHP
// カスタムカラーパレットの追加
add_theme_support('editor-color-palette', array(
    array(
        'name'  => __('Primary', 'theme_textdomain'),
        'slug'  => 'primary',
        'color' => '#0073aa',
    ),
    array(
        'name'  => __('Secondary', 'theme_textdomain'),
        'slug'  => 'secondary',
        'color' => '#005177',
    ),
));

これにより、グーテンベルクエディタ内で指定したテーマカラーを簡単に利用できるようになり、デザインの一貫性が保たれます。

4. フォントサイズオプションの追加

テーマに応じたフォントサイズをユーザーが簡単に選択できるようにするため、カスタムフォントサイズを追加できます。

これもadd_theme_supportで設定します。

PHP
// カスタムフォントサイズの追加
add_theme_support('editor-font-sizes', array(
    array(
        'name' => __('Small', 'theme_textdomain'),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __('Large', 'theme_textdomain'),
        'size' => 36,
        'slug' => 'large'
    ),
));

ユーザーがエディタ内で簡単にフォントサイズを変更できるようになるため、デザインの柔軟性が高まります。

5. グーテンベルクブロックのデフォルトスタイル

デフォルトのグーテンベルクブロックスタイルをテーマ内で管理することも重要です。

これにより、テーマに合わせたブロックの見た目をカスタマイズすることができます。add_theme_support(‘wp-block-styles’)を追加して、WordPressが提供する標準的なブロックスタイルをテーマに適用します。

PHP
// デフォルトブロックスタイルのサポート
add_theme_support('wp-block-styles');

これにより、グーテンベルクブロックはすぐに使える状態になり、特別なカスタマイズをしなくても美しく機能します。

6. コンテンツ幅の設定

グーテンベルクテーマでは、コンテンツの最大幅を定義することが推奨されています。

これは、画像や動画などのコンテンツがテーマに適したサイズで表示されるようにするためです。

PHP
// コンテンツの最大幅を定義
if ( ! isset( $content_width ) ) {
    $content_width = 800;
}


これにより、メディアファイルの最大幅が制限され、レイアウトが崩れにくくなります。

テーマにエディタスタイルを追加する

グーテンベルクエディタを導入するテーマにおいて、エディタスタイルの追加は重要な要素の一つです。

エディタスタイルを設定することで、WordPress管理画面内での編集画面と、実際の公開ページとのデザインの一貫性を保つことができます。

これにより、投稿者は実際のサイトに近いレイアウトでコンテンツを作成でき、視覚的に分かりやすいエクスペリエンスを提供できます。

1. エディタスタイルのサポートを有効化

まず、テーマにエディタスタイルを追加するには、functions.phpファイルに以下のコードを追加して、エディタスタイルのサポートを有効にします。

PHP
// エディタスタイルのサポートを有効化
add_theme_support('editor-styles');

このコードによって、グーテンベルクエディタにスタイルを適用する準備が整います。

2. エディタ専用のスタイルシートを読み込む

次に、エディタ内で適用するスタイルを作成し、テーマに読み込ませる必要があります。

たとえば、style-editor.cssというファイルをテーマフォルダ内に作成し、エディタスタイルとして読み込みます。

このコードにより、管理画面内のグーテンベルクエディタで表示されるスタイルが、style-editor.cssファイルに基づいて適用されます。

3. エディタスタイルのカスタマイズ

実際にエディタスタイルを適用する際には、style-editor.cssファイル内で、特定の要素に対してスタイルを設定します。

たとえば、ブロックの見出しや段落、リストなどに対して、フロントエンドでのスタイルと一致するような設定を行います。

CSS
/* 見出しスタイル */
h1, h2, h3 {
  font-family: 'Noto Sans', sans-serif;
  color: #333;
  margin-bottom: 20px;
}

/* 段落スタイル */
p {
  line-height: 1.6;
  margin-bottom: 16px;
}

これにより、グーテンベルクエディタ内のコンテンツがフロントエンドのスタイルにできるだけ近い形で表示され、ユーザーは編集作業中にも公開時のレイアウトを正確に把握できます。

4. CSS変数の活用

グーテンベルク対応テーマでは、CSS変数を利用して、カラーパレットやフォントサイズなどを柔軟に管理することができます。

たとえば、以下のようにCSS変数を用いることで、テーマ全体で一貫したデザインを管理することが可能です。

CSS
:root {
  --primary-color: #0073aa;
  --secondary-color: #222;
}

h1 {
  color: var(--primary-color);
}


CSS変数を使用すると、エディタスタイルとフロントエンドのスタイルを簡単に統一することができ、デザインの一貫性が保たれます。

グーテンベルクで使用するカスタムブロックを作成する

WordPressのグーテンベルクエディタは、ブロックベースのコンテンツ作成を可能にする強力なツールです。

テーマをグーテンベルクに対応させる際、カスタムブロックを作成することで、より柔軟で直感的なデザインやレイアウトを提供できます。

ここでは、カスタムブロックの基本的な作成手順を紹介します。

1. カスタムブロックの必要性

デフォルトのブロック（段落、画像、見出しなど）だけでは、特定のデザイン要件を満たすことが難しい場合があります。

カスタムブロックを作成することで、独自のコンテンツ表示方法を提供し、テーマのデザイン性を強化できます。

たとえば、カスタムボタンや特別なレイアウトなどを簡単に追加できるブロックを作成することで、編集者が柔軟にサイトを構築できるようになります。

2. ブロック作成の基本構造

カスタムブロックは、JavaScript（特にReactをベースにした）を使用して作成されます。

まず、WordPressのブロック作成のために必要なファイルを準備し、block.jsonという設定ファイルでブロックの基本情報を定義します。以下は、block.jsonの例です。

json
{
  "apiVersion": 2,
  "name": "mytheme/custom-block",
  "title": "Custom Block",
  "category": "design",
  "icon": "smiley",
  "description": "A custom block for displaying unique content.",
  "supports": {
    "html": false
  },
  "editorScript": "file:./index.js"
}

このファイルで、ブロックの名前やカテゴリー、アイコンなどの基本情報を指定し、どのスクリプトファイルを使用してエディタ内でブロックを動作させるかを設定します。

3. ブロックの登録

カスタムブロックをグーテンベルクに登録するためには、index.jsファイルでブロックを登録する必要があります。

以下は、シンプルなブロック登録の例です。

JS
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('mytheme/custom-block', {
  edit() {
    return (
      <div {...useBlockProps()}>
        <p>ここにカスタムブロックの編集画面が表示されます。</p>
      </div>
    );
  },
  save() {
    return (
      <div {...useBlockProps.save()}>
        <p>ここにカスタムブロックの表示内容が表示されます。</p>
      </div>
    );
  },
});

この例では、registerBlockType関数を使用してブロックを登録し、edit関数でエディタ内の表示内容を定義し、save関数で保存時のHTML出力を定義しています。

4. カスタムスタイルを適用する

カスタムブロックには、独自のスタイルを適用できます。

例えば、style.cssファイルを作成し、フロントエンドとエディタ内の両方で適用したいスタイルを記述します。

これにより、ブロックに特定のデザインを追加することが可能です。

CSS
.custom-block {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  font-size: 18px;
}

エディタ内のスタイルを設定する場合、editorStyleオプションを使用して専用のCSSを読み込むことができます。

5. カスタムブロックの活用例

カスタムブロックを使用することで、コンテンツ作成者は独自のレイアウトやデザイン要素を簡単に追加できます。

たとえば、コールトゥアクション（CTA）ボタン、グリッドレイアウト、カルーセルなど、自由な表現を提供できます。

これにより、コンテンツ管理者は柔軟にサイトをカスタマイズでき、テーマ全体のデザイン一貫性も保たれます。

6. グーテンベルクで使用するカスタムブロックを作成するまとめ

カスタムブロックの作成は、最初は少し複雑に感じるかもしれませんが、WordPressが提供する豊富なAPIとリソースを活用することで、テーマに合わせたブロックを効率的に作成することができます。

独自のカスタムブロックを作成することで、編集者の使い勝手を向上させ、ウェブサイト全体のデザインを一貫させることができるでしょう。

グーテンベルクテーマのテストとデバッグ

グーテンベルク対応テーマを作成した後は、サイト上で正しく機能するかを確認するために、徹底したテストとデバッグが必要です。

特に、テーマが複雑なカスタムブロックやスタイルをサポートしている場合、エディタ内外での表示や動作の整合性を確認することが重要です。

ここでは、グーテンベルクテーマのテストとデバッグの手順を紹介します。

1. エディタ内での表示確認

まず最初に行うべきは、グーテンベルクエディタ内での各ブロックの表示を確認することです。

エディタ内で正しく表示されない場合、コンテンツ管理者が編集作業をスムーズに行えなくなるため、UIやUXに影響を与える可能性があります。

  • エディタスタイルの確認:
    カスタムブロックやテーマ用に定義したスタイルが、エディタ内でもフロントエンドと同様に適用されているか確認します。特にフォントサイズや間隔、カラーなどが期待通りに表示されるかを注意深くチェックします。
  • ブロックの動作確認:
    各カスタムブロックが正しく動作するか、実際にエディタ上でブロックを追加し、編集できるかを確認します。ブロックの移動や削除、設定の変更が問題なく行えるかもテストしましょう。

2. フロントエンドでの表示確認

エディタ内でのテストが完了したら、次にフロントエンドでの表示を確認します。

エディタ内で正しく表示されていても、実際に公開されたページで同じように表示されないことがあるため、実際の表示状態を確認することが不可欠です。

  • レスポンシブデザインの確認:
    フロントエンドで、テーマがモバイル、タブレット、デスクトップなどの異なるデバイスサイズに対応しているか確認します。特に、グーテンベルクのカスタムブロックを作成している場合、すべてのデバイスで正しく表示されるかをテストすることが重要です。
  • パフォーマンステスト:
    カスタムブロックやウィジェットが多い場合、ページの読み込み速度が遅くなる可能性があります。ページのパフォーマンスをツール（Google PageSpeed InsightsやLighthouseなど）で測定し、最適化の余地がないかを確認します。

3. デバッグモードの有効化

WordPressの開発段階では、デバッグモードを有効にしてエラーメッセージを表示させることが非常に有効です。

wp-config.phpファイル内で以下の設定を有効にすることで、PHPエラーや警告をブラウザに表示できます。

PHP
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

これにより、すべてのエラーログがwp-content/debug.logファイルに記録され、エディタ内やフロントエンドで発生している問題を確認できます。

4. ブラウザのデベロッパーツールを使用したデバッグ

JavaScriptやCSSのエラーは、ブラウザのデベロッパーツールを使用して確認することができます。

グーテンベルクエディタはReactベースの構造を採用しているため、JavaScriptコンソールで発生しているエラーを詳細に調査し、ブロックやエディタに関わる問題をデバッグします。

  • Console:
    JavaScriptのエラーメッセージや警告が表示されるため、カスタムブロックやエディタに関する問題が発生していないか確認します。
  • Network:
    ブロックやページ内のリソース（CSSやJavaScriptファイル）の読み込み状況を確認し、失敗したリクエストがないかをチェックします。

5. テストプラグインの活用

グーテンベルクブロックの互換性をテストするために、特定のプラグインを使用することも効果的です。

たとえば、以下のプラグインは、カスタムブロックの構築やデバッグに役立ちます。

  • Query Monitor:
    WordPress内で発生するデータベースクエリやスクリプトエラーを確認できるツールで、パフォーマンスやエラーチェックに役立ちます。
  • Block Unit Test:
    このプラグインは、グーテンベルクブロックの表示や動作のテストに役立つサンプルデータを提供します。

6. ユーザーテスト

最後に、ユーザーテストを行うことで、実際のエンドユーザーがどのようにエディタを操作し、テーマを使用するかを確認できます。

特に、管理者や編集者がどのようにテーマを活用してコンテンツを作成しているかをテストすることで、UIやUXの改善点を見つけることができます。

グーテンベルクテーマのテストとデバッグのまとめ

グーテンベルク対応テーマのテストとデバッグは、テーマの安定性とユーザーエクスペリエンスを保証するために重要です。

エディタ内外での表示や動作、パフォーマンスを入念に確認し、必要に応じてデバッグツールを活用して問題を特定しましょう。

これにより、スムーズで効率的なグーテンベルク対応のテーマを提供できます。

まとめと次のステップ

これまでのステップを通じて、WordPressでのグーテンベルク対応テーマの作成プロセスを一通り学びました。

グーテンベルクエディタの登場により、よりモダンで直感的なコンテンツ作成が可能になり、テーマ開発者としてもその変化に対応することが必要不可欠です。

今回のポイントを振り返ると：

  • WordPressのテーマ構造の再確認を行い、基本的なファイル構造やテンプレート階層の重要性を理解しました。
  • グーテンベルク対応の基本要素として、特にadd_theme_support()を使用したグーテンベルクのサポート機能の追加、そしてエディタスタイルのカスタマイズについて学びました。
  • エディタスタイルの適用によって、ユーザーが編集画面でどのようにテーマのビジュアル要素を操作できるかを最適化しました。
  • カスタムブロックの作成を通じて、グーテンベルクをさらに強化し、独自のデザインや機能性を持たせるための方法を身につけました。
  • テストとデバッグを通じて、テーマの動作確認を行い、ユーザー体験を損なうことのないよう調整しました。

次のステップ

今後はさらにテーマのカスタマイズや機能拡張に進んでいくことが考えられます。以下のステップが有効です。

  1. 追加のカスタムブロック作成：特定のサイト要件に応じたカスタムブロックをさらに作成し、テーマのユニークな価値を高めます。
  2. プラグインとの統合テスト：テーマを使用する実際の環境では、多くのプラグインと連携することが多いため、主要なプラグイン（SEO、キャッシュ、翻訳等）との互換性を確認しましょう。
  3. パフォーマンス最適化：テーマの軽量化や、リソースの読み込み速度の最適化に取り組み、より快適なユーザー体験を提供できるようにします。
  4. テーマの公開・販売：もし独自のテーマが完成した場合、公式のWordPressテーマリポジトリや自分のWebサイト、マーケットプレイスで公開・販売することを検討しましょう。

以上が、グーテンベルク対応テーマの開発を成功に導くための重要なステップです。これを機に、さらにテーマ開発のスキルを向上させていきましょう。

前の記事

WordPress老人から脱却！vol:04 グーテンベルク用…