بروزرسانی: 25 خرداد 1404
با وردپرس و 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، توسعه دهنده وب وردپرس و نویسنده محتوا. خارج از همه چیز وردپرس، من از ساحل، گلف و فیلم لذت می برم. من هم مشکلات قد بلندها دارم ;).