۰۹۳۶-۲۵۱-۰۱۶۴ (تلگرام)
حساب کاربری
صفحه اصلی / آموزش / نحوه ساخت قالب وردپرس با React: آموزش گام‌به‌گام پروژه‌محور
همکاری با پروان وب
23 ارديبهشت 1404
0 6 0

نحوه ساخت قالب وردپرس با React: آموزش گام‌به‌گام پروژه‌محور

سیدعلی سعادت
wordpress react theme 1024x512 1 - نحوه ساخت قالب وردپرس با React: آموزش گام‌به‌گام پروژه‌محور

در این مقاله، قصد داریم با رویکردی پروژه‌محور، نحوه طراحی قالب وردپرس با استفاده از React را آموزش دهیم. ادغام قدرت رابط کاربری React با سیستم مدیریت محتوای وردپرس، امکانی فراهم می‌کند تا قالب‌هایی سریع، مدرن و تعاملی طراحی کنید. این راهنما به شما کمک می‌کند تا با استفاده از ابزارهای مدرن، یک قالب وردپرس با React از صفر بسازید.

پیش‌نیازها

برای شروع آموزش ReactJS+WordPress (پروژه محور)، به ابزارها و محیط‌هایی نیاز دارید که پایه پروژه را تشکیل می‌دهند:

  • یک سایت وردپرس نصب‌شده (برای توسعه محلی، می‌توانید از DevKinsta استفاده کنید)

  • نصب بودن Node.js و npm یا yarn

  • آشنایی پایه با جاوا اسکریپت و مفاهیم React

مرحله اول: ایجاد ساختار اولیه قالب وردپرس

در این مرحله، ساختار ابتدایی قالب وردپرس خود را ایجاد می‌کنیم. برای این کار:

  1. وارد مسیر wp-content/themes در پروژه وردپرس خود شوید.

  2. پوشه‌ای جدید با نام دلخواه برای قالب بسازید، مانند my-basic-theme.

  3. درون این پوشه، فایل‌های زیر را ایجاد کنید:

    • style.css — فایل اصلی استایل و متادیتای قالب

    • functions.php — برای بارگذاری اسکریپت‌ها و تعریف توابع قالب

    • index.php — فایل اصلی قالب وردپرس

در ادامه، فایل style.css را با اطلاعات زیر پر کنید:

/*
Theme Name: My Basic Theme
Theme URI: http://example.com/my-basic-theme/
Author: Your Name
Author URI: http://example.com
Description: A basic WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-background
Text Domain: my-basic-theme
*/

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

مرحله دوم: ادغام React در وردپرس

برای استفاده کردن از React در وردپرس، نیاز است React را در قالب خود ادغام کنید. بهترین روش استفاده از بسته رسمی @wordpress/scripts است که شامل ابزارهایی برای ساده‌سازی فرایند توسعه با جاوا اسکریپت و React در وردپرس است.

در فایل functions.php کد زیر را وارد کنید:

<?php
function my_react_theme_scripts() {
wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '/build/index.js', array('wp-element'), '1.0.0', true);
wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_react_theme_scripts');

این کد فایل JavaScript خروجی برنامه React و فایل استایل قالب را در وردپرس بارگذاری می‌کند.

مرحله سوم: تنظیم فایل index.php برای بارگذاری React

در فایل index.php کد زیر را قرار دهید:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="app"></div>
<?php wp_footer(); ?>
</body>
</html>

در اینجا یک div با شناسه app تعریف شده که برنامه React شما درون آن رندر خواهد شد.

مرحله چهارم: راه‌اندازی React با @wordpress/scripts

ترمینال را باز کنید و به دایرکتوری قالب خود بروید:

cd wp-content/themes/my-basic-theme
npm init -y
npm install @wordpress/scripts @wordpress/element --save-dev

سپس در فایل package.json بخش scripts را به شکل زیر تنظیم کنید:

"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
}

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

مرحله پنجم: ایجاد کامپوننت‌های React

در مسیر قالب خود، یک پوشه به نام src بسازید و دو فایل index.js و App.js را در آن قرار دهید.

محتوای فایل index.js:

import { render } from '@wordpress/element';
import App from './App';
render(<App />, document.getElementById('app'))

محتوای فایل App.js:

import { Component } from '@wordpress/element';
export default class App extends Component {
render() {
return (
<div>
<h1>Hello, WordPress and React!</h1>
{/* Your React components will go here */}
</div>
);
}
}

مرحله ششم: نهایی‌سازی قالب و نمایش آن

  1. دستور npm start را برای اجرای سرور توسعه اجرا کنید.

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

  3. در مرورگر، سایت خود را باز کنید تا پیام «Hello, WordPress and React!» را ببینید.

برای آماده‌سازی نهایی قالب برای محیط تولید، دستور زیر را اجرا کنید:

npm run build

این دستور برنامه React را در پوشه build/ کامپایل می‌کند و آماده بارگذاری در وردپرس می‌شود.

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

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

ایجاد کامپوننت Header

در پوشه src قالب وردپرس خود، فایلی با نام Header.js بسازید و کد زیر را در آن قرار دهید:

import { Component } from '@wordpress/element';

class Header extends Component {
render() {
const { toggleTheme, darkTheme } = this.props;
const headerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '10px 20px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
};
return (
<header style={headerStyle}>
<div>My WP Theme</div>
<button onClick={toggleTheme}>
{darkTheme ? 'Light Mode' : 'Dark Mode'}
</button>
</header>
);
}
}

export default Header;

این قطعه کد، یک کامپوننت هدر تعریف می‌کند که با استفاده از @wordpress/element ساخته شده و ظاهر آن بسته به وضعیت حالت تاریک (darkTheme) به‌صورت پویا تغییر می‌کند. از این ساختار می‌توانید در روند کدنویسی قالب وردپرس با React بهره بگیرید.

ایجاد کامپوننت Footer

در همان مسیر src، فایلی با نام Footer.js ایجاد کرده و کد زیر را در آن وارد کنید:

import { Component } from '@wordpress/element';

class Footer extends Component {
render() {
const { darkTheme } = this.props;
const footerStyle = {
backgroundColor: darkTheme ? '#333' : '#EEE',
color: darkTheme ? 'white' : '#333',
padding: '20px',
textAlign: 'center',
};
return (
<footer style={footerStyle}>
© {new Date().getFullYear()} My WP Theme
</footer>
);
}
}

export default Footer;

این کامپوننت فوتر، مشابه هدر، از استایل‌های پویا برای نمایش در حالت‌های مختلف تم استفاده می‌کند و برای طراحی قالب وردپرس با استفاده از React بسیار کاربردی است.

بروزرسانی فایل App.js برای استفاده از کامپوننت‌ها

در ادامه باید ساختار فایل App.js را بروزرسانی کنیم تا از کامپوننت‌های ساخته‌شده استفاده کند:

import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';

export default class App extends Component {
state = {
darkTheme: true,
};

toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};

render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}

با اجرای این مرحله، ساختار ابتدایی یک قالب وردپرس با استفاده از React، شامل هدر و فوتر، شکل می‌گیرد. این قدم اساسی در مسیر آموزش ReactJS+WordPress (پروژه محور) به حساب می‌آید.

نمایش پست‌های وردپرس در قالب React با استفاده از REST API

در ادامه مسیر آموزش ReactJS+WordPress (پروژه محور)، به یکی از کلیدی‌ترین بخش‌ها می‌پردازیم: ادغام محتوای وردپرس در برنامه‌های React. این کار امکان بهره‌گیری از قابلیت‌های مدیریت محتوای قدرتمند وردپرس و طراحی رابط کاربری تعاملی React را فراهم می‌سازد. برای این هدف، از REST API وردپرس استفاده می‌کنیم.

فعال‌سازی REST API وردپرس

برای استفاده کردن از React در وردپرس و دریافت داده‌ها از طریق REST API، ابتدا باید پیوندهای یکتای سایت وردپرس خود را به‌روزرسانی کنید. در پیشخوان وردپرس به مسیر تنظیمات > پیوندهای یکتا بروید و گزینه «نام نوشته» یا هر گزینه‌ای غیر از «ساده» را انتخاب و ذخیره کنید. با این کار، REST API به‌درستی فعال می‌شود.

ساخت کامپوننت Posts برای دریافت پست‌ها

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

import { Component } from '@wordpress/element';
class Posts extends Component {
state = {
posts: [],
isLoading: true,
error: null,
};
componentDidMount() {
fetch('http://127.0.0.1/wordpress_oop/wp-json/wp/v2/posts')
.then(response => {
if (!response.ok) {
throw new Error('Something went wrong');
}
return response.json();
})
.then(posts => this.setState({ posts, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
render() {
const { posts, isLoading, error } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
}
if (isLoading) {
return <div>Loading...</div>;
}
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
<div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
</article>
))}
</div>
);
}
}
export default Posts;

توجه داشته باشید که آدرس URL در تابع fetch() باید متناسب با آدرس نصب وردپرس شما تنظیم شود. اگر از ابزارهایی مانند DevKinsta استفاده می‌کنید، می‌توانید نام دامنه محلی را از داشبورد بردارید و مسیر /wp-json/wp/v2/posts را به آن اضافه کنید.

این کامپوننت Posts نمونه‌ای عملی از نحوه مدیریت داده‌های وردپرس در React است و نشان می‌دهد که چگونه پست‌ها را از وردپرس دریافت و در رابط React نمایش دهیم. این ادغام مؤثر بین React و وردپرس، ساختاری پویا برای بارگذاری محتوا فراهم می‌کند.

به‌روزرسانی فایل App.js برای نمایش پست‌ها

اکنون باید فایل App.js را ویرایش کنیم تا از کامپوننت Posts نیز استفاده کند. این فایل به‌صورت زیر خواهد بود:

import { Component } from '@wordpress/element';
import Header from './Header';
import Footer from './Footer';
import Posts from './Posts'; // Import the Posts component

export default class App extends Component {
state = {
darkTheme: true,
};
toggleTheme = () => {
this.setState(prevState => ({
darkTheme: !prevState.darkTheme,
}));
};
render() {
const { darkTheme } = this.state;
return (
<div>
<Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} />
<main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}>
<Posts /> {/* Render the Posts component */}
</main>
<Footer darkTheme={darkTheme} />
</div>
);
}
}

با این تغییر، قالب وردپرس شما که با React طراحی شده، اکنون علاوه بر هدر و فوتر، دارای بخش محتوای پویا نیز هست که پست‌های سایت را از طریق REST API نمایش می‌دهد.

fetch data react wp theme - نحوه ساخت قالب وردپرس با React: آموزش گام‌به‌گام پروژه‌محور

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

نهایی‌سازی قالب وردپرس ساخته‌شده با React

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

استفاده از ابزار @wordpress/scripts

برای ساخت فایل‌های نهایی، از بسته قدرتمند @wordpress/scripts استفاده می‌کنیم. این ابزار با دستور زیر، فایل‌های React را به کدهای استاتیک جاوااسکریپت و CSS تبدیل می‌کند:

npm run build

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

پس از ساخت، این فایل‌ها را در مسیر مناسب قالب قرار داده و از تابع wp_enqueue_script() و wp_enqueue_style() برای بارگذاری آنها در وردپرس استفاده می‌کنیم. اکنون می‌توانید قالب را فعال کرده و نتیجه نهایی را مشاهده کنید: یک قالب وردپرس مدرن و اپلیکیشن‌محور که با React ساخته شده است.

جمع‌بندی

اگر به دنبال طراحی قالب وردپرس با استفاده از React هستید، این روش به شما امکان می‌دهد وب‌سایتی با رابط کاربری پویا، مدرن و سریع توسعه دهید. ادغام محتوای وردپرس در برنامه‌های React با استفاده از REST API، مسیری ساده و قدرتمند برای ایجاد تجربه‌ای کاربرمحور و تعاملی فراهم می‌کند.

📌 آیا به فکر ساخت یک قالب وردپرس با React هستید؟
نظر خود را درباره مزایا و چالش‌های این روش در بخش نظرات با ما در میان بگذارید.

بله، با استفاده از ابزارهایی مانند REST API وردپرس و بسته @wordpress/scripts، می‌توان به‌راحتی طراحی قالب وردپرس با استفاده از React را انجام داد و رابط‌های کاربری مدرن و تعاملی ایجاد کرد.
در آموزش پروژه‌محور ReactJS و WordPress، شما یاد می‌گیرید چگونه کامپوننت‌های React را ایجاد کرده، آن‌ها را به داده‌های وردپرس متصل کرده و قالبی پویا با استفاده از REST API طراحی کنید.
برای مدیریت داده‌ها در React، از REST API وردپرس برای دریافت اطلاعاتی مانند پست‌ها، صفحات و متا استفاده می‌شود و داده‌ها در کامپوننت‌ها با استفاده از state و lifecycle methods مدیریت می‌شوند.
ادغام React در قالب وردپرس از طریق تبدیل کد React به فایل‌های استاتیک با استفاده از npm run build و بارگذاری آن‌ها با توابع PHP مانند wp_enqueue_script انجام می‌شود. این روش بسیار بهینه و استاندارد است.
خیر، در صورتی که ساختار قالب به‌درستی پیاده‌سازی شده باشد و از ابزارهای بهینه‌سازی سمت سرور و کلاینت استفاده شود، قالب‌های وردپرس مبتنی بر React می‌توانند عملکرد بسیار خوبی در سئو داشته باشند.
به این محتوا چه امتیازی می دی ؟
سیدعلی سعادت

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

ثبت نظر جدید

ایمیل شما منتشر نخواهد شد.فیلدهای مورد نیاز علامت گذاری شده اند

لیست نظرات

🔥داغ ترین مطالب
🔻 جدید ترین مطالب
پر فروش ترین محصولات
اشتراک گذاری :

تبلیغات متنی

به این مطالب نیز شاید علاقه مند باشید ...

مطالب مشابه

آموزش تنظیمات مالیات در ووکامرس (راهنمای کامل)
0 13

آموزش تنظیمات مالیات در ووکامرس (راهنمای کامل)

راه‌اندازی یک فروشگاه اینترنتی با ووکامرس تجربه‌ای هیجان‌انگیز است؛ اما در کنار طراحی ظاهر فروشگاه و بارگذاری محصولات، یکی از مهم‌ترین بخش‌هایی که نباید از آن غافل شد تنظیمات مالیات در ووکامرس است. بسیاری از فروشگاه‌های اینترنتی به دلیل عدم آگاهی یا سهل‌انگاری، این بخش را نادیده می‌گیرند و در آینده با مشکلاتی نظیر جریمه‌های […]

سیدعلی سعادت
۲۳ ارديبهشت ۱۴۰۴ . ۱۸:۴۷
افزایش سرعت سایت با افزونه jetpack وردپرس + آموزش
0 462

افزایش سرعت سایت با افزونه jetpack وردپرس + آموزش

معرفی افزونه Jetpack وردپرس و کارایی‌های کلیدی آن افزونه Jetpack وردپرس یکی از قدرتمندترین ابزارهایی است که توسط تیم WordPress.com ارائه شده و به صورت رایگان در اختیار کاربران قرار می‌گیرد. این افزونه چندکاره امکانات فراوانی در زمینه‌های امنیت سایت، افزایش سرعت بارگذاری صفحات، سفارشی‌سازی و مدیریت یکپارچه سایت‌های وردپرسی را فراهم می‌کند. با استفاده […]

سیدعلی سعادت
۲۱ ارديبهشت ۱۴۰۴ . ۲۰:۲۹
معرفی 7 افزونه ساخت سایت مشاور املاک وردپرس
9 2,954

معرفی 7 افزونه ساخت سایت مشاور املاک وردپرس

اگر قصد دارید حضور دیجیتالی کسب‌و‌کار مشاور املاک خود را تقویت کنید، انتخاب یک افزونه حرفه‌ای برای وردپرس می‌تواند اولین قدم مؤثر باشد. در این مقاله، مجموعه‌ای از بهترین پلاگین‌های مشاور املاک وردپرس را معرفی کرده‌ایم که به شما کمک می‌کنند یک سایت املاک کارآمد راه‌اندازی کرده و به‌راحتی آن را مدیریت کنید. با استفاده […]

سیدعلی سعادت
۲۱ ارديبهشت ۱۴۰۴ . ۱۸:۱۵
آموزش پاکسازی وردپرس | شناسایی کد های مخرب و بد افزار
1 1,005

آموزش پاکسازی وردپرس | شناسایی کد های مخرب و بد افزار

در این مقاله قصد داریم به صورت کامل به شما آموزش دهیم که چطور سایت وردپرس ویروسی شده را پاکسازی کنیم و همچنین نحوه شناسایی کدهای مخرب در وردپرس را بررسی خواهیم کرد. علاوه بر آن، به پاکسازی دیتابیس و راهکارهایی برای ارتقاء امنیت وردپرس خواهیم پرداخت تا از هک شدن سایت پیشگیری شود. یکی […]

سیدعلی سعادت
۲۰ ارديبهشت ۱۴۰۴ . ۱۲:۲۱
مشاهده وبلاگ
عضویت در خبرنامه

خطا: فرم تماس پیدا نشد.

محصول مورد نظر با موفقیت به سبد خرید اضافه شد.