كيفية إنشاء موقع WordPress بدون رأس باستخدام Faust.js (في 9 خطوات)

إذا كنت بحاجة إلى تشغيل WordPress بدون رأس ، فإن إطار عمل الجودة أمر لا بد منه. ومع ذلك ، حتى مع القليل من المساعدة من إطار عمل حديث ، قد لا تزال تكافح لمعاينة المحتوى الخاص بك بشكل فعال.

وهنا يأتي دور Faust.js. يعمل هذا الإطار الجديد على تسخير قوة Next.js و React ، ويجمع هذا مع ميزات معاينة ما بعد المريحة. باستخدام Faust.js ، يمكنك عرض المحتوى الخاص بك قبل الضغط على Publish ، تمامًا كما هو الحال مع موقع WordPress التقليدي.

في هذه المقالة ، سوف نستكشف سبب رغبتك في استخدام Faust.js لمشروع WordPress التالي بدون رأس. ثم سنوضح لك كيفية إعداد هذا الإطار الجديد وبناء واجهة أمامية بسيطة. هيا بنا نبدأ!

لماذا قد ترغب في تشغيل موقع WordPress مقطوع الرأس

يتكون نظام إدارة المحتوى (CMS) النموذجي من واجهة أمامية ونهاية خلفية ، ووردبريس ليس استثناءً. ومع ذلك ، من الممكن تشغيل WordPress بدون رأس.

يشير "الرأس" إلى طبقة العرض ، بينما "الجسم" هو المكان الذي يتم فيه تخزين المحتوى وتأليفه. عن طريق إزالة الواجهة الأمامية (الرأس) من النهاية الخلفية (الجسم) ، يمكنك تشغيل WordPress بدون رأس.

مع مشروع بدون رأس ، ستستمر في استخدام لوحة معلومات وأدوات WordPress المألوفة. ومع ذلك ، فأنت حر في تصميم الواجهة الأمامية الخاصة بك ، بغض النظر عن قيود WordPress المعتادة. يمنحك هذا تحكمًا كاملاً في كيفية عرض المحتوى الخاص بك.

قد يكون إنشاء الواجهة الأمامية الخاصة بك أمرًا مثيرًا للاهتمام ، لكنه ليس واضحًا بشكل خاص. لحسن الحظ ، هناك أدوات يمكنها أداء الكثير من الرفع الثقيل نيابة عنك.

يختار العديد من مستخدمي أنظمة إدارة المحتوى بدون رؤوس الاستعانة بأداة مثل Frontity أو إطار عمل Gatsby أو Next.js. ومع ذلك ، كان من الصعب تقليديًا معاينة المنشورات والصفحات على موقع بدون واجهة مستخدم ، حتى عند استخدام إطار عمل. وهنا يأتي دور Faust.js:

تم بناء إطار العمل هذا على Next.js و React ، ويسعى جاهداً لتوفير تجربة نشر تتوافق مع WordPress التقليدي. لتحقيق ذلك ، يقدم Faust.js معاينات محتوى سلسة.

يستخدم Faust.js أيضًا عميل GraphQL. يمكّنك هذا من الاستعلام عن WordPress WPGraphQL API دون الحاجة إلى معرفة استعلامات GraphQL مسبقًا.

بالإضافة إلى ذلك ، يوفر Faust.js آليات مضمنة لمصادقة الواجهة الخلفية لـ WordPress. هذا يجعل من السهل إنشاء محتوى مسور ومواقع للتجارة الإلكترونية باستخدام نظام إدارة المحتوى بدون رأس.

كيفية إنشاء موقع WordPress بدون رأس باستخدام Faust.js (في 9 خطوات)

الآن بعد أن غطينا ماهية Faust.js وبعض فوائده الرئيسية ، دعنا نرى كيف يمكنك البدء في هذا الإطار. إليك كيفية إنشاء CMS مقطوعة الرأس باستخدام Faust.js ، في تسع خطوات.

الخطوة 1: جهز بيئة التطوير الخاصة بك

قبل أن تبدأ ، ستحتاج إلى تثبيت Node.js و Node Package Manager (NPM). ستحتاج أيضًا إلى تثبيت WordPress ، والذي يمكنك إما استضافته محليًا أو على خادم ويب.

ستستخدم أيضًا بعض مكونات WordPress الإضافية. أولاً ، سيقوم المكون الإضافي WPGraphQL بتحويل WordPress إلى واجهة برمجة تطبيقات GraphQL ، جاهزة لاستهلاك مشروعك.

ستحتاج أيضًا إلى WPE مقطوعة الرأس. يوفر هذا المكون الإضافي بعض الميزات الإضافية التي تساعد على ضمان عمل WordPress بشكل صحيح باعتباره CMS بدون رأس. يمكنك تنزيل أحدث إصدار من هذا المكون الإضافي ، ثم تحميله على لوحة تحكم WordPress الخاصة بك.

لمساعدتك في بدء استخدام إطار عمل Faust.js ، ستستخدم مشروع بدء إنشاء التطبيق التالي. يؤدي هذا إلى إنشاء تطبيق Next.js bootstrapped مع جميع التكوينات والملفات الضرورية الموجودة بالفعل. يمكنك بعد ذلك استخدام هذا كأساس لمشروع Faust.js مقطوع الرأس.

يمكنك تثبيت create-next-app باستخدام أداة npx المضمنة في NPM. في نافذة Terminal أو نافذة موجه الأوامر المحلية ، قم بتشغيل ما يلي:

 npx create-next-app faust-headless-demo

سيؤدي هذا إلى إنشاء مشروع faust-headless-demo في دليل المستخدمين المحليين للكمبيوتر الخاص بك. بمجرد اكتمال هذه العملية ، ستطالبك Terminal ببدء تشغيل تطبيق Next.js الخاص بك باستخدام الأوامر التالية:

 cd faust-headless-demo npm run dev

تهانينا - لقد نجحت للتو في إنشاء مشروع Next.js! لإلقاء نظرة على هذا التطبيق ، توجه إلى "http: // localhost: 3000" في متصفحك:

يجب أن تشاهد الآن موقع بدء تشغيل Next.js. إذا واجهت رسالة خطأ ، فحاول إعادة تشغيل الأمر npm run dev ، والذي قد يحل المشكلة.

الخطوة 2: إعداد TypeScript

يستخدم Faust.js TypeScript ، وهي مجموعة شاملة مكتوبة من JavaScript تضيف فحصًا لنوع وقت الترجمة. يمكّنك هذا من اكتشاف الأخطاء في وقت الترجمة ، بدلاً من الانتظار حتى وقت التشغيل. لتثبيت TypeScript ، قم بتشغيل الأوامر التالية في Terminal الخاص بك:

 npm install --save-dev @types/react npm install typescript --save-dev

الآن ، أنت بحاجة إلى إنشاء ملف tsconfig.json . يحدد هذا الملف خيارات المترجم المطلوبة لتشغيل مشروعك:

 npx tsc --init

بمجرد إعداد TypeScript ، ستحتاج إلى تحويل بعض ملفات JavaScript إلى تنسيق TypeScript. انتقل إلى دليل المستخدمين المحلي الخاص بك ، والذي يجب أن يحتوي على دليل faust-headless-demo جديد:

داخل faust-headless-demo ، افتح دليل الصفحات . يمكنك الآن إعادة تسمية ملف _app.js إلى _app.tsx واستبدال محتوياته بما يلي:

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

بعد ذلك ، أعد تسمية pages / index.js إلى pages / index.tsx . تم الآن تكوين تطبيق Next.js الخاص بك بشكل صحيح من أجل TypeScript.

الخطوة 3: إنشاء مكون تفاعل قابل لإعادة الاستخدام

في هذه المرحلة ، يمكنك اختبار مشروعك من خلال عرض بعض المحتوى الوهمي. في دليل الصفحات المحلي لديك ، قم بإنشاء ملف posts.tsx :

في هذا الملف ، ستقوم بإدخال بعض النصوص. إذا ظهر المحتوى التالي في متصفحك ، فستعرف أنه تم تكوين تطبيق Next.js الخاص بك بشكل صحيح:

 export default function PostsPage() { return <h1>The posts page</h1>; }

في المتصفح الخاص بك ، انتقل إلى "http: // localhost: 3000 / posts". يجب أن تشاهد الآن هذا المحتوى الوهمي:

بمجرد التحقق من الإعداد ، فإن الخطوة التالية هي إنشاء مكون React أساسي. ستستخدم هذا المكون في النهاية لعرض قائمة بجميع مشاركات WordPress الخاصة بك.

من أفضل الممارسات أن تضيف كل مكونات React الخاصة بك إلى دليل مخصص. مع وضع ذلك في الاعتبار ، انتقل إلى جذر مشروعك وأنشئ مجلد مكونات :

داخل هذا الدليل ، قم بإنشاء ملف post.tsx . يمكن لمكوِّن React أن يستقبل بيانات من المكوِّن الأصلي عبر خاصيات المكوِّن. في هذا المثال ، ستقوم بتمرير عنوان كل منشور ومحتوى إلى مكون المنشور.

في TypeScript ، يمكنك تحقيق ذلك عن طريق إنشاء واجهة لتخطيط البيانات التي تريد تمريرها. داخل ملف posts.tsx ، أضف ما يلي:

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

لديك الآن مكون React قابل لإعادة الاستخدام. الخطوة التالية هي استخدام هذا المكون في صفحة مشاركاتك.

الخطوة 4: اعرض قائمة المنشورات

للبدء ، افتح ملف pages / posts.tsx . في هذه المرحلة ، ستقدم ببساطة بعض البيانات المزيفة ، والتي ستعرضها بتنسيق قائمة:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

يمكنك إنشاء قائمة بالمشاركات عن طريق التكرار عبر مصفوفة المشاركات. يتطلب هذا منك تقديم مكون Post لكل عنصر:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

احفظ التغييرات وأغلق هذا الملف. ثم توجه إلى "http: // localhost: 3000 / posts":

يجب أن تعرض علامة التبويب هذه الآن قائمة بالمشاركات المزيفة. بمجرد توصيل Faust.js بالنهاية الخلفية لـ WordPress ، ستستخدم مكون React هذا لعرض قائمة منشورات الحياة الواقعية لموقعك على الويب.

الخطوة 5: تكوين إطار عمل Faust.js

أنت جاهز أخيرًا لإعداد إطار عمل Faust.js. للبدء ، قم بتثبيت تبعيات الإنتاج والتطوير عن طريق تشغيل الأوامر التالية:

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

ثم انتقل إلى الدليل الجذر لمشروعك. داخل هذا المجلد ، قم بإنشاء ملف faust.config.js جديد:

ستستخدم هذا الملف لربط Faust.js بنهاية WordPress الخلفية الخاصة بك. يمكنك الآن إدخال الرمز التالي:

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

داخل هذا الدليل ، ستحتاج أيضًا إلى إنشاء ملف env.local . سيشمل هذا جميع متغيرات البيئة الخاصة بك:

داخل .env.local ، أضف الكود التالي. تأكد من استبدال موقعك بعنوان URL الخاص بك:

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

ستحتاج أيضًا إلى استبدال YOUR_PLUGIN_SECRET بسر موقعك بلا رأس. يمكنك العثور على هذه المعلومات بالانتقال إلى الإعدادات> مقطوعة الرأس في لوحة معلومات WordPress الخاصة بك:

سيستخدم Faust.js هذا السر بدون رأس للمصادقة على طلباته إلى WordPress. هذا يجعل من الممكن معاينة محتوى المسودة على واجهتك الأمامية.

الخطوة 6: تكوين عميل GraphQL الخاص بك لـ Faust.js

يستخدم Faust.js GQty باعتباره عميل GraphQL الخاص به. لتهيئة GQty ، أنشئ ملف gqty.config.js في الدليل الجذر لمشروعك:

يمكنك الآن فتح هذا الملف للتحرير. داخل gqty.config.js ، انسخ والصق ما يلي:

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

الخطوة التالية هي إنشاء عميل GQty ، والذي ستستخدمه للاستعلام عن بيانات موقع الويب الخاص بك. في جذر مشروعك ، قم بإنشاء دليل عميل جديد. داخل هذا المجلد ، قم بإنشاء ملف index.ts يحتوي على الكود التالي:

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

يمكنك الآن حفظ التغييرات وإغلاق ملف index.ts . الآن بعد أن أصبحت لديك كل الأجزاء في مكانها الصحيح ، فأنت جاهز لإنشاء مخطط GraphQL.

الخطوة 7: قم بتشغيل إنشاء البرنامج النصي

الخطوة التالية هي إضافة نص إنشاء إلى ملف package.json الخاص بك. سينشئ هذا البرنامج النصي المخطط الضروري بناءً على بنية موقع WordPress الخاص بك.

لإضافة هذا البرنامج النصي ، انتقل إلى المجلد الجذر لمشروعك وافتح ملف package.json . يمكنك الآن إضافة البرنامج النصي الذي تم إنشاؤه إلى كتلة التعليمات البرمجية الأولى:

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

قبل تشغيل هذا البرنامج النصي ، ستحتاج إلى تمكين الاستبطان العام لموقعك على الويب مؤقتًا. في لوحة معلومات WordPress ، انتقل إلى GraphQL> الإعدادات . ثم قم بالتمرير إلى Enable Public Introspection وحدد مربع الاختيار المصاحب له:

انقر فوق حفظ التغييرات . يمكنك الآن تشغيل البرنامج النصي الذي تم إنشاؤه عن طريق إدخال الأمر التالي في Terminal الخاص بك:

 npm run generate

سيقوم هذا البرنامج النصي بإنشاء ملف client / schema.generated.ts . في هذه المرحلة ، يمكنك تعطيل التأمل العام داخل لوحة معلومات WordPress الخاصة بك.

الخطوة 8: تحديد مكون FaustProvider وخطافه

الآن ، تحتاج إلى التفاف تطبيق Next.js الخاص بك باستخدام المكون المدمج <FaustProvider> . سيوفر مكون React ذو الترتيب الأعلى هذا Faust.js مع السياق الذي يحتاجه لجلب البيانات وتخزينها مؤقتًا.

لتحقيق ذلك ، افتح ملف صفحات مشروعك / _app.tsx . يمكنك بعد ذلك استبدال محتوياته بما يلي:

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

أنت الآن جاهز للاستعلام عن البيانات من الواجهة الخلفية لـ WordPress. ستستخدم خطاف usePosts ، والذي يوفر واجهة قياسية تسترجع قائمة المنشورات من واجهة برمجة تطبيقات WordPress بدون رأس.

افتح دليل pages / posts.tsx واحذف جميع كود Lorem Lipsum المعياري. يمكنك بعد ذلك تنفيذ خطاف usePosts :

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

يقوم ملف المخطط الذي أنشأته بتصدير نوع المنشور. هذا يعني أنه يمكنك استخدام هذا النوع لتحديد خاصيات مكون Post. لقبول خاصية Post ، افتح ملف Components / post.tsx وأضف ما يلي:

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

يمكنك تحديد ما إذا كنت تريد تلقي المحتوى الذي تم تقديمه أو المحتوى الأولي. في الكود أعلاه ، أنت تختار المحتوى المعروض.

الخطوة 9: قم بتوصيل Faust.js بموقع WordPress الخاص بك

تتمثل الخطوة الأخيرة في إنشاء رابط بين بياناتك ومكوِّن النشر. هذا يتطلب منك إضافة سطر واحد من التعليمات البرمجية إلى ملف posts.tsx :

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

بعد إجراء هذه التغييرات ، قم بتحميل "http: // localhost: 3000 / posts" في متصفحك. يجب أن تشاهد الآن قائمة بجميع المنشورات من موقع WordPress الخاص بك:

إذا لم تظهر منشوراتك ، فقم بإنهاء عملية التشغيل عن طريق إغلاق الوحدة الطرفية الخاصة بك. ثم افتح نافذة جديدة واستخدم أمر دليل التغيير بحيث تشير المحطة الطرفية إلى مشروع Faust.js المحلي الخاص بك (على سبيل المثال: cd / Users / username / faust-headless-demo ). يمكنك بعد ذلك بدء خادم التطوير ( npm run dev ) ، وحاول تحديث صفحة "http: // localhost: 3000 / posts".

خاتمة

يختار العديد من مطوري WordPress مقطوعة الرأس استخدام إطار عمل. ومع ذلك ، عندما يحين وقت معاينة المحتوى الخاص بك ، تجبرك الكثير من الأطر على تسجيل الدخول إلى موقع خارجي أو عرض صفحة المعاينة داخل إطار.

يهدف Faust.js إلى تقديم تجربة معاينة متسقة وسلسة. عندما تقوم بإعداد إطار العمل هذا ، ستتمكن من عرض المحتوى الخاص بك باستخدام سير عمل WordPress المألوف. ستتمكن أيضًا من الوصول إلى مجموعة أدوات React و Node.js المألوفة.

هل لديك أي أسئلة حول إطار عمل Faust.js؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!