วิธีสร้างปลั๊กอิน Gutenberg Block อย่างง่าย

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

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

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

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

เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มกันเลยดีกว่า เพราะมีอะไรให้เรียนรู้อีกมาก

บล็อกคืออะไร?

หากคุณเป็นมือใหม่ที่สมบูรณ์แบบ คุณอาจสงสัยว่าธุรกิจ Gutenberg นี้เกี่ยวกับอะไร ฉันรู้ ฉันค่อนข้างสับสนเมื่อแนะนำ Gutenberg แต่ไม่มีใครต้องตำหนิ เราทุกคนเคยชินกับ Classic Editor ที่ทำให้กะไม่สะดวกในตอนแรก

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

บล็อกถือว่าย่อหน้า หัวเรื่อง สื่อ และส่วนฝังทั้งหมดเป็นส่วนประกอบที่เมื่อรวมเข้าด้วยกันแล้ว จะประกอบเป็นเนื้อหาที่จัดเก็บไว้ในฐานข้อมูล WordPress โดยแทนที่แนวคิดดั้งเดิมของข้อความรูปแบบอิสระด้วยสื่อฝังตัวและรหัสย่อ – คู่มือตัวแก้ไขบล็อก

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

บรรณาธิการ Gutenberg กำลังแสดงบล็อกบางส่วน

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

เช่นเดียวกับเครื่องมือสร้างเพจที่สร้างขึ้นโดยตรงใน WordPress

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

ด้วยวิธีนั้น เรามาทำส่วนที่ดีที่สุดของโพสต์ของวันนี้กันดีกว่า มาเรียนรู้การสร้างบล็อคง่ายๆ กันเถอะ คุณสามารถทำได้ด้วยตนเองหรือใช้ปลั๊กอิน เช่น Genesis Custom Blocks (เดิมคือ BlockLab), Lazy Blocks หรือ ACF การสร้างบล็อกแบบกำหนดเองนั้นค่อนข้างเป็นเรื่องทางเทคนิค ดังนั้นสำหรับวัตถุประสงค์ของโพสต์วันนี้ เราจะใช้ปลั๊กอิน

วิธีสร้างบล็อกแบบกำหนดเอง (โดยใช้ Genesis Custom Blocks)

การใช้เส้นทางปลั๊กอินนั้นง่ายกว่าเนื่องจากการสร้างบล็อก Gutenberg แบบกำหนดเองตั้งแต่เริ่มต้นจำเป็นต้องมีความเข้าใจ HTML, CSS, PHP และที่สำคัญกว่านั้นคือ JavaScript คุณจะต้องเข้าใจ React ซึ่งจะทำให้ผู้เริ่มต้นเล่นโค้ง

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

ติดตั้ง Genesis Custom Blocks

ลงชื่อเข้าใช้แดชบอร์ดผู้ดูแลระบบ WordPress และไปที่ Plugins > Add New ดังที่แสดงด้านล่าง

จากนั้นป้อน "Genesis Custom Blocks" ลงในช่องค้นหาคำหลักและกดปุ่ม ติดตั้งทันที :

หลังจากนั้น เปิดใช้งาน ปลั๊กอินเพื่อเริ่มปาร์ตี้

คุณสบายดีไหม

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

จากเมนูผู้ดูแลระบบ WordPress ให้ไปที่ Custom Blocks > Add New ตามที่เราเน้นด้านล่าง

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

ต่อไปนี้เป็นคำสองสามคำที่จะอธิบายสิ่งที่คุณเห็นในภาพหน้าจอด้านบน เริ่มจากด้านบนคุณมี

พื้นที่แก้ไขหลัก:

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

ตัวเลือกแถบด้านข้าง

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

การสร้างบล็อกแบบกำหนดเอง

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

ใน Builder กำหนดชื่อที่เหมาะสมให้กับบล็อกที่คุณกำหนดเอง ฉันจะไปกับ CTA สำหรับอันนี้ดังที่แสดงด้านล่าง

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

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

การเพิ่มบล็อกฟิลด์

ในส่วน Editor Fields ให้คลิกไอคอน Plus (+) เพื่อเพิ่มฟิลด์แรก ดังที่แสดงด้านล่าง

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

หลังจากนั้น เพิ่มฟิลด์ข้อความและไฟล์ในลักษณะเดียวกัน

อย่าเพิ่งฉลอง มีขั้นตอนเดียวที่ต้องทำ สลับไปที่เครื่องมือ แก้ไขเทมเพลต > มาร์กอัป:

ของฉันมีรหัสอยู่แล้ว แต่ของคุณจะว่างเปล่า

ที่นี่ เราจะออกแบบลักษณะบล็อกที่คุณกำหนดเองบนไซต์ของคุณ ตัวแก้ไขเทมเพลต ยอมรับ HTML, CSS และทากฟิลด์ (ซึ่งคุณต้องใส่ในวงเล็บ 2 อัน) หากคุณต้องการใช้ PHP คุณสามารถสร้างเทมเพลตโดยใช้วิธีการสร้างเทมเพลต PHP แทน

ไม่ต้องกังวลมันง่าย

ภายในเครื่องมือ แก้ไขเทมเพลต ใต้แท็บมาร์ กอัป (ดูภาพด้านบน) ให้เพิ่มมาร์กอัป HTML (โค้ด) ต่อไปนี้

 <div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{ฟิลด์ข้อความ}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">ดาวน์โหลด</button></a>
</div>
</div>

ขณะที่คุณเขียนมาร์กอัป HTML คุณจะสังเกตเห็นว่าเครื่องมือ แก้ไขเทมเพลต จะเติมช่องทาก (เช่น {{image-field}} ) ให้คุณโดยอัตโนมัติ

ถัดไป ไปที่ส่วน CSS เพื่อเพิ่มสไตล์ที่เรียบง่าย

คุณสามารถเพิ่มสไตล์ที่คุณต้องการได้ แต่นี่คือสิ่งที่ฉันกำลังใช้อยู่:

 .cta-บล็อก {
จัดข้อความ:ศูนย์;
พื้นหลัง-สี:สีส้ม;
ความกว้าง:100%;
ความสูง:อัตโนมัติ;
เส้นขอบ: สีส้มทึบ 2px;
}

.dwnld {
พื้นหลัง-สี: สีดำ;
เส้นขอบ: 2px สีดำทึบ;
สี: สีเขียว;
ช่องว่างภายใน: 5px 10px;
จัดข้อความ: ศูนย์;
แสดง: บล็อกอินไลน์;
ขนาดตัวอักษร: 20px;
ระยะขอบ: 10px 30px;
เคอร์เซอร์: ตัวชี้;
รัศมีเส้นขอบ:2px;

}

และคุณก็พร้อมแล้ว! คลิก เผยแพร่ :

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

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

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

ตอนนี้ ถ้าฉันตรวจสอบบล็อก CTA แบบกำหนดเองใหม่ของฉันที่ส่วนหน้า ฉันเห็นสิ่งนี้:

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

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

ความคิดหรือคำถามใด ๆ ? โปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง