چگونه گتسبی با وردپرس ادغام می شود؟ | گتسبی وردپرس

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

بررسی اجمالی

GatsbyJS یک ژنراتور سایت استاتیک مبتنی بر React مبتنی بر منبع آزاد و باز است. از قبل از پیکربندی قدرتمند برای ساختن وب سایتی که فقط از فایلهای استاتیک برای بارهای صفحه فوق العاده سریع استفاده می کند ، استفاده می کند. WordPress یک پلت فرم عالی برای وبلاگ نویسی منبع باز است. در نتیجه ، افراد زیادی هستند که می دانند چگونه می توانند بفهمند آیا یک سایت یک سایت وردپرس است تا بتوانند آن را هک کرده و اطلاعات را سرقت کنند. استفاده از گتسبی وردپرس در کنار هم همان قدرت مدیریت محتوای وردپرس و سرعت گتسبی را به شما می دهد. در این مقاله ، ما خواهیم دید که گتسبی چیست و چرا شما باید از آن با نرم افزار CMS استفاده کنید. سپس ، ما در مورد نحوه استفاده از WordPress و Gatsby با هم برای ایجاد یک تجربه وب سایت شگفت انگیز خواهیم پرداخت. بیا شروع کنیم!

• گتسبی چیست؟
• جوانب مثبت و منفی استفاده از وردپرس و گتسبی نحوه استفاده از گتسبی با وردپرس
• نتیجه گیری

گتسبی چیست

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

جوانب مثبت و منفی استفاده از وردپرس و گتسبی

طبق رسمی [اسناد] گتسبی ، آنها یک جدول را گردآوری کرده اند ، که ترکیب گتسبی وردپرس عالی است و برای چه کسی نیست. به خاطر سهولت ، من در اینجا لیست می کنم. {{LINE_23}} {{LINE_24}} {{LINE_25}} وردپرس و گتسبی برای {{LINE_27}} {{LINE_28}} {{LINE_29}} تیم های محتوا که با تجربه ویرایش محتوای وردپرس راحت هستند {{LINE_31}} {{LINE_32}} تیم های توسعه ای که با استفاده از فناوری های محبوب و منبع باز ارزش قائل هستند {{LINE_34}} {{LINE_35}} طراحی مجدد سایت ها با محتوایی که قبلاً در وردپرس ذخیره شده اند {{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}} وردپرس و گتسبی برای آن عالی نیست {{LINE_55}} {{LINE_56}} {{LINE_57}} تیم هایی که نیاز به استفاده از مضامین UI وردپرس دارند {{LINE_59}} {{LINE_60}} کسانی که به دنبال یک CMS Cloud کاملاً مدیریت شده هستند {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} علاوه بر این نکات رسمی ، من می خواهم برخی از جوانب مثبت و منفی استفاده از گتسبی وردپرس را با هم ذکر کنم {{LINE_67}} {{LINE_68}} {{LINE_69}} طرفداران {{LINE_71}} {{LINE_72}} {{LINE_73}} سرعت بار سریعتر - وب سایت های استاتیک سریعتر از پویا بارگیری می شوند. در نتیجه ، بر سرعت و رتبه بندی SEO بر صفحه شما تأثیر می گذارد. {{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 ، باید NodeJs و NPM را در محیط وب سایت خود نصب کنید.

مرحله 1 - گتسبی را نصب کنید

npm install -g gatsby-cli

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

gatsby new gatsby-site

با این کار الگوی استارت گتسبی بارگیری می شود و آن را در دایرکتوری/گتسبی-واردپرس قرار می دهد. پس از اتمام نصب ، می توانید نسخه توسعه سایت را باز کنید

gatsby develop

اکنون ، در مرورگر وب خود ، http: // localhost: 8000 را وارد کنید و الگوی پیش فرض شما باید باز شود.

مرحله 2 - گتسبی را به وردپرس وصل کنید

در این بخش از راهنمای گتسبی وردپرس ، ما این ژنراتور سایت استاتیک را با وردپرس وصل خواهیم کرد. شما یک وب سایت استاتیک اساسی دارید ، اما باید آن را با وردپرس ادغام کنید. این سایت گتسبی شما را به آدرس وبلاگ وردپرس خود نشان می دهد و این امکان را می دهد تا هنگام اجرای سرور توسعه ، آخرین داده ها را بکشید. پس از اتصال ، گتسبی بر اساس الگوی فعلی شما یک وب سایت استاتیک ایجاد می کند. افزونه Gatsby Source WordPress را از مخزن NPM نصب کنید.

npm install gatsby-source-wordpress

مرحله 3 - پیکربندی گتسبی

کد زیر را در پرونده 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
      }
    },
  ]
}

این کد را به روز کنید تا به وب سایت وردپرس خود اشاره کنید. اگر وب سایت شما به صورت محلی میزبانی شده است ، پس از BaseUrl می توانید به جای URL وب سایت خود از localhost: 8888/wordpress استفاده کنید. پس از ذخیره پرونده ، باید الگوهای صفحه خود را بسازید.

مرحله 4 - ساخت الگوهای صفحه

الگوهای صفحه ساختمان این ژنراتور سایت را قادر می سازد تا برای هر صفحه در وب سایت وردپرس خود پستی ایجاد کند. افزونه منبع داده های مورد نیاز خود را از وردپرس برای این صفحات می کشد ، اما شما باید الگوی طراحی را ایجاد کنید. در پرونده 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,
      },
    })
  })
}

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

نتیجه

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