Reactを使ったWordPressテーマの作り方 - Photon Flux｜プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

WordPressテーマの基本構造の作成

WordPressの基本的なテーマ構造を作成するには、WordPressのウェブサイトにテーマのスタイル、機能、レイアウトを適用するためにWordPressが使用する一連のファイルとディレクトリを設定します。

1.サイトの動作環境で、サイトのフォルダにアクセスします。に移動します。wpコンテンツ/テーマ カタログ

2.テーマ用の新しいフォルダを作成します。フォルダ名はユニークでわかりやすいものにします。マイ・ベーシック・テーマ.

3.テーマのフォルダに、これらの基本ファイルを作成し、空白のままにします：

Reactを使用していない場合は、以下のファイルも作成する必要があります。

header.php - サイトのヘッダー部分を含みます。
フッター.php - サイトのフッター部分を含みます。
サイドバー.php - テーマがサイドバーを含んでいる場合、サイドバーセクション。

次にスタイル.css そして、ドキュメントの一番上に以下を追加してください：

/*
テーマ名：My Basic Theme
テーマURI：http://example.com/my-basic-theme/
作者：あなたの名前
作者URI: http://example.com
説明: 基本的なWordPressテーマです。
バージョン: 1.0
ライセンス: GNU General Public License v2以降
ライセンスURI: http://www.gnu.org/licenses/gpl-2.0.html
タグ: ブログ, カスタム背景
テキストドメイン: my-basic-theme
*/My-Basic-Theme

このコードスニペットは WordPressテーマのstyle.cssファイルテーマのタイトルセクションには、テーマ名、作者の詳細、バージョン、ライセンスなどの重要なメタデータが含まれています。テーマの説明やカテゴリタグなど、WordPress がテーマを識別してダッシュボードに表示するのに役立ちます。

WordPressへのReactの統合

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

これは WordPress 開発用にカスタマイズされた再利用可能なスクリプトのコレクションです。WordPress は、特に React のような最新の JavaScript ワークフローを WordPress のテーマやプラグインに統合する際に、設定やビルドプロセスを簡素化するために提供しています。ツールキットは、WordPress のエコシステムで JavaScript を使った開発を簡単にするための一般的なタスクをカプセル化しています。

テーマの調整

WordPressテーマの基本的な構造がわかったら、次はテーマを微調整してみましょう。

1.テーマディレクトリの functions.php ドキュメンテーション

<?php
関数 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')；

関数.phpファイルはReactをWordPressテーマと統合します。これはwp_enqueue_script 歌で応えるwp_enqueue_style 関数は、JavaScript とカスケーディング・スタイル・シート ( カスケーディングスタイルシート ) ファイルをテーマに追加します。

ワードプレスwp_enqueue_script この関数にはいくつかの引数があります：

ハンドルネーム 'my-react-theme-app') でスクリプトを一意に識別します。
スクリプトファイルへのパス
依存関係の配列array('wp-element')これは、スクリプトがWordPress Reactラッパーに依存していることを意味します。('wp-element').
バージョン番号('1.0.0')
プレースメント真のこのスクリプトは、ページの読み込みパフォーマンスを向上させるために、HTMLドキュメントのフッターに読み込む必要があります。

ねばなりませんwp_enqueue_style この関数は以下のパラメータを取ります：

ハンドルネーム'my-react-theme-style'ユニークIDスタイルシート
ソースを使用して、テーマのメインスタイルシート ( スタイル.cssget_stylesheet_uri() )のURLにアクセスし、テーマのスタイリングを適用してください。
ねばなりません追加アクション 要素にカスタム関数をフックします。 'my_react_theme_scripts' を特定の操作 ( 'wp_enqueue_scripts').これにより、WordPressがページをレンダリングする準備ができたときに、JavaScriptとCSSが正しく読み込まれるようになります。

このコードは、Reactアプリケーションのコンパイル済みJavaScriptファイル（/etc.にあります）が公開されることを保証します。build/index.js )とテーマのメインスタイルシートがテーマと一緒にロードされます。

/ビルドディレクトリ通常はウェブパックリアクトアプリの作成 これらのツールは、Reactアプリケーションを、Reactコードを本番環境で使用可能なストリップダウンされたJavaScriptファイルにバンドルしてコンパイルします。

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

2.次に、index.phpを更新します。ファイルの内容は：

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1001>
    <div id="app"></div>
    <?php wp_footer(); ?>
</body>
</html>

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

wordpress/scriptsによるReactの設定

1.ターミナルを開き、テーマのディレクトリに移動します：cd wp-content/themes/my-basic

cd wp-content/themes/my-basic-theme

2.新しいNode.jsプロジェクトを初期化します：

npm init -y

3.インストールワードプレス/スクリプトさらにワードプレス/エレメント::

npm install @wordpress/scripts @wordpress/element --save-dev

注目してください：ここでは通常数分かかります。

4.修正パッケージ.json ファイルに立ち上がり アンビルド 脚本：

"scripts": {
  "start": "wp-scripts start"、 "build": "wp-scripts build"、 {。
  "build": "wp-scripts build".
{ "start": "wp-scripts start".}.

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

リアクション項目の作成

1.テーマ内のReactソースファイル用にソースの新しいカタログです。

2.ソースフォルダに2つの新しいファイルを作成します：インデックス 歌で応えるApp.js.

3.以下のコードをインデックス::

import { render } from '@wordpress/element' ；
import App from './App'; import { render } from '@wordpress/element'; import App from '.
render(, document.getElementById('app'))

上記コードレンダー をとおしてワードプレス/エレメント コンポーネントインポート機能アプリ .その後アプリ コンポーネントはDOM（Document Object Model）にインストールされます。

4.次に、このコードをApp.js ドキュメンテーション

import { Component } from '@wordpress/element'；
export default class App extends Component {
  render() {
    return (
      <div> 
        <h1>こんにちは、WordPressとReactです！</h1>
        {React コンポーネントはここに配置します。｝
      </div>
);
    }
}

テーマの完成と有効化

テーマをアクティブにします：

利用するnpm スタート開発サーバーを実行します。
WordPressのコントロールパネルで "外観" > "テーマ"テーマを見つけ、"Activate "をクリックして新しいテーマを有効にしてください。
WordPressがReactコンポーネントをレンダリングできるように、Reactプロジェクトのビルドプロセスが正しいテーマディレクトリに出力されるように正しく設定されていることを確認してください。
WordPressサイトのフロントエンドにアクセスして、変更をリアルタイムで確認できます。

テーマ用Reactコンポーネントの開発

次に、コンポーネントベースのアプローチを取り、WordPressテーマの基本的なReactセットアップをヘッダーなどの特定のコンポーネントで拡張します。

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

テーマのsrcディレクトリに、ヘッダーコンポーネント用の新しいファイルを作成します。Header.jsのようなファイル名を付け、以下のコードを追加します：

import { Component } from '@wordpress/element' ；
クラス Header extends Component {
    render() {
        const { toggleTheme, darkTheme } = this.props；
        const headerStyle = { }.
            backgroundColor: darkTheme ? '#333' : '#eee'、
            color: darkTheme ? 'white' : '#333'、
            padding: '10px 20px', display: 'flex', 'Flex', 'Flex', 'Flex'.
            display: 'flex', justifyContent: 'space-base', 'space-base', 'space-base'
            
            alignItems: 'center'、
        };
        return (
            <header style="{headerStyle}">
                <div>私のWPテーマ</div>
                <button onclick="{toggleTheme}">{darkTheme ? 'ライトモード' : 'ダークモード'}。</button>
            </header>
        );
    }
}
export default Header.

このコードは"@wordpress/element "を使用して、darkTheme命題に基づいてヘッダスタイルを動的に調整するヘッダコンポーネントを定義します。プロップとして渡されたtoggleThemeメソッドを呼び出すことで、ライトテーマとダークテーマを切り替えるボタンを含みます。

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

テーマのsrcディレクトリに、フッターコンポーネント用の新しいファイルを作成します。このファイルには フッターそして以下のコードを追加します：

import { Component } from '@wordpress/element' ；
クラス Footer extends Component {
    render() {
        const { darkTheme } = this.props；
        const footerStyle = { }.
            backgroundColor: darkTheme ? '#333' : '#EEE', color: darkTheme ?
            color: darkTheme ? 'white' : '#333'、
            
            textAlign: 'center'、
        };
        return (
             style={footerStyle}>
                © {new Date().getFullYear()} 私のWPテーマ
            </footer
        );
    }
}
export default Footer.

このコードは、darkTheme命題に基づいて動的にスタイルされたフッターをレンダリングし、現在の年を表示するフッターコンポーネントを定義します。

App.jsファイルの更新

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

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

開発ビルドプロセスは変更を監視し、コードを再コンパイルします。最後のテンプレート・バージョンはこのバージョンに似ているはずです：

ReactでWordPressのデータを扱う方法

WordPressのコンテンツをReactアプリケーションに統合することで、WordPressの強力なコンテンツ管理機能とReactのダイナミックなUIデザインのギャップをシームレスに埋めることができます。これは、WordPress REST API によって実現できます。

アクセスするにはWordPress REST APIパーマリンクの設定を更新して有効にしてください。WordPress管理画面の設定 > 「パーマリンク.セレクション「投稿名」オプションまたは"普通" を選択し、変更を保存します。

というテーマでsrcディレクトリに投稿.js 新規ファイルを作成し、以下のコードを追加します：

import { Component } from '@wordpress/element' ；
クラス Posts extends Component {
    state = {
        posts: []、
        isLoading: true、
        error: null、
    }; componentDidMount() {
    componentDidMount() {
        fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
            .then(response =&gt; {
                if (!response.ok) {
                    throw new Error('Something went wrong')；
                }
                return response.json()；
            })
            .then(posts =&gt; this.setState({ posts, isLoading: false }))
            .catch(error =&gt; this.setState({ error, isLoading: false })); }.
    }
    render() {
        const { posts, isLoading, error } = this.state；
        if (error) { { (error)
            if (error) { return <div>エラー：{error.message}。</div>;)
        }
        if (isLoading) {
            リターン <div>ロード中...</div>;)
        }
        リターン(
            <div>
                {posts.map(post =&gt; (
                    <article key="{post.id}">
                        <h2 dangerouslysetinnerhtml="{{" __html: post.title.rendered }} />
                        <div dangerouslysetinnerhtml="{{" __html: post.excerpt.rendered }} />
                    </article>
                ))}
            </div>
        );
    }
}
export default Posts.

WPのデプロイメント名（つまり、WPをインストールしたフォルダ）によっては、fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts') URLが若干異なる場合があります。または、DevKinstaパネルからウェブホスト名を取得し、接尾辞/wp-json/wp/v2/postsを追加することもできます。

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

コンポーネントのライフサイクルメソッド（componentDidMount）でネットワークリクエストを開始することで、コンポーネントはWordPressウェブサイトから投稿を効率的に取得し、自身のステートに保存することができます。このアプローチは、ページやカスタム投稿タイプなどの WordPress データを React コンポーネントに動的に統合するパターンを強調しています。新しいコンポーネントを使用するには、App.js ファイルの内容を以下のコードに置き換えます：

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

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

                <footer darktheme="{darkTheme}" />
            </div>
        );
    }
}

テーマの最新最終版が閲覧できるようになりました。ヘッダーとフッターに加えて、投稿用のダイナミックコンテンツエリアが含まれています。

WordPressプロジェクトでのReact WordPressテーマの使用

ReactベースのテーマをWordPressプロジェクトに統合するには、まず@wordpress/scriptsなどのパッケージを使用してReactコードをWordPress互換フォーマットに変換する必要があります。このツールは、ReactアプリケーションをWordPressが起動できる静的アセットにコンパイルできるようにすることで、ビルドプロセスを簡素化します。

テーマのビルドは、@wordpress/scripts が提供する npm コマンドを使用することで非常に簡単に行えます。テーマディレクトリから npm run build を実行して、React コードを静的な JavaScript と CSS ファイルにコンパイルします。

これらのコンパイルされたアセットは、WordPress がテーマの一部として React コンポーネントを適切に読み込み、レンダリングできるように、テーマの適切なディレクトリに配置されます。統合が完了したら、他のテーマと同じように React WordPress テーマを有効化し、WordPress サイトにモダンでアプリのようなユーザー体験を即座にもたらすことができます。

概要

Reactの強力なUI機能を使ってテーマを構築し、WordPressに統合することで、柔軟で高度にインタラクティブな、ユーザー中心のウェブ体験の創造を解き放つことができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み