この記事では、WordPressの柔軟性とReactの優れたユーザーインターフェース（UI）を利用してテーマを開発する方法を詳しくご紹介します。WordPressとReactを統合することで、WordPressプロジェクトを強化することができます。

前提条件

これからご紹介する手順には、以下が必要になります。

WordPressテーマの基本構造を作成する

まずは、WordPressテーマの基本的な構造を作成します。これには、テーマのスタイル、機能、およびレイアウトをWordPressサイトに適用する一連のファイルとディレクトリが必要になります。

  1. DevKinsta環境でサイトのフォルダにアクセスし、wp-content/themesディレクトリに移動する。
  2. テーマ用のフォルダを作成する（フォルダ名は「my-basic-theme」など一意でわかりやすいものに）。
  3. テーマフォルダの中に以下のファイル（空のまま）を作成する。
    • style.css：テーマのヘッダー情報が含まれる主要なスタイルシートファイル
    • functions.php：テーマで使用する関数、クラス、アクション、フィルターを定義するファイル
    • index.php：メインのテンプレートファイル（すべてのテーマに必要）

    なお、Reactを使用しない場合は以下のファイルも必要になります。Reactを使用する場合、各コンポーネントは後で作成します。

    • header.php：サイトのヘッダーセクション
    • footer.php：サイトのフッターセクション
    • sidebar.php：サイドバーセクション（サイドバーがある場合）

次に、style.cssを開いて、ファイルの先頭に以下を貼り付けます。

/*
Theme Name: My Basic Theme
Theme URI: http://example.com/my-basic-theme/
Author: Your Name
Author URI: http://example.com
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-background
Text Domain: my-basic-theme
*/

このコードはWordPressテーマのstyle.cssファイルのヘッダーセクションであり、ここにはテーマ名、作者の詳細、バージョン、ライセンスなどの重要なメタデータが書かれています。WordPressがテーマを認識し管理画面に表示するのに使用され、テーマの説明や分類用のタグなどが含まれます。

ReactをWordPressに統合する

ReactをWordPressテーマに統合すると、Reactのコンポーネントベースのアーキテクチャを利用して、WordPressサイト内に動的でインタラクティブなUIを構築することができます。Reactを統合するには、@wordpress/scriptsパッケージを使用します。

このパッケージには、WordPress開発用に調整された再利用可能なスクリプトが多数含まれており、特にReactのような最新のJavaScriptワークフローをWordPressテーマやプラグインに統合する際、設定やビルドプロセスを簡素化するのに使用できます。

これにより一般的なタスクをラップし、WordPressエコシステムでのJavaScript開発を簡素化することができます。

テーマの調整

WordPressテーマの基本的な構造を作ったら、テーマに調整を加えていきます。

  1. テーマのディレクトリ内のfunctions.phpファイルに以下のコードを貼り付ける。 
    <?php
function my_react_theme_scripts() {
    wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true);
    wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'my_react_theme_scripts');

    このfunctions.phpファイルが、ReactをWordPressテーマに統合し、wp_enqueue_script、wp_enqueue_style関数を使用して、JavaScriptとCSS（カスケーディングスタイルシート）ファイルをテーマに追加します。

    wp_enqueue_script関数は、以下の引数を取ります。

    • スクリプトを一意に識別するハンドル名：'my-react-theme-app'
    • スクリプトファイルへのパス
    • スクリプトが WordPressのReact用ラッパー('wp-element')に依存していることを示す依存関係の配列：array('wp-element')
    • バージョン番号：('1.0.0')
    • 位置：true（ページの読み込みパフォーマンスを向上させるため、スクリプトをHTMLドキュメントのフッターに読み込むことを指定）

    wp_enqueue_style関数は、以下の引数を取ります。

    • ハンドル名：'my-react-theme-style'（スタイルシートを一意に識別）
    • ソース：get_stylesheet_uri()（テーマのメインスタイルシートstyle.cssへのURLを返し、テーマのスタイルが適用されるようにする）
    • add_action要素（カスタム関数'my_react_theme_scripts'を特定のアクション（'wp_enqueue_scripts'）にフック。これにより、WordPressがページのレンダリングを準備する際にJavaScriptとCSSが正しく読み込まれるようになる）

    <your-theme-directory>/build/index.jsにあるReactアプリのコンパイル済みJavaScriptファイルと、テーマのメインスタイルシートがテーマと一緒に読み込まれるようにする。

    /buildディレクトリは通常、create-react-appやwebpackのようなツールを使用してReactアプリをコンパイルしたもので、Reactコードを本番環境で使用可能で圧縮されたJavaScriptファイルにまとめます。

    この設定は、Reactの機能をWordPressテーマに統合し、WordPressサイト内で動的でアプリのようなユーザー体験を実現するために必要不可欠になります。

  2. index.phpファイルの内容を更新する。 
    <!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <div id="app"></div>
    <?php wp_footer(); ?>
</body>
</html>

    index.phpファイルのコードでは、WordPressが必要なヘッダー（wp_head）とフッター（wp_footer）を挿入するためのフックや、ReactアプリケーションがマウントされるID（app）を持つdivなど、WordPressテーマの基本的なHTML構造が定義されています。

wordpress/scriptsでReactをセットアップ

  1. ターミナルを開き、テーマのディレクトリに移動する。 
    cd wp-content/themes/my-basic-theme
  2. Node.jsプロジェクトを初期化する。 
    npm init -y
  3. @wordpress/scriptsと@wordpress/elementをインストールする。 
    npm install @wordpress/scripts @wordpress/element --save-dev

    このステップには、数分かかることが予想されます。

  4. package.jsonファイルを修正し、startとbuildスクリプトを含める。 
    "scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
},

    '@wordpress/scripts'は、開発用サーバーをホットリロードで起動するために使用し（start）、React アプリケーションを本番用の静的アセットにコンパイルするのに使用します（build）。

Reactプロジェクトの作成

  1. テーマ内にReactソースファイル用のディレクトリを「src」という名前で作成する。
  2. srcフォルダの中に、index.jsとApp.jsの2つのファイルを作成する。
  3. index.jsに以下のコードを記述する。 
    import { render } from '@wordpress/element';
import App from './App';
render(, document.getElementById('app'))

    上のコードは、@wordpress/elementとAppコンポーネントからrender関数をインポートし、AppコンポーネントをDOM（Document Object Model）にマウントします。

  4. 以下のコードをApp.jsファイルに貼り付ける。 
    import { Component } from '@wordpress/element';
export default class App extends Component {
  render() {
    return (
      <div> 
        <h1>Hello, WordPress and React!</h1>
        {/* Reactコンポーネントをここに挿入 */}
      </div>
);
    }
}

テーマの最終確認と有効化

  1. npm startで開発サーバーを起動する。
  2. WordPress管理画面で「外観」＞「テーマ」に移動し、作成したテーマを見つけて「有効化」をクリックする。
  3. Reactプロジェクトのビルドプロセスが正しいテーマディレクトリに出力されるように設定されていることを確認し、WordPressがReactコンポーネントをレンダリングできるようにする。
  4. WordPressサイトのフロントエンドにアクセスし、本番環境の変更を確認する。
作成したReactベースのWordPressテーマがデフォルトのメッセージとともに表示される
作成したReactベースのWordPressテーマがデフォルトのメッセージとともに表示される

テーマのReactコンポーネントを開発する

続いてはコンポーネントベースのアプローチに従い、ヘッダーのような特定のコンポーネントで、WordPressテーマの基本的なReactセットアップを拡張していきます。

ヘッダーコンポーネントの作成

テーマのsrcディレクトリに、ヘッダーコンポーネント用のファイルを作成します。「Header.js」のようなわかりやすい名前を付けて、以下のコードを貼り付けます。

import { Component } from '@wordpress/element';
class Header extends Component {
    render() {
        const { toggleTheme, darkTheme } = this.props;
        const headerStyle = {
            backgroundColor: darkTheme ? '#333' : '#EEE',
            color: darkTheme ? 'white' : '#333',
            padding: '10px 20px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
        };
        return (
            <header style={headerStyle}>
                <div>My WP Theme</div>
                <button onClick={toggleTheme}>{darkTheme ? 'ライトモード' : 'ダークモード'}</button>
            </header>
        );
    }
}
export default Header;

このコードは、'@wordpress/element'を使用してヘッダーコンポーネントを定義し、darkTheme propに基づいて動的にヘッダーのスタイルを設定します。また、propsとして渡されたtoggleTheme関数を呼び出し、明るいテーマ（ライトモード）と暗いテーマ（ダークモード）を切り替えるボタンもあります。

フッターコンポーネントの作成

テーマのsrcディレクトリにフッターコンポーネント用のファイルを作成します。このファイルに「Footer.js」のような名前を付け、以下のコードを貼り付けます。

import { Component } from '@wordpress/element';
class Footer extends Component {
    render() {
        const { darkTheme } = this.props;
        const footerStyle = {
            backgroundColor: darkTheme ? '#333' : '#EEE',
            color: darkTheme ? 'white' : '#333',
            padding: '20px',
            textAlign: 'center',
        };
        return (
            <footer> style={footerStyle}>
                © {new Date().getFullYear()} My WP Theme
            </footer>
        );
    }
}
export default Footer;

このコードでdarkTheme propsに基づいて動的なスタイルでフッターをレンダリングし、フッターコンポーネントに現在の年が表示されます。

App.jsファイルの更新

ヘッダーとフッターを使用するには、App.jsファイルの内容を以下のコードに置き換えます。

import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
export default class App extends Component {
    state = {
        darkTheme: true,
    };
    toggleTheme = () => {
        this.setState(prevState => ({
            darkTheme: !prevState.darkTheme,
        }));
    };
    render() {
        const { darkTheme } = this.state;
        return (
            <div>
                <Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
                <main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>               
                </main>
                <Footer darkTheme={darkTheme} />
            </div>
        );
    }
}

変更を監視してコードを再コンパイルする開発ビルドプロセスがまだ有効であるため、テンプレートの最終バージョンは以下のようになります。

ヘッダーとフッターを含むReactベースのWordPressテーマ
ヘッダーとフッターのあるReactベースのWordPressテーマ

ReactでWordPressのデータを扱う

Reactアプリケーション内でWordPressサイトのコンテンツを統合することで、WordPressの堅牢なコンテンツ管理機能とReactの動的なUIデザインの間のシームレスな橋渡しが可能になります。これには、WordPress REST APIを使用します。

WordPress REST APIにアクセスするには、パーマリンク設定を変更する必要があります。WordPress管理画面で「設定」＞「パーマリンク設定」に移動して、「投稿名」または「基本」以外を選択し、変更を保存します。

テーマのsrcディレクトリに「Posts.js」という名前のファイルを作成し、以下のコードを貼り付けます。

import { Component } from '@wordpress/element';
class Posts extends Component {
    state = {
        posts: [],
        isLoading: true,
        error: null,
    };
    componentDidMount() {
        fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
            .then(response => {
                if (!response.ok) {
                    throw new Error('問題が発生しました');
                }
                return response.json();
            })
            .then(posts => this.setState({ posts, isLoading: false }))
            .catch(error => this.setState({ error, isLoading: false }));
    }
    render() {
        const { posts, isLoading, error } = this.state;
        if (error) {
            return <div>エラー：{error.message}</div>;
        }
        if (isLoading) {
            return <div>読み込み中…</div>;
        }
        return (
            <div>
                {posts.map(post => (
                    <article key={post.id}>
                        <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
                        <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
                    </article>
                ))}
            </div>
        );
    }
}
export default Posts;

URLfetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')は、WordPressのデプロイメント名、つまりWordPressをインストールしたフォルダによって若干異なります。または、DevKinstaからサイトのホスト名を取得して、接尾辞/wp-json/wp/v2/postsを追加する手もあります。

Postsコンポーネントはこの統合の典型例で、WordPress REST APIを使ってWordPress データ（特に投稿）を取得し、管理するプロセスを示しています。

コンポーネントのライフサイクルメソッドであるcomponentDidMount内でネットワークリクエストを開始することで、WordPressサイトから投稿を効率的に取得し、そのstateに保存します。この方法は、固定ページやカスタム投稿タイプなどのWordPressデータをReactコンポーネントに動的に組み込むひとつパターンとして有用です。

コンポーネントを利用するには、App.jsファイルの内容を以下のコードに置き換えます。

import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
import Posts from './Posts'; // Postsコンポーネントをインポート

export default class App extends Component {
    state = {
        darkTheme: true,
    };
    toggleTheme = () => {
        this.setState(prevState => ({
            darkTheme: !prevState.darkTheme,
        }));
    };
    render() {
        const { darkTheme } = this.state;
        return (
            <div>
                <Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
                <main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
                    <Posts /> {/* Postsコンポーネントのレンダリング */}
                </main>

                <Footer darkTheme={darkTheme} />
            </div>
        );
    }
}

これでテーマの最終確認を行うことができます。テーマはヘッダーとフッターに加え、投稿を表示する動的コンテンツエリアで構成されます。

トップページに投稿を含む最終的なReactベースのWordPressテーマが表示される
トップページに投稿を表示したReactベースのWordPressテーマ

ReactベースのWordPressテーマを使用する

作成したReactベースのテーマをWordPressサイトで使用するには、@wordpress/scriptsのようなパッケージを利用して、まずReactコードをWordPressで使用できる形式に変換します。これによりビルドプロセスが容易になり、ReactアプリケーションをWordPressがエンキューできる静的アセットにコンパイルできます。

テーマのビルドは、@wordpress/scripts提供のnpmコマンドで簡単に実行可能です。テーマディレクトリでnpm run buildを実行すると、Reactコードが静的なJavaScriptとCSSファイルにコンパイルされます。

次に、コンパイルしたアセットをテーマ内の適切なディレクトリに配置し、WordPressがテーマの一部としてReactコンポーネントを適切に読み込んでレンダリングできるようにします。一度統合されると通常のテーマのように有効化できるようになり、すぐにWordPressサイトでアプリのような最新のユーザー体験を提供することができます。

まとめ

Reactの強力なUI機能を活かしてWordPressテーマを構築することで、柔軟で高度にインタラクティブな、ユーザー中心のウェブ体験を構築する可能性が広がります。

ReactベースのWordPressテーマを本番サイトで使用する準備が整ったら、安全なインフラストラクチャ、エッジキャッシュ、および速度とパフォーマンスを改善するための機能が多数付帯する、KinstaのWordPress専用マネージドホスティングをご利用ください。

Reactを使用したWordPressテーマの構築についてご質問がありましたら、以下のコメント欄でお知らせください。

 

Jeremy Holcombe Kinsta

Kinstaのコンテンツ＆マーケティングエディター、WordPress開発者、コンテンツライター。WordPress以外の趣味は、ビーチでのんびりすること、ゴルフ、映画。高身長が特徴。