วิธีสร้างโครงการ WordPress หัวขาดแรกของคุณด้วย ACF + WPGraphQL

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

ในเซสชั่นนี้ Jeff Everhart ผู้สนับสนุนอาวุโสของ WP Engine แสดงให้เห็นถึงรายละเอียดเชิงลึกของโครงสร้างพื้นฐานโดยการสร้างไซต์สาธิตในเวลาไม่กี่นาทีโดยใช้ Atlas!

สไลด์เซสชัน:

ถอดเสียง:

JEFF EVERHART: ว่าไงทุกคน? ฉันชื่อ Jeff Everhart เป็นผู้สนับสนุนนักพัฒนาอาวุโสที่ WP Engine ขอบคุณมากสำหรับการเข้าร่วมการพูดคุยของฉันในวันนี้เกี่ยวกับการสร้างโครงการ WordPress ที่ไม่มีส่วนหัวเป็นครั้งแรกด้วย ACF และ WP GraphQL ก่อนที่จะลงมือสร้าง ฉันมักจะให้บริบทบางอย่างเกี่ยวกับสิ่งที่ WordPress ไม่มีหัว ดูเหมือนว่า Headless กลายเป็นคำเฉพาะกลุ่มน้อยลงและกลายเป็นกระแสหลักมากขึ้น ดังนั้นฉันจะพยายามอธิบายให้สั้นเข้าไว้

Headless WordPress ที่แกนหลักนั้นเกี่ยวกับการใช้ WordPress CMS ผ่าน API เพื่อขับเคลื่อนแอปพลิเคชันประเภทอื่น หากเราดูไดอะแกรมในสไลด์นี้ เมื่อผู้ใช้ร้องขอ site.com/page แทนที่จะให้ WordPress จัดการคำขอนั้น แอปพลิเคชัน JavaScript จะตอบสนองต่อเส้นทางนั้น ดูที่เส้นทาง กำหนดว่าต้องการข้อมูลใดจาก WordPress หรือแหล่งข้อมูลอื่นๆ เรียก API เหล่านั้น และสร้างการตอบกลับไปยังผู้ใช้

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

ที่ชั้นหลังสุดของเรา เราจะใช้ WP GraphQL เป็น API ของเรา WP GraphQL เปลี่ยนแบ็กเอนด์ WordPress ของคุณให้เป็น GraphQL API อันทรงพลัง บังคับใช้การตรวจสอบความปลอดภัยตามบทบาทและความสามารถทั้งหมดที่ WordPress ดั้งเดิมและ REST API หลักทำ WP GraphQL เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการพัฒนาแอปพลิเคชันแบบไม่มีส่วนหัว เนื่องจากการใช้ภาษาคิวรีแบบประกาศ ทำให้เราสามารถค้นหาเนื้อหาประเภทต่างๆ ได้ทั่วทั้งเนื้อหานั้น ดังนั้นการรับโพสต์ เพจที่มีหมวดหมู่ทั้งหมดในคำขอเดียวกัน

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

มันทำให้ข้อมูลทั้งหมดพร้อมใช้งานบน REST API ได้อย่างง่ายดาย แต่จะต้องติดตั้งส่วนขยาย WP GraphQL เพื่อเพิ่มข้อมูลฟิลด์นั้นลงในสคีมา GraphQL ของเรา โดยส่วนตัวแล้ว ฉันตื่นเต้นมากที่ได้เห็นปลั๊กอินนี้พัฒนาขึ้นเนื่องจากมันมีประสิทธิภาพมากขึ้นสำหรับนักพัฒนาหัวขาด

ตอนนี้ เราสามารถจำลองข้อมูลที่ซับซ้อนและค้นหาผ่าน WP GraphQL ได้ เราต้องการวิธีสร้างประสบการณ์เว็บที่ทันสมัยสำหรับผู้ใช้ของเรา ในขณะเดียวกันก็สนับสนุนเครื่องมือแก้ไขเนื้อหาที่รู้จักและชื่นชอบ WordPress อยู่แล้ว นั่นคือที่มาของ Faust Faust เป็นเฟรมเวิร์กสองส่วนที่ประกอบด้วยปลั๊กอิน WordPress และเฟรมเวิร์ก JavaScript ที่ใช้ Next.js พวกเขาทำงานร่วมกันเพื่อสร้างเว็บไซต์ WordPress ที่ไม่มีหัวเรื่องง่ายและไม่ซับซ้อน

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

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

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

ตอนนี้เราได้เปิดที่เก็บ GitHub แล้ว มาเริ่มกันเลย สิ่งแรกที่ฉันแนะนำให้คุณทำคือแยกที่เก็บนี้ในบัญชีของคุณเอง หากคุณตรวจดูสิ่งที่มีอยู่ในที่เก็บนี้ คุณจะเห็นโค้ดตัวอย่างจำนวนมากรวมถึงคำแนะนำทีละขั้นตอนใน readme สำหรับทุกสิ่งที่เราจะทำในการนำเสนอนี้ อันที่จริง เราจะคัดลอกและวางโดยตรงจากที่เก็บนี้ลงในโครงการของคุณโดยตรง หากต้องการโคลนสิ่งนี้ลงในเครื่อง ให้ดำเนินการต่อและเรียกใช้คำสั่ง Git clone ภายในเทอร์มินัลของคุณ

ซึ่งจะใช้เวลาเพียงเสี้ยววินาทีในการดาวน์โหลด จากนั้นเมื่อเราดาวน์โหลดโปรเจ็กต์แล้ว เรามาเปลี่ยนไดเร็กทอรีของเราเป็นไดเร็กทอรีโปรเจ็กต์นั้นกัน จากตรงนั้น ฉันจะเรียกใช้คำสั่งเพื่อเปิดโปรเจ็กต์นี้ใน VS Code แต่คุณควรใช้โปรแกรมแก้ไขโค้ดอะไรก็ได้ที่คุณต้องการ เนื่องจาก VS Code มีเทอร์มินัลแบบรวมอยู่แล้ว ฉันจึงสามารถล้างข้อมูลนี้ จากนั้นดำเนินการต่อและปิด iTerm และตอนนี้ เราสามารถเปลี่ยนไปใช้ WordPress local site ได้แล้ว ในการทำเช่นนั้น เราจะเปิดโปรเจ็กต์นี้ใน Finder จากนั้นค้นหาไฟล์ zip การสาธิต WP ที่ไม่มีส่วนหัวที่ฉันเตรียมไว้ให้คุณ

เราจะลากและวางไฟล์ zip นั้นลงในสภาพแวดล้อมการพัฒนาท้องถิ่นโดยตรง และ local จะเริ่มกระบวนการแกะและบูตเว็บไซต์ WordPress สาธิตให้คุณ เราสามารถยึดติดกับค่าเริ่มต้นได้ค่อนข้างมาก จากนั้น Local จะใช้เวลาเพียงไม่กี่นาทีในการสร้างไซต์ WordPress ใหม่ให้คุณ นี่เป็นคุณสมบัติที่ยอดเยี่ยมของ WP migrate pro ที่ช่วยให้ฉันสามารถส่งออกไซต์ใดๆ ก็ตามเป็นไฟล์ zip และลากและวางลงในโลคัลโดยตรง เพื่อให้ฉันสามารถนำไซต์ที่ใช้งานจริงไปยังเครื่องโลคัลของฉันได้อย่างรวดเร็ว โดยไม่คำนึงถึงแพลตฟอร์ม

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

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

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

นี่เป็นเพียงกลุ่มฟิลด์พื้นฐานจริงๆ ที่มีสองฟิลด์แยกกัน ได้แก่ ข้อความและ URL สำหรับแต่ละสิ่งเหล่านี้ ฉันได้เลือกตัวเลือก แสดงใน GraphQL เพื่อให้ปรากฏใน GraphQL จากนั้นฉันได้ตรวจสอบตัวเลือกนั้นที่ระดับกลุ่มฟิลด์ด้วย นอกจากนี้ ฉันยังมีตรรกะเชิงเงื่อนไขในการพิจารณาว่าเมื่อใดควรแสดงโพสต์เหล่านี้ ดังนั้นหากหมวดหมู่โพสต์เท่ากับอาหาร และมาดูกันว่ามิกซ์เทปหวานหน้าตาเป็นอย่างไร

เราจะเห็นว่าสิ่งนี้ค่อนข้างคล้ายกับแหล่งอาหารของเรา และเรามีสองสาขาที่แตกต่างกัน แต่ละคนมีการตรวจสอบตัวเลือก แสดงใน GraphQL เช่นเดียวกับการตรวจสอบที่ระดับกลุ่มฟิลด์เพิ่มเติม เราจะเห็นว่ามีการตั้งค่าที่แตกต่างกันสองสามอย่างที่ส่วนขยาย WP GraphQL มอบให้เราโดยที่เราอาจไม่ต้องการ นอกจากนี้ เราจะเห็นว่าเรากำลังแสดงสิ่งนี้ตามเงื่อนไขตามหมวดหมู่โพสต์ด้วย

ทีนี้ มาดู WP GraphQL และสิ่งที่มอบให้เราในแง่ของเครื่องมือ หากเราเปิดเมนู GraphQL เราจะเข้าไปอยู่ใน IDE กราฟิก ตอนนี้ นี่คือสภาพแวดล้อมการพัฒนาแบบโต้ตอบที่ช่วยให้คุณสามารถสร้างแบบสอบถามโดยใช้ WP GraphQL เราสามารถระบุได้ว่าเราต้องการโพสต์ 10 รายการแรกที่มีหมวดหมู่และรวมช่อง ACF เพิ่มเติมไว้ที่นี่ด้วย เมื่อเราคลิกปุ่มเรียกใช้ เราจะได้รับข้อมูลสดกลับมาจากไซต์ WordPress ของเราที่ตรงกับข้อมูลในแบบสอบถามนั้น

หากเราต้องการ เราสามารถเปิดหน้าต่าง Query Composer และเขียนลักษณะต่างๆ ของ Query ของเราได้ ดังนั้นนี่จึงเป็นเครื่องมือที่มีประโยชน์มากหากคุณไม่แน่ใจว่าฟิลด์หรือข้อมูลใดที่อาจอยู่ในวัตถุ WordPress เฉพาะ คุณสามารถใช้ Query Composer เพื่อสำรวจและเรียกใช้ Query เหล่านั้นแบบเรียลไทม์ ตอนนี้ เรามากำหนดค่า Faust โดยเปิดเมนูการตั้งค่า Faust ดังที่ฉันได้กล่าวไว้ในบทแนะนำ Faust เป็นเฟรมเวิร์กสองส่วนที่ประกอบด้วยปลั๊กอิน WordPress และฐานโค้ดส่วนหน้าของคุณ

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

เมื่อเราเรียกใช้แล้ว ให้เปิดคำสั่ง .env.localfile และเราจะทำการเปลี่ยนแปลงสองสามอย่าง สิ่งแรกคือจะแทนที่ตัวเลือก WordPress URL สาธารณะถัดไปด้วยตำแหน่งของไซต์ในพื้นที่ของคุณ ดังนั้น ACF.WPEngine.local จากนั้นเราจะใช้ค่ารหัสลับนั้นและใช้สำหรับรหัสลับ Faust ของเรา ตรวจสอบให้แน่ใจว่าเราต้องการยกเลิกการแสดงความคิดเห็นด้วยเช่นกัน จากนั้นตัวแปรสภาพแวดล้อมสุดท้ายนั้นมีประโยชน์จริง ๆ สำหรับการทดสอบและการพัฒนาในท้องถิ่น เพื่อให้คุณสามารถแก้ไขปัญหา SSL ใด ๆ ที่คุณอาจมีในขณะที่เชื่อมต่อกับสภาพแวดล้อมการพัฒนาท้องถิ่น

จากตรงนั้น เราจะต้องเรียกใช้ NPM Install เพื่อติดตั้งการอ้างอิงทั้งหมดของโครงการของเรา และเมื่อดำเนินการเสร็จแล้ว เราสามารถเริ่มการทำงานนี้และเรียกใช้ NPM Run Dev เพื่อเริ่มโครงการของเรา การคอมไพล์จะใช้เวลาเพียงเสี้ยววินาที แต่เมื่อทำเสร็จแล้ว เราสามารถเปิด localhost:3000 ในเบราว์เซอร์ได้ และเราจะได้เห็นไซต์ Faust ของเราทำงานจริง

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

เนื่องจากปลั๊กอิน Faust รู้ที่อยู่ของ URL ส่วนหน้าของเรา จึงเขียนลิงก์จำนวนมากใหม่ เช่น ลิงก์ตัวอย่างเหล่านั้น เพื่อที่ว่าเมื่อคุณเปิดในเบราว์เซอร์ ลิงก์เหล่านั้นจะเปิดใน URL ของเว็บไซต์ส่วนหน้า เพื่อให้คุณ 'จะได้รับการแสดงตัวอย่างจริงว่าเนื้อหาของคุณจะเป็นอย่างไรที่ส่วนหน้า

ตอนนี้ เรามาเจาะลึกลงไปในโครงสร้างของโปรเจกต์ Faust JavaScript ของเรากันดีกว่า หากคุณคุ้นเคยกับการทำงานใน Next.js คุณอาจเคยใช้ไดเร็กทอรีของเพจเพื่อสร้างส่วนประกอบของเพจที่ใช้เส้นทางของคุณ คุณยังคงสามารถทำได้ใน Faust แต่สร้างขึ้นจากแนวคิดนี้โดยจัดเตรียมเส้นทาง catchall ที่เรียกว่าโหนด WordPress ซึ่งอนุญาตให้คุณนำ URI ใดๆ ที่ WordPress จัดการและแก้ไขไปยังเนื้อหาเฉพาะ

จากนั้นเราจะได้รับข้อมูลเพิ่มเติมเกี่ยวกับรายการเนื้อหานั้นและส่งต่อผ่านคอมโพเนนต์ของเรา เพื่อให้เราสามารถแก้ไขเนื้อหาแต่ละชิ้นนั้นไปยังเทมเพลตเฉพาะในโฟลเดอร์เทมเพลต WP สิ่งนี้คล้ายกับแนวคิดลำดับชั้นของเทมเพลตและธีม WordPress แบบดั้งเดิมและหลักการตั้งชื่อมากมาย ตัวอย่างเช่น frontpage.js เป็นหน้าแรกของเว็บไซต์ของเรา ในขณะที่ page.js มีหน้าที่รับผิดชอบในการแสดงเนื้อหาประเภทหน้า และมี single.js เพื่อแสดงโพสต์เดียว

ตอนนี้ เรามาเริ่มต้นและทำให้ frontpage.js ของเรามีไดนามิกมากขึ้นอีกสักหน่อย ตกลง . ในการเริ่มต้น เราจะดำเนินการต่อและเปิดไฟล์ front page.js ของเรา และให้พื้นที่ในการทำงานเพิ่มขึ้นอีกเล็กน้อย ดังนั้นหากเราดูเนื้อหาของไฟล์นี้ เราจะเห็นว่ามีสามส่วนหลัก มีคอมโพเนนต์เองที่เราแสดงผล คุณสมบัติคิวรีที่แนบกับคอมโพเนนต์ และสิ่งนี้จะทำงานทุกครั้งที่เราเรนเดอร์คอมโพเนนต์ และตัวแปรบางตัวที่เราสามารถส่งผ่านได้ที่ด้านล่าง

และอย่างที่คุณเห็น มีสองวิธีหลักในการใช้สิ่งนี้ ไม่ว่าจะใช้ use query hook ภายในคอมโพเนนต์ หรือสามารถส่งต่อเป็นพร็อพไปยังคอมโพเนนต์ได้ และคุณจะเห็นในตัวอย่างในภายหลัง ดังนั้น กลับไปที่ที่เก็บและเริ่มด้วยขั้นตอนที่ 2.1 เพื่ออัปเดตการค้นหาสำหรับ frontpage.js ของเรา ดังนั้นเราจะคัดลอกสิ่งนั้น จากนั้นกลับไปที่กราฟิก IDE และลองเล่นที่นั่นสักครู่ ดังนั้น ข้อความค้นหานี้ที่เรามีบนคลิปบอร์ดของเราควรได้รับ 10 โพสต์แรก และได้รับข้อมูลสองสามส่วนที่เชื่อมโยงกับแต่ละโพสต์เหล่านั้น

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

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

ดังนั้นเมื่อเรามีไฟล์ทั้งสามนี้แล้ว เราจะเริ่มเพิ่มข้อมูลบางส่วนเพื่อแสดงผลโพสต์เหล่านั้น สิ่งแรกที่เราจะทำคือใส่เนื้อหาบางส่วนในองค์ประกอบข้อความที่ตัดตอนมาของโพสต์ ดังนั้นเราจะคัดลอกและวางจากที่เก็บของเรา และเราจะเห็นว่าเรากำลังนำเข้าไฟล์ module.css นั้น และเรามีฟังก์ชันที่เรียกว่าข้อความที่ตัดตอนมาของโพสต์ซึ่งเป็นส่วนประกอบของเราที่มีส่วนประกอบหนึ่งอย่างที่เป็นโพสต์ จากนั้นเราก็แสดงส่วน โดยมีลิงก์ที่จะไปยัง URI ของโพสต์นั้นโดยตรง แสดงชื่อเรื่อง จากนั้น เรามีไทล์หมวดหมู่ที่เรากำลังแสดงออกมาเช่นกัน จากนั้นใช้การตั้งค่าที่เป็นอันตรายใน HTML ของเราเพื่อตั้งค่าเนื้อหา HTML สำหรับข้อความที่ตัดตอนมาของโพสต์

ตอนนี้ เมื่อทุกอย่างดีขึ้นและบันทึกไว้แล้ว เราจะบันทึกสิ่งนั้นออกไป แต่เราจะมาที่นี่ด้วย และเพิ่มสไตล์ที่มีขอบเขตเพิ่มเติมนี้ให้กับคอมโพเนนต์ของเราเพื่อจัดรูปแบบแท็กช่วงเหล่านั้นสำหรับหมวดหมู่ของเรา จากนั้นเราจะ ทำการนำเข้าส่งออกภายในไฟล์ index.js เพื่อนำสิ่งนั้นจากการส่งออกเริ่มต้นไปยังการส่งออกที่มีชื่อ และเราจะบันทึกสิ่งเหล่านั้นทั้งหมด จากนั้นขั้นตอนสุดท้ายที่จะทำให้สิ่งนี้พร้อมใช้งานในสิ่งอื่นคือเพิ่มบรรทัดการส่งออกอีกหนึ่งบรรทัดไปยังไฟล์ index.js ของโฟลเดอร์ส่วนประกอบของเรา และตอนนี้เราได้ดำเนินการแล้ว หากเรากลับไปที่หน้าแรก frontpage.js เราควรจะสามารถเพิ่มการนำเข้าเพิ่มเติมในคำสั่งการนำเข้าที่มีอยู่เพื่อใช้ข้อความที่ตัดตอนมาของโพสต์

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

จากนั้นถ้าเราดำเนินการต่อและบันทึกทั้งหมดนั้นและแสดงผลในเบราว์เซอร์และรีเฟรช เราจะเห็นว่าเรามีโฮมเพจแบบไดนามิกที่ยอดเยี่ยม ใช่ แต่ละชื่อมีลิงก์ที่คลิกได้ เช่นเดียวกับไทล์หมวดหมู่แต่ละรายการ และถ้าเราคลิกผ่าน เราจะเห็นว่าด้วยประโยชน์ของเทมเพลตที่มีอยู่แล้วใน Faust เนื้อหาโพสต์ทั้งหมดของเรากำลังแสดงผลอยู่แล้ว แม้ว่าเราจะขาดกลุ่มทรัพยากรบางส่วนที่เราสร้างโดยใช้ ACF ก็ตาม ดังนั้นหากเราคลิกผ่านไปยังโพสต์ที่สอง เราจะเห็นว่าโพสต์นั้นแสดงผลได้ดีพอๆ กับลิงก์หมวดหมู่ที่สร้างไว้ล่วงหน้าทั้งหมด นั่นคือเราแค่ใช้ URI ของหมวดหมู่เหล่านั้นเพื่อพึ่งพา Faust ในการแสดงเทมเพลตหมวดหมู่ JS นั้น .

ตกลง ตอนนี้เรามีโฮมเพจแบบไดนามิกแล้ว เรามาดำเนินการรับฟิลด์ ACF เหล่านั้นเพื่อแสดงผลบนเทมเพลต single.js ของเรา เอาเลย ทำความสะอาดตัวแก้ไขโค้ดของเรา จากนั้นเราจะสามารถเปิดไฟล์ single.js และดูว่ามีอะไรอยู่ข้างในนั้น เรารู้ว่าที่ระดับบนสุดนั้น เรามีฟังก์ชันคอมโพเนนต์ที่เรากำลังส่งออกซึ่งใช้อุปกรณ์ประกอบฉากจริง ๆ และคุณสมบัติ component.query ที่มีเคียวรี GraphQL แบบไดนามิกที่กำลังอ่านตัวแปรบางตัวที่เราได้รับกลับมาจากเคียวรีเริ่มต้น

และท้ายที่สุดแล้วสิ่งที่เราต้องการจะทำคือแสดงแหล่งข้อมูลโพสต์ต่างๆ ที่ด้านล่างของเนื้อหาโพสต์ของเรา ดังนั้นฉันจึงกลับไปที่ที่เก็บและเลื่อนลงไปที่ขั้นตอน 3.1 ซึ่งเราอัปเดตแบบสอบถามโพสต์เดียว และเราจะดูที่สิ่งนั้นเพราะมันเริ่มดึงทั้งกลุ่มฟิลด์มิกซ์เทปหวานและทรัพยากรอาหารที่เราสร้างขึ้นมา ขั้นตอนก่อนหน้านี้ ถ้าฉันใช้แบบสอบถามนั้นและคัดลอกและวางลงในกราฟิก ฉันจะดำเนินการฮาร์ดโค้ด ID ของฐานข้อมูลสำหรับโพสต์ และลบสิ่งที่แตกต่างกันสองสามอย่างที่เราไม่ต้องการ เช่น As Preview และส่วนย่อยอื่นๆ .

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

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

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

ตอนนี้ ขั้นตอนต่อไปคือเราต้องการสร้างส่วนประกอบเพิ่มเติมบางอย่างเหมือนในขั้นตอนก่อนหน้า ดังนั้นฉันจะดำเนินการต่อและภายในไฟล์ส่วนประกอบของฉัน ไปข้างหน้า และสร้างส่วนประกอบของทรัพยากรอาหาร ดังนั้นฉันจะสร้างโฟลเดอร์แล้วตามด้วยไฟล์ food resources.js ภายในโฟลเดอร์นั้น จากนั้น ฉันจะสร้างไฟล์ index.js รวมถึงไฟล์โมดูล CSS และตอนนี้ไฟล์โมดูล SCSS นั้นมีประโยชน์จริง ๆ เพราะช่วยให้เราสามารถกำหนดขอบเขตสไตล์ของเราไปยังส่วนประกอบเฉพาะนั้นได้ ดังนั้นมันจึงให้ความรู้สึกเหมือนไวยากรณ์ขี้ขลาดที่จะทำ แต่ท้ายที่สุดแล้ว ผลลัพธ์ที่ได้ก็สะอาดหมดจดจริงๆ เพราะเราไม่ต้องเขียนคลาสและอะไรมากมาย

ดังนั้นฉันจะเริ่มคัดลอกและวางโค้ดคอมโพเนนต์จากที่เก็บลงในไฟล์เหล่านั้นโดยตรง เราจะเห็นว่าเรามีฟังก์ชันทรัพยากรอาหารที่ใช้ชื่อสูตรอุปกรณ์ประกอบฉาก 2 รายการและลิงก์สูตรอาหาร จากนั้นเราจึงแสดงภาพที่ต่ำกว่าอายุของเราด้วยอีโมจิเบอร์ริโต นอกจากนี้ เราจะคัดลอกและวางสไตล์ไฟล์ SCC บางส่วนลงในโฟลเดอร์เฉพาะนี้ จากนั้นเราจะตรวจสอบให้แน่ใจว่าเราส่งออกไฟล์นั้นจากโฟลเดอร์ส่วนประกอบ index.js และเช่นเดียวกับในตัวอย่างก่อนหน้านี้ เราจะต้องการดำเนินการต่อและส่งออกสิ่งนี้ใน index.js ของโฟลเดอร์ส่วนประกอบของเราด้วย เพื่อให้เรามีกลุ่มที่ดีจริงๆ ในการนำเข้า เช่นที่คุณเห็นโดยตรงจากส่วนประกอบนั้น โฟลเดอร์อื่นในไฟล์เหล่านี้บางไฟล์

เมื่อเราเพิ่มเข้าไปแล้ว เราจะหันความสนใจไปที่องค์ประกอบทรัพยากรเพลง และเราจะทำสิ่งเดียวกัน เราจะดำเนินการต่อและสร้างโครงสร้างไฟล์เดียวกัน ดังนั้นโฟลเดอร์ทรัพยากรเพลงและไฟล์ musicresources.js ข้างในนั้น จากนั้นเราจะดำเนินการต่อและสร้างไฟล์ index.js เพื่อส่งออก จากนั้นจึงสร้างไฟล์ musicresources.module.scss ของเราด้วยสำหรับรูปแบบขอบเขตเหล่านั้น

เมื่อเราได้รับข้อมูลทั้งหมดแล้ว เราจะทำแบบเดียวกับที่เราทำกับทรัพยากรอาหารของเรา และเพียงแค่คัดลอกและวางรหัสบางส่วนจากพื้นที่เก็บข้อมูล เราจะเห็นว่าส่วนประกอบนี้เกือบจะเหมือนกันทุกประการ เรามีแหล่งข้อมูลเพลง อันที่จริงแล้วสิ่งนี้มีอุปกรณ์ประกอบฉากสามรายการแทนที่จะเป็นสอง แต่เรามีสามฟิลด์ในกลุ่มฟิลด์นี้ แต่แบบแผนของ style.component เหมือนกัน และเรากำลังทำการเรนเดอร์ที่แตกต่างกันเล็กน้อยเนื่องจากเรามีเนื้อหาที่แตกต่างกัน

จากตรงนั้น เราจะเพิ่มรหัส SCSS ของเราและตรวจสอบให้แน่ใจว่าได้ส่งออกจากโฟลเดอร์ส่วนประกอบ index.js แล้วนำเข้าไปยังโฟลเดอร์ของเราที่นี่ และฉันคิดว่าฉันสร้างจริง ๆ แล้ว มาเปลี่ยนชื่ออย่างรวดเร็วและ เพียงตรวจสอบให้แน่ใจว่าการตั้งชื่อทั้งหมดของเราดูดี เพื่อให้ index.js และส่วนประกอบค้นหาทรัพยากรเพลงของเราและทุกสิ่งนั้นยอดเยี่ยม ตอนนี้ เราจะดำเนินการต่อและปิดแท็บที่ไม่เกี่ยวข้องเหล่านี้ทั้งหมด เนื่องจากเราพร้อมที่จะใช้งานส่วนประกอบเหล่านั้นในไฟล์ single.js ของเราแล้ว

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

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

และถ้าเรากลับออกมาและรีเฟรชหน้าเทมเพลต single.js เราจะเห็นว่าทรัพยากรอาหารของเราแสดงผลตามที่เราคาดไว้ และลิงก์นั้นจะทำงานได้อย่างถูกต้องหากเรากลับมาที่ WP Admin หรือที่บ้านของเรา หน้าหนังสือ. และถ้าเราพบหมวดหมู่อาหารหรือเพลง เราสามารถเปิด Kinfolk Synth DIY และดูว่าองค์ประกอบทรัพยากรเพลงของเรามีลักษณะอย่างไร และทั้งหมดนั้นดูดี และถ้าเราพบสิ่งที่อยู่ในทั้งสองหมวดหมู่จริง ๆ เราจะเห็นว่าจริง ๆ แล้ว ที่ด้านล่าง แสดงองค์ประกอบทั้งสองอย่างในแบบที่เราคาดหวังไว้

ตกลง. ตอนนี้เราได้ไซต์ของเราตามที่เราต้องการแล้ว เรามาพูดถึงวิธีการปรับใช้ไซต์นี้กัน ตอนนี้ ฉันมีส่วนของที่เก็บ GitHub ที่สร้างขึ้นสำหรับเรา และจริงๆ แล้ว ฉันได้สร้างสาขาที่ปรับใช้แยกกันโดยสิ้นเชิงในสาขาสุดท้าย ดังนั้นการรัน Git check out เสร็จสิ้น เราจะได้รับสิ่งนั้น และคุณยังสามารถปรับใช้สาขานั้นโดยตรงกับ Atlas ซึ่งเป็นโซลูชันโฮสติ้ง WordPress แบบไม่มีส่วนหัวของ WP Engine

สิ่งนี้ให้ทั้งการติดตั้ง WordPress และคอนเทนเนอร์ Node.js และคุณสามารถลงทะเบียนบัญชีแซนด์บ็อกซ์ฟรีได้เพียงแค่คลิกปุ่มนี้บนหน้า Landing Page ของ Atlas นำคุณไปยังฟอรัมอย่างรวดเร็ว และอย่างที่คุณเห็น ราคาเป็นศูนย์ คุณอาจต้องใส่บัตรเครดิตที่เราใช้เพียงเพื่อวัตถุประสงค์ในการป้องกันการฉ้อโกง แต่คุณสามารถมีบัญชีฟรีเพื่อทดลองกับสิ่งนี้เพื่อทดสอบ ออกไปเรียนรู้เรื่องไร้สาระตามความปรารถนาของหัวใจของคุณ ดังนั้น ฉันจะดำเนินการต่อและเปิดแดชบอร์ด WP Engine เพื่อเริ่มปรับใช้ไซต์นี้กับ Atlas

สิ่งแรกที่ฉันจะทำจริงๆ คือเปิดรายชื่อไซต์ของฉัน และฉันกำลังจะเปิดไซต์ WordPress เวอร์ชันที่ใช้งานจริง ที่จริงแล้ว ไซต์ ACF headless ที่คุณเห็นตรงนี้ ซึ่งฉันจะเปิด WP Admin ในหน้าต่างใหม่ เป็นไซต์หลักสำหรับไฟล์ zip ที่พวกคุณใช้อยู่ในเครื่อง ดังนั้นฉันจึงสร้างรหัสไปรษณีย์โดยใช้การส่งออก WP และนั่นคือสิ่งที่ฉันจะใช้สำหรับการปรับใช้จริง

จากตรงนั้น ฉันจะคลิกแท็บ Atlas แล้วคลิกสร้างแอป และฉันมีตัวเลือกนี้ ฉันจะเลือกดึงจาก Repo แล้วคลิกดำเนินการต่อ และถ้าฉันยังไม่ได้รับรองความถูกต้องกับ GitHub คุณจะทำสิ่งนี้ได้ แต่เนื่องจากฉันเป็นอยู่แล้ว ฉันจึงสามารถดำเนินการต่อและเลือกพื้นที่เก็บข้อมูลของฉันได้ ดังนั้น เราจะดำเนินการต่อและเลือกพื้นที่เก็บข้อมูลที่เราใช้สำหรับโครงการนี้ คลิกดำเนินการต่อ จากนั้นฉันจะปรับใช้แอปของฉันใน US Central

จากตรงนี้ มันให้ผมเลือกสาขาได้ และอย่างที่ผมบอก ผมจะใช้ Finish นอกจากนี้ยังมีตัวเลือกหากคุณใช้ monorepo ซึ่งไม่ใช่ และฉันจะปล่อยให้ตัวเลือกฉันมีการติดตั้ง WordPress ของฉันและค้นหาไซต์ ACF Headless ของฉัน ต่อไปนี้ ฉันจะต้องการ แทนที่จะใช้ไฟล์ .env ฉันจะต้องการคัดลอกตัวแปรสภาพแวดล้อมสองตัวจากโปรเจ็กต์ไฟล์ของฉัน

อันแรกคือ URL WordPress สาธารณะถัดไป สิ่งเหล่านี้คือตัวแปรสภาพแวดล้อมเดียวกันกับที่เราตั้งค่าในโครงการในพื้นที่ของเรา และฉันจะคัดลอกลิงก์ไปยังการติดตั้ง WordPress ที่ใช้งานจริงของฉันในนั้น จากนั้นฉันจะเพิ่มตัวแปรสภาพแวดล้อมอื่น และตัวแปรนี้จะใช้สำหรับคีย์ลับ Faust ของเรา ดังนั้นฉันจะคัดลอกสิ่งนั้นจากเมนู Faust Settings และใส่เข้าไปที่นั่นและตั้งค่าคีย์สำหรับ Faust Secret Key

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

ดังนั้นเราจะได้รับข้อความแสดงความสำเร็จ จากนั้นเราก็สามารถดำเนินการต่อและเปิด URL นี้ในแท็บอื่นได้ และที่นั่น เราจะเห็นว่าไซต์ของเรามีลักษณะเหมือนในเครื่องทุกประการ และมันดึงข้อมูลที่ถูกต้องทั้งหมด รูปภาพที่ถูกต้องทั้งหมด และแม้กระทั่งดูดเนื้อหา ACF ทั้งหมดของเรา โพสต์ของเราจำนวนหนึ่งดูดีมาก และผลงานของเราใน Atlas นั้นยอดเยี่ยมจริง ๆ ฉันใช้รูปภาพขนาดใหญ่จริง ๆ ที่นี่ ดังนั้นหากคุณเห็นความช้า นั่นเป็นเพราะตัวเลือกของฉันอย่างแน่นอน

แพลตฟอร์ม Atlas เต็มไปด้วยคุณสมบัติมากมายที่นักพัฒนา JavaScript สมัยใหม่จะต้องชื่นชอบ น่าเศร้าที่งานนำเสนอนี้มีเวลาไม่เพียงพอที่จะอธิบายรายละเอียดทั้งหมด

แต่ Atlas ทำงานได้ดีมากในการรวบรวมรายละเอียดที่สำคัญจากทั้งส่วนหน้าและส่วนหลังของระบบนิเวศแบบไม่มีส่วนหัวของคุณไว้ในแดชบอร์ดเดียวที่สะดวก ซึ่งคุณสามารถดูบันทึกการสร้างแต่ละรายการและเอาต์พุตของรุ่น ตรวจสอบการปรับใช้ ตัวแปรสภาพแวดล้อมที่คุณใช้สำหรับ บิลด์เฉพาะ รวมถึงมีสิทธิ์เข้าถึงการตั้งค่าหรือคุณสมบัติเพิ่มเติมที่คุณสามารถเปิดใช้งานได้ เช่น สภาพแวดล้อมการแสดงตัวอย่าง ซึ่งคุณสามารถสร้างสภาพแวดล้อมเพิ่มเติมสำหรับทุก PR ที่สร้างขึ้นจาก GitHub repo ของคุณ หรือสร้างเว็บฮุคของสภาพแวดล้อมเพื่อสร้างส่วนเฉพาะของ แอพหรือ CDN ของคุณในขณะที่คุณทำการเปลี่ยนแปลง WordPress

สิ่งเหล่านี้เป็นไปได้ด้วยแพลตฟอร์ม Atlas และลดอุปสรรคในการเริ่มต้นสร้างด้วย WordPress แบบไม่มีหัว

ว้าว. ขอแสดงความยินดีอย่างที่ฉันบอกว่ามีจำนวนมากที่จะครอบคลุมใน 25 นาที โปรดอย่าลังเลที่จะฝึกฝนต่อไปหลังจากการนำเสนอ และติดต่อเราหากคุณมีคำถามใด ๆ ในการเริ่มใช้แหล่งข้อมูลสาธิต หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับเฮดเลสแต่ต้องการพื้นที่ในการเรียนรู้ ให้ลงชื่อสมัครใช้บัญชี Atlas Sandbox ฟรี นอกเหนือจากการนำที่เก็บโค้ดของคุณเองมาใช้จริงอย่างที่เราทำในวันนี้แล้ว คุณยังสามารถเริ่มต้นใช้งานพิมพ์เขียวที่สร้างไว้ล่วงหน้าบางส่วนของเราได้ ซึ่งเพียงแค่คลิกเดียว Project Stack จะช่วยให้คุณเห็นว่าโครงการที่ไม่มีส่วนหัวมีลักษณะอย่างไรเมื่อเสร็จสิ้น

We have a basic scaffold example, a portfolio example with some custom post types, and a new ecommerce example that integrates with big commerce through some of their APIs. Our team and developer relations is really passionate about meeting you wherever you are on your journey towards learning headless. So check out our headless developer's roadmap for a step-by-step series of articles and videos that build on one another to help backfill some of the concepts we've just glossed over today.

The headless ecosystem is young, but it's growing quickly. If you need help on a project, want to talk to some people using headless WordPress in production, or just want to hang out where the magic happens, join the roughly 1,000 other developers in our Discord focused on headless, where we chat, help each other with projects, and help get you moving. Thank you so much for coming to this talk. I look forward to collaborating with you on all of your future headless projects.