Gatsby รวมกับ WordPress อย่างไร? | Gatsby WordPress

กำหนดค่าโอเพนซอร์ส Gatsby ด้วย WordPress ของคุณเพื่อนำประสบการณ์การใช้งานของผู้ใช้และประสิทธิภาพโดยรวมมากขึ้น มาเรียนรู้วิธีใช้เครื่องกำเนิดไซต์แบบคงที่นี้

ภาพรวม

Gatsbyjs เป็นเครื่องกำเนิดไซต์แบบคงที่แบบอิงแบบเปิดและโอเพ่นซอร์ส มันใช้การกำหนดค่าล่วงหน้าที่ทรงพลังเพื่อสร้างเว็บไซต์ที่ใช้เฉพาะไฟล์คงที่สำหรับการโหลดหน้าเว็บที่รวดเร็วอย่างไม่น่าเชื่อ WordPress เป็นแพลตฟอร์มบล็อกโอเพนซอร์สที่ยอดเยี่ยม เป็นผลให้มีคนจำนวนมากที่รู้วิธีคิดว่าไซต์เป็นไซต์ WordPress เพื่อให้พวกเขาสามารถแฮ็คและขโมยข้อมูลได้ การใช้ Gatsby WordPress ร่วมกันจะให้พลังเดียวกันกับการจัดการเนื้อหา WordPress และความเร็วของ Gatsby ในบทความนี้เราจะดูว่า Gatsby คืออะไรและทำไมคุณต้องใช้ซอฟต์แวร์ CMS จากนั้นเราจะลงรายละเอียดเกี่ยวกับวิธีการใช้ WordPress และ Gatsby ด้วยกันเพื่อสร้างประสบการณ์เว็บไซต์ที่น่าทึ่ง เริ่มกันเลย!

• Gatsby คืออะไร
• ข้อดีข้อเสียของการใช้ WordPress และ Gatsby
• วิธีใช้ Gatsby กับ WordPress
• บทสรุป

Gatsby คืออะไร

Gatsby เป็นเครื่องกำเนิดไซต์แบบคงที่ ซึ่งหมายความว่า Gatsby สร้างไฟล์ HTML แบบคงที่ที่อัปโหลดไปยังเซิร์ฟเวอร์ของเว็บไซต์ของคุณ เมื่อผู้เข้าชมเข้าสู่เว็บไซต์ของคุณไฟล์คงที่เหล่านี้จะถูกเสิร์ฟไปยังเบราว์เซอร์ของพวกเขาแทนที่จะเป็นเนื้อหาแบบไดนามิก WordPress โดยทั่วไป มันเป็นเฟรมเวิร์กฟรีและโอเพ่นซอร์สตาม React ที่ช่วยให้นักพัฒนาสร้างเว็บไซต์และแอพที่รวดเร็ว

ข้อดีและข้อเสียของการใช้ WordPress และ Gatsby

ตามที่เป็นทางการของ Gatsby เอกสาร พวกเขาได้รวบรวมตารางซึ่งการรวมกันของ 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 UI {{LINE_59}} {{LINE_60}} ผู้ที่กำลังมองหาคลาวด์ CMS ที่ได้รับการจัดการอย่างสมบูรณ์ {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} นอกเหนือจากคะแนนอย่างเป็นทางการเหล่านี้ฉันต้องการแสดงรายการข้อดีและข้อเสียบางประการของการใช้ Gatsby WordPress ด้วยกัน {{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}} เฉพาะเนื้อหาคงที่ - หากคุณต้องการให้บริการเนื้อหาแบบไดนามิกใด ๆ จากนั้น Gatsby ไม่เหมาะกับคุณ สามารถใช้ไฟล์คงที่เซิร์ฟเวอร์ได้เท่านั้น ดังนั้นคุณไม่สามารถมีระบบแสดงความคิดเห็นใด ๆ ที่ดึงข้อมูลจากฐานข้อมูล {{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 จะสร้างเว็บไซต์แบบคงที่ตามเทมเพลตปัจจุบันของคุณ ติดตั้งปลั๊กอิน WordPress ของ Gatsby จากที่เก็บ 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 ที่สร้างขึ้น

บทสรุป

ในการสอน WordPress Gatsby นี้เราได้กล่าวถึงวิธีการสร้างเว็บไซต์ Gatsby จาก WordPress เราได้เรียนรู้ว่าข้อดีและข้อเสียของซอฟต์แวร์โอเพ่นซอร์สทั้งสองนี้คืออะไร นอกจากนี้เรายังครอบคลุมถึงวิธีการติดตั้งและเริ่มต้นด้วยสภาพแวดล้อมการพัฒนา Gatsby ในที่สุด containerize.com กำลังเขียนบทความเกี่ยวกับผลิตภัณฑ์โอเพ่นซอร์สเพิ่มเติม ดังนั้นโปรดติดต่อกับหมวดหมู่แพลตฟอร์มโอเพ่นซอร์ส บล็อก สำหรับข่าวทั่วไปและการอัปเดต