メニュー追加

ヘッダーメニューのWordPressへの組み込みについて、もう少し簡単な方法をご希望なのですね。承知いたしました。

確かに、ReactのビルドやWordPressのテーマファイルを直接編集する作業は、初めての方には少し難しく感じるかもしれません。ここでは、WordPressのプラグインを利用して、コードの貼り付けだけで実現できる方法をご紹介します。

WordPressへの組み込み（素人向け簡単ガイド）

この方法では、ファイルのアップロードやFTPソフトの操作は最小限に抑え、WordPressの管理画面からほとんどの作業を行います。

ステップ1: Reactコードの「ビルド」を行う

まず、あなたのReactコードをWordPressで動く形に「変換（ビルド）」する作業が必要です。これは一度だけ行えば大丈夫です。

  1. Node.jsとnpmのインストール: お使いのPCにNode.jsとnpm（Node Package Manager）がインストールされていることを確認してください。これらはReact開発に必要なツールです。もしインストールされていなければ、Node.js公式サイトからインストーラーをダウンロードしてインストールしてください。
  2. 新しいReactプロジェクトを作成: デスクトップなど、任意の場所に新しいフォルダを作り、そのフォルダ内でターミナル（WindowsならコマンドプロンプトやPowerShell、Macならターミナル）を開き、以下のコマンドを実行します。

    Bashnpx
    create-react-app my-wordpress-header-menu cd my-wordpress-header-menu

    これで my-wordpress-header-menu というフォルダが作成され、その中にReactプロジェクトの基本ファイルが生成されます。

  3. Tailwind CSSのインストールと設定: 作成したReactプロジェクトのフォルダ内で、続けて以下のコマンドを実行します。

    Bashnpm
    install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

    次に、my-wordpress-header-menu フォルダ内の tailwind.config.js ファイルを開き、content の部分を以下のように編集して保存します。

    JavaScript//
    tailwind.config.js module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", // この行が重要です ], theme: { extend: { fontFamily: { inter: ['Inter', 'sans-serif'], // Interフォントを追加 }, }, }, plugins: [], }

    さらに、my-wordpress-header-menu/src フォルダにある index.css ファイル（または新しく作成）を開き、以下の内容を貼り付けて保存します。これによりTailwind CSSが有効になります。CSS/* src/index.css */ @tailwind base; @tailwind components; @tailwind utilities; /* Optional: Google FontsからInterフォントを読み込む */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  4. Reactコードの貼り付けと設定:
    • my-wordpress-header-menu/src フォルダにある App.js ファイルの内容を、Canvasに表示されているヘッダーメニューのReactコードに置き換えてください。
    • my-wordpress-header-menu/src フォルダにある index.js ファイルの内容が以下のようになっていることを確認してください。もし異なる場合は、以下の内容に置き換えて保存します。特に <div id="react-header-root"></div> というHTML要素にReactコンポーネントを配置するよう設定しています。JavaScript// src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // Tailwind CSSの読み込み import App from './App'; // ヘッダーコンポーネントをインポート const root = ReactDOM.createRoot(document.getElementById('react-header-root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );
  5. Reactコードをビルド（変換）: 再びターミナルに戻り、Reactプロジェクトのフォルダ（my-wordpress-header-menu）内で以下のコマンドを実行します。Bashnpm run build このコマンドを実行すると、my-wordpress-header-menu フォルダ内に新しく build というフォルダが作成されます。この build フォルダの中に、WordPressに貼り付けるための最適化されたJavaScriptファイル（例: static/js/main.xxxx.js）とCSSファイル（例: static/css/main.xxxx.css）が生成されます。 重要: ファイル名の一部が main.xxxx.js のようにランダムな文字列（ハッシュ値）になっている場合がありますが、それが正しいファイルです。

ステップ2: WordPress管理画面から組み込む

ここからがWordPressでの作業です。ファイルを直接編集する代わりに、プラグインを使います。

  1. プラグイン「Custom CSS & JS」のインストール:
    • WordPressの管理画面にログインします。
    • 左側のメニューから「プラグイン」→「新規追加」をクリックします。
    • 検索ボックスに「Custom CSS & JS」と入力し、検索します。
    • 「Custom CSS & JS」というプラグインを見つけたら、「今すぐインストール」をクリックし、その後「有効化」をクリックします。
  2. HTMLのルート要素を追加:
    • ヘッダーメニューを表示したいWordPressのページや投稿を開きます。
    • 「ブロックエディター」（Gutenbergエディター）を使っている場合、「カスタムHTML」ブロックを追加します。
    • そのブロックに以下のHTMLコードを貼り付けます。HTML<div id="react-header-root"></div>
    • この div が、Reactヘッダーメニューが表示される場所になります。これを一番上（ヘッダー部分）に配置してください。
    • もしテーマの header.php を編集できる場合: 「外観」→「テーマファイルエディター」から header.php を開き、<body> タグの直後など、ヘッダーとして表示したい位置に上記の <div id="react-header-root"></div> を直接貼り付けることもできます。こちらの方がより確実ですが、テーマの編集に慣れていない場合は「カスタムHTML」ブロックを試してみてください。
  3. ビルドされたCSSを貼り付ける:
    • WordPressの管理画面の左側メニューに新しく追加された「Custom CSS & JS」をクリックします。
    • 「新しいコードを追加」→「新しいCSSコード」を選択します。
    • タイトルを「React Header CSS」など、分かりやすいものにします。
    • ステップ1でビルドした my-wordpress-header-menu/build/static/css/main.xxxx.css ファイルをPCのエディタ（メモ帳やVisual Studio Codeなど）で開きます。
    • ファイル内のすべての内容をコピーし、WordPressの「Custom CSS & JS」の編集画面の大きなテキストエリアに貼り付けます。
    • 設定で「Frontend」と「In Header」が選択されていることを確認し、右上の「公開」をクリックします。
  4. ビルドされたJavaScriptを貼り付ける:
    • 再び「Custom CSS & JS」に戻り、「新しいコードを追加」→「新しいJavaScriptコード」を選択します。
    • タイトルを「React Header JS」など、分かりやすいものにします。
    • ステップ1でビルドした my-wordpress-header-menu/build/static/js/main.xxxx.js ファイルをPCのエディタで開きます。
    • ファイル内のすべての内容をコピーし、WordPressの「Custom CSS & JS」の編集画面の大きなテキストエリアに貼り付けます。
    • 設定で「Frontend」と「In Footer」が選択されていることを確認し、右上の「公開」をクリックします。In Footer にすることで、HTML要素が読み込まれてからJavaScriptが実行されるため、エラーが起きにくくなります。

これで、WordPressのサイトにReactヘッダーメニューが表示されるはずです。 もし問題が発生した場合は、ブラウザの開発者ツール（F12キーで開けます）の「Console」タブにエラーメッセージが表示されていないか確認してみてください。

コメント

タイトルとURLをコピーしました