تكوين Gatsby مفتوح المصدر مع WordPress لجلب تجربة مستخدم أكبر والأداء العام. دعنا نتعلم كيفية استخدام مولد الموقع الثابت هذا.

غاتسبي وورد

ملخص

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

ما هو غاتسبي

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

إيجابيات وسلبيات استخدام WordPress و Gatsby

وفقًا للوثائق الرسمية لـ Gatsby 5 ، قاموا بتجميع طاولة ، حيث يكون مزيج Gatsby WordPress رائعًا ولمنه ليس كذلك. من أجل السهولة ، أنا أدرج تلك هنا. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress و Gatsby رائع ل {{LINE_27}} {{LINE_28}} {{LINE_29}} فرق المحتوى المريحة مع تجربة تحرير محتوى WordPress {{LINE_31}} {{LINE_32}} فرق التطوير التي تقدر استخدام تقنيات الشهيرة مفتوحة المصدر {{LINE_34}} {{LINE_35}} إعادة تصميم المواقع مع المحتوى المخزنة بالفعل في WordPress {{LINE_37}} {{LINE_38}} الفرق التي ترغب في امتلاك بياناتها ومكدس التكنولوجيا {{LINE_40}} {{LINE_41}} سير عمل التحكم المعقدة في الوصول أو قيود نمذجة المحتوى {{LINE_43}} {{LINE_44}} المشاريع التي يكون الأمن مهمًا {{LINE_46}} {{LINE_47}} مشاريع الطلب المرتفع حيث يكون الأداء أمرًا بالغ الأهمية {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress و Gatsby ليسوا رائعين ل {{LINE_55}} {{LINE_56}} {{LINE_57}} الفرق التي تتطلب استخدام موضوعات واجهة المستخدم WordPress {{LINE_59}} {{LINE_60}} أولئك الذين يبحثون عن سحابة سحابة بالكامل {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} إلى جانب هذه النقاط الرسمية ، أرغب في إدراج بعض إيجابيات وسلبيات استخدام Gatsby WordPress معًا {{LINE_67}} {{LINE_68}} {{LINE_69}} إيجابيات {{LINE_71}} {{LINE_72}} {{LINE_73}} سرعات تحميل أسرع - مواقع الويب الثابتة يتم تحميلها بشكل أسرع من الديناميكية. نتيجة لذلك ، فإنه يؤثر على صفحتك تعمل على تحميل سرعات وتصنيف كبار المسئولين الاقتصاديين. {{LINE_75}} {{LINE_76}} تكاليف خادم أقل - نظرًا لأن الملفات الثابتة لا تحتاج إلى برامج خاصة ، وبالتالي يمكن تقديم صفحات HTML الثابتة من خوادم أرخص أيضًا. {{LINE_78}} {{LINE_79}} أكثر أمانًا - بالنسبة للمواقع الثابتة ، لا توجد مكونات متحركة من الأجزاء وبالتالي لا توجد فرصة للمتسللين لاستغلال برنامجك. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} سلبيات {{LINE_89}} {{LINE_90}} {{LINE_91}} منحنى التعلم - يتطلب مهارات إضافية للمطورين. مثل التعلم ReactJs و GraphQL {{LINE_93}} {{LINE_94}} فقط المحتوى الثابت - إذا كنت بحاجة إلى تقديم أي محتوى ديناميكي. ثم غاتسبي ليس لك. لا يمكن إلا للملفات الثابتة الخادم. وبالتالي ، لا يمكنك الحصول على أي نظام تعليق يجلب البيانات من قاعدة البيانات. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

كيفية استخدام Gatsby مع WordPress

قبل أن تتمكن من تثبيت Gatsby ، تحتاج إلى تثبيت Nodejs و NPM في بيئة موقع الويب الخاص بك.

الخطوة 1 - تثبيت Gatsby

npm install -g gatsby-cli

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

gatsby new gatsby-site

سيؤدي ذلك إلى تنزيل قالب بداية Gatsby ووضعه في الدليل/Gatsby-Wordpress. بمجرد اكتمال التثبيت ، يمكنك فتح إصدار تطوير الموقع

gatsby develop

الآن ، في متصفح الويب الخاص بك ، أدخل http: // localhost: 8000 ويجب فتح القالب الافتراضي الخاص بك.

قالب جاتسبي بداية

الخطوة 2 - قم بتوصيل Gatsby بـ WordPress

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

npm install gatsby-source-wordpress

الخطوة 3 - تكوين Gatsby

ضع الكود التالي في ملف gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseurl:  `wpexample.com`,
aliases: -  `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 لموقع الويب الخاص بك. بعد حفظ الملف ، ستحتاج إلى إنشاء قوالب صفحتك.

الخطوة 4 - قوالب صفحة الإنشاء

تمكين بناء قوالب صفحات هذا الموقع من إنشاء منشور لكل صفحة على موقع 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,
      },
    })
  })
}

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

خاتمة

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