ทุกสิ่งที่คุณต้องการเพื่อเริ่มต้นกับ WordPress Gutenberg

เผยแพร่แล้ว: 2018-01-23

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

กูเทนเบิร์กคืออะไร?

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

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

Matt Mullenweg Gutenberg นำเสนอเรื่อง State of the Word 2017

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

เหตุใด Gutenberg จึงดีสำหรับฉัน และสิ่งนี้มีความหมายต่ออนาคตของ WordPress อย่างไร

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

การใช้บล็อกช่วยเพิ่มประสิทธิภาพและลดความยุ่งยากในวิธีการทั้งหมดที่เราสร้างหน้าเว็บ (รหัสย่อ วิดเจ็ต HTML ที่กำหนดเอง สื่อ การจัดรูปแบบข้อความ การฝัง และเมตาบ็อกซ์) ตามที่ Matt อธิบายในโพสต์ของเขา:

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

การสาธิตและตัวอย่าง

ในการเสวนาจาก WordCamp US 2017 นี้ Morten ได้อธิบายถึงสิ่งที่นักพัฒนา WordPress จำเป็นต้องมุ่งเน้นและวิธีที่ WordPress จะถูกแปลงด้วย Gutenberg

Morten Rand-Hendriksen: Gutenberg และ WordPress of Tomorrow

ใน screencast นี้ Human Made สาธิตชุดการใช้งานขั้นสูงของบล็อก Gutenberg

เริ่มต้นอย่างไร

เล่นกับ Frontenberg การ สาธิตสด ส่วนหน้าแบบจำกัดของตัวแก้ไข Gutenberg ซึ่งจะช่วยให้คุณทำความคุ้นเคยกับสภาพแวดล้อมการแก้ไข Gutenberg

Frontenberg – สนามเด็กเล่น Gutenberg ที่ออกจากระบบเพื่อการทดสอบทันที

อ่าน บทความต่อไปนี้จาก Matias Ventura Bausero หนึ่งในวิศวกรหลัก ที่อยู่เบื้องหลัง Gutenberg

Gutenberg หรือ Ship of Theseus – ระบบสามารถพัฒนาโดยพื้นฐานโดยไม่มีการเปลี่ยนแปลงอย่างมากได้อย่างไร?

ลองใช้สัญลักษณ์ Sketch เหล่านี้และลองออกแบบบล็อกที่คุณกำหนดเอง

Automattic/gutenberg-themes-sketch – gutenberg-themes-sketch – ชุดไฟล์ Sketch ที่จะช่วยคุณออกแบบธีม WordPress ที่ขับเคลื่อนด้วยบล็อก

อ่าน คู่มือนักพัฒนาอย่างเป็นทางการใน wordpress.org มันสะอาด อ่านง่าย และมีวิวัฒนาการอย่างต่อเนื่อง คุณควรสมัครรับจดหมายข่าวเพื่อรับการอัปเดต

บทนำ – “Gutenberg” เป็นชื่อรหัสสำหรับโฟกัสตัวแก้ไข WordPress 2017

เจาะลึกลงไปใน ReactJS เนื่องจาก Gutenberg สร้างขึ้นบนนั้น

React – ไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้ – ไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้

ชำระเงิน ตัวอย่าง Gutenberg ที่ สร้างโดยทีมงานหลักของ WordPress

WordPress/gutenberg-examples = gutenberg-examples – ตัวอย่างการขยาย WordPress/Gutenberg ด้วยบล็อก

อ่าน e-book โดยละเอียดโดย Human Made (หนึ่งในหน่วยงานพัฒนา WP ที่ดีที่สุด)

Gutenberg ตัวแก้ไข WordPress ใหม่ (เอกสารไวท์เปเปอร์) – เอกสารไวท์เปเปอร์นี้ครอบคลุมความท้าทายหลักในการนำไปปฏิบัติและนำไปใช้ ตลอดจนคำแนะนำเกี่ยวกับวิธีที่องค์กรสามารถดำเนินการได้ในขณะนี้

ตรวจสอบหลักสูตรการพัฒนานี้โดย Zac Gordon ผู้ให้การศึกษาเกี่ยวกับแพลตฟอร์มการศึกษาที่ได้รับความนิยมสูงสุดบางส่วน FrontendMasters, Treehouse และ Udemy

หลักสูตรการพัฒนา Gutenberg จาก Zac Gordon – หลักสูตร Gutenberg

สุดท้าย ติดตั้งชุดเครื่องมือสำหรับนักพัฒนาที่ไม่มีการกำหนดค่าสำหรับการสร้างปลั๊กอินบล็อก WordPress Gutenberg โดย Ahmad Awais

ahmadawais/create-guten-block – ชุดเครื่องมือสำหรับนักพัฒนา #0CJS ที่ไม่มีการกำหนดค่าสำหรับการสร้างบล็อก WordPress Gutenberg

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

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

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