كيفية إنشاء موقع ويب باستخدام Gatsby و WordPress

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

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

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

باختصار: بناء موقع ويب عالي الأداء باستخدام Gatsby و WordPress

• استخدم ووردبريس كنظام إدارة محتوى بدون واجهة أمامية، وجاتسبي كمولد مواقع ثابتة، لدمج مرونة إدارة المحتوى مع سرعة تحميل الصفحات الفائقة.

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

• قم بتحسين موقعك باستخدام أفضل ممارسات تحسين محركات البحث، والصور المتجاوبة، والبيانات الوصفية من إضافات مثل Yoast SEO باستخدام WPGraphQL.

• قم بالنشر على منصات استضافة ثابتة مثل Netlify أو Vercel أو Gatsby Cloud مع النشر المستمر للحفاظ على تحديث المحتوى تلقائيًا.

لماذا تختار Gatsby مع WordPress لموقعك الإلكتروني؟

إن دمج Gatsby و WordPress يوفر "أفضل ما في العالمين". ستحصل على تجربة التحرير الغنية لأشهر نظام إدارة محتوى في العالم وسرعة مولد المواقع الثابتة القائم على React.

حسّن سرعة وأداء موقعك الإلكتروني باستخدام Gatsby

يقوم موقع ووردبريس القياسي بإنشاء صفحاته ديناميكيًا كلما طلبها المستخدم. يتطلب هذا من الخادم الاستعلام عن قاعدة البيانات، ومعالجة نصوص PHP البرمجية، وعرض صفحات HTML بشكل فوري. ورغم أن التخزين مفيد، إلا أنه غالبًا ما يؤدي إلى بطء تحميل الصفحات خلال فترات ذروة الزيارات.

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

تحقق معظم مواقع Gatsby درجات Lighthouse أعلى بكثير مقارنةً بالمواقع الديناميكية. من خلال عرض محتوى مُجهز مسبقًا، تضمن لزوارك تجربة سريعة قدر الإمكان.

استخدم ووردبريس كنظام إدارة محتوى مرن بدون واجهة أمامية

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

في هذه البنية، يقوم Gatsby بجلب البيانات من واجهة برمجة تطبيقات WordPress (وتحديدًا عبر GraphQL) وبناء الموقع.

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

يضمن هذا الفصل أن يتمكن المطورون من التركيز على واجهة المستخدم بينما يركز منشئو المحتوى على محتوى المنشور.

تعزيز قابلية التوسع والأمان باستخدام المواقع الثابتة

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

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

علاوة على ذلك، يسهل توسيع نطاق الصفحات الثابتة. ولأن الناتج يتكون من HTML وCSS وJavaScript بسيطة، يمكن استضافته على شبكة توصيل المحتوى (CDN).

هذا يعني أن موقعك الذي يعمل بنظام Gatsby و WordPress يمكنه التعامل مع الارتفاعات الهائلة في حركة المرور دون أن يتعطل، حيث يتم توزيع الملفات الثابتة عبر الخوادم في جميع أنحاء العالم.

المتطلبات الأساسية لبناء موقع ويب باستخدام Gatsby و WordPress

قبل الخوض في الكود، تأكد من تثبيت الأدوات اللازمة. ستحتاج إلى فهم أساسي لـ React وواجهة سطر الأوامر.

• Node.js و npm: يتطلب Gatsby وجود Node.js. قم بتنزيل وتثبيت أحدث إصدار LTS من موقع Node.js الرسمي.

• واجهة سطر أوامر Gatsby: تُسهّل هذه الأداة إنشاء موقع Gatsby جديد. ثبّتها عالميًا باستخدام سطر الأوامر: npm install -g gatsby-cli

• تثبيت ووردبريس: أنت بحاجة إلى نسخة ووردبريس فعّالة. يمكن استضافتها محليًا (باستخدام أدوات مثل Local by Flywheel) أو على خادم استضافة ويب.

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

• إضافة WPGatsby: تعمل هذه الإضافة جنبًا إلى جنب مع WPGraphQL للحفاظ على مخطط ووردبريس وتمكين ميزات مثل معاينات المحتوى.

خطوات بناء موقع ويب باستخدام Gatsby و WordPress

والآن بعد استيفاء المتطلبات الأساسية، دعونا نلقي نظرة على الدليل خطوة بخطوة لإنشاء موقع Gatsby الخاص بك.

الخطوة 1: إعداد مشروع Gatsby الخاص بك باستخدام WordPress

الخطوة الأولى هي تهيئة المشروع وربطه بمصدر البيانات الخاص بك.

إنشاء موقع Gatsby جديد باستخدام قوالب WordPress الجاهزة

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

افتح نافذة الطرفية وقم بتشغيل الأمر التالي:

gatsby new my-wordpress-gatsby-site cd my-wordpress-gatsby-site

يُنشئ هذا الأمر مجلدًا يحتوي على جميع ملفات التكوين اللازمة. بعد ذلك، قم بتثبيت إضافات Gatsby المصدرية للاتصال بـ WordPress:

npm install gatsby-source-wordpress

قم بتهيئة ملف gatsby-config.js لاستيراد البيانات من ووردبريس

افتح ملف gatsby-config.js في محرر النصوص. هذا الملف هو أساس إعدادات Gatsby. عليك إضافة إضافة gatsby-source-wordpress إلى مصفوفة الإضافات.

تقوم هذه الإضافة المصدرية بربط مشروع Gatsby الخاص بك بعنوان URL الأساسي لمصدر WordPress.

module.exports = { plugins: [ { resolve: `gatsby-source-wordpress`, options: { url: `https://your-wordpress-site.com/graphql`, }, }, `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, ], }

الفعلية نهاية واجهة برمجة تطبيقات ووردبريس. يحدد هذا الإعداد لـ Gatsby مكان البحث عن بيانات ووردبريس.

ابدأ تشغيل خادم التطوير واستكشف بيانات GraphQL

الآن، قم بتشغيل خادم التطوير للتحقق من الاتصال.

تطوير غاتسبي

بمجرد بدء تشغيل الخادم، يمكنك الوصول إلى مستكشف GraphiQL (عادةً على الرابط http://localhost:8000/___graphql). تتيح لك هذه الأداة فحص جميع البيانات المستخرجة من لوحة تحكم ووردبريس الخاصة بك.

يمكنك كتابة استعلام GraphQL لعرض منشورات وصفحات ومؤلفي ووردبريس. هذا يضمن أن Gatsby يجلب البيانات بشكل صحيح.

الخطوة الثانية: إنشاء صفحات ديناميكية من محتوى ووردبريس

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

استعلام عن محتوى ووردبريس بكفاءة باستخدام GraphQL

لإنشاء الصفحات، عليك أولاً الاستعلام عن البيانات. نستخدم ملف gatsby-node.js للتحكم في كيفية إنشاء Gatsby للصفحات.

ستقوم بكتابة استعلام لتحديد جميع البيانات اللازمة لصفحاتك، مثل المعرف والاسم المستعار وURI.

// gatsby-node.js exports.createPages = async ({ actions, graphql, reporter }) => { const { createPage } = actions const result = await graphql(` { allWpPost { nodes { id uri } } } `) if (result.errors) { reporter.panicOnBuild("خطأ في تحميل المحتوى من ووردبريس", result.errors) return } const posts = result.data.allWpPost.nodes // ... منطق إنشاء الصفحة يتبع }

إنشاء قوالب قابلة لإعادة الاستخدام للقوائم والمنشورات الفردية

لا يمكنك إنشاء صفحة منشور بدون قالب. أنشئ ملفًا في المسار src/templates/blog-post.js. سيقوم هذا المكون بعرض منشور المدونة بشكل فردي.

داخل src/templates/blog-post.js، ستقوم باستيراد مكونات التخطيط وتصدير استعلام يجلب محتوى المنشور المحدد بناءً على المعرف الذي تم تمريره من gatsby-node.js.

import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" const BlogPost = ({ data }) => { const post = data.wpPost return (<Layout><h1 style=";text-align:right;direction:rtl"> {post.title}</h1><div dangerouslySetInnerHTML={{ __html: post.content }} / style=";text-align:right;direction:rtl"></Layout> ) } export const query = graphql` query($id: String!) { wpPost(id: { eq: $id }) { title content } } ` export default BlogPost

في ملف gatsby-node.js، قم بالتكرار عبر المنشورات واستخدم إجراء createPage. وجّه مسار المكون إلى ملف src/templates/blog-post.js الخاص بك.

التنقل بين الصفحات باستخدام مكون Gatsby Link

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

import { Link } from "gatsby" // داخل مكونك، يتم ربط المنشورات<Link to={post.uri}><h2 style=";text-align:right;direction:rtl"> {post.title}</h2></Link>

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

الخطوة 3: تحسين محركات البحث لموقعك الإلكتروني المبني على Gatsby و WordPress

من أهم فوائد مولد المواقع الثابتة تحسين محركات البحث (SEO). ومع ذلك، يجب عليك ضبط إعداداته بنفسك.

تطبيق أفضل ممارسات تحسين محركات البحث الأساسية في Gatsby

ينبغي عليك إنشاء مكون SEO قابل لإعادة الاستخدام. سيتولى هذا المكون معالجة إضافة علامات التعريف الوصفية إلى ملفات HTML الثابتة.

قم باستيراد مكونات تحسين محركات البحث إلى كل قالب صفحة.

export const Head = ({ data }) =><SEO title="{data.wpPost.title}" />

تحسين البيانات الوصفية باستخدام إضافات WPGraphQL لتحسين محركات البحث

إذا كنت تستخدم AIOSEO أو RankMath على مدونتك في ووردبريس، يمكنك استيراد بياناتها الوصفية إلى Gatsby. ثبّت إضافة wp-graphql-rankmath-seo على ووردبريس.

يُتيح هذا الوصول إلى حقل تحسين محركات البحث (SEO) في استعلام GraphQL الخاص بك. يمكنك الآن الوصول إلى الأوصاف التعريفية والعناوين المخصصة المُحددة في لوحة تحكم ووردبريس. يضمن هذا أن استراتيجية المحتوى الخاصة بك في نظام إدارة المحتوى (CMS) تُترجم بسلاسة إلى موقع Gatsby الإلكتروني.

تحسين الصور والوسائط لتحسين ظهورها في نتائج البحث

قد تؤثر الصور الكبيرة سلبًا على أداء موقعك الإلكتروني. يتميز Gatsby بقدرته الفائقة على تحسين الصور. باستخدام إضافة gatsby-plugin-image، يمكنك إنشاء صور متجاوبة يتم تحميلها عند الحاجة تلقائيًا.

عند الاستعلام عن منشورات ووردبريس، اطلب حقل gatsbyImage للصور المميزة. سيقوم Gatsby بمعالجة الوسائط من عنوان URL الأساسي لمصدر ووردبريس وإنشاء نسخ مُحسّنة في المجلد العام أثناء عملية البناء.

الخطوة الرابعة: نشر واستضافة موقع Gatsby الإلكتروني

تم بناء مشروع Gatsby الخاص بك؛ الآن يحتاج إلى أن يتم تشغيله.

أنشئ موقع ويب جاهز للإنتاج باستخدام Gatsby

لإعداد موقعك للنشر، قم بتشغيل أمر البناء: gatsby build

يُشغّل هذا الأمر عملية بناء Gatsby. يقوم بتجميع مكونات React الخاصة بك، وجلب البيانات من WordPress، وإخراج ملفات ثابتة (HTML، CSS، JS) إلى المجلد العام. يمكنك اختبار ذلك محليًا باستخدام Gatsby serve.

اختر أفضل منصة استضافة وشبكة توصيل محتوى (CDN) لضمان سرعة التوصيل

يمكنك استضافة ووردبريس في أي مكان، ولكن يجب أن يكون موقع Gatsby الخاص بك على استضافة ثابتة متخصصة. تشمل الخيارات الشائعة Netlify وVercel وGatsby Cloud.

هذه المنصات مُحسّنة للمواقع الثابتة. ما عليك سوى ربط مستودع GitHub الخاص بك. في كل مرة تقوم فيها برفع الكود، تُشغّل المنصة عملية بناء Gatsby وتنشر الصفحات الثابتة الجديدة على شبكة توصيل محتوى عالمية (CDN).

إعداد النشر المستمر باستخدام روابط ووردبريس

تريد تحديث موقعك تلقائيًا عند نشر أي مقال جديد على مدونتك في ووردبريس، دون الحاجة إلى إعادة بناء الموقع يدويًا في كل مرة.

لأتمتة هذه العملية، قم بتكوين روابط الويب الخاصة بـ WordPress.

• انتقل إلى مزود الاستضافة الخاص بك (مثل Netlify) وقم بإنشاء عنوان URL "Build Hook".
• في ووردبريس، قم بتثبيت إضافة WPGatsby أو إضافة webhook.
• ألصق رابط Build Hook في الإعدادات.

الآن، عند النقر على "تحديث" أو "نشر" في أي منشور على ووردبريس، يتم تشغيل عملية بناء على خادم الاستضافة الخاص بك. ويبقى موقع Gatsby ووردبريس الخاص بك متزامنين تلقائيًا.

الخطوة 5: صيانة وتحديث موقع Gatsby و WordPress الخاص بك

الصيانة ضرورية للصحة على المدى الطويل.

• حافظ على تحديث تبعيات ووردبريس وجاتسبي: قم بتحديث تثبيت ووردبريس والإضافات بانتظام لسدّ الثغرات الأمنية. وبالمثل، حافظ على تحديث تبعيات مشروع جاتسبي. استخدم أداة npm outdated للتحقق من وجود حزم قديمة. يُعدّ تحديث إضافة جاتسبي المصدرية لووردبريس أمرًا بالغ الأهمية لضمان التوافق مع أحدث تغييرات واجهة برمجة تطبيقات ووردبريس.

• راقب أداء موقعك الإلكتروني ومؤشرات تحسين محركات البحث بانتظام: استخدم أدوات مثل Google Search Console و PageSpeed ​​Insights. نظرًا لأنك تستخدم ملفات ثابتة، فمن المفترض أن تكون أوقات استجابة الخادم منخفضة. إذا لاحظت انخفاضًا في الأداء، فتحقق مما إذا كنت تُحمّل عددًا كبيرًا جدًا من البرامج النصية الخارجية أو الملفات غير المُحسّنة في ملف CSS الخاص بك.

• إدارة تحديثات المحتوى وإعادة بناء المواقع باستخدام Gatsby: قد يقوم المحررون أحيانًا بتغيير الحقول المخصصة أو هياكل القوائم. تأكد من أن فريقك على دراية بأن التغييرات في لوحة تحكم WordPress قد تستغرق بضع دقائق قبل أن تظهر على موقع Gatsby المباشر نظرًا لوقت البناء. استخدام Gatsby Cloud أو خدمات الاستضافة التي تدعم البناء التدريجي يمكن أن يقلل وقت الانتظار هذا بشكل كبير.

التحديات الشائعة عند بناء المواقع باستخدام Gatsby و WordPress

على الرغم من أن مجموعة أدوات Gatsby و WordPress قوية، إلا أنها تأتي مع تحديات.

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

• معاينة المحتوى: في قوالب ووردبريس التقليدية، يمكنك معاينة المسودة فورًا. أما في حالة استخدام قالب بدون واجهة أمامية، فيجب عليك ضبط منطق المعاينة باستخدام إضافة WPGatsby حتى يتمكن المحررون من رؤية محتوى منشوراتهم قبل نشرها.

• توافق الإضافات: لا تعمل جميع إضافات ووردبريس مع بيئة التشغيل بدون واجهة أمامية. أدوات البناء المرئية عادةً لا تعمل

الخلاصة: فوائد Gatsby و WordPress للمواقع الإلكترونية الحديثة

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

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

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

بفضل الفكرة الأساسية والخطوات الموضحة أعلاه، أنت الآن جاهز لتحديث تطوير مواقع الويب . استغل قوة المواقع الثابتة ومرونة ووردبريس لبناء شيء استثنائي حقًا.

الأسئلة الشائعة حول إنشاء موقع باستخدام Gatsby و WordPress