WordPressの記事に「手軽に」Reactアプリを埋め込む方法

はじめに

  • WordPressの記事に、ちょっとしたアプリを載せたいときReactやVueを使いたい
  • やり方はいろいろあるが、ごちゃごちゃ触らず、テーマ変更にも対応できるように、とにかく手軽にする方法を調査した
    • 本記事の例では、ReactとMUIを使える方法をまとめた
    • WordPress推奨の方法ではないので注意

方針

  • できるだけWordpressの管理画面からの操作で完結させる
  • できるだけ元の環境をいじらない
    • できるだけプラグインを入れない（入れても用意された機能だけ使う）
    • できるだけテーマのfunction.phpを触らない
  • できるだけ開発・デバッグ・ソース管理をしやすくしたい

環境

  • WordPress 6.1.1
    （ブロックエディタ（Gutenberg）を想定）

手順

WordPress上に構築

  1. 記事の中に、カスタムHTMLのブロックを挿入
  2. カスタムHTMLに下記のコードを張り付け（公式サイトのExampleをほぼ張り付けただけ） 
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

<div id="root"></div>

<script type="text/babel">
    class App extends React.Component{
        render(){
          const { 
             Box,
             TextField,
             Button,             
             Divider,            
             CircularProgress   
          } = MaterialUI;
          return(
            <div>
               <TextField
                  required
                  id="outlined-required"
                  label="Required"
                  defaultValue="Hello World"
               />

               <Button variant="contained" color="primary">Hello World</Button>
               <Divider />
               <CircularProgress />
             </div>
          )
        }
      }
      ReactDOM.createRoot(document.getElementById('root')).render(<App />)
</script>
  • これだけでとりあえず動く
  • function componentや、Vueでも同じように動くと思うが未確認

↓実際に上記手順通りにカスタムHTMLを作成したらこうなる

開発・デバッグ

  1. あるディレクトリにindex.htmlとapp.jsを作成する
  2. index.html（app.jsへのパスは環境に合わせて修正する必要あり） 
    <html><body>
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    
    <script type="text/babel" src="./app.js"></script>
    
    <div id="root"></div>

</body></html>
  3. app.js 
    class App extends React.Component{
        render(){
          const { 
             Box,
             TextField,
             Button,             
             Divider,            
             CircularProgress   
          } = MaterialUI;
          return(
            <div>
               <TextField
                  required
                  id="outlined-required"
                  label="Required"
                  defaultValue="Hello World"
               />

               <Button variant="contained" color="primary">Hello World</Button>
               <Divider />
               <CircularProgress />
             </div>
          )
        }
      }
      ReactDOM.createRoot(document.getElementById('root')).render(<App
  • これで、ブラウザでindex.htmlを開いてDeveloperツール等でデバッグできる
    • エディタが扱いやすい+ソース管理しやすいと思いJavascriptのコードをapp.jsに分けたらどうかと思った
  • 開発・デバッグが終わったらWordpress記事の<script type="text/babel">…</script>の間にapp.jsをコピペする

手順React,Wordpress

Posted by ttnt