ใช้ WordPress เป็น CMS หัวขาด

Sep 16, 2025
วิธีการ
Use WordPress as a headless CMS

ก่อนอื่นฉันเคยได้ยินเกี่ยวกับวิธีการ CMS แบบหัวขาดในการพูดคุยที่ฉันดูจาก Drupal Twin Cities ฉันชอบความคิดที่จะแยกความกังวลระหว่างเนื้อหาการเขียนและดู

  • บริการเว็บโฮสติ้งที่ดีที่สุดในปี 2562

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

  • 23 ตัวอย่างที่ยอดเยี่ยมของเว็บไซต์ WordPress

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

คุณจะต้องการ…

●คอมพิวเตอร์ที่มีการเชื่อมต่ออินเทอร์เน็ต (OBV)
●ตัวแก้ไขรหัส (Atom หรือรหัส VS)
●เชลล์บรรทัดคำสั่ง / เทอร์มินัล
●การติดตั้ง Node.js รุ่นล่าสุด (คุณสามารถดาวน์โหลด & amp; ติดตั้ง ที่นี่ )
●เว็บไซต์ WordPress เพื่อรับเนื้อหาจาก หากคุณไม่มีคุณสามารถใช้แพลตฟอร์ม WordPress.com หรือสิ่งนี้ได้ Heroku Build Pack .
●ไฟล์ต้นฉบับ จาก github .

เริ่มต้น

WordPress ออกมาจากกล่องด้วย API ที่เหลือและนั่นคือสิ่งที่เราจะใช้ในการสืบค้นข้อมูลของคุณ ดังนั้นเราจึงไม่ต้องการอะไรอีกเลย! ไซต์ดิสเพลย์ของเราแยกต่างหากจากเว็บไซต์เนื้อหาของเราดังนั้นเราจึงไม่ต้องการ ธีม WordPress หรือการปรับแต่งอื่น ๆ ที่อยู่นอกปลั๊กอินไม่กี่ (ไม่บังคับ) แม้ว่าแน่นอนคุณสามารถเพิ่มสิ่งเหล่านี้ได้หากคุณต้องการ

ข้อยกเว้นคือถ้าคุณต้องการฟิลด์ Meta ที่กำหนดเองสำหรับพื้นที่เนื้อหาเพิ่มเติม คุณอาจใช้ฟิลด์ที่กำหนดเองขั้นสูงเพื่อทำเช่นนั้น คุณสามารถเพิ่มข้อมูลนั้นไปยัง WordPress API โดย ติดตั้งปลั๊กอินนี้ .

ใช้เครื่องกำเนิดไฟฟ้าไซต์แบบคงที่

Use WordPress as a headless CMS: Gatsby starter screen

หน้าจอเริ่มต้น Gatsby เริ่มต้น

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

หากคุณกำลังมองหาวิธีที่ดีในการสร้างทักษะ JavaScript ของคุณและเรียนรู้ตอบสนองโดยการติดรหัสบางอย่างฉันขอแนะนำให้ลอง Gatsby เพื่อทำเช่นนั้น ฉันได้เรียนรู้ตัวเองมากมายด้วยการเล่นกับมัน

ก่อนอื่นให้ติดตั้งเครื่องมือบรรทัดคำสั่งที่ช่วยให้เราสร้างเว็บไซต์ Gatsby: 

npm install -global gatsby-cli

ตอนนี้นำทางไปยังโฟลเดอร์ที่คุณต้องการเก็บเว็บไซต์ของคุณและเรียกใช้คำสั่งนี้: 

gatsby new blog

สิ่งนี้จะสร้างโฟลเดอร์ใหม่ที่เรียกว่า 'บล็อก' และติดตั้ง Gatsby และการพึ่งพาของมันในโฟลเดอร์นี้ เปิดโฟลเดอร์นี้ในโปรแกรมแก้ไขข้อความที่คุณชื่นชอบ อาจมีไฟล์จำนวนมากที่นั่น ไม่ต้องกังวลเราจะแก้ไขโดยตรง gatsby-config.js , gatsby-node.js ไฟล์และ src โฟลเดอร์ซึ่งเป็นที่แม่แบบของเราอาศัยอยู่

หากคุณมีไฟล์จำนวนมากเพื่อเก็บมันคุ้มค่าที่จะอัพเกรดของคุณ การจัดเก็บเมฆ .

รับเนื้อหาของเรา

ขั้นตอนแรกที่เราต้องการใช้คือการดึงเนื้อหาของเราออกจาก API ของเว็บไซต์ WordPress

ในการทำเช่นนั้นเราจะติดตั้ง gatsby-source-wordpress ปลั๊กอิน prewrtens สำหรับ WordPress นี่เป็นหนึ่งในเหตุผลหลักที่ฉันรัก Gatsby - คุณสามารถรับข้อมูลจากแหล่งต่าง ๆ ที่หลากหลาย เครื่องกำเนิดไซต์แบบคงที่จำนวนมากถูก จำกัด ให้ใช้ไฟล์ Markdown แต่ Gatsby มีความยืดหยุ่นมาก

ระบบนิเวศปลั๊กอินของ Gatsby เป็นผู้ใหญ่มาก มีการโหลดหลายวิธีในการรับข้อมูลของคุณและฟังก์ชั่นที่ฉลาดอื่น ๆ มากมายที่มีประโยชน์เช่นกัน

ในการติดตั้งปลั๊กอินการเปลี่ยนไดเรกทอรีเป็นไซต์ Gatsby ใหม่ของคุณโดยใช้คำสั่งนี้: บล็อกซีดี .

ตอนนี้เรียกใช้คำสั่งนี้: การติดตั้ง NPM --save gatsbysource-wordpres s.

เมื่อเสร็จแล้วถึงเวลาที่จะเปิดไฟล์ Gatsby-config.js คุณจะเห็นว่ามีการตั้งค่าพื้นฐานบางอย่างในสถานที่ที่ Gatsby ช่วยให้เราผิดนัด เรากำลังจะสร้างบนเพื่อกำหนดค่าปลั๊กอินของเราที่นี่: 

 module.exports = {
 Sitemetadata: {
  ชื่อเรื่อง: 'Gatsby เริ่มต้นเริ่มต้น'
 },
 ปลั๊กอิน: [
  'Gatsby-plugin-React-Helmet'
  {
   แก้ไข: "gatsby-source-wordpress"
   ตัวเลือก: {
    Baseurl: "my-wordpress-site.com"
    โปรโตคอล: "https",
    hostingwpcom: false,
    useacf: จริง
    SearchandreplaceContenturls: {
     Sourceurl: "https://my-wordpress-site.com",
     Replacementurl: "https://my-static-site.com"
    }
   },
  },
 ],
}

มันทำงานไหม

คุณสามารถตรวจสอบได้โดยเปิดเทอร์มินัลการพิมพ์ Gatsby พัฒนา และดูว่าเกิดอะไรขึ้น ถูกเตือน! แม้ว่าคุณจะได้รับการตั้งค่าที่ถูกต้องหรือไม่คุณจะได้รับคำเตือนต่อไป - นี่อาจเป็น gatsby ที่กำลังมองหาเนื้อหาที่คุณยังไม่ได้เขียน

ตอนนี้คุณสามารถดู Gatsby-Starter-Default ในเบราว์เซอร์ได้แล้ว 

  http: // localhost: 8000 /

ดู Graphiql, IDE ในเบราว์เซอร์เพื่อสำรวจข้อมูลและสคีมาของเว็บไซต์ของคุณ 

  http: // localhost: 8000 / ___ graphql

โปรดทราบว่าการสร้างการพัฒนาไม่ได้รับการปรับให้เหมาะสม ในการสร้างการสร้างการผลิตให้ใช้ Gatsby Build

หาก Gatsby เริ่มต้น Starer (ขวา) ไม่ใช่สิ่งที่คุณได้รับตรวจสอบไซต์ WordPress ของคุณไม่ได้อยู่ในโดเมนย่อยที่มันใช้ HTTPS หรือ HTTP และที่คุณมีเหมือนกันในการตั้งค่าของคุณ

ตอนนี้เราสามารถไปที่ http: // localhost: 8000 / และดูเว็บไซต์ gatsby ของเรา!

เราสามารถสอบถามข้อมูลของเราได้ไหม

คุณอาจสังเกตเห็นว่าไม่มีเนื้อหา WordPress ที่นี่ นี่เป็นเพราะเรายังไม่ได้บอกกับ Gatsby ว่าจะทำอย่างไรกับมัน ก่อนที่เราจะทำอย่างนั้นเราเพียงแค่ตรวจสอบเราได้รับเนื้อหาของเราที่ Gatsby ในการทำเช่นนั้นเยี่ยมชม URL นี้: 

  http: // localhost: 8000 / ___ graphql

เครื่องมือในตัวนี้เรียกว่า Graphiql และเป็นอีกหนึ่งพลังลับของ Gatsby

Graphql คล้ายกับส่วนที่เหลือ: เป็นวิธีการค้นหาข้อมูล แต่ด้วย Graphql คุณสามารถโต้ตอบกับข้อมูลของคุณได้ง่ายขึ้น Graphiql (Iside Ide สำหรับ Graphql) สามารถแสดงเทคนิคเหล่านี้ให้เราได้ ที่แผงด้านซ้ายลองพิมพ์สิ่งต่อไปนี้: 

 {
 AllwordPressPost {
  ขอบ {
   โหนด {
    id
    กระสุน
    สถานะ
    แม่แบบ
    รูปแบบ
   }
  }
 }
}

นี่อาจดูเหมือน JSON แต่ไม่ใช่ มันเป็นภาษาคิวรีใหม่ที่ฉันคิดว่าวันหนึ่งจะแทนที่ส่วนที่เหลือเป็นวิธีการสื่อสารกับ API

คุณได้อะไรเมื่อคุณกด Ctrl + Enter ใน Graphiql? คุณหวังว่าจะได้เห็นโพสต์ WordPress ของคุณและหน้าทางด้านขวามือของหน้าจอ

เราจะใช้แบบสอบถามนี้จริง ๆ ในขั้นตอนต่อไปของเราดังนั้นให้สะดวก! คุณอาจต้องการดูว่าข้อมูลอื่น ๆ ที่คุณสามารถรับได้ด้วย graphiql ในขณะที่คุณอยู่ที่นี่ หากคุณต้องการทำเช่นนั้นให้ลองเลื่อนเคอร์เซอร์ไปรอบ ๆ และพิมพ์ Ctrl + Space และ / หรือ Ctrl + Enter ที่จะเปิดเผยกลุ่มเนื้อหาอื่น ๆ

ดังนั้นตอนนี้เรามีเนื้อหาใน Gatsby ต่อไปเราต้องแสดงมัน

แสดงโพสต์ของเรา

Use WordPress as a headless CMS: Gatsby development 404 screen

การพัฒนา Gatsby 404 แสดงโพสต์ WordPress ทั้งหมดของเราทั้งหมด

สำหรับขั้นตอนต่อไปนี้เราจะใช้ประโยชน์จาก gatsby-node.js ไฟล์.

gatsby-node.js เป็นไฟล์ที่คุณสามารถใช้เพื่อโต้ตอบกับ "โหนด API" ของ Gatsby ที่นี่คุณสามารถควบคุมวิธีการสร้างเว็บไซต์ของคุณและสร้างหน้าโพสต์และอื่น ๆ ได้อย่างไร

เราจะเขียนคำแนะนำที่นี่เพื่อบอก Gatsby ว่าจะทำอย่างไรกับข้อมูลของเรา: 

 const path = ต้องการ (`path`);

Export.createpages = ({{graphql, brondactioncreators})
= & gt; {
 Const {createPage} = ขอบเขต
 ส่งคืนสัญญาใหม่ ((แก้ไขปฏิเสธ) = & gt; {
  graphql (
   `
   {
    AllwordPressPost {
     ขอบ {
      โหนด {
       id
       กระสุน
       สถานะ
       แม่แบบ
       รูปแบบ
      }
     }
    }
   }
  `
 ). จากนั้น (ผลลัพธ์ = & gt; {
   ถ้า (ผลลัพธ์. enrors) {
    console.log (enrors)
    ปฏิเสธ (ผลลัพธ์. enrors)
   }

   const posttemplate = path.resolve (`./src/templates/
โพสต์.js`)

   ผล.data.allwordpresspost.edges.foreach (edge ​​= & gt; {
    สร้างเพจ({
     เส้นทาง: `/ $ {edge.node.lug} /`
     ส่วนประกอบ: posttemplate,
     บริบท: {
      ID: edge.node.id
     },
    })
   })
   แก้ไข ()
  })
 })
}

รหัสนี้สร้างหน้าเว็บจากแบบสอบถาม Graphql ของเราและสำหรับแต่ละหน้ามันจะใช้เทมเพลตที่เรากำหนด ( /src/templates/post.js . ดังนั้นต่อไปเราต้องสร้างไฟล์นั้น!

สร้างแม่แบบโพสต์

ภายใน / src / โฟลเดอร์สร้างโฟลเดอร์ที่เรียกว่าเทมเพลตและไฟล์ภายในที่เรียกว่า โพสต์. js . เพิ่มลงในรหัสนี้: 

 นำเข้าตอบสนองจาก 'ตอบโต้'
หมวกกันน็อกนำเข้าจาก 'ปฏิกิริยาหมวกกันน็อก'

class posttemplate ขยาย react.component {
 แสดงผล () {
  const post = this.props.data.wordpresspost;
  const slug = this.props.data.wordpresspost.lug;

  กลับมา (
   & lt; div & gt;
   & lt; helmet title = {`$ {titletring} | $ {{sitetitle} `} / & gt;
   & lt; h1 อันตรายเซ็ต mlm = {{__html: post.title}} / & gt;
   & lt; DIV อันตรายเซ็ตินเนอร์HTML = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

ส่งออก pagetemplate เริ่มต้น

query cont export = graphql`
 แบบสอบถามปัจจุบัน ($ id: string!) {
  WordPressPost (ID: {eq: $ id}) {
   หัวข้อ
   เนื้อหา
   กระสุน
  }
  เว็บไซต์ {
   Sitemetadata {
    หัวข้อ
   }
  }
}

สิ่งนี้ใช้แบบสอบถาม Graphql ที่แตกต่างกันเพื่อรับข้อมูลเกี่ยวกับโพสต์ที่เฉพาะเจาะจงที่ได้รับการป้อนโดย gatsbynode.js ไฟล์จากนั้นใช้ทำปฏิกิริยาเพื่อแสดงผลในเบราว์เซอร์

หากคุณต้องการดูรายการโพสต์ทั้งหมดของคุณอย่างรวดเร็วคุณสามารถพิมพ์ http: // localhost: 8000 / a เข้าไปในแถบที่อยู่ของเบราว์เซอร์ของคุณ สิ่งนี้จะนำคุณไปสู่การพัฒนาหน้า 404 ซึ่งแสดงโพสต์ทั้งหมดของคุณ คลิกที่หนึ่งเพื่อเยี่ยมชม!

ขั้นตอนถัดไป

เรามีรอยขีดข่วนพื้นผิวของวิธีการใช้ WordPress เป็น CMS หัวขาดและฉันหวังว่าฉันจะแนะนำให้คุณแนะนำแนวคิดและเครื่องมือที่น่าสนใจที่คุณอาจสามารถใช้และทดสอบในอนาคต

มีเรื่องราวนี้มากขึ้นและเพื่อนร่วมงานของฉันและฉันได้บล็อกเกี่ยวกับมันอย่างกว้างขวางที่ ต้นคราม . ฉันได้เขียนมากขึ้นในบล็อกส่วนตัวของฉัน ภวังค์แสนอร่อย .

โปรดติดต่อกับฉันผ่านทางช่องเหล่านั้นและบน Twitter เพื่อฟังพัฒนาการที่น่าตื่นเต้นมากขึ้นในโลกของ CMS หัวขาด!

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 308 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 308 ที่นี่ หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

  • 40 บทช่วยสอน WordPress ที่ยอดเยี่ยม
  • 6 สุดยอดเคล็ดลับสำหรับความสำเร็จของ CRO ใน WordPress
  • 10 ปลั๊กอิน WordPress ที่ยอดเยี่ยมสำหรับนักออกแบบ

วิธีการ - บทความยอดนิยม

วิธีการ photoshop บน iPhone (ใช่มันเป็นเรื่อง)

วิธีการ Sep 16, 2025

(เครดิตภาพ: Jason Parnell-Brookes) ข้ามไปที่: Photo..

วิธีการวาดสุนัข

วิธีการ Sep 16, 2025

บทช่วยสอนวันนี้จะแสดงวิธีการวาดสุนัข โครงกร�..

เปลี่ยนสี Photoshop: 2 เครื่องมือที่คุณต้องรู้

วิธีการ Sep 16, 2025

ข้ามไปที่: เครื่องมือเปลี่ยนสี ..

สร้างอิมเมจที่ได้รับแสงแบบหลายด้วย Adobe CC

วิธีการ Sep 16, 2025

Adobe มอบหมายให้ฉันสร้างภาพประกอบเพื่อแสดงแนวคิดของ Multilocalism และข้างต้นค�..

ส่องสว่าง 3 มิติของคุณด้วยไฟโดม

วิธีการ Sep 16, 2025

การใช้ไฟโดมเป็นหนึ่งในความก้าวหน้าที่ยิ่งให..

ทาสีเกม Sci-Fi ใน Photoshop

วิธีการ Sep 16, 2025

ฉันมักจะคิดว่าความคิดริเริ่มนั้นพบที่ไหนสัก..

วิธีการสร้างตัวการ์ตูนในโรงภาพยนตร์ 4D

วิธีการ Sep 16, 2025

ด้วยการถือกำเนิดของเกมมือถือและอินดี้ วีด..

ทาสีฉากนิวยอร์กมหากาพย์

วิธีการ Sep 16, 2025

สำหรับการประชุมเชิงปฏิบัติการนี้ฉันกำลังทาสีหนึ่งในวิชาที่ฉันชอ�..

หมวดหมู่