با وردپرس و Astro یک سایت ثابت بسازید

Astro یک فریمورک جلویی مدرن است که توسعه دهندگان را قادر می سازد تا وب سایت های ایستا سریع و کارآمد بسازند. با Astro، توسعه‌دهندگان می‌توانند از قدرت چارچوب‌های جاوا اسکریپت مدرن مانند React، Vue.js و Svelte برای ایجاد رابط‌های کاربری پویا در حین تولید فایل‌های HTML، CSS و جاوا اسکریپت استاتیک در طول فرآیند ساخت استفاده کنند.

هنگامی که با وردپرس به عنوان یک سیستم مدیریت محتوای بدون هد (CMS) همراه می‌شود، Astro یکپارچه‌سازی یکپارچه APIهای باطن و کدهای ظاهری را امکان‌پذیر می‌کند و امکان توسعه کارآمد وب‌سایت‌های ثابت با محتوای پویا را فراهم می‌کند. این رویکرد چندین مزیت را ارائه می دهد.

سایت های ایستا تولید شده با Astro و باطن وردپرس دارای عملکرد عالی هستند. آنها را می توان مستقیماً از یک شبکه تحویل محتوا (CDN) ارائه کرد که نیاز به پردازش سمت سرور را از بین می برد و در نتیجه زمان بارگذاری سریع تر و تجربه کاربری روان تر را به همراه دارد.

این آموزش شما را در فرآیند راه‌اندازی یک سایت ثابت با استفاده از Astro که در سرویس میزبانی سایت استاتیک Kinsta میزبانی شده است و استفاده از وردپرس برای باطن راهنمایی می‌کند.

نقش وردپرس به عنوان یک CMS بدون سر

یک CMS بدون سر، مانند وردپرس، لایه های مدیریت محتوا و تحویل را از هم جدا می کند. این بک‌اند را قادر می‌سازد تا محتوا را حفظ کند، در حالی که یک سیستم دیگر، مانند Astro، قسمت جلویی را مدیریت می‌کند.

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

جدا کردن فرانت‌اند از بک‌اند نیز انعطاف‌پذیری بیشتری را در طراحی ظاهری و انتقال محتوا ارائه می‌دهد. علاوه بر این، فعال کردن دسترسی از طریق APIها محتوا را در آینده اثبات می کند.

محیط توسعه خود را تنظیم کنید

برای تنظیم محیط خود باید سه مرحله را دنبال کنید:

Astro را نصب کنید.
یک سایت وردپرس راه اندازی کنید.
یک محیط مرحله بندی وردپرس ایجاد کنید.

پیش نیازها

برای دنبال کردن این آموزش، مطمئن شوید که موارد زیر را دارید:

Astro را نصب کنید

برای پروژه خود، یک دایرکتوری جدید بسازید و در آن حرکت کنید.
یک پروژه جدید را با اجرای دستور زیر در ترمینال خود داربست کنید:
```
npm create astro@latest
```
این مرحله اعلان های پیکربندی را تولید می کند. آنها را بر اساس آنچه می خواهید تنظیم کنید.

دستورالعمل های پیکربندی پروژه جدید Astro.
هنگامی که پروژه با موفقیت ایجاد شد، اجرا کنید npm run dev برای راه اندازی سرور توسعه محلی در http://localhost:4321/.
Astro با موفقیت نصب شد.

یک سایت وردپرس در Kinsta راه اندازی کنید

Kinsta یک ارائه دهنده هاست وردپرس رده بالا است که به دلیل رابط بصری و زیرساخت با کارایی بالا مشهور است. این مراحل را برای ایجاد یک سایت وردپرس در Kinsta دنبال کنید.

در داشبورد MyKinsta خود، کلیک کنید سایت های وردپرس و سپس یک سایت ایجاد کنید.
انتخاب کنید وردپرس را نصب کنید گزینه و کلیک کنید ادامه هید.
ارائه یک نام سایت، a را انتخاب کنید مکان مرکز داده، و کلیک کنید ادامه هید.
تمام اطلاعات دیگر را ارائه دهید و کلیک کنید ادامه هید.
هنگامی که سایت شما ایجاد شد، باید پیام “سایت شما ایجاد شده است” را مشاهده کنید.

یک محیط مرحله بندی وردپرس ایجاد کنید

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

مراحل ایجاد محیط وردپرس Staging در Kinsta به شرح زیر است.

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

وردپرس را با Astro ادغام کنید

دو روش اصلی برای ادغام وردپرس با Astro وجود دارد: REST API و GraphQL. این راهنما از رویکرد GraphQL استفاده می کند.

برای ادغام وردپرس با Astro، باید:

WPGraphQL را نصب کنید.
Astro را به وردپرس متصل کنید.

WPGraphQL را نصب کنید

ابتدا افزونه WPGraphQL را قبل از استفاده از GraphQL برای اتصال Astro به آن در سایت وردپرس خود نصب کنید.

در داشبورد MyKinsta، سایت وردپرس خود را انتخاب کنید.
در نوار منو، کلیک کنید صحنه سازی و سپس WP Admin را باز کنید در گوشه سمت راست بالا
صفحه اطلاعات سایت
اعتبارنامه هایی را که هنگام ایجاد سایت وردپرس خود استفاده کرده اید، ارائه دهید.
کلیک کنید بر روی پلاگین ها منو در نوار ناوبری سمت چپ.
کلیک افزودن افزونه جدید برای افزودن افزونه WPGraphQL.
«WPGraphQL» را جستجو کنید، کلیک کنید New را نصب کنید برای نصب WPGraphQL افزونه و سپس کلیک کنید فعال کنید.
نصب افزونه WPGraphQL.
برای آزمایش اینکه آیا افزونه WPGraphQL که نصب کرده‌اید مطابق انتظار کار می‌کند، آن را باز کنید GraphQL منو در نوار ناوبری و کلیک کنید GraphiQL IDE.
از کد زیر در GraphiQL IDE استفاده کنید و کلیک کنید اجرا کن در بالا سمت چپ برای اجرای کوئری GraphQL:
```
{
  posts {
    nodes {
      slug
      excerpt
      title
    }
  }
}
```
این پرس و جو GraphQL به طور موثر بازیابی می کند slugs، excerpts، و titles از پست های سایت وردپرس

اجرای پرس و جو GraphQL.

در سمت چپ GraphiQL IDE، می‌توانید لیست پست‌هایی را که با اجرای کوئری GraphQL بازگردانده شده‌اند، مشاهده کنید. نقطه پایانی وردپرس GraphQL شما در این آدرس قابل دسترسی است https://your_wordpress_staging_url/graphql.

Astro را به وردپرس متصل کنید

برای اتصال Astro به وردپرس، دستورالعمل های زیر را دنبال کنید:

پوشه ای به نام ایجاد کنید graphql داخل پروژه Astro شما src پوشه
ایجاد یک wordPressQuery.ts فایل داخل graphql پوشه

از کد زیر در داخل خود استفاده کنید wordPressQuery.ts فایل. حتما تعویض کنید https://your_wordpress_staging_url/graphql با URL مرحله بندی وردپرس شما.

interface gqlParams {
    query: String;
    variables?: object;
}

export async function wpquery({ query, variables = {} }: gqlParams) {
    const res = await fetch('https://your_wordpress_staging_url/graphql', {
        method: "post",
        headers: {
            "Content-Type": "application/json",

        },

        body: JSON.stringify({
            query,
            variables,
        }),
    });

    if (!res.ok) {
        console.error(res);
        return {};
    }

    const { data } = await res.json();
    return data;
}

این کد یک رابط را تعریف می کند gqlParams و یک تابع ناهمزمان wpquery که پرس و جوهای GraphQL را به سایت وردپرس تسهیل می کند.

سایت خود را با Astro و WordPress توسعه دهید

برای ایجاد یک صفحه استاتیک جدید در Astro، فایلی به نام ایجاد کنید blog.astro در src/pages فهرست راهنما.

کد زیر را در فایل جدید ایجاد شده قرار دهید:

---
import Layout from "../layouts/Layout.astro";
import { wpquery } from "../graphql/wordPressQuery";

const data = await wpquery({
	query: `
 	 {
		posts{
			nodes{
				slug
				excerpt
				title
			}
 		 }
	 }  
 	`,
});
---

<Layout title="Astro-WordPress Blog Posts">
	<main>
		<h1><span class="text-gradient">Blog Posts</span></h1>

		{
			data.posts.nodes.map((post: any) => (
				<>
					<h2 set:html={post.title} />
					<p set:html={post.excerpt} />
				</>
			))
		}
	</main>
</Layout>
<style>
	main {
		margin: auto;
		padding: 1rem;
		width: 800px;
		max-width: calc(100% - 2rem);
		color: white;
		font-size: 20px;
		line-height: 1.6;
	}

	h1 {
		font-size: 4rem;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		margin-bottom: 1em;
	}
</style>

این کد نحوه استفاده از wpquery عملکردی برای واکشی داده ها از سایت وردپرس با استفاده از GraphQL و ارائه آن در سایت Astro.

استفاده کنید npm run dev برای راه اندازی سرور توسعه محلی و مشاهده آخرین پست های وبلاگ وردپرس در سایت Astro خود در http://localhost:4321/blog.
پروژه Astro نمایش پست های وردپرس.

برای مدیریت مسیریابی پویا برای پست های وبلاگ فردی، باید از ترکیبی از مسیرهای پویا Astro و متغیرهای پرس و جو وردپرس GraphQL استفاده کنید. با ارسال شناسه پست یا اسلاگ به عنوان متغیر پرس و جو، می توانید به صورت پویا محتوای صفحه را برای هر پست وبلاگ تولید کنید. این اجازه می دهد تا یک تجربه کاربری شخصی تر در وب سایت خود داشته باشید.

سایت استاتیک خود را در Kinsta مستقر کنید

اکنون، کدهای خود را به ارائه دهنده گیت دلخواه خود (Bitbucket، GitHub یا GitLab) فشار دهید. در مرحله بعد، این مراحل را برای استقرار سایت استاتیک خود در Kinsta دنبال کنید:

در داشبورد MyKinsta، کلیک کنید سایت های استاتیک و سپس سایت اضافه کنید.
Kinsta را با ارائه دهنده Git خود مجاز کنید.
a را انتخاب کنید مخزن GitHub و الف شعبه پیش فرض. ارائه یک نام نمایشی برای سایت استاتیک خود و انتخاب کنید استقرار خودکار در commit جعبه این امکان استقرار خودکار تمام تغییرات جدید ایجاد شده در مخزن را فراهم می کند. کلیک ادامه هید.
در تنظیمات ساخت بخش، Kinsta به طور خودکار تمام فیلدها را تکمیل می کند. همه چیز را همانطور که هست رها کنید و کلیک کنید ایجاد سایت.
با رفتن به URL که به عنوان دامنه در صفحه نمای کلی سایت مستقر شده شما ظاهر می شود، به سایت Astro خود دسترسی پیدا کنید. شما می توانید از طریق پست های وبلاگ دسترسی داشته باشید https://your_kinsta_site_url/blog.

خلاصه

کارهای دیگری که می توانید با Astro و WordPress انجام دهید وجود دارد. API وردپرس می تواند برای دسترسی به داده های مختلف از سایت شما و ایجاد موارد استفاده منحصر به فرد با Astro استفاده شود.

با میزبانی مدیریت شده وردپرس Kinsta، به یک زیرساخت قوی، CDN جهانی، حافظه پنهان لبه، چندین مرکز داده و ویژگی‌های سطح سازمانی دسترسی پیدا می‌کنید. این یک محیط سریع و امن را برای سایت وردپرس شما تضمین می کند.

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

نظر شما در مورد WordPress و Astro بدون هد چیست؟ آیا پتانسیل آنها را برای ایجاد راه حل های منحصر به فرد بررسی کرده اید؟ تجربیات خود را در بخش نظرات زیر به اشتراک بگذارید.

جرمی هولکامب
کینستا

ویرایشگر محتوا و بازاریابی در Kinsta، توسعه دهنده وب وردپرس و نویسنده محتوا. خارج از همه چیز وردپرس، من از ساحل، گلف و فیلم لذت می برم. من هم مشکلات قد بلندها دارم ;).