2026年11月3日

WordPressの@wordpress/elementsを使う方法

カスタマイズ

はじめに

@wordpress/elementsは、WordPressのプラグインやテーマ開発においてReact要素を効率的に管理するためのユーティリティライブラリです。この記事では、その基本的な使い方から応用までを解説します。

症状・背景

Reactを使用したWordPressプラグイン開発
コンポーネントの再利用性向上を目指す
プラグイン間でのコンポーネント共有を検討している
WordPress上で動的なUI要素を作成したい

手順・設定方法

ステップ1: @wordpress/elementsのインストール

# npmパッケージとして@wordpress/elementsをインストールする
npm install @wordpress/elements --save-dev

# グローバルにwpコマンドを使用してインストールする場合
wp package install wp/element

ステップ2: ベースとなるReactコンポーネントの作成

# WordPressプラグインディレクトリ内に新しいJavaScriptファイルを作成
touch my-plugin/src/components/my-component.js

# @wordpress/elementsをインポートして使用する
import { createElement } from '@wordpress/element';

// ベースとなるReactコンポーネントの定義
const MyComponent = () => {
    return (
        <div>
            <h1>こんにちは、WordPressとReact!</h1>
        </div>
    );
};

export default MyComponent;

ステップ3: WordPress管理画面にコンポーネントを追加

# プラグインの主要なJavaScriptファイルを開く
nano my-plugin/src/my-plugin.js

// @wordpress/elementsからcreateElementとrender機能をインポート
import { createElement, render } from '@wordpress/elements';
import MyComponent from './components/my-component';

// WordPress管理画面でコンポーネントをレンダリングする関数の定義
function renderMyPlugin() {
    const container = document.getElementById('my-plugin-container');
    if (container) {
        // コンテナにMyComponentを追加
        render( <MyComponent />, container );
    }
}

// WordPress管理画面が読み込まれたときに実行される関数を定義
function initMyPlugin() {
    window.addEventListener( 'DOMContentLoaded', renderMyPlugin );
}

initMyPlugin();

ステップ4: カスタムスタイルの追加と応用

# CSSファイルを作成してカスタムスタイルを追加
touch my-plugin/src/assets/styles.css

// styles.cssにスタイルを追加
h1 {
    color: #333;
}

// プラグインのmain.jsからCSSを読み込む
import '../assets/styles.css';

注意事項

Reactのバージョンは最新版を使用すること
WordPressとの互換性を確認するために、開発環境でテストを行うこと
セキュリティ上の観点からは、ユーザー入力データに対する適切なエスケープ処理が必要
パフォーマンスの最適化のために、必要なコンポーネントだけをインポートするようにすること

まとめ

1. @wordpress/elementsの導入: WordPressプラグイン開発にReact要素を取り入れるための基本的な手順。

2. CSSとの連携: @wordpress/elementsとカスタムCSSの組み合わせを使用して、視覚的なカスタマイズを実現します。

3. 動的UIの構築: WordPress内で動的なユーザーインターフェース要素を作成するために@wordpress/elementsを利用します。

4. 再利用性の向上: コンポーネントベースのアプローチにより、コードのリファクタリングと再利用が容易になります。