چگونه با استفاده از React و یک پلاگین یک وب سایت وردپرس بدون سر در سال 1403 بسازیم

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

به همین دلیل است که ما این راهنمای سریع برای وردپرس بدون هد را ایجاد کرده ایم. با غواصی عمیق در دنیای سیستم‌های مدیریت محتوا (CMS)، می‌توانید تصمیم بگیرید که آیا راه‌اندازی بدون سر برای پروژه‌های توسعه وب شما مناسب است یا خیر.

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

وردپرس بدون سر چیست؟

اکثر CMS ها دارای یک front-end و یک back-end هستند. با یک سایت وردپرس، بک‌اند از پنل مدیریت و ابزارهای مدیریت محتوا تشکیل شده است:

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

هنگامی که وردپرس را بدون هد اجرا می‌کنید، هد (front-end) را از بدنه (back-end) جدا می‌کنید. به این ترتیب، می‌توانید به استفاده از داشبورد آشنا ادامه دهید و در عین حال خود را از محدودیت‌های جلویی پلتفرم رها کنید.

در یک راه‌اندازی بدون سر، CMS وردپرس محتوای شما را به عنوان داده با استفاده از انتقال حالت نمایشی (REST) ​​ارائه می‌کند. رابط برنامه نویسی کاربردی (API). شما می توانید با ارسال یک درخواست شبکه به نقطه پایانی REST API داخلی وردپرس به این اطلاعات دسترسی داشته باشید. این به شما این آزادی را می دهد که همه این محتوا را در یک صفحه نمایش سفارشی ارائه کنید.

حتی می‌توانید از داده‌های وردپرس خود در زمینه‌های منحصربه‌فرد، از جمله برنامه‌های تلفن همراه و تک استفاده کنید.page برنامه های کاربردی (API). در بخش بعدی، مزایای اجرای سیستم هدلس را بیشتر بررسی خواهیم کرد.

چگونه تصمیم بگیریم که اجرای هدلس وردپرس برای شما مناسب است؟

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

با استفاده از راه‌اندازی تجارت الکترونیک بدون سر، می‌توانید دقیقاً از همان داده‌ها در چندین پلتفرم استفاده کنید. این امر حفظ حضور فعال را آسان تر می کند روی کانال های متعدد

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

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

همانطور که پروژه شما در حال تکامل است، ممکن است نیاز به استفاده از ابزارهای جدید یا تغییر به فناوری جایگزین داشته باشید. خبر خوب این است که می‌توانید بخش‌هایی از پشته هدلس خود را تغییر دهید یا به یک چارچوب جایگزین بروید بدون اینکه بر CMS شما تأثیر بگذارد. این به شما امکان می دهد تا به طور مداوم پروژه خود را به منظور برآورده کردن نیازهای در حال تحول خود تنظیم کنید.

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

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

چگونه مشکلات بالقوه را در وردپرس Headless شناسایی و برطرف کنیم؟

وردپرس بدون سر به شما آزادی طراحی و توسعه بیشتری می دهد. با این حال، این انعطاف پذیری هزینه دارد.

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

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

حتی زمانی که سایت شما راه‌اندازی می‌شود، یک سایت وردپرس بدون هد معمولاً به نگهداری مداوم بیشتری نیاز دارد. از آنجایی که Front-end را به صورت دستی ساخته اید، باید هر گونه تغییر را به صورت دستی نیز اعمال کنید. این شامل انتشار محتوای جدید و ویرایش طراحی سایت شما می شود.

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

مگر اینکه راه حل خود را توسعه دهید، وردپرس بدون هد یک ویرایشگر یا گزینه پیش نمایش زنده What You See Is What You Get (WYSIWYG) ارائه نمی دهد. این می تواند قضاوت در مورد روش نمایش محتوای شما را دشوار کند روی قسمت جلویی

چگونه یک وب سایت وردپرس بدون سر ایجاد کنیم؟

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

چگونه یک سایت وردپرس بدون سر با یک چارچوب React راه اندازی کنیم

ساختن یک فرانت اند برای CMS وردپرس می تواند کاری زمان بر و پیچیده باشد. به همین دلیل، بسیاری از توسعه دهندگان استفاده از یک فریم ورک را انتخاب می کنند.

شما می توانید یک فرانت اند سفارشی وردپرس با استفاده از کتابخانه جاوا اسکریپت React. این منبع محبوب همه چیزهایی را که برای دسترسی به داده های ذخیره شده در CMS خود از طریق WordPress REST API نیاز دارید، دارد:

فریم ورک React همچنین وعده می دهد که پروژه بدون هد شما را با حذف نیاز به رندر مجدد سوپرشارژ می کند. این بدان معناست که کد اصلی پروژه شما فقط یک بار بارگذاری می شود.

اگر وضعیت یک مؤلفه تغییر کند، چارچوب React فقط محتوای آسیب‌دیده را دوباره ارائه می‌کند. این باعث می‌شود که چارچوب‌های مبتنی بر React در بین توسعه‌دهندگانی که قصد دارند SPA بسازند محبوبیت خاصی پیدا کنند.

در ابتدا برای استفاده با فیس بوک راه اندازی شد، بسیاری از نام های بزرگ اکنون این فناوری محبوب را پذیرفته اند. این شامل Airbnb، Dropbox، Netflix و Reddit است.

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

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

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

دیگر فریم ورک های محبوب مبتنی بر React عبارتند از: پروژه متن باز Gatsby.js و Next.js توسط Vercel. با گزینه های بسیار زیادی که می توانید انتخاب کنید، می توانید خرید کنید و بهترین مناسب را برای پروژه خاص خود بیابید.

روش راه اندازی یک وب سایت وردپرس بدون سر با استفاده از یک افزونه

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

بیایید نگاهی به دو افزونه قدرتمندی بیندازیم که می توانید از آنها استفاده کنید.

1. WPGraphQL

WPGraphQL یک افزونه رایگان است که برای کمک به شما در واکشی داده ها از وردپرس بدون سر طراحی شده است. این افزونه همراه با محیط توسعه یکپارچه GraphQL (IDE)، که به شما امکان می دهد طرح GraphQL پروژه خود را مرور کنید و پرس و جوها و جهش ها را آزمایش کنید.

WPGraphQL سایت وردپرس شما را به GraphQL API تبدیل می کند. این بدان معناست که شما می توانید با استفاده از هر کلاینتی که قادر به ارسال درخواست HTTP به نقطه پایانی GraphSQL باشد، با این افزونه تعامل کنید.

WPGraphQL برای استفاده با فریمورک هایی مانند مشتری آپولو، Next.js و Gatbsy.js. اگر از گتسبی استفاده می کنید، ممکن است بخواهید آن را بررسی کنید افزونه منبع گتسبی برای وردپرس.

با استفاده از این افزونه منبع، می‌توانید ساخت‌های افزایشی سریع انجام دهید و محتوای موجود در CMS خود را پیش‌نمایش کنید. به همین دلیل، اگر قصد استفاده از Gatsby.js را دارید، ممکن است بخواهید WPGraphQL را انتخاب کنید.

ویژگی های کلیدی:

• طرح و API قابل توسعه GraphQL برای وب سایت وردپرس شما
• دسترسی به چندین منبع ریشه
• توانایی دنبال کردن مراجع بین منابع متصل
• مستندات گسترده

قیمت گذاری: شما می توانید این افزونه را به صورت رایگان نصب کنید.

2. CoCart – تجارت الکترونیک بدون سر

خرید آنلاین از چیزی که صرفاً انجام می شود تکامل یافته است روی کامپیوترها در سه ماهه سوم سال 2020، گوشی های هوشمند تولید شدند 56 درصد از سفارشات خرید آنلاین در امریکا. این توضیح می دهد که چرا ما شاهد این همه فروشگاه آنلاین هستیم که برنامه های تلفن همراه را ایجاد می کنند.

اگر در حال راه اندازی یک فروشگاه آنلاین در چندین پلتفرم هستید، ممکن است بخواهید از راه حلی مانند WooCommerce به عنوان بخشی از راه اندازی هدلس خود استفاده کنید. با این حال، WooCommerce به طور پیش‌فرض از سبد خرید از طریق REST API پشتیبانی نمی‌کند.

این جایی است که CoCart وارد می شود. این افزونه رایگان یک API را ارائه می دهد که به شما امکان می دهد به سبد خرید WooCommerce به عنوان بخشی از راه اندازی هدلس خود دسترسی داشته باشید. همچنین از مشتریانی پشتیبانی می‌کند که می‌خواهند به‌عنوان مهمان چک کنند، و می‌تواند احراز هویت اولیه را انجام دهد.

اگر ادمین یا مدیر فروشگاه هستید، می‌توانید از این افزونه برای مشاهده سبد خرید در جلسه، از جمله محصولاتی که مشتریان به سبد خرید خود اضافه کرده‌اند، استفاده کنید. این باعث می شود CoCart یک افزونه بسیار توصیه شده برای راه اندازی تجارت الکترونیک بدون سر باشد.

ویژگی های کلیدی:

• محصولات ساده، متغیر و گروه بندی شده را به سبد خرید WooCommerce اضافه کنید
• موارد را به‌روزرسانی، حذف و بازیابی کنید
• از نرم افزار در چندین دامنه استفاده کنید
• از بیش از 100 مورد را انتخاب کنید فیلترهای کوگارت و قلاب های اکشن

قیمت گذاری: این افزونه به صورت رایگان موجود است دانلود.

چگونه بهترین روش ها را برای وردپرس Headless پیاده سازی کنیم؟

یک سایت وردپرس بدون سر، چیزهای زیادی برای ارائه دارد، به ویژه از نظر انعطاف پذیری و قابلیت استفاده مجدد. با این حال، مراحلی وجود دارد که می توانید برای استفاده حداکثری از تنظیمات هدلس جدید خود بردارید.

به طور سنتی، صاحبان وب سایت وردپرسی، بهینه سازی سایت برای موتورهای جستجو (SEO) را با استفاده از یک افزونه اختصاصی مانند Yoast SEO مدیریت می کنند.

با این حال، وردپرس هدلس آن سادگی پلاگین و بازی را که از یک افزونه SEO به دست می آورید، به شما نمی دهد:

برای اطمینان از اینکه محتوای شما در موتورهای جستجو رتبه بالایی دارد، مهم است که از یک طرح نشانه گذاری داده های ساخت یافته استفاده کنید. Schema.org.

نشانه گذاری طرحواره ساختاری را ارائه می دهد که به موتورهای جستجو کمک می کند تا محتوای شما را درک کنند و سپس آن را بر اساس آن رتبه بندی کنند.

هنگامی که به عنوان یک CMS بدون هد استفاده می شود، وردپرس فقط به یک پشته MySQL و PHP ساده نیاز دارد که آن را به گزینه ای سبک و با کارایی بالا تبدیل می کند. با این حال، چیزی به نام محتوایی که بارگیری می شود وجود ندارد هم به سرعت. با در نظر گرفتن این موضوع، می‌توانید سرعت وردپرس خود را با استفاده از شبکه تحویل محتوا (CDN) برای کاهش تأخیر افزایش دهید.

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

نتیجه

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

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

1. چارچوب های مبتنی بر واکنش: این شامل چارچوب هایی مانند Frontity است که به طور خاص برای وردپرس طراحی شده است.
2. WPGraphQL: اگر از چارچوب گتسبی استفاده می کنید، ممکن است بخواهید این افزونه رایگان را بررسی کنید.
3. ووکامرس بدون سر که توسط CoCart طراحی شده است: یک افزونه تجارت الکترونیک که پشتیبانی بدون سر به سبد خرید WooCommerce اضافه می کند.

آیا در مورد شروع کار با وردپرس بدون هد یا هر یک از ابزارهای مورد بحث در این پست سؤالی دارید؟ در بخش نظرات زیر به ما اطلاع دهید!