راهنمای مبتدیان برای پروژه های توسعه وردپرس React

وردپرس یک سیستم مدیریت محتوای قدرتمند (CMS) است که به شما امکان می دهد همه چیز را از سایت های ساده گرفته تا فروشگاه های پیچیده و پیچیده تجارت الکترونیک بسازید. برای ادغام کد پی اچ پی پلتفرم با جاوا اسکریپت، می توانید از آن استفاده کنید WP REST API و وردپرس واکنش نشان دهید.

React که توسط فیس بوک توسعه یافته است رابط کاربری (UI) کتابخانه ای که از یک رویکرد ساده و مبتنی بر مؤلفه برای ساخت برنامه های کاربردی مقیاس پذیر و چند پلتفرمی استفاده می کند که به راحتی قابل درک هستند. با این حال، مهم است که یاد بگیرید چگونه از آن به درستی استفاده کنید تا از ویژگی ها و عملکردهای آن حداکثر استفاده را ببرید.

در این راهنما روش استفاده از React با وردپرس را توضیح خواهیم داد. ما درباره چیستی چارچوب بحث خواهیم کرد، مزایای آن را بیان می کنیم و روش استفاده از آن را به شما نشان می دهیم. بیا داخل بپریم

مقدمه ای برای React

قبل از شروع، ابتدا می خواهیم این سوال را مطرح کنیم که “React چیست؟”. همچنین به عنوان ReactJS شناخته می شود، یکی از محبوب ترین کتابخانه های جاوا اسکریپت است که می توانید برای توسعه وب از آن استفاده کنید.

ایجاد و نگهداری شده توسط فیس بوک، شامل آرایه گسترده ای از کدهای جاوا اسکریپت است که می تواند برای ساخت اجزای رابط کاربری استفاده شود.

برخلاف تصور عمومی، ReactJS یک چارچوب جاوا اسکریپت نیست زیرا فقط اجزای لایه نمایش یک برنامه را ارائه می‌کند. بنابراین، می توانید آن را با یک چارچوب واقعی مانند جفت کنید Vue.js اگر به دنبال عملکردهای پیچیده تر هستید.

همچنین مهم است که توجه داشته باشید که ReactJS و React Native. دومی یک چارچوب جاوا اسکریپت منبع باز ساخته شده است روی کتابخانه React می‌توانید از آن برای ایجاد برنامه‌های متقابل پلتفرم و اجزای خاص پلتفرم برای iOS و Android استفاده کنید.

ویژگی ها و توابع React

برای درک مزایای React، دانستن روش عملکرد آن مفید است. در اینجا برخی از مهم ترین ویژگی ها و عملکردهای آن آورده شده است:

JSX

پسوند اصلی نحوی جاوا اسکریپت مورد استفاده در React است JSX. می توانید از آن برای جاسازی کد HTML در اشیاء جاوا اسکریپت و ساده سازی ساختارهای کد پیچیده استفاده کنید.

JSX همچنین به پیشگیری کمک می کند حملات اسکریپت بین سایتی (XSS) با ایجاد مشکل برای اشخاص ثالث برای تزریق کد اضافی از طریق ورودی کاربر که به صراحت در برنامه نوشته نشده است.

تگ های JSX شامل یک نام، فرزندان و ویژگی ها هستند. یک تگ تصویر معمولی HTML چیزی شبیه به این خواهد بود:

<img class="" src="" alt="" >

با این حال، یک تگ JSX به شکل زیر است:

<img className="" src="" alt="" />

همچنین مقادیر عددی در داخل براکت های فرفری نوشته شده است. مشابه جاوا اسکریپت، علامت های نقل قول نشان دهنده رشته ها هستند:

const name="John Doe’;
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById("root')
);

شما می توانید هر معتبر قرار دهید عبارت جاوا اسکریپت داخل براکت های فرفری به عنوان مثال، می تواند “user.firstName” یا “formatName(user)” باشد.

DOM مجازی

را مدل شیء سند (DOM) وب را ارائه می دهد page در یک ساختار درخت داده، که React آن را در حافظه خود ذخیره می کند. React می‌تواند به‌روزرسانی‌هایی را برای بخش‌های خاصی از درخت پیاده‌سازی کند، نه اینکه آن را به‌طور کامل رندر کند.

را DOM مجازی اتصال داده یک طرفه را ارائه می دهد. این باعث می شود دستکاری و به روز رسانی آن سریعتر از DOM اصلی باشد.

از a استفاده می کند process معروف به تفاوت این زمانی است که React یک درخت DOM مجازی جدید تولید می کند، آن را با درخت قدیمی مقایسه می کند، سپس کارآمدترین راه را برای اعمال تغییرات در DOM واقعی پیدا می کند. این کار زمان کمتری می‌برد و به منابع کمتری نیاز دارد، که برای پروژه‌های بزرگی که تعامل زیادی با کاربر دارند، سودمند است.

DOM همچنین از API اعلامی پشتیبانی می کند. این به این معنی است که می‌توانید به React بگویید که می‌خواهید رابط کاربری در کدام وضعیت باشد تا مطمئن شوید که DOM با آن وضعیت مطابقت دارد.

اجزاء

همانطور که اشاره کردیم، اجزای واکنش نشان دهند کدهای مستقل و قابل استفاده مجدد هستند که UI را تشکیل می دهند. این مؤلفه ها مشابه توابع جاوا اسکریپت کار می کنند. آنها props را می پذیرند که ورودی های دلخواه هستند. وقتی یک جزء تابع یک عنصر را برمی گرداند، بر ظاهر رابط کاربری تأثیر می گذارد.

لوازم جانبی فقط خواندنی هستند. در اینجا یک مثال است:

import React, { useState } from 'react' 
import ReactDOM from 'react-dom' 
 
const ParentComponent = () => { 
    const [stateVariable, setStateVariable] = useState('this is the starting value for the variable'); 
 
    return ( 
        <div> 
            <h1>This is a function component view</h1>
            <ChildComponent exampleProp={stateVariable} />
        </div> 
    ) 
} 
 
const ChildComponent = (props) => {
    return (
        <div>
            <h2>{props.exampleProp}</h2>
        </div>
    )
}
 
 
ReactDOM.render( <ParentComponent />, document.getElementById('app') );

دو نوع اصلی وجود دارد – کلاس اجزاء و کاربردی اجزاء. اجزای کلاس از قلاب های چرخه حیات وردپرس و فراخوانی های API استفاده می کنند:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { };
  }
  render() {
    return (
      <div>
        <h1>This is a view created by a class component</h1>
      </div>
    );
  }
}

در همین حال، یک مؤلفه عملکردی چیزی شبیه به مثال زیر است:

const ExampleComponent = (props) => {
    const [stateVariable, setStateVariable] = useState('');
    return (
        <div>
            <h1>This is a function component view</h1>
        </div>
    )
}

اجزای عملکردی برای ارائه نماها بدون درخواست داده یا مدیریت وضعیت هستند.

حالت

حالت به شی داخلی اجزای React اشاره دارد. این جایی است که مقادیر ویژگی عناصر را ذخیره می کنید. اگر حالت تغییر کند، کامپوننت دوباره ارائه می شود.

مدیریت دولتی است process مدیریت این حالت های کاربردی و ذخیره داده ها در کتابخانه های مدیریت ایالت. می توانید از تعداد انگشت شماری از کتابخانه های مدیریت دولتی استفاده کنید، از جمله Redux و پس زدن، با این که دومی برای مبتدیان بیشتر است.

چرا از React استفاده کنیم؟

استفاده از React برای توسعه وردپرس مزایای زیادی دارد. برای شروع، برای مبتدیان مناسب است و همه بهترین ارائه دهندگان میزبانی وب از استفاده از آن پشتیبانی می کنند.

از آنجایی که متکی است روی جاوا اسکریپت و کامپوننت های ساده، می توانید از آن برای ایجاد برنامه های کاربردی مبتنی بر وب تنها پس از چند روز یادگیری آن استفاده کنید. همچنین وب سایت های زیادی برای یادگیری روش کدنویسی رایگان آنلاین وجود دارد. درک کامل از مبانی جاوا اسکریپت می تواند ساده تر شود process.

یکی دیگر از مزایای React این است که به شما امکان می دهد از کامپوننت ها در برنامه های دیگر استفاده کنید. این منبع باز است، بنابراین می توانید اجزای خود را از قبل بسازید و آنها را بین دیگران قرار دهید، بدون اینکه کد خود را متورم کنید.

کامپوننت‌های React نیز به لطف یکپارچه‌سازی JSX که در یک لحظه درباره آن بحث خواهیم کرد، نوشتن نسبتاً ساده است. شما می توانید تایپوگرافی HTML، برچسب ها و اهرم رندر عملکردهای متعدد را برای توسعه برنامه های کاربردی پویا ترکیب کنید.

با React می توانید از رسمی نیز استفاده کنید command-line رابط (CLI) – ایجاد کردن واکنش نشان دهید برنامه – برای تسریع تک-page توسعه اپلیکیشن دارای ابزارهای از پیش پیکربندی شده ای است که می تواند به شما در ساده سازی راه اندازی و یادگیری کمک کند process.

در نهایت، React نیز سئو دوستانه است. پیاده سازی DOM مجازی به افزایش کمک می کند page سرعت، افزایش عملکرد و رندر سمت سرور، خزیدن سایت شما را برای ربات ها آسان تر می کند.

مروری بر WP REST API

رابط برنامه کاربردی WordPress REST (API) توسعه دهندگان را قادر می سازد تا چارچوب های جاوا اسکریپت مانند React را با وردپرس ادغام کنند. می توانید از قسمت جلویی سایت خود به WP REST API دسترسی پیدا کنید، انواع پست های سفارشی اضافه کنید و یک برنامه React با پشتیبانی این API بسازید.

WP REST API مجموعه ای از پروتکل هایی است که برای ساخت برنامه های نرم افزاری استفاده می شود. آنها روش اشتراک گذاری اطلاعات و داده ها بین برنامه ها و روش تعامل اجزای آنها را تعریف می کنند. REST، مخفف Representational State Transfer، به محدودیت‌های معماری برنامه‌ها اشاره دارد.

فرمت ساختاربندی داده‌ها که باید توسط برنامه‌ها خوانده شوند، نشان‌گذاری شی جاوا اسکریپت (JSON) نامیده می‌شود. این به ساده سازی ارتباط بین وردپرس و سایر برنامه ها و برنامه ها کمک می کند.

WP REST API منجر به یک محیط جداسازی می شود که به کاربران امکان می دهد وردپرس را به عنوان یک CMS بدون هد رفتار کنند. این بدان معناست که می توان از انواع فریم ورک های فرانت اند استفاده کرد hook قسمت پشتی وردپرس این برای توسعه دهندگانی که علاقه زیادی به PHP ندارند مفید است.

واکنش نشان دهید – قبل از شروع

دانش اولیه جاوا اسکریپت، CSS و HTML به یادگیری React کمک می کند. علاوه بر این، یادگیری process اگر با آن آشنا باشید می تواند کارآمدتر باشد ECMAScript 6 (همچنین به عنوان ES6 شناخته می شود)، برنامه نویسی تابعی و برنامه نویسی شی گرا.

از نظر برنامه، به نصب چند وابستگی نیز نیاز خواهید داشت روی کامپیوتر شما. این شامل NodeJS و npm و یک ویرایشگر متن است. در صورت تمایل، ممکن است بخواهید از آن نیز استفاده کنید Git برای کنترل نسخه

محبوب ترین راه برای توسعه پروژه های React برای وردپرس استفاده از آن است برنامه React ایجاد کنید:

CRA یک محیط ساده برای یادگیری React و استفاده از آن برای ساختن تکpage برنامه های کاربردی. توجه داشته باشید که برای استفاده از آن ابتدا به Node و npm نیاز دارید روی دستگاه شما

برای ایجاد یک پروژه جدید می توانید دستور زیر را در خود اجرا کنید terminal:

npx create-react-app wp-react-demo

اگر قبلاً این کار را انجام نداده اید، تأیید می کند که می خواهید Create React App را قبل از ایجاد نسخه نمایشی نصب کنید. این یک قالب دیگ بخار می سازد. شما همچنین می توانید “wp-react-demo” را با نام خود جایگزین کنید.

بعد، موارد زیر را اجرا کنید:

cd wp-react-demo
npm start

ساختار دایرکتوری به شکل زیر خواهد بود:

├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js

در دایرکتوری src، همه فایل‌های جاوا اسکریپتی را که کار می‌کنید، پیدا خواهید کرد روی. در حال حاضر، شما می توانید مراجعه کنید localhost: 3000 برای بارگیری index.html فایل.

را public/index.html فایل حاوی چیزهای زیادی نیست با این حال، می توانید خط زیر را پیدا کنید، که نقطه شروع پروژه شما خواهد بود:

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

زیر index.js فایل دایرکتوری src، موارد زیر را خواهید دید:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(<App />, document.getElementById('root'));

این به این معنی است که آن را رندر می کند برنامه جزء، که شما می توانید در زیر پیدا کنید src./App.js. شما می توانید این را با محتوای HTML خود جایگزین کنید. می توانیم از HTML insider استفاده کنیم render() به لطف پسوند نحوی JSX.

روش پرس و جو WP REST API از React

به طور پیش فرض، شما می توانید یک GET درخواست استفاده از WP REST API روی قسمت جلویی سایت شما برای مثال می توانید استفاده کنید /wp-json/wp/v2/posts برای دریافت همه پست های شما با رعایت مثال قبلی، داده های این پست در آن قرار می گیرند http://localhost/wp-json/wp/v2/posts/.

برای شروع کار با React، می توانید این دستور را در خود اجرا کنید terminal:

npx create-react-app react-app

سپس، موارد زیر را اجرا کنید:

cd react-app 
npm install @material-ui/core

در مرحله بعد می توانید مثال زیر را وارد کنید:

import React, { useEffect, useState } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
    
export default function Posts() {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        async function loadPosts() {
            const response = await fetch('/wp-json/wp/v2/posts');
            if(!response.ok) {
                // oups! something went wrong
                return;
            }
    
            const posts = await response.json();
            setPosts(posts);
        }
    
        loadPosts();
   }, [])
  return (
    <Grid container spacing={2}>
      {posts.map((post, index) => (
      <Grid item xs={4} key={index}>
        <Card>
           <CardContent>
                <Typography
                    color="textSecondary"
                    gutterBottom
                    dangerouslySetInnerHTML={{__html: post.title.rendered}} />
                <Typography
                    variant="body2"
                    component="p"
                    dangerouslySetInnerHTML={{__html: post.content.rendered}} />
            </CardContent>
        </Card>
      </Grid>
     ))}
    </Grid>
 );
}

مثال بالا از React Hooks useEffect و useState. اولی آرایه پست ها را اعلام می کند و برای به روز رسانی آن تماس می گیرد، در حالی که دومی کد را واکشی می کند.

هشدار! هنگام استفاده از خطرناکlySetInnerHTML در کد خود، از خطرات زیر آگاه باشید:
1. آسیب پذیری های امنیتی: استفاده نادرست می تواند برنامه شما را در معرض خطر قرار دهد اسکریپت بین سایتی (XSS) حملات
2. قابلیت نگهداری کد: هنگامی که HTML مستقیماً تزریق می شود، نگهداری و اشکال زدایی کد دشوارتر می شود.

روش ایجاد یک نوع پست سفارشی با React

همچنین می توانید از React برای ایجاد یک نوع پست سفارشی وردپرس استفاده کنید. با این حال، چند ابزار وجود دارد که باید آنها را زودتر نصب کنید. این کمک خواهد کرد که process تا حد امکان یکپارچه و ساده

ابتدا باید آن را اضافه کنید UI نوع پست سفارشی افزونه وردپرس.

این افزونه کار را ساده می کند process ایجاد انواع پست سفارشی در وردپرس

ما همچنین نصب را توصیه می کنیم فیلدهای سفارشی پیشرفته (ACF).

این نیز یک ابزار رایگان است. این افزونه می تواند برای ایجاد و افزودن فیلدهای سفارشی به انواع پست سفارشی شما استفاده شود. ما نیز نصب را پیشنهاد می کنیم ACF به REST API تا فیلدهای سفارشی خود را در دسترس انواع پست خود قرار دهید.

برای شروع، به CPT UI > افزودن/ویرایش انواع پست از ناحیه مدیریت شما در مثال ما از نام “کتاب ها” استفاده می کنیم. همچنین گزینه پر کردن خودکار بقیه فیلدها را انتخاب می کنیم.

زیر نمایش در REST API بخش، آن را تنظیم کنید درست است، واقعی و “Books” را به عنوان Slug پایه REST API وارد کنید. زیر پشتیبانی می کند، انتخاب کنید نویسنده و فیلدهای سفارشی چک باکس ها کلیک روی ذخیره نوع پست وقتی کارتان تمام شد

بعد، می‌توانیم فیلدهای سفارشی برای نوع پست سفارشی ایجاد کنیم. هدایت به فیلدهای سفارشی > افزودن جدیدو یک عنوان مناسب مانند «اطلاعات کتاب» وارد کنید. می توانید کلیک کنید روی افزودن فیلد، سپس برچسب، نام و نوع فیلد را تکمیل کنید.

زیر محل، می توانید نوع پست را برابر با تنظیم کنید کتاب نوع پست سفارشی وقتی کارتان تمام شد، انتخاب کنید انتشار برای فعال کردن فیلد سفارشی

بعد، به کتاب‌های من > افزودن جدید و عنوان، خلاصه و تصویر برجسته آن را وارد کنید. می توانید این را تکرار کنید process برای ایجاد هر تعداد که می خواهید.

در حال حاضر، از شما terminal، دستور زیر را وارد کنید و هر کدام را قبل از حرکت اجرا کنید روی بعدی:

npx create-react-app frontend
cd frontend
npm i axios
npm start

بعد، در داخل src دایرکتوری، می توانید یک پوشه به نام ایجاد کنید اجزاء، به دنبال آن یک فایل به نام books.js. وقتی کارتان تمام شد، موارد زیر را وارد کنید:

import React, { Component } from 'react';
import axios from 'axios';
export class Books extends Component {
   state = {
       books: [],
       isLoaded: false
   }
 componentDidMount () {
   axios.get('http://localhost:3000/wp-json/wp/v2/books')
       .then(res => this.setState({
           books: res.data,
           isLoaded: true
       }))
       .catch(err => console.log(err))
   }
   render() {
      console.log(this.state);
       return (
           <div>
             
           </div>
       )
   }
}
export default Books;

در App.js فایل، موارد زیر را وارد کنید:

import React from 'react';
import './App.css';
import Books from './components/Books';
function App() {
 return (
   <div className="App">
    <Books>
   </div>
 );
}
export default App;

در حال حاضر، در شما terminal، می توانید اجرا کنید npm start فرمان با این کار اپلیکیشن React راه اندازی می شود. می توانید داده های “کتاب” را مشاهده کنید console وقتی آن را در مرورگر باز می کنید. شما می توانید هر عنوان را با نقشه برداری از هر کتاب نمایش دهید.

که در Book.js، زیر را وارد کنید:

render() {
      const {books, isLoaded} = this.state;
       return (
           <div>
              {books.map(book => <h4>{book.title.rendered}</h4>)}
           </div>
       )
   }

توجه داشته باشید که شما همچنین می توانید مجموعه کتاب ها را به یک جزء کتاب جدا کنید. شما می توانید این کار را با ایجاد یک فایل در داخل انجام دهید src/components. همچنین می‌توانید CSS سفارشی را برای استایل دادن به نوع پست سفارشی (app.css) اضافه کنید.

روش ایجاد یک قالب وردپرس React (2 روش)

شاید این سوال برای شما پیش آمده باشد که چگونه با استفاده از React یک قالب وردپرس ایجاد کنیم. چندین گزینه وجود دارد، بنابراین بیایید به دو روش محبوب نگاه کنیم:

1. با استفاده از WP Scripts یک قالب وردپرس React ایجاد کنید

در برنامه های معمولی React، شما باید import در بالای فایل ها واکنش نشان دهید. با این حال، از وردپرس 5.0، CMS با کتابخانه های React و ReactDOM ارسال می شود و آنها را به داخل صادر می کند wp.element، یک شی پنجره جهانی.

اگر قبلا از React استفاده کرده اید، احتمالاً از Create React App برای اجرای سرور توسعه خود استفاده کرده اید. با این حال، این مورد با وردپرس ضروری نیست.

تیم وردپرس یک wp-scripts مبتنی بر بسته روی را react-scripts با Create React App استفاده می شود. WP Scripts به طور پیش فرض شامل دستورات است.

برای بارگیری React در طرح زمینه خود، به مسیر خود بروید functions.php فایل تم خود را، و قطعه کد زیر را اضافه کنید:

// Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() {
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time(), // Change this to null for production
    true
  );
}

این اضافه خواهد شد wp-element به عنوان یک وابستگی به فایل جاوا اسکریپت شما. در مرحله بعد، باید a را راه اندازی کنیم package.json فایل. از ریشه قالب وردپرس خود، دستور زیر را اجرا کنید:

npm init

پس از انجام این کار، موارد زیر را اجرا کنید:

npm install @wordpress/scripts --save-dev

اسکریپت های WP در شما دانلود خواهد شد node_modules، بنابراین آنها برای استفاده در خط فرمان شما در دسترس هستند. برای نگاشت اسکریپت‌های WP به اسکریپت‌های NPM، می‌توانید به اسکریپت‌های خود مرور کنید package.json فایل، تنظیمات “اسکریپت” را بارگیری کنید و آنها را با این مثال جایگزین کنید:

{
  "name": "myreacttheme",
  "version": "1.0.0",
  "description": "My WordPress theme with React",
  "main": "src/index.js",
  "dependencies": {},
  "devDependencies": {
    "@wordpress/scripts": "^5.1.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "author": "",
  "license": "1 GNU V2+, MIT"
}

در مرحله بعد می توانید موارد زیر را اجرا کنید:

npm start

این به دنبال فایل‌های وارد شده از آن می‌گردد src/index.js و آنها را بسازید build/index.js هر زمان که یک فایل تغییر می کند.

2. با استفاده از Create-React-WPTheme یک قالب وردپرس React ایجاد کنید

گزینه دیگر استفاده است create-react-wptheme توسط devloco. این بسته مشابه Create-react-app است. با این حال، از وردپرس به جای وب پک به عنوان سرور توسعه استفاده می کند. همچنین به تمام عملکردهای اصلی، قلاب ها، اکشن ها، فیلترها و غیره دسترسی خواهید داشت.

برای تنظیم آن، می توانید یک را شروع کنید terminal (یا git bash) در نصب وردپرس محلی خود، سپس دستور زیر را تایپ کنید:

npx create-react-wptheme barebones

“استخوان لخت” نام تم است. می‌توانید آن را به هر چیزی که می‌خواهید تم خود بنامید تغییر دهید.

پیامی را مشاهده خواهید کرد که به شما اطلاع می دهد که نصب یک پوشه ریشه و یک پوشه “react-src” در آن ایجاد کرده است. این دایرکتوری مهم است زیرا حاوی کد کامپایل نشده شما خواهد بود.

بعد، ما باید اضافه کنیم styles.css، index.php، و سایر فایل های لازم برای تایید آن. در terminal، دستور زیر را وارد کنید:

cd barebones/react-src
npm run wpstart

اکنون، هنگامی که شما به wp-admin > تم ها، باید تم جدید خود را ببینید. کلیک روی را فعال کنید را فشار دهید، سپس به terminal و موارد زیر را اجرا کنید:

npm run wpstart

این باید به طور خودکار یک برگه مرورگر جدید باز کند. توجه داشته باشید که فایل های موجود در پوشه ریشه (هر چیزی خارج از react-src) نباید ویرایش شوند. آنها حاوی نسخه کامپایل شده کد مورد نیاز برای WordPress و React هستند.

برای ایجاد یک تم جدید، می توانید از موارد زیر استفاده کنید:

npx create-react-wptheme my_react_theme

شما می توانید “my_react_theme” را همانطور که می خواهید تغییر دهید. در مرحله بعد می توانید دستور زیر را وارد کنید:

cd my_react_theme/react-src
npm run start

به یاد داشته باشید که آن را با همان نامی که در مرحله قبل استفاده کردید جایگزین کنید. این موضوع را برای مشاهده در قسمت مدیریت تنظیم می کند.

پس از اتمام توسعه تم خود، باید از دستور build برای انتقال آن به مرحله تولید استفاده کنید. برای انجام این کار، خط فرمان خود را باز کنید، به مسیر بروید react-src پوشه تم خود را بزنید و موارد زیر را اجرا کنید:

npm run build

این کار فایل های شما را که در یک پوشه قرار دارند بهینه می کند. سپس می توانید آن را مستقر کنید روی سرور شما

روش افزودن React به قالب صفحه سفارشی

اگر می‌پرسید چگونه با استفاده از React یک تم کودک وردپرس ایجاد کنید، process نسبتا مشابه است. می توانید React را به یک سفارشی اضافه کنید page قالب.

بیایید با یک ساختار تم استاندارد شروع کنیم:

/build
/src
/-- index.js
functions.php
package.json
page-react.php
style.css

در مرحله بعد، کد زیر را به تم خود اضافه خواهید کرد functions.php فایل:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
  $parent_style="twentytwenty-style"; 
    
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    [ $parent_style ],
    time() //For production use wp_get_theme()->get('Version')
  );

  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time() //For production use wp_get_theme()->get('Version')        
  );
  
}

همچنین باید کدی را به خود اضافه کنید style.css فایل. در داخل آن موارد زیر را کپی و پیست کنید:

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     twentytwenty
 Version:      0.9.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentychild
*/

بعد، می توانید یک سفارشی اولیه ایجاد کنید page قالب page-react.php با این مثال:

<? php
/**
 * Template Name: React Template
 */
get_header();
?>

<main id="site-content" role="main">
	<article class="post-2 page type-page status-publish hentry">
		<?php get_template_part( 'template-parts/entry-header' ); ?>
		<div class="post-inner thin">
			<div class="entry-content">				

				<div id="react-app"></div><!-- #react-app -->

			</div><!-- .entry-content -->
		</div><!-- .post-inner -->
	</article><!-- .post -->
</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>

اکنون می توانید یک جدید ایجاد کنید page در وردپرس و سپس انتخاب کنید React Template به عنوان page قالب.

روش استفاده از React در برنامه شما

اگر می‌خواهید از React در یک برنامه موجود استفاده کنید، می‌توانید شبکه تحویل محتوای آن (CDN) را مستقیماً به فایل HTML خود اضافه کنید. برای شروع، به HTML بروید page جایی که می خواهید React را برای شروع اضافه کنید.

یک جای خالی درج کنید <div> برچسب زدن این یک ایجاد خواهد کرد container جایی که می توانید یک جزء را رندر کنید. برای این مثال، فرض کنید در حال تلاش برای ایجاد یک دکمه هستیم.

بعد، سه را وارد کنید <script> برچسب ها روی را page قبل از بسته شدن </body> برچسب زدن دو مورد اول برای بارگذاری React استفاده می شود و سومی کد کامپوننت شما را بارگذاری می کند.

اکنون در همان پوشه ای که HTML شما قرار دارد page، یک فایل جدید بسازید و نام آن را بگذارید button.js (یا هر چیزی که به عنصری که اضافه می کنید مربوط می شود). در آن فایل کد زیر را کپی و پیست کنید:

'use strict';
const e = React.createElement;
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }
  render() {
    if (this.state.clicked) {
      return 'You pressed this button.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ clicked: true }) },
      'Press Me'
    );
  }
}

این یک جزء دکمه ایجاد می کند که یک پیام را پس از کلیک روی آن نمایش می دهد. برای استفاده از دکمه در HTML خود page، می توانید قطعه کد زیر را به پایین اضافه کنید button.js فایل:

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(Button), domContainer);

این تماس را به <div> container شما به HTML خود اضافه کردید page. سپس کامپوننت دکمه React را رندر می کند.

همچنین می توانید از React برای ایجاد یک برنامه خالی React از ابتدا استفاده کنید. بهترین راه برای انجام این کار استفاده از راه حل Create React App است که قبلا در مورد آن صحبت کردیم. می تواند برای افراد مجرد مفید باشدpage برنامه های کاربردی.

برای شروع، می توانید این دستور را در خود اجرا کنید terminal:

npx create-react-app my-app

توجه داشته باشید که می‌توانید «برنامه من» را به هر نامی که می‌خواهید تغییر دهید. برای اجرای آن، می‌توانید با اجرای آن به پوشه برنامه بروید cd my-app فرمان، به دنبال آن npm start.

سپس برنامه در حالت توسعه اجرا می شود. می توانید آن را در مرورگر خود مشاهده کنید http://localhost: 3000.

نتیجه

توسعه پروژه‌های WordPress React می‌تواند ساده و ساده باشد process، حتی اگر مبتدی باشید. با این حال، مهم است که یاد بگیرید که چارچوب جاوا اسکریپت چگونه با CMS و REST API آن کار می کند تا این کار را با موفقیت انجام دهید.

خوشبختانه، با درک اولیه جاوا اسکریپت، HTML و CSS، می‌توانید در کمترین زمان React را یاد بگیرید. همانطور که در این پست بحث کردیم، می توانید از آن برای ایجاد تکpage برنامه ها و تم ها و سفارشی page قالب ها

امیدواریم این راهنما به شما در درک بهتر React و قابلیت‌های آن برای توسعه وب کمک کرده باشد.