DE{CODE}: คุณลักษณะใหม่สำหรับ Atlas

การอัปเดตเครื่องมือพัฒนา Atlas แบบไร้หัวของ WP Engine จะช่วยให้คุณบรรลุข้อกำหนดที่ยากที่สุดของลูกค้าได้ การใช้บัญชี Sandbox ฟรี การสาธิตนี้จะแสดงวิธีเพิ่มคุณลักษณะใหม่เหล่านี้ในไซต์ที่ไม่มีส่วนหัวของคุณ ดูวิดีโอด้านล่างเพื่อเริ่มสร้างเว็บไซต์ที่มีประสิทธิภาพและปลอดภัยที่สุดของคุณ!

สไลด์เซสชัน

การถอดเสียงแบบเต็ม

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

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

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

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

ขั้นตอนต่อไปคือการเชื่อมต่อแอปนี้กับ GitHub ดังนั้นเราจะคลิกปุ่มเพื่อดำเนินการดังกล่าว จากนั้นลงชื่อเข้าใช้ GitHub หลังจากนั้นก็จะเจอหน้าจอนี้ แสดงว่า App ของเราได้รับอนุญาตแล้ว ต่อไป เราต้องโคลน repo นี้จริงๆ ดังนั้นเราจะคลิก Clone Blueprint จากนั้นตั้งชื่อให้กับที่เก็บใหม่ของเรา และคลิกปุ่มเพื่อสร้าง repo ใหม่โดยใช้เทมเพลตพิมพ์เขียวนี้

ที่นี่คุณจะเห็นว่า repo ของแอปใหม่นี้ถูกสร้างขึ้นในบัญชี GitHub ของฉัน ตอนนี้เราต้องเชื่อมโยง repo นี้กับแอป Atlas กลับมาที่พอร์ทัลผู้ใช้ เราจะเลื่อนลงไปที่ส่วน Selected Repository หากคุณอนุญาตให้เข้าถึง repos ทั้งหมดของคุณ คุณอาจเห็นมันในรายการ หากไม่มี คุณสามารถคลิกที่ Manage Repositories

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

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

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

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

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

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

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

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

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

ในการเริ่มต้น เราจะคัดลอกลิงก์ไปยัง GitHub repo ของเรา จากนั้นดำเนินการ git clone บนบรรทัดคำสั่งเพื่อโคลนโครงการของเรา จากที่นี่ เราสามารถซีดีลงในไดเร็กทอรีโปรเจ็กต์นั้น จากนั้นรัน NPM install เพื่อติดตั้งการขึ้นต่อกันของโปรเจ็กต์ของเรา เมื่อเสร็จแล้ว เราจะดำเนินการต่อและเปิดโครงการในโปรแกรมแก้ไขรหัส

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

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

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

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

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

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

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

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

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

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

สมมติว่าเราจะตั้งชื่อให้รูปภาพแต่ละรูป ดังนั้นฉันจะพูดว่า Title แล้วเรียกมันว่า Photo Title เป็นตัวระบุ API และนั่นเป็นวิธีที่จะพร้อมใช้งานในสคีมา GraphQL นั่นคือสิ่งที่ทำ และเราจะบอกว่าเราต้องการใช้สิ่งนี้เป็นชื่อรายการ และข้อความบรรทัดเดียวก็ใช้ได้ ไปข้างหน้าและคลิกสร้าง

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

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

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

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

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

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

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

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

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

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

มีคุณสมบัติที่ยอดเยี่ยมมากที่ Atlas Content Modeler แสดงออกมาเพื่อทำให้เป็นเรื่องง่ายมาก ฉันจะกลับไปที่ Content Modeler ที่นี่และหาโมเดลภาพถ่ายของเรา แล้วคลิกไอคอนจุดไข่ปลาเล็กๆ ที่นี่ และฉันจะไปที่ Open in Graphical ทันทีที่ฉันคลิกที่นี่ มันจะสร้างแบบสอบถามให้ฉัน ซึ่งรวมถึงโมเดลเนื้อหานี้ที่เราสร้างขึ้น รูปภาพ

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

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

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

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

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

ดังนั้นใน Source ฉันจะไปที่ Pages แล้วฉันจะหาโครงการ มันอยู่ที่นั่น และเปิดไฟล์ index.js ข้างในนั้น ดังนั้นเลื่อนลงมาเล็กน้อยและเราจะเห็นว่ามีการใช้ hook การแบ่งหน้าของโหนดนี้ และนี่คือ React hook ที่มาจากตำแหน่งนี้ ภายในโฟลเดอร์ Hooks และภายในนั้น เราเรียก query.projects

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

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

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

ดังนั้นชื่อของค่าคงที่นี้จึงหมายถึงโปรเจ็กต์ ไปข้างหน้าและเปลี่ยนชื่อเป็นขั้นตอนแรก เราสามารถพูดได้ว่าฟิลด์ pre-pass ของโหนดภาพถ่าย จึงจะดี เราจะต้องระบุรายการฟิลด์ของเราเอง บางทีเราอาจจะทิ้ง ID ของฐานข้อมูลเอาไว้ก่อน แล้วเดี๋ยวเราจะเพิ่มเข้าไป

ต่อไปมาดูกันดีกว่า รูปถ่ายล่วงหน้า อ้าว เสียชื่อไปแล้ว เราจะไปที่นั่น. ตอนนี้พวกเขาจับคู่กันอีกครั้ง เอาล่ะ. แทนที่จะเป็น query.projects โปรดจำไว้ว่าเราต้องการให้ query.photos สำหรับประเภทเนื้อหาที่กำหนดเองของเรา ดังนั้นไปข้างหน้าและอัปเดตเป็นรูปภาพที่นั่น เลื่อนลงเล็กน้อย

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

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

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

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

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

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

และลองทดสอบดูว่าเราสามารถแสดงผลข้อมูลตรงนี้ได้หรือไม่ ภายใต้ Hello H1 ที่เรามี มาทำสิ่งนี้กันเถอะ เราจะทำ JSON.stringify แล้วเราจะส่งต่อสิ่งนั้น ดังนั้นเราจะทำข้อมูลที่นี่ และดูว่าเราสามารถแสดงข้อมูลไปยังหน้าของเราได้หรือไม่

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

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

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

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

ด้วยความรู้นั้น เราสามารถทำการตัดสินใจภายในองค์ประกอบของเราได้ที่นี่ ลองคิดดูว่าเราจะทำอย่างนั้นได้อย่างไร ฉันจะบอกว่าถ้าเรามีรูปถ่าย เราก็อยากจะเรนเดอร์สิ่งหนึ่ง เราจะพูดว่า-มาดูกัน เราต้องการทำ data.photos จากนั้นเราจะทำแผนที่เหนือสิ่งเหล่านั้น ดังนั้นสำหรับแต่ละภาพ เราจะแสดงบางอย่าง

งั้นขอคืนของง่ายๆก่อน เราจะคืนของ- มาดูกัน เราจะสร้าง H2 เพราะนี่จะเหมือนกับการ์ดใบหนึ่งของเรา แล้วเราจะพูดว่า photo.title แบบนั้น เอาล่ะ. ดังนั้นเราจะแมปกับรูปภาพแต่ละรูปของเรา และสำหรับแต่ละภาพนั้น เราจะส่งคืน H2 พร้อมชื่อภาพนั้น เอาล่ะ.

ทั้งหมดนี้คือสิ่งที่เราต้องการถ้าเรามีรูปภาพที่จะเรนเดอร์จริงๆ แต่ถ้าไม่มีทางเลือกล่ะ? เราจะได้ else clause ตรงนี้, และลองเรนเดอร์อย่างอื่นดู. แล้วย่อหน้าล่ะ และเราจะบอกว่าไม่มีรูปภาพที่จะแสดง ทีนี้ถ้าเราบันทึกได้ ก็ไปเลย ตอนนี้เรากำลังแสดงชื่อโพสต์ที่นี่

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

หลังจากชื่อเรื่องแล้ว เรามาแสดงคำอธิบายกัน เราสามารถทำอันต่อไปได้ มันจะเป็น photo.description แบบนั้น แต่เราไม่สามารถเรนเดอร์มันด้วยตัวเองได้ เช่น ภายในคอนเทนเนอร์ อะไรแบบนี้ หากเราพยายามทำเช่นนี้ มันจะไม่ได้ผลสำหรับเรา เพราะ HTML จะไม่ถูก Escape ถ้าฉันบันทึก คุณจะเห็นว่าตอนนี้เรามี HTML ที่ใช้ Escape แสดงบนหน้า ซึ่งไม่ใช่สิ่งที่เราต้องการ

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

จากนั้นค่าที่คุณส่งผ่านไปยังสิ่งที่คุณต้องการแสดงผลโดยไม่หลีกหนี สำหรับเราแล้ว มันจะเป็น photo.description แบบนั้น จากนั้น div นี้สามารถเป็นเสื้อผ้าตัวเองได้ เอาล่ะ. ตอนนี้ฉันจะให้บันทึกนั้น เราจะดูว่าเราได้อะไร เย็น. ตอนนี้ HTML ของเราจะไม่ถูก Escape อีกต่อไป ดังนั้นมันจึงดูดีสำหรับฉัน

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

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

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

เท่านี้ก็เจ๋งแล้ว เรากำลังก้าวหน้าอย่างมาก สิ่งสุดท้ายคือการดูแลพื้นที่ที่ทำซ้ำได้สำหรับตัวแบบที่อยู่ในภาพ สิ่งที่ฉันจะทำคือสร้างย่อหน้าหนึ่งที่นี่และปิดมัน จากนั้นภายในแท็กย่อหน้านี้ เราสามารถเปิดเคอร์ลี่และทำ photo.subjects เดียวกันของเราได้ แต่ตอนนี้เราจะจัดการกับจุดสิ้นสุดของการเข้าร่วม และเราจะบอกว่า [ไม่ได้ยิน] เราต้องการเข้าร่วมด้วยเครื่องหมายจุลภาค เว้นวรรค แบบนั้น และฉันจะให้บันทึกนั้น

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

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

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

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

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

PRESENTER: และนั่นคือบทสรุปสำหรับ DE{CODE} 2022 ฉันหวังว่าคุณจะพบว่ามันสร้างแรงบันดาลใจและกำลังจะออกไปพร้อมกับความเชี่ยวชาญ WordPress ที่มากขึ้นและการเชื่อมต่อชุมชนใหม่ มองหาเนื้อหาที่บันทึกไว้ในไซต์ตั้งแต่วันศุกร์เพื่อติดตามสิ่งที่คุณอาจพลาดหรือดูวิดีโออีกครั้ง

ฉันอยากจะกล่าวคำขอบคุณเป็นครั้งสุดท้ายสำหรับพันธมิตรผู้สนับสนุนของเรา: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios และ 10Up ขอขอบคุณเป็นอย่างยิ่งสำหรับการบริจาคให้กับงานระดมทุน DE{CODE} ของเรา เราซาบซึ้งในความเอื้ออาทรของคุณ

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

นั่นคือทั้งหมดจากฉัน ขอบคุณมากสำหรับการเข้าร่วมกับเราและดูแล