البرنامج التعليمي: أنشئ موقعك باستخدام WordPress و Gatsby

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

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

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

ما هو غاتسبي؟

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

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

بالمقارنة مع مولدات المواقع الثابتة الأخرى ، فإن Gatsby جديد نسبيًا. ومع ذلك ، فإن هذا لم يمنع العديد من الشركات من تجربتها. واحدة من أكبر الأمثلة هي مدونة Airbnb Engineering & Data Science ، التي يتم تشغيلها بواسطة Gatsby.

لماذا تستخدم Gatsby مع WordPress؟

نظرًا لأنه من الممكن إنشاء موقع ويب ثابت باستخدام WordPress ، فقد تتساءل عن سبب استخدام WordPress و Gatsby معًا. بينما يعد WordPress قويًا من تلقاء نفسه ، يقدم Gatsby بعض المزايا التي قد ترغب فيها لموقع الويب الخاص بك ، بما في ذلك سرعات أعلى وتكاليف أقل للخادم. يمكن أن يساعدك فهم مزايا وعيوب Gatsby في اتخاذ قرار مستنير.

إيجابيات استخدام Gatsby

يقدم Gatsby مجموعة من المزايا التي يمكن لأي موقع ويب الاستفادة منها ، بما في ذلك:

• سرعات تحميل أسرع. يتم تحميل مواقع الويب الثابتة بشكل أسرع من المواقع الديناميكية ، وقد يؤثر ذلك على تحسين محرك البحث (SEO). سرعات تحميل الصفحة هي إشارة تستخدمها محركات البحث ، وتؤثر على معدلات الارتداد لموقع الويب الخاص بك.
• انخفاض تكاليف الخادم. تتطلب مواقع الويب الديناميكية حزم وخوادم تقنية متوافقة. المواقع الثابتة لا تفعل ذلك ، ويمكنك استضافتها على أي خادم. هذا يمكن أن يقلل من تكاليف الخادم الخاص بك.
• تحسين الأمن. توفر مواقع الويب الثابتة أمانًا محسنًا. لا تقدم ملفات HTML الثابتة التي يتم تقديمها الكثير للمخترقين للعمل معها. إذا فقدت هذه الملفات لأي سبب من الأسباب ، يمكنك أيضًا إعادة إنشائها باستخدام Gatsby.

يمكن أن يستفيد موقع الويب الخاص بك من كل هذه المزايا. ومع ذلك ، يجب أن تزنهم مقابل عيوب استخدام Gatsby.

سلبيات استخدام Gatsby

لا يوجد نظام برمجي مثالي ، ولدى Gatsby بعض العيوب التي تحتاج إلى معرفتها:

• المعرفة التقنية المطلوبة. تم بناء Gatsby على ReactJS ويستخدم GraphQL. لاستخدامها ، من الضروري فهم بعض جافا سكريبت. ستحتاج أيضًا إلى معرفة أساسية بـ GraphQL لإنشاء موقع ويب.
• لا يوجد محتوى ديناميكي. يقوم Gatsby بإنشاء مواقع ويب ثابتة فقط. إذا كنت تريد محتوى ديناميكيًا مثل نماذج الاتصال ، فيجب إعادة توجيهها من خلال موفر تابع لجهة خارجية.

في حين أن العديد من المطورين يجدون أن إيجابيات Gatsby تفوق السلبيات ، فإن كلاهما مهم لفهمه مسبقًا.

كيف أستخدم Gatsby مع WordPress؟

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

الخطوة 1: تحقق من المتطلبات الأساسية

قبل أن تتمكن من تثبيت Gatsby ، تحتاج إلى تثبيت NodeJS و npm في بيئة موقع الويب الخاص بك. Git مطلوب أيضًا لإدارة الكود. تختلف خطوات تثبيت المتطلبات الأساسية وفقًا لنظام التشغيل الذي تقوم بتشغيله.

إذا كان لديك Windows ، فيمكنك تثبيت NodeJS و Git من خلال المثبت في صفحة التنزيل. نفس الشيء ممكن مع Mac. ومع ذلك ، إذا قمت بتشغيل Linux ، فستكون هناك حاجة إلى مثبت حزمة مثل apt.

الخطوة الثانية: تثبيت Gatsby

بعد تثبيت NodeJS و Git ، يمكنك البدء في تثبيت Gatsby. أسهل طريقة للقيام بذلك هي استخدام الأمر التالي في محطة البرنامج:

 npm install -g gatsby-cli

يقوم هذا الأمر بتشغيل برنامج التثبيت تلقائيًا. سيقوم أولاً بتنزيل وتثبيت جميع التبعيات قبل تثبيت Gatsby. بمجرد اكتمال ذلك ، يمكنك البدء في إنشاء موقع Gatsby الأول الخاص بك.

الخطوة 3: قم بإنشاء موقع Gatsby

لإنشاء موقع Gatsby الخاص بك ، ستحتاج إلى تشغيل الأمر التالي:

 gatsby new gatsby-site

هذا الأمر ينسخ قالب Gatsby للمبتدئين ويضعه في الدليل / gatsby-wordpress . بمجرد اكتمال الاستنساخ والتثبيت ، يمكنك فتح إصدار تطوير الموقع. يتم ذلك باستخدام الأمر التالي:

 gatsby develop

أثناء تشغيل بيئة التطوير ، يمكنك زيارة موقع الويب الجديد محليًا. في متصفح الويب الخاص بك ، أدخل http: // localhost: 8000 وسيتم فتح القالب الافتراضي الخاص بك.

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

 gatsby build

ينشئ هذا الأمر أيضًا حزم أكواد JavaScript قبل التوجيه لموقعك على الويب. يمكنك بعد ذلك استخدام الأمر serve لعرض موقع الويب الجديد محليًا:

 gatsby serve

لن يعمل هذا الأمر إلا إذا قمت بالفعل بتشغيل الأمر build.

الخطوة 4: قم بتوصيل Gatsby بـ WordPress

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

لتوصيل الاثنين ، ستحتاج إلى تثبيت مكون Gatsby الإضافي لـ WordPress. الأمر التالي سيهتم بذلك:

 npm install gatsby-source-wordpress

بعد تثبيت المكون الإضافي ، يمكنك البدء في تكوين Gatsby.

الخطوة 5: تكوين Gatsby

لتكوين Gatsby ، تحتاج إلى العمل مع ملف gatsby-config.js . في هذا الملف ، أضف الكود التالي:

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

قم بتحديث هذا الرمز للإشارة إلى موقع WordPress الخاص بك. إذا كان موقع الويب الخاص بك مستضافًا محليًا ، فيمكنك بعد baseUrl استخدام localhost: 8888 / wordpress بدلاً من عنوان URL لموقع الويب الخاص بك. بعد حفظ الملف ، ستحتاج إلى إنشاء قوالب صفحتك.

الخطوة السادسة: بناء قوالب الصفحة

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

في ملف gatsby-node.js ، أضف الكود التالي:

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

بعد استدعاء جميع البيانات من WordPress ، سيقوم Gatsby بإنشاء صفحة لكل منشور. باستخدام الأمر Develop ، يمكنك الانتقال إلى كل صفحة جديدة باستخدام عنوان URL الذي تم إنشاؤه.

هل يجب علي استخدام Gatsby لـ WordPress؟

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

افعل أقصى استفادة من موقعك على WP Engine

Gatsby هو منشئ مواقع ويب ثابت فعال يمكنك دمجه بسهولة مع WordPress. هناك خطوات عليك اتباعها لتثبيت النظام وتكوينه. تحتاج أيضًا إلى الحصول على بعض المعرفة بـ Gatsby و GraphQL قبل أن تبدأ.

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