การพัฒนา Gutenberg พร้อมตัวอย่าง: Google Maps (ตอนที่ 1)
เผยแพร่แล้ว: 2019-04-04เมื่อไม่กี่วันก่อน เราได้เผยแพร่ปลั๊กอินใหม่ในไดเร็กทอรีปลั๊กอิน WordPress.org: Nelio Maps ตามชื่อที่ปรากฏ มันเป็น ปลั๊กอินแผนที่ ที่เพิ่มบล็อกประเภทใหม่ในตัวแก้ไข WordPress ด้วยสิ่งนี้ เราสามารถเพิ่มแผนที่ Google บนเพจหรือโพสต์ของเราได้อย่างง่ายดาย นี่คือลักษณะ:
Nelio Maps เป็นปลั๊กอินตัวแรกของเราที่ออกแบบมาสำหรับ Gutenberg ทั้งหมด แม้ว่าจะเป็นปลั๊กอินที่ค่อนข้างง่าย แต่ก็เป็นผลิตภัณฑ์ที่มีประโยชน์มาก ในอีกด้านหนึ่ง เนื่องจากผู้ใช้ที่ต้องการเพิ่มแผนที่ลงในเว็บไซต์ของตนสามารถทำได้โดยการติดตั้งปลั๊กอินที่เรียบง่ายและน้ำหนักเบา ในทางกลับกัน เนื่องจากนักพัฒนาทุกคนที่ต้องการพัฒนาใน Gutenberg มีตัวอย่างที่แท้จริงของการสร้างปลั๊กอิน "ตั้งแต่เริ่มต้น" เพียงแค่อ่านโพสต์นี้
เนื่องจากฉันทราบดีว่าการพัฒนาปลั๊กอินเช่นนี้ไม่ใช่สิ่งที่ง่ายที่สุดในโลก ฉันได้จัดระเบียบบทช่วยสอนนี้ในสามส่วนที่แตกต่างกัน วันนี้ผมจะอธิบาย วิธีสร้างปลั๊กอิน "ตั้งแต่เริ่มต้น" เพื่อที่เราจะได้มีโครงกระดูกที่เราจะใช้เพื่อสร้างผลิตภัณฑ์ขั้นสุดท้าย ในโพสต์ที่สอง ฉันจะอธิบาย วิธีรับแผนที่แบบโต้ตอบในตัวแก้ไขบล็อกของ WordPress และเราจะเห็นส่วนประกอบทั้งหมดที่ฉันสร้างขึ้นเพื่อสร้างปลั๊กอิน สุดท้าย ในโพสต์ที่สามและสุดท้าย เราจะดู วิธีบันทึกแผนที่ในฐานข้อมูล และวิธีที่เราสามารถแสดงแผนที่ใน ส่วนหน้า
กำหนดโครงการและปลั๊กอินที่เราต้องการ
อาจดูเหมือนเป็นเรื่องจริง แต่ก่อนที่จะเริ่มโครงการใหม่ สิ่งแรกที่เราต้องทำคือกำหนดสิ่งที่เราต้องการบรรลุด้วยโครงการดังกล่าว ขึ้นอยู่กับฟังก์ชันที่เราต้องการรวมไว้ เราจะมีข้อกำหนดที่แตกต่างกันออกไป มากำหนดประเภทของปลั๊กอินแผนที่ที่เราต้องการนำไปใช้ในบทช่วยสอนนี้
นี่คือข้อกำหนดของโครงการ:
- ควรจะสามารถ เพิ่มแผนที่ (หรือมากกว่าหนึ่ง) ในหน้าหรือโพสต์ของพวกเขา
- ควรตั้ง ศูนย์กลางของแผนที่ ไว้ที่ใดก็ได้โดย
- หรือลากแผนที่ด้วยเมาส์
- หรือค้นหาสถานที่ในช่องค้นหา
- ขนาดของแผนที่ควรปรับได้ ทั้งความกว้างและความสูง
- แผนที่ควรมี สไตล์ที่แตกต่างกัน (ขาวดำ จานสีที่กำหนดเอง ฯลฯ)
- ผู้ใช้ควรจะสามารถเพิ่ม เครื่องหมาย ในแผนที่
- หากมีเครื่องหมาย แผนที่จะต้องมาพร้อมกับกล่องข้อความที่มีข้อมูลเพิ่มเติมเกี่ยวกับเครื่องหมาย
ทะเยอทะยานใช่มั้ย? เอาล่ะ มาเริ่มกันเลย!
วิธีสร้างปลั๊กอิน Gutenberg "ตั้งแต่เริ่มต้น"
หากคุณติดตามบล็อกของเรา คุณอาจเห็นว่าเมื่อไม่กี่วันก่อน Antonio ได้เผยแพร่โพสต์ที่อธิบายวิธีสร้างปลั๊กอินโดยใช้เทมเพลตสำเร็จรูปของปลั๊กอินที่เราสร้างขึ้นใน Nelio หากคุณยังไม่ได้อ่านโพสต์ของเขา ฉันแนะนำให้คุณอ่านก่อน เพราะปลั๊กอินของเราจะใช้ปลั๊กอินสำเร็จรูป wp-beb ที่ Antonio อธิบายไว้
ในการเริ่มต้นโครงการ สิ่งแรกที่เราจะทำคือจำลองปลั๊กอินสำเร็จรูปของ Nelio ขั้นแรก สร้างที่เก็บใหม่ในบัญชี GitHub ของคุณ จากนั้นทำตามขั้นตอนที่อธิบายไว้ในหน้าความช่วยเหลือของ Github เพื่อจำลองต้นแบบของเรา:
git clone --bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git push --mirror https://github.com/your-username/your-repo.git เมื่อโปรเจ็กต์ของคุณพร้อมแล้ว ให้ทำตามคำแนะนำที่พบใน README.md เพื่อคอมไพล์โปรเจ็กต์ เพื่อให้สามารถเห็นโปรเจ็กต์ในไซต์ WordPress ของคุณ
วิธีการแปลง Plugin Boilerplate เป็น Plugin
ตามที่ปรากฏในเอกสารประกอบของปลั๊กอิน สิ่งแรกที่เราต้องทำคือเปลี่ยนชื่อโครงการในซอร์สโค้ด นั่นคือคุณต้องเปลี่ยน wp-beb ทั้งหมด (ทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็กพร้อมยัติภังค์หรือขีดล่าง) โดยใช้ชื่อปลั๊กอินของเรา (ในกรณีของฉัน nelio-maps )
สำหรับสิ่งนี้ เราสามารถใช้สคริปต์ต่อไปนี้:
เพียงจำไว้ว่าคุณจะต้องแทนที่สตริง nelio maps int บรรทัดที่ 5, 8, 9 และ 10 เป็นชื่อปลั๊กอินของคุณ
ในทางกลับกัน ตอนนี้เป็นเวลาที่ดีที่จะเปลี่ยนเอกสารประกอบของปลั๊กอิน ในอีกด้านหนึ่ง คุณต้องแก้ไขไฟล์ README.md และ readme.txt เพื่อให้สอดคล้องกับวัตถุประสงค์ของปลั๊กอินใหม่ของคุณ (โดยไม่ลืมพูดถึงความจริงที่ว่าคุณกำลังใช้ต้นแบบของเราเป็นฐานแน่นอน) ในทางกลับกัน คุณควรเปลี่ยนความคิดเห็นแรกในไฟล์ PHP หลัก เนื่องจากเป็นข้อมูลที่ WordPress ใช้เพื่อแสดงปลั๊กอินในหน้าจอ ปลั๊กอิน
คุณสามารถดูว่าฉันทำการเปลี่ยนแปลงเหล่านี้ได้อย่างไรในภารกิจแรกของโครงการ Nelio Maps
วิธีทำความสะอาด Plugin Boilerplate ของสิ่งที่ไม่จำเป็น
ปลั๊กอินสำเร็จรูปของ Nelio ประกอบด้วยส่วนประกอบสองสามอย่างตามค่าเริ่มต้น: (a) บล็อกสาธิตและ (b) ปลั๊กอิน Gutenberg เนื่องจากเราสนใจแต่การสร้างบล็อก (แผนที่) เท่านั้น เราจะกำจัดทุกสิ่งที่เหลืออยู่ (ปลั๊กอิน Gutenberg)
ขั้นตอนนี้ค่อนข้างง่าย เนื่องจากโดยพื้นฐานแล้วจะใช้ "การลบ" สิ่งที่ไม่จำเป็นออกจากปลั๊กอิน โดยเฉพาะอย่างยิ่ง เราควร:
- กำจัดเนื้อหาทั้งหมดที่ปรากฏในโฟลเดอร์
assets(ซึ่งเป็นที่ที่เพิ่มปลั๊กอิน Gutenberg สไตล์และไอคอนของปลั๊กอิน) - ทำความสะอาดไฟล์
webpack.config.jsเนื่องจากมีกฎสองสามข้อที่ใช้ไฟล์ในassetsเราเพิ่งลบออก - ล้างไฟล์หลักของปลั๊กอิน เนื่องจากมันเข้าคิวในสไตล์ชีตและไฟล์ JavaScript ที่ไม่มีอยู่แล้ว
คุณสามารถดูการเปลี่ยนแปลงทั้งหมดในคอมมิตนี้ หากคุณคอมไพล์โค้ดอีกครั้ง คุณจะเห็นว่าบล็อกการ สาธิต ยังคงมีอยู่ แต่ปลั๊กอิน Gutenberg ที่ปรากฏขึ้นที่มุมขวาบนของหน้าจอกลับไม่มี
สรุป
ในโพสต์ของวันนี้ เราได้เห็นวิธีสร้างปลั๊กอินสำหรับ Gutenberg แล้ว ขั้นแรก เราได้กำหนดประเภทของโครงการที่เราต้องการสร้าง และเราได้ระบุข้อกำหนดของโครงการแล้ว ต่อไป เราได้เห็นขั้นตอนที่จำเป็นในการปรับปลั๊กอินสำเร็จรูปจาก Nelio เป็นโครงการใหม่ นั่นคือ เราได้เห็นวิธีการโคลนโปรเจ็กต์ต้นแบบของ Nelio และทำความสะอาดเพื่อให้ตรงกับความต้องการเฉพาะของเรา
เจอกันใหม่สัปดาห์หน้ากับส่วนที่สองของบทช่วยสอนนี้ ซึ่งเราจะปรับเปลี่ยนบล็อกการ สาธิต เพื่อให้ทำงานทั้งหมดที่เราได้อธิบายไว้ในตอนต้นของโพสต์นี้
ภาพ เด่น โดย Brett Zeck บน Unsplash