React와 WordPress로 웹 앱용 스킨을 만드는 방법

따라서 웹 엔지니어로 교육을 받았으며 이제 고객을 위한 초고속 온라인 상점을 구축하려고 합니다. 제품 목록은 즉시 나타나야 하며 검색도 1초 이상 낭비하지 않아야 합니다. 그것이 백일몽의 내용입니까?

더 이상은 아닙니다. 글쎄요, 적어도 워드프레스의 REST API와 최신 JavaScript 라이브러리인 React의 조합으로 달성할 수 없는 것은 아닙니다.

무엇을 기다립니다? 워드프레스 REST API?

예, WordPress REST API는 웹 애플리케이션을 위한 백엔드 기반을 구축하는 데 도움이 됩니다. 콘텐츠 기반 솔루션을 구축하는 경우 웹 애플리케이션의 백엔드 기술에 적합한 선택입니다. WordPress는 다른 기술과도 원활하게 상호 운용됩니다. Node.js를 애플리케이션의 초점으로 사용하여 다른 RESTful 서비스에 연결할 수 있습니다.

WordPress REST API는 이제 CMS가 아니라 웹 애플리케이션 프레임워크라고 부를 수 있는 WordPress용 게임 체인저입니다. 프론트엔드와 백엔드가 완전히 분리되었으므로 WordPress는 모바일 앱 백엔드 또는 콘텐츠에 중점을 둔 모든 시스템의 백엔드로 사용할 수 있습니다.

그런데 왜 워드프레스인가? 이유: WordPress를 사용하여 기본적으로 제공되는 기능에 놀랄 것입니다. 광범위한 사용자 관리, 미디어 관리 및 개발자에게 매우 친숙한 API 세트를 사용하여 작업을 확장할 수 있습니다.

이 기사에서는 WP REST API에 연결하여 React라는 JavaScript 라이브러리를 사용하여 SPA(단일 페이지 애플리케이션) WordPress 테마를 빌드하는 과정을 안내합니다.

테마 구축에 뛰어들자

이 기사에서는 사용자가 다양한 기존 WordPress API, 특히 사이트의 미학을 위한 테마 개발과 사이트 플러그인의 기능을 주도하는 API에 이미 익숙하다고 가정합니다. 또한 Linux 또는 MacOS 환경의 LAMP 스택과 같은 WordPress용 개발 플랫폼을 설정했다고 가정합니다.

그러나 단순화를 위해 Windows에서 사용되는 XAMPP 플랫폼에서 볼 수 있는 절대 경로만 참조합니다.

이제 localhost에 워드프레스 인스턴스를 만들고 이름을 'Celestial'로 지정해 보겠습니다. 이것이 WordPress REST API로 구동되는 웹 애플리케이션과 함께 사용할 수 있는 미래 테마를 구축하는 방향을 설정하는 데 사용할 WordPress 테마의 이름입니다. WordPress의 많은 사랑을 받는 템플릿 계층 구조에 이미 익숙할 수도 있지만 REST API를 사용하면 다른 것을 발견할 기회가 있습니다!

그런 다음 wp-content\themes 폴더 내에 테마 폴더를 만들어야 합니다. C:\xampp\htdocs\celestial\wp-content\themes\ (또는 이에 상응하는 항목)로 이동하여 celestial 폴더를 만듭니다. celestial 의 테마 폴더 안에 다음 파일을 추가하십시오.

1. index.php
   테마에 대한 포괄 파일입니다.
2. style.css
   여기에는 테마에 대한 정보가 포함됩니다(실제 CSS가 아님).
3. functions.php
   기능을 작성하고 CSS 및 JS 파일을 가져옵니다.

대시보드 내부에 표시되는 테마의 그림을 원하는 경우 screenshot.jpg 라는 이미지 파일을 추가합니다.

참고 : 각 파일의 코드는 몇 줄이며 GitHub에서 찾을 수 있습니다 .

그런 다음 WordPress 대시보드에 로그인하고 모양 → 테마 로 이동하여 테마로 '천상의'를 선택합니다. 기초가 준비되었으므로 이제 테마를 생성해 보겠습니다.

테마용 React 및 Webpack 시작하기

React는 Facebook에서 지원하고 유지 관리하는 매우 인기 있는 UI 라이브러리입니다. 스택 오버플로의 2017 개발자 설문 조사 결과에 따르면 "React는 개발자들 사이에서 가장 사랑받는 제품입니다."

프로젝트를 시작하기 위해서는 프로젝트를 NPM(Node Package Manager) 프로젝트로 초기화해야 합니다. 이것은 터미널에서 npm init 명령으로 수행됩니다(컴퓨터에 Node.js와 NPM을 설치한 후). 프로젝트를 초기화하면 특정 구성 정보를 입력하라는 메시지가 표시됩니다. 초기화에 성공하면 NPM은 테마의 루트 디렉터리에 package.json 파일을 생성합니다. 이 파일에는 프로젝트 세부 정보와 프로젝트의 모든 종속성이 포함됩니다.

React는 현재 MIT 라이선스 하에 있으므로 이 프로젝트의 JavaScript 라이브러리로 React 버전 16을 사용할 것입니다. React는 Virtual DOM(메모리 내의 문서 표현)과 같은 몇 가지 멋진 기능을 가지고 있으며 React Router와 같은 주변 도구가 많이 있습니다. React는 WordPress.com의 대시보드인 WordPress의 Project Calypso에서도 사용됩니다.

이제 프로젝트에 필요한 NPM 패키지를 설치합니다.

1. 터미널에 npm install --save react react-dom 을 입력하고 Enter 키를 눌러 패키지를 설치합니다.

   

   SPA(Single Page Application)로 테마를 구축하고 있으므로 Webpack과 같은 도구의 도움이 필요합니다. 우리는 코드를 다른 구성 요소로 작성할 것이고 Webpack은 그것들을 모두 함께 패키징하고 단일 .js 또는 .css 파일로 출력하는 데 도움이 될 것입니다. 간단히 말해 모듈 번들러입니다.
   
   Webpack은 먼저 컴퓨터에 전역적으로 설치되어야 합니다. 이를 위해 다시 NPM을 활용할 수 있습니다.
2. npm install -g webpack 명령을 입력하여 시스템에 전역적으로 설치된 안정적인 최신 버전의 Webpack을 가져옵니다.
   
   다음으로 Webpack을 지원하는 NPM 패키지를 앱에 설치합니다.
3. 내 git repo의 package.json 파일로 이동하고 거기에서 나머지 종속성을 package.json 의 종속성 섹션으로 복사합니다. 그런 다음 npm install 을 다시 실행하여 package.json 내의 모든 패키지를 설치합니다.

    { "name": "celestial", "version": "1.0.0", "description": "A basic theme using the WordPress REST API and React", "main": "index.js", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "image-webpack-loader": "^3.4.2", "node-sass": "^4.5.3", "path": "^0.12.7", "react": "^16.0.0", "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.6.0" }, "devDependencies": {}, "scripts": { "build": "webpack", "watch": "webpack --watch" }, "keywords": [ "blog", "decoupled", "react", "rest-api" ], "author": "Muhammad Muhsin", "license": "GPL-3.0" }

   
   위는 이 프로젝트에 대한 package.json 파일의 모든 필수 패키지 목록입니다.
4. GitHub에서 구성을 복사하여 테마 폴더의 webpack.config.js 파일에 붙여넣습니다.

    var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); module.exports = { entry: { app: './src/index.jsx' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader','sass-loader'], publicPath: 'dist' }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=[name].[ext]&outputPath=images/&publicPath=https://localhost/celestial/wp-content/themes/celestial/dist/images', 'image-webpack-loader' ] }, { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }

   
   중요 : module.exports → module → rules[3] → use → publicPath 는 localhost에서 프로젝트의 dist 이미지가 있는 위치에 따라 변경될 수 있습니다. 잘못된 경우 웹 앱에서 이미지가 올바르게 표시되지 않을 수 있습니다.
5. 그 후 다음 명령을 사용하여 프로젝트를 컴파일할 수 있습니다.
   • webpack 또는 npm run build 하여 프로젝트를 컴파일하거나
   • webpack --watch 또는 npm run watch 하여 프로젝트를 컴파일하고 변경 사항을 감시합니다.

참고 : Webpack을 더 잘 이해하려면 Smashing Magazine에서 Joseph Zimmerman이 작성한 이 기사를 읽으십시오 .

WordPress REST API 확장

WordPress REST API는 게시물, 페이지, 미디어 등을 가져오기 위한 다양한 끝점과 함께 제공됩니다. 그러나 응답에 항상 모든 세부 정보가 있는 것은 아닙니다. 예를 들어, posts 메소드는 추천 이미지의 URL이나 작성자의 이름을 제공하지 않습니다. 따라서 이러한 각 요소를 별도로 호출해야 합니다.

그러나 게시물 응답 에 자신의 데이터를 표시하려면 어떻게 해야 할까요? 이것이 REST API를 확장하는 마법이 시작되는 곳입니다. 다음 코드는 게시물 요청에 대한 응답으로 두 개의 추가 변수, 즉 author_name 및 featured_image_src 를 추가합니다. 코드는 functions.php 파일에 있습니다:

 // Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( 'post', 'author_name', array( 'get_callback' => 'celestial_get_author_name', 'update_callback' => null, 'schema' => null ) ); // Add Featured Image register_rest_field( 'post', 'featured_image_src', array( 'get_callback' => 'celestial_get_image_src', 'update_callback' => null, 'schema' => null ) ); // Add Published Date register_rest_field( 'post', 'published_date', array( 'get_callback' => 'celestial_published_date', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'celestial_register_fields' ); function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( 'display_name' ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ 'featured_media' ] == 0) { return $object[ 'featured_media' ]; } $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time('F j, Y'); }

전역 JavaScript 변수

React 앱 전체에서 사용할 특정 WordPress 상수(또는 '변수'라고 함)가 있습니다. 이것은 애플리케이션의 다양한 경로(나중에 WooCommerce 특정 경로)에 대한 정보입니다.

이 변수는 functions.php 파일에 정의되어 있습니다. 'CelestialSettings'라고 하고 대기열에 있는 app.js 파일에 대한 핸들인 celestial-scripts 에 추가됩니다.

 wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true ); $url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) ); wp_scripts()->add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array( 'title' => get_bloginfo( 'name', 'display' ), 'path' => $path, 'URL' => array( 'api' => esc_url_raw( get_rest_url( null, '/wp/v2' ) ), 'root' => esc_url_raw( $url ), ), 'woo' => array( 'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ), 'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9', 'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03' ), ) ) ) );

위의 코드는 분리된 테마를 구축할 때 중요하고 매우 유용한 기술인 WordPress(PHP) 변수를 프런트 엔드로 가져오는 예를 보여줍니다. 이 개체 변수는 사이트 제목, 경로, API 및 루트의 URL 및 WooCommerce와 관련된 세 가지 변수(나중에 설명)를 포함합니다.

반응과 JSX

React는 나머지 주요 JavaScript 라이브러리와 다릅니다. 내가 의미하는 바는 일반적으로 HTML 내에 JavaScript를 작성한다는 것입니다. 그러나 React의 경우 JavaScript 코드 내부에 HTML을 작성합니다. 더 정확하게 하기 위해 JS 내부에 JSX를 작성합니다. JSX는 HTML과 매우 유사하지만 몇 가지 차이점이 있습니다. class 속성은 예를 들어 className 으로 작성됩니다. 그런 다음 Webpack 및 Babel을 통해 일반 JavaScript로 변환되고 app.js 내에 저장됩니다.

그러나 JSX 작성에는 몇 가지 제한 사항이 있습니다. 예를 들어, render() 메서드 내에는 하나의 자식만 있을 수 있으며, 이는 Component의 루트 요소로 사용됩니다. 그러나 장점은 디버깅이 더 쉽다는 것입니다. 우리는 어디에서 실수를 했는지 정확히 알 수 있는 반면, 일반 HTML에서는 일반적으로 오류가 명시적으로 표시되지 않습니다. 우리는 이 프로젝트를 위해 JSX를 작성할 것이므로 JavaScript 파일의 확장자는 .jsx . 그러나 원하는 경우 .js 일 수도 있습니다.

src 폴더에 다음 파일을 만듭니다.

1. index.jsx (기본 파일 및 React Router 구성이 포함된 파일)
2. header.jsx (헤더 구성 요소)
3. footer.jsx (바닥글 구성 요소)
4. posts.jsx (포스트 아카이브용)
5. post-list.jsx ( posts.jsx 내의 개별 게시물에 대한 구성요소)
6. post.jsx (단일 게시물의 경우)
7. products.jsx (WooCommerce의 모든 제품 포함)
8. product.jsx (WooCommerce의 단일 제품 표시)
9. style.scss (SASS 형식의 모든 CSS 코드 포함)

ReactDOM.render()

index.jsx 파일은 프로젝트의 루트입니다. 즉, index.jsx 에는 DOM에 렌더링되는 구성 요소 App이 포함되어 있습니다.

 import { render } from 'react-dom'; // importing render from ReactDOM const App = () => ( // defining the routes <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> // the root path </Switch> </div> <Footer /> </div> ); // React Router const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( // rendering to the DOM by replacing #page with the root React component (routes), document.getElementById('page') // rendering the route );

다른 구성 요소는 React Router 내에서 지정되며 다른 경로를 방문할 때 로드됩니다.

이것이 모든 다른 구성 요소가 궁극적으로 index.jsx 에서 끝나는 모듈식 구성 요소를 작성하는 방법입니다.

Stateful 대 Stateless 구성 요소

다음 두 가지 방법 중 하나로 구성 요소가 작성되는 것을 보았을 것입니다.

1. const App = () => (
2. class Post extends React.Component {

첫 번째 방법은 Stateless 구성 요소를 작성하는 방법이고 두 번째 방법은 Stateful 구성 요소의 예입니다. Stateless는 구성 요소에 '상태'가 없음을 의미합니다. '상태'는 본질적으로 구성 요소 내에 정보가 있는 변수이며 변수가 변경될 때마다 구성 요소가 다시 렌더링됩니다. Stateful 구성 요소는 '스마트 구성 요소'라고도 합니다. 따라서 상태 변수는 해당 구성 요소 내의 내부 통신에 사용됩니다.

두 번째 유형인 Stateless 구성 요소에는 상태 변수가 없으며 'Dumb 구성 요소'라고도 합니다. 그러나 Stateful 구성 요소와 마찬가지로 상위 구성 요소에서 속성으로 전달되는 속성인 'props'가 있습니다.

Stateful 구성 요소에는 React 수명 주기 메서드가 있는 반면 Stateless 구성 요소에는 기본 메서드인 render() 메서드만 있습니다.

React 수명 주기 방법

이러한 메서드는 구성 요소 수명 주기의 여러 단계에서 호출되며 해당 인스턴스에서 자체 코드를 실행하도록 재정의할 수 있습니다. 우리는 응용 프로그램에서 다음 방법을 사용하고 있습니다.

• constructor()
  컴포넌트가 마운트되기 전에 호출됩니다.
• componentDidMount()
  구성 요소가 마운트된 직후에 호출됩니다.
• render()
  JSX(HTML) 콘텐츠를 렌더링하기 위해 호출되는 메서드입니다.
• componentDidUpdate()
  구성 요소가 업데이트될 때 호출됩니다.
• componentWillUnmount()
  구성 요소가 제거될 때 호출됩니다.

참고 : 구성 요소 및 해당 수명 주기에 대해 자세히 알아보려면 여기에서 설명서를 읽으십시오 .

자바스크립트 약속

JavaScript Promise를 사용하여 WordPress REST API에서 데이터를 가져올 것입니다. 먼저 functions.php 에 REST API에 대한 URL이 있습니다. 여기에 프런트 엔드에서 액세스할 수 있는 JavaScript 변수로 추가했습니다.

JavaScript의 fetch API 메서드를 사용하여 다른 끝점에서 데이터를 가져옵니다. 콘텐츠를 가져오는 동안 사용자에게 표시할 로더를 추가하고 있습니다.

 getMorePosts() { var that = this; var totalPages; // adding a loader jQuery("#loader").addClass("active"); this.setState({ page: this.state.page + 1 }); fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) { // getting the total number of pages if (pair[0] == 'x-wp-totalpages') { totalPages = pair[1]; } if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts }); // removing the loader jQuery("#loader").removeClass("active"); }).catch(function (error) { console.log('There has been a problem with your fetch operation: ' + error.message); jQuery("#loader").remove(); }); }

React 라우터 사용하기

React Router는 우리 애플리케이션의 클라이언트 측 라우팅을 처리할 라이브러리입니다. 서버 측 라우팅은 WordPress로 가능하지만 진정한 SPA 경험을 달성하려면 React Router의 도움이 필요합니다.

버전 4부터 React Router는 react-router , react-router-dom 및 react-router-native 세 가지 패키지로 나뉩니다. 웹 애플리케이션에서 사용되는 react-router-dom 을 이 프로젝트에 사용할 것입니다.

react-router-dom 이 이미 설치되어 있으므로 index.jsx 파일 내부에 라우터 구성을 작성할 수 있습니다. 코드는 다음과 같습니다.

 const App = () => ( <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} /> <Route exact path={CelestialSettings.path + 'products'} component={Products} /> <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} /> <Route path="*" component={NotFound} /> </Switch> </div> <Footer /> </div> ); // Routes const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( (routes), document.getElementById('page') );

위의 코드는 클라이언트 측에서 처리되는 모든 라우팅을 처리합니다. 마지막 줄의 * 는 위에 언급되지 않은 다른 경로가 사용자를 '404 Not Found' 페이지로 안내한다는 의미입니다.

<Link to=""> 태그는 React Router를 사용하여 서로 다른 페이지를 연결하기 위해 <a href=””> 태그 대신 사용됩니다.

 <div className="navbar-nav"> <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link> <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link> </div>

테스트 데이터 가져오기

이제 테마를 만들었으므로 데이터를 추가할 차례입니다. 데이터를 추가하는 한 가지 방법은 자체 콘텐츠를 만드는 것입니다. 그러나 WordPress 사이트에 데이터를 추가하는 더 쉽고(더 나은) 방법이 있습니다. 이 메서드는 외부 소스에서 자리 표시자 데이터를 가져옵니다.

• https://codex.wordpress.org/Theme_Unit_Test로 이동하여 테마 단위 테스트 데이터를 다운로드합니다.
• 도구 > 가져오기 > WordPress 로 이동하여 WordPress 가져오기 도구를 설치합니다.
• WordPress 임포터가 설치된 후 임포터 실행을 클릭합니다.
• 가져오기 도구에서 '파일 선택'을 클릭합니다.
• 다운로드한 파일을 선택하고 WordPress 테마 단위 테스트 데이터를 가져옵니다.

이제 theme-unit-test-data.xml 파일을 선택해야 하며 이제 모든 자리 표시자 콘텐츠가 사이트에 있습니다.

WooCommerce 통합

이제 React를 사용하여 스토어에 전원을 공급할 준비가 되었습니다. 이를 위해 products.jsx 및 product.jsx 파일을 사용합니다. 이 파일의 코드는 각각 posts.jsx 및 p ost.jsx 와 유사합니다.

CelestialSettings의 'woo' 아래에 세 개의 변수를 더 추가합니다(전역 JavaScript 변수 참조).

1. URL
2. consumer_key
3. consumer_secret

소비자 키와 소비자 비밀은 대시보드 → WooCommerce → 설정 → API → 키/앱 에서 생성되어야 합니다.

woo URL의 경우 수동으로 추가해야 합니다(WooCommerce는 SSL을 통해서만 전송을 허용하므로 https://localhost/celestial/wp-json/wc/v2/ ).

소비자 키와 소비자 암호를 복사하여 functions.php 내의 적절한 위치에 붙여넣습니다. API 호출을 통해 WooCommerce에 액세스하기 위한 인증 역할을 합니다.

API에 대한 자세한 내용은 WooCommerce REST API 설명서를 참조하세요. products.jsx 파일에는 상점을 제품으로 채우는 코드가 있습니다. 제품은 대시보드에서 관리자가 추가할 수 있습니다. 대시보드 → 제품 → 신규 추가 로 이동하여 제품 정보를 입력하면 됩니다.

특정 제품을 클릭하면 product.jsx 페이지로 이동합니다.

위 페이지의 코드는 post.jsx 와 유사합니다.

 renderProduct() { return ( <div className="card"> <div className="card-body"> <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className="col-sm-8"> <h4 className="card-title">{this.state.product.name}</h4> <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p> <p className="card-text">{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }

퍼머링크

테마가 제대로 작동하려면 Dashboard → Settings → Permalinks 내에서 다음 permalinks를 설정해야 합니다.

1. 공통 설정 → 사용자 정의 구조 에서 : https://localhost/celestial/posts/%postname%/

2. 제품 퍼머링크 아래 → 커스텀 베이스 : /products/

위와 같이 퍼머링크를 설정하지 않으면 테마가 원하는 대로 작동하지 않을 수 있습니다.

WooCommerce 수정

localhost/celestial/products 로 이동하면 제품을 로드해야 하는 빈 공간이 생길 수 있습니다. 이것은 WooCommerce가 인증된 요청을 필요로 하는 반면 우리의 localhost는 https가 아니기 때문에 발생합니다. 문제를 해결하려면:

1. https://localhost/celestial/wp-json/wc/v2/products를 방문하십시오. 이것은 우리에게 경고를 줄 것입니다:

1. 고급 > localhost(안전하지 않음)로 진행을 클릭합니다.
2. 이제 제품 페이지로 돌아가면 항목이 올바르게 표시됩니다.

참고 : Mac에서 Valet을 사용하는 경우 TLS 인증서로 로컬 사이트를 보호하려면 사이트에서 Valet Secure를 실행해야 합니다. 이것은 문제를 해결하는 또 다른 방법입니다.

ScrollMagic이란 무엇입니까?

ScrollMagic은 페이지를 스크롤할 때 특정 작업을 수행할 수 있게 해주는 라이브러리입니다. ScrollMagic을 사용하기 위해 우리는 functions.php 에 ScrollMagic JavaScript 라이브러리를 큐에 넣을 것입니다. 이 프로젝트의 두 인스턴스에 대해 ScrollMagic을 사용하고 있습니다.

1. posts.jsx 구성요소 내에서 게시물을 지연 로드하려면:

    componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); } // init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" }) .addTo(that.state.controller) .on("enter", function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }

   
   posts.jsx 구성요소 내의 지연 로드 게시물
2. posts.jsx 및 products.jsx 구성요소에서 각각 게시물 및 제품을 스크롤하여 나타나는 게시물에 페이드인 애니메이션을 표시하려면 다음을 수행하십시오.

    componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery('.posts-container .col-md-4.card-outer').each(function () { // build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, 'fade-in') .addTo(FadeInController); }); }

   
   스크롤이 발생할 때 나타나는 게시물에 페이드 인 애니메이션 적용

이제 프론트엔드에서 테마를 볼 준비가 되었습니다. 웹 브라우저에서 localhost/celestial 로 이동하여 테마가 어떻게 작동하는지 확인하세요.

이제 테마를 성공적으로 만들었습니다.

JavaScript 라이브러리가 있는 기타 WordPress 테마

이것이 도움이 되었다면 최신 JavaScript 라이브러리/프레임워크를 사용하여 구축된 다른 멋진 분리된 WordPress 테마를 살펴볼 수 있습니다.

• Foxhound: WordPress 테마 리포지토리에 추가된 최초의 분리된 테마입니다. Kelly Dwan이 작성한 이 테마는 React, Redux 및 React Router를 사용합니다.
• Anadama React: 같은 저자의 또 다른 테마이지만 Redux 대신 Flux를 사용하고 React Router 대신 Page를 사용합니다.
• Wallace: Kirby가 작성한 이 테마는 WordPress REST API와 함께 Angular를 사용합니다.
• Picard: WordPress REST API의 기능을 보여주기 위해 Automattic이 자체적으로 작성했습니다.
• React Verse: Foxhound를 기반으로 작성한 React 및 Redux 테마.

다음 단계

보여드리고 싶었던 주요 섹션은 이제 끝났습니다. 추가 지식을 위해 프로젝트 구축을 계속할 수 있습니다. 다음은 추구할 수 있는 몇 가지 권장 사항입니다.

1. 결제 및 장바구니를 포함하여 WooCommerce 플러그인이 포함된 본격적인 상점.
2. 아카이브, 태그, 분류 등에 대한 각각의 페이지.
3. Redux 또는 Flux를 사용한 상태 관리.
   

행운을 빕니다, 그리고 행복한 코딩!