배경.

몇 주 전에, 나는 기존의 Wordpress 사이트에 '쇼핑 구역' 을 만들기 위해 새로운 페이지를 만들어야 한다는 요구를 받았다.
Link to page

나는Wordpress 템플릿 시스템에서 작업 효율이 높지 않다(내가 좋아하는 것이 아니다!)나는 지금 React frontend에 대해 튼튼한 배경을 가지고 있다.나는 이러한 특수한 수요를 충족시키기 위해 기존의Wordpress 설치에 어떻게React 응용 프로그램을 통합하는지 보고 싶다.
본고는Wordpress/React 옵션을 연구한 다음에 저는 단계적으로Wordpress에서React 응용 프로그램을 어떻게 실현하는지 보여 드리겠습니다.마지막으로 나는 모두에게 실제 해결 방안의 문제를 열거했다.

워드프레스로 반응?

React은 유행하는 자바스크립트 라이브러리로 브라우저에서 전방 응용 프로그램을 구축하는 데 사용된다.React 주변에는 또 하나의 방대한 해결 방안 생태계(Create React App, Next Js, Gatsby...)이것은 신뢰할 수 있는 전방 응용 프로그램에서 라이브러리를 사용하는 데 도움이 된다.
Wordpress은 매우 유명한 CMS(콘텐츠 관리 시스템)로 많은 사이트에서 여전히 그것을 사용하고 있다.내용 편집기에 있어서, 그것은 매우 사용하기 쉬우며, 많은 플러그인을 덧붙인다.
Wordpress와 React를 혼합해서 사용할 수 있는 여러 가지 방법이 있지만, 두 가지 예를 보여 드리겠습니다.

Wordpress REST API를 사용하여 javascript 프런트엔드 구축

Wordpress는 아름다운 REST API을 덧붙였기 때문에 이 API를 사용하는 클래식한 페이지 응용 프로그램(예를 들어CreateReactApp)을 구축할 수 있다.Wordpress는 여전히 글을 쓰는 데 사용되지만, 생성된 사이트는 서로 다른 전방 응용 프로그램에 의해 구동된다.헤드리스 CMS 개념입니다.이 문서는 이 목표를 실현하는 중요한 지침이다.
How to Create a Modern Web App Using WordPress and React
Gatsby은 React를 사용하는 정적 사이트 생성기로서 여기에는 전용 해결 방안도 있다.
Sourcing from WordPress
이미 존재하는 사이트에 대해 말하자면, 이 해결 방안은 급진적인 해결 방안이다. 왜냐하면 당신은 모든 기존 내용을 처리하고 이를 새로운 전단 해결 방안으로 옮겨야 하기 때문이다.좋아, 하지만 내 프로젝트에는 너무 커.

Wordpress에 React 애플리케이션 통합

React는 단순한 자바스크립트 라이브러리입니다.전체 사이트를 구축할 필요가 없고 라이브러리를 기존 페이지의 일부분에 불러오기만 하면 된다.documentation of ReactJs:

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Perhaps you only want to add some “sprinkles of interactivity” to an existing page. React components are a great way to do that.

The majority of websites aren’t, and don’t need to be, single-page apps. With a few lines of code and no build tooling, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

Wordpress 사이트에 React 프로그램을 추가하는 방법에 대해 다루는 몇 편의 글이 있습니다.이는 관리 팀에서
Ghost Inspector - Automated Website Testing and Monitoring
내가 이렇게 하는 것은 사이트 전체를 재건하는 것보다 쉽고, 나로 하여금 마음대로 일을 할 수 있도록 충분한 에너지를 주었기 때문이다.

Wordpress에 React 애플리케이션 통합

최종 사용자가 볼 수 있는 페이지를 구축하고, Wordpress 사이트의 특정 유형의 글을 격자 레이아웃으로 표시하는 React 프로그램을 불러오고 싶습니다.이 절에서는 이 페이지를 만드는 것을 안내합니다.

대국

새 wordpress 플러그인을 만들 것입니다.만약 내가 페이지나 글에서 특정한 짧은 코드를 사용한다면, 플러그인은 React 프로그램을 표시할 것이다.React 응용 프로그램은 Wordpress의 REST API를 사용하여 기사를 표시합니다.

전용 플러그인 만들기

격리 개발을 위해 전용 플러그인을 사용합니다.테마 functions.php에서도 작업을 할 수 있지만, 이 프로젝트를 위해 특정한 폴더를 설정하는 것이 더 깨끗하다고 생각합니다.
wordpress 프로그램의 plugins 폴더에 my-react-app이라는 새 폴더를 만듭니다.폴더에 php 파일 my-react-app.php을 만듭니다.my-react-app에서 새로운 Create React 애플리케이션 프로젝트를 시작합니다.

npx create-react-app frontend

클래스 Create React App을 사용하여 폴더 frontend에 새 React 응용 프로그램을 만듭니다.
php 파일에서 다음을 배치할 수 있습니다.

<?php
/**
 * Plugin Name: my-react-app
 * Plugin URI: a url
 * Description: A react application
 * Version: 0.1
 * Text Domain: my-react-app
 * Author: Julien Bras
 * Author URI: https://sidoine.org
 */

// First register resources with init 
function my_react_app_init() {
    $path = "/frontend/static";
    if(getenv('WP_ENV')=="development") {
        $path = "/frontend/build/static";
    }
    wp_register_script("my_react_app_js", plugins_url($path."/js/main.js", __FILE__), array(), "1.0", false);
    wp_register_style("my_react_app_css", plugins_url($path."/css/main.css", __FILE__), array(), "1.0", "all");
}

add_action( 'init', 'my_react_app_init' );

// Function for the short code that call React app
function my_react_app() {
    wp_enqueue_script("my_react_app_js", '1.0', true);
    wp_enqueue_style("my_react_app_css");
    return "<div id=\"my_react_app\"></div>";
}

add_shortcode('my_react_app', 'my_react_app');

다음 구조로 끝납니다.

plugins
└── my-react-app
    ├── frontend
        │     ├── README.md
        │     ├── node_modules
        │     ├── package.json
        │     ├── .gitignore
        │     ├── public
        │     └── src
    └── my-react-app.php

좋아요!기본 설정이 실행 중입니다!테스트해 봅시다!

React 애플리케이션 개발

frontend 폴더로 이동합니다.다음 명령을 실행하여 개발 서버를 시작합니다.

yarn && yarn start

필요한 경우 yarn을 npm으로 교체하십시오!브라우저가 시작되고 다음과 같이 표시됩니다.
frontend/src의 모든 파일을 편집하고 응용 프로그램을 실제로 개발할 수 있습니다.

React 애플리케이션 구축

Wordpress에서 프로그램을 사용하기 위해서는 프로그램을 구축해야 합니다.Wordpress에서 응용 프로그램을 직접 개발하는 해결 방안을 아직 찾지 못했습니다.Wordpress의 출력을 구축하기 위해서 craco을 사용하는 것을 권장합니다. 이것은 예측 가능한 이름을 가진 단일 js 파일을 만드는 데 도움을 줄 수 있는 도구입니다.
먼저 craco을 설치합니다.

yarn add @craco/craco

그런 다음 craco.config.js 폴더에 frontend을 만듭니다.

// craco.config.js
module.exports = {
  webpack: {
    configure: {
      output: {
        filename: "static/js/[name].js",
      },
      optimization: {
        runtimeChunk: false,
        splitChunks: {
          chunks(chunk) {
            return false;
          },
        },
      },
    },
  },
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.plugins[5].options.filename = "static/css/[name].css";
          return webpackConfig;
        },
      },
      options: {},
    },
  ],
};

그런 다음 package.json 명령의 build 파일을 편집합니다.

"scripts": {
    ...
    "build": "craco build",
    ...
  },

reportWebVitals();에서 frontend/src/index.js에 대한 주석을 달았다. (js 파일을 막았으니 가져오는 것을 삭제하는 것을 잊지 마세요!)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

frontend/src/index.js에서 사용된 div id 수정:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('my_react_app')
);

frontend/public/index.html에서 사용된 div id 수정:

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="my_react_app"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>

id를 수정하는 것은 매우 중요합니다. 기본적으로 root은Wordpress 페이지에 포함될 내용에 대해 너무 통용되기 때문입니다.homepage에 package.json 값을 추가하면 이미지에 도움이 됩니다.

"version": "0.1.0",
"private": true,
"homepage": "/app/plugins/my-react-app/frontend/build/",
"dependencies": ...

그리고 구축 테스트!

yarn build

build에 frontend 폴더를 생성합니다(script.js 파일이 있음).

yarn run v1.22.4
$ craco build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.86 KB  build/static/js/main.js
  518 B     build/static/css/main.css

The project was built assuming it is hosted at /app/plugins/my-react-app/frontend/build/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

✨  Done in 6.46s.

Wordpress에서 테스트

Wordpress에 로그인하여 my-react-app 플러그인을 설치하고 활성화합니다.그런 다음 페이지 또는 기사에서 다음 짧은 코드 [my_react_app]을 사용합니다.

이 페이지를 게시하면 다음이 표시됩니다.

이것은 승리이다🏆 !

RESTAPI 사용

React 응용 프로그램에서는 REST API를 쉽게 사용할 수 있습니다.내가 실제로 사용하는 것은 API 상수로 정확한 단점을 가리킨다.

export const API = process.env.REACT_APP_API || `${window.origin}/wp-json`;

따라서 만약에 같은 호스트에서 wordpress(개발 모델)를 사용하고 싶지 않다면 REACT_APP_API 파일에서 환경 변수 .env을 정의할 수 있다.
그리고 React 구성 요소에서 useEffect을 사용하여 items 상태를 채울 수 있습니다.

useEffect(() => {
    let category = process.env.REACT_APP_CATEGORY;
    const params = new URLSearchParams({
      categories: category,
      _fields: "id,title,meta,content,featured_media,fimg_url,tags",
      per_page: 100,
    });
    fetch(`${API}/wp/v2/posts?${params}`)
      .then((res) => res.json())
      .then(
        (result) => {
          setItems(result);
        },
        (error) => {
          setError(error);
        }
      );
  });

기암과 천막을 띤 추가 거리

이 특정한 응용 프로그램에서 저는 Bedrock에 의존합니다. 이것은 아주 좋은 해결 방안입니다. Wordpress 응용 프로그램에서 위탁 관리 플러그인을 개발할 수 있고 Trellis에서 이것은 또 다른 좋은 해결 방안입니다. 서버 설정과 해결 방안의 배치를 추진할 수 있습니다(Roots 감사합니다! 언젠가 Sage를 테스트할 수 있기를 바랍니다!)
이 프로젝트에서 나를 돕기 위해서 나는 다음과 같은 일을 했다

mu 플러그인 폴더 사용하기

나는 plugins에 플러그인을 배치하지 않고 mu-plugins 폴더를 사용하기 때문에 플러그인은 항상 불러온다고 확신한다.플러그인을 활성화할 필요가 없습니다.

향상된 배포 프로세스

나는 구축 버전만 배치하고 src 폴더는 배치하고 싶지 않다.따라서 새 버전을 배치할 때마다 build 폴더만 보내는 프로그램을 구축하고 싶습니다.trellis/group_vars/SERVER/main.yml에 추가된 내용:

deploy_build_before:
  - '{{ playbook_dir }}/deploy-hooks/build-before-my-react-app.yml'

이것은 구축하기 전에 스크립트를 추가합니다.
이제 build-before-my-react-app.yml 폴더에 trellis/deploy-hooks 파일을 만듭니다.

- name: Install npm dependencies
  command: yarn
  delegate_to: localhost
  args:
    chdir: "{{ project_local_path }}/web/app/mu-plugins/my-react-app/frontend"

- name: Compile assets for production
  command: yarn build
  delegate_to: localhost
  args:
    chdir: "{{ project_local_path }}/web/app/mu-plugins/my-react-app/frontend"

- name: Copy production assets
  synchronize:
    src: "{{ project_local_path }}/web/app/mu-plugins/my-react-app/frontend/build/"
    dest: "{{ deploy_helper.new_release_path }}/web/app/mu-plugins/my-react-app/frontend"
    group: no
    owner: no
    delete: yes
    rsync_opts: --chmod=Du=rwx,--chmod=Dg=rx,--chmod=Do=rx,--chmod=Fu=rw,--chmod=Fg=r,--chmod=Fo=r

감사합니다Sage 9 build-before example😉

결론과 우려

React 애플리케이션이기 때문에 몇 가지 우려 사항이 있습니다.

검색엔진 최적화: 구글이 내 페이지를 잘 이해하지 못할 수도 있어...

에서 CSS를 정확하게 관리하는 것은 매우 까다롭다. Wordpress 페이지에 일부 CSS 클래스를 주입하기 때문이다(yarn start을 사용하면 개발 모델에서 이런 클래스를 볼 수 없다)

이 프로젝트가 실현된 것은 이러한 페이지에 사용되는 클래식 플러그인(WPBakery)에 기존의 필터와 정렬 기능이 없기 때문이다.약 options은 선택할 수 있지만 맞춤형 설정은 제한되어 있습니다.고전적인 기존 웹 응용 프로그램에 새로운 도구를 추가하는 것은 매우 재미있다.해봐!