คุณต้องการสร้าง WordPress ปลั๊กอิน บล็อก Gutenberg ง่าย ๆ ?
เราทุกคนไม่รัก WordPress ใช่ไหม แพลตฟอร์มนี้ประสบความสำเร็จอย่างมากตั้งแต่เริ่มก่อตั้ง โดยนักพัฒนาได้เพิ่มคุณสมบัติใหม่อย่างต่อเนื่อง หนึ่งในคุณสมบัติที่โดดเด่นของครั้งล่าสุดคือ WordPress Block Editor ชื่อรหัส Gutenberg.
Gutenberg นำเสนอวิธีใหม่ที่น่าตื่นเต้นแก่ผู้ใช้ WordPress ในการเผยแพร่เนื้อหาและปรับแต่งเว็บไซต์ของพวกเขา ใช้งานง่ายอย่างเหลือเชื่อ ซึ่งเป็นข่าวดีสำหรับทั้งผู้เริ่มต้นและนักพัฒนา หากคุณกำลังใช้ WordPress เวอร์ชันล่าสุด คุณคุ้นเคยกับตัวแก้ไขบล็อกและแนวคิดของบล็อกอยู่แล้ว
ตามค่าเริ่มต้น ตัวแก้ไขบล็อกของ WordPress มาพร้อมกับบางบล็อกที่ให้คุณใส่ข้อความ รูปภาพ คำพูด เสียง วิดีโอ การฝัง ฯลฯ นอกจากนั้น ยังมีส่วนเสริมของ Gutenberg มากมายที่ให้คุณขยายตัวแก้ไขได้โดยไม่ทำลาย เหงื่อ
อย่างไรก็ตาม คุณอาจมีความต้องการเฉพาะที่พร้อมท์ให้คุณสร้างบล็อกที่กำหนดเอง ในบทความนี้ เราจะแสดงให้คุณเห็นในสองสามย่อหน้า วิธีสร้างบล็อก Gutenberg แบบกำหนดเองเพื่อตอบสนองความต้องการเฉพาะของคุณ
เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มกันเลยดีกว่า เพราะมีอะไรให้เรียนรู้อีกมาก
แต่ก่อนหน้านี้หากคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ
จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่
บล็อกคืออะไรกันแน่?
บล็อกถือว่าย่อหน้า หัวเรื่อง สื่อ และการฝังเป็นส่วนประกอบที่เมื่อรวมเข้าด้วยกันแล้วจะประกอบเป็นเนื้อหาที่จัดเก็บไว้ในฐานข้อมูล WordPress โดยแทนที่แนวคิดดั้งเดิมของข้อความด้วยสื่อและการฝัง
ในอดีต ผู้ใช้ WordPress อาศัยข้อความและรหัสย่อในการเพิ่มเนื้อหา Gutenberg ใช้ บอกเล่า. ตัวแก้ไขใหม่ช่วยให้คุณใช้หน่วยบล็อกเพื่อสร้างเลย์เอาต์ที่หลากหลายและยืดหยุ่นซึ่งง่ายต่อการจัดการ ขณะนี้ คุณสามารถใช้ตัวแก้ไขบล็อกสำหรับโพสต์และเพจได้ แต่มีแผนดำเนินการอยู่ รองรับการแก้ไขเว็บไซต์อย่างเต็มรูปแบบในอนาคต.
การทำงานกับบล็อกทำให้การสร้างเนื้อหาใน WordPress ค่อนข้างสดชื่น นอกจากนี้ ปลั๊กอินที่มีอยู่จำนวนมากยังรองรับตัวแก้ไขใหม่และมาพร้อมกับบล็อกที่พร้อมใช้งาน ซึ่งทำให้ง่ายต่อการเพิ่มเนื้อหาจากปลั๊กอินดังกล่าว ตัวแก้ไขช่วยให้คุณสามารถลากและวางบล็อคลงบนหน้าเพื่อให้คุณสามารถกดปุ่มเผยแพร่ได้เร็วขึ้น
เช่นเดียวกับเครื่องมือสร้างเพจที่รวมเข้ากับ WordPress โดยตรง
หากคุณคุ้นเคยกับ ตัวสร้างเพจ เช่น Elementorคุณคงคุ้นเคยกับแนวคิดของการสร้างเพจแบบลากและวาง Gutenberg เป็นความพยายามในการผสานรวมการสร้างเว็บไซต์แบบลากและวางลงในแกนหลักของ WordPress
มาดูส่วนที่ดีที่สุดของบทความของวันนี้กัน มาเรียนรู้การสร้างบล็อคอย่างง่ายกัน คุณสามารถทำได้ด้วยตนเองหรือใช้ปลั๊กอินเช่น ปฐมกาลบล็อกที่กำหนดเอง (เดิมคือ BlockLab) ขี้เกียจบล็อก ou อคส. การสร้างบล็อกแบบกำหนดเองนั้นค่อนข้างเป็นเรื่องทางเทคนิค ดังนั้นสำหรับวัตถุประสงค์ของบทความวันนี้ เราจะใช้ปลั๊กอิน
วิธีสร้างบล็อกแบบกำหนดเอง (โดยใช้ Genesis Custom Blocks)
ง่ายกว่าที่จะไปที่เส้นทางของปลั๊กอินเพราะการสร้างบล็อก Gutenberg แบบกำหนดเองตั้งแต่เริ่มต้นนั้นต้องการความเข้าใจที่ดีเกี่ยวกับ HTML, CSS, PHP และที่สำคัญที่สุดคือจาวาสคริปต์ คุณจะต้องเข้าใจ React ด้วย
สำหรับส่วนถัดไป เราจะใช้ Genesis Custom Blocks เวอร์ชันฟรีมีอยู่ในที่เก็บ WordPress อย่างเป็นทางการ ซึ่งหมายความว่าเราสามารถติดตั้งในแดชบอร์ดผู้ดูแลระบบ WordPress ได้
ติดตั้ง Genesis Custom Blocks
ลงชื่อเข้าใช้แดชบอร์ดผู้ดูแลระบบ WordPress และไปที่ ส่วนขยาย> เพิ่มดังที่แสดงด้านล่าง
จากนั้นป้อน " ปฐมกาลบล็อกที่กำหนดเอง ในช่องค้นหาคำสำคัญและ คลิก ซูร์ เลอ บูตอง ติดตั้งในขณะนี้
หลังจากนั้น, กระตุ้น ปลั๊กอินที่จะช่วยให้คุณเริ่มต้นได้
ต่อไป มาสร้างบล็อกแบบกำหนดเองใหม่กัน เพื่อจุดประสงค์ในการอธิบายประกอบ มาสร้างคำกระตุ้นการตัดสินใจ (CTA) แบบกำหนดเองที่เราจะเพิ่มที่ส่วนท้ายของทุกบทความที่เราเผยแพร่ ส่วนที่ดีที่สุดคือคุณสามารถใช้บล็อกซ้ำได้เพื่อช่วยให้คุณไม่ต้องสร้างบล็อกเดิมซ้ำแล้วซ้ำอีก
ในเมนูผู้ดูแลระบบ WordPress ให้ไปที่ บล็อกแบบกำหนดเอง > เพิ่มใหม่ตามที่เราเน้นด้านล่าง
ซึ่งจะนำคุณไปยังหน้าถัดไปซึ่งคุณจะพบตัวเลือกทั้งหมดในการสร้างบล็อกที่กำหนดเอง (ในกรณีของเราคือ CTA):
ต่อไปนี้เป็นคำสองสามคำที่จะอธิบายสิ่งที่คุณเห็นในภาพหน้าจอด้านบน เริ่มต้นจากด้านบนคุณมีมัน
พื้นที่แก้ไขหลัก:
- ผู้ก่อสร้าง – คุณอาจจะใช้เวลามากมายในการออกแบบบล็อกที่คุณกำหนดเอง ที่ คอนสตรัคเตอร์ ให้คุณเพิ่มชื่อ ฟิลด์ กระสุน คีย์เวิร์ด หมวดหมู่ และดูตัวอย่างบล็อกที่คุณกำหนดเอง คุณจะได้เรียนรู้วิธีเพิ่มฟิลด์
- แก้ไขเทมเพลต – หลังจากออกแบบบล็อกแบบกำหนดเองของคุณ (เช่น เพิ่มฟิลด์ต่างๆ) คุณจะต้องสร้างเทมเพลตบล็อก (อ่าน เพิ่มโค้ดบางส่วน) ใน บรรณาธิการโมเดล. เราจะเรียนรู้เพิ่มเติมเมื่อเราออกแบบ CTA
- ตัวอย่างบรรณาธิการ – ช่วยให้คุณสามารถดูตัวอย่างบล็อกที่กำหนดเองในตัวแก้ไขบล็อกของ WordPress
- ดูตัวอย่างส่วนหน้า – ที่นี่คุณสามารถดูตัวอย่างว่าบล็อกที่กำหนดเองจะมีลักษณะอย่างไรในเว็บไซต์ของคุณ
- กองบรรณาธิการ – จะแสดงฟิลด์ในพื้นที่แก้ไขหลักของบทความหรือหน้า (เช่นเดียวกับที่คุณเห็นโพสต์ปกติของคุณในโปรแกรมแก้ไข WordPress)
- สารวัตรสนาม – แสดงฟิลด์ในแถบด้านข้างขวาด้านล่าง Block Inspector
ตัวเลือกแถบด้านข้าง
- บุ้ง – จะถูกเติมโดยอัตโนมัติตามชื่อที่คุณให้กับบล็อกที่คุณกำหนดเอง นี่เป็นสิ่งสำคัญเมื่อสร้างโมเดลบล็อก
- ไอคอน – ตัวเลือกนี้ให้คุณเพิ่มไอคอนให้กับบล็อกที่คุณกำหนดเอง
- หมวดหมู่ – อนุญาตให้คุณกำหนดหมวดหมู่ให้กับบล็อกที่คุณกำหนดเอง คุณสามารถจัดหมวดหมู่บล็อกที่คุณกำหนดเองได้โดยใช้หมวดหมู่ที่มีอยู่แล้วภายใน หรือสร้างหมวดหมู่ใหม่ทั้งหมด
- คำสำคัญ – เพิ่มคำหลักที่เกี่ยวข้องสูงสุดสามคำในบล็อกที่คุณกำหนดเอง เพื่อให้ผู้คนสามารถค้นหาได้ง่ายในตัวเลือกบล็อก
- เปิดช่องบล็อกในรูปแบบโมดอลแทนการเรนเดอร์ในตำแหน่ง – เปิดใช้งานหากคุณต้องการเปิดฟิลด์ในแบบโมดอล สิ่งนี้มีประโยชน์หากคุณมีบล็อกแบบกำหนดเองที่มีหลายฟิลด์
- โพสต์ประเภท – ทำเครื่องหมายที่ช่องเพื่อให้บล็อกที่กำหนดเองของคุณปรากฏบนโพสต์แต่ละประเภท ตัวอย่างเช่น หากคุณยกเลิกการเลือกโพสต์ การบล็อกจะไม่ปรากฏในโพสต์ใดๆ
สร้างบล็อกที่กำหนดเอง
ตอนนี้ คุณมีความเข้าใจที่ดีขึ้นเกี่ยวกับอินเทอร์เฟซผู้ใช้และสิ่งที่แต่ละส่วนทำงาน มาเริ่มงานกันเลย
ใน ตัวสร้าง- ตัวสร้าง-ให้ชื่อที่เหมาะสมกับบล็อกที่คุณกำหนดเอง เราจะเลือก CTA สำหรับอันนี้ดังแสดงด้านล่าง
ก่อนเพิ่มฟิลด์ใหม่ ให้เพิ่มไอคอน คีย์เวิร์ด และเลือกหมวดหมู่สำหรับบล็อกที่กำหนดเองดังที่แสดงด้านล่าง
ในการนั้น ให้เพิ่มบางฟิลด์ในบล็อกที่เรากำหนดเอง สำหรับตัวอย่างบล็อก CTA เราจะเพิ่มเพียงสามฟิลด์ในลำดับต่อไปนี้: รูปภาพ ข้อความบางส่วน และฟิลด์ไฟล์ที่อนุญาตให้ผู้ใช้ดาวน์โหลด ebook
อ่าน: ปลั๊กอิน 5 WooCommerce เพื่อแก้ไขผลิตภัณฑ์ของคุณเป็นกลุ่ม
การเพิ่มบล็อกฟิลด์
ในส่วน ช่องบรรณาธิการคลิกที่ เครื่องหมายบวก (+) เพื่อเพิ่มฟิลด์แรกดังแสดงด้านล่าง
ต่อไป มาเพิ่มฟิลด์รูปภาพกัน ในแถบด้านข้าง ให้ตั้งค่า ชนิดช่องบน ภาพ และตั้งค่าตัวเลือกอื่นๆ พิจารณาตัวทากด้วยเพราะเราจะใช้มันเมื่อสร้างโมเดลบล็อก
หลังจากนั้น ให้เพิ่มฟิลด์ข้อความและไฟล์ในลักษณะเดียวกัน
เปลี่ยนเป็น แก้ไขเทมเพลต > มาร์กอัป
ที่นี่เราจะออกแบบว่าบล็อกแบบกำหนดเองของเราจะมีลักษณะอย่างไรบนเว็บไซต์ของคุณ บรรณาธิการโมเดล ยอมรับ HTML, CSS และทากฟิลด์ (ซึ่งคุณต้องวางระหว่าง 2 วงเล็บเหลี่ยม) หากคุณต้องการใช้ภาษา PHP คุณสามารถสร้างเทมเพลตโดยใช้ วิธีการสร้างแบบจำลอง PHP
ไม่ต้องกังวลมันง่าย
ใน บรรณาธิการโมเดล, ภายใต้ แท็บมาร์กอัปให้เพิ่มรหัสต่อไปนี้:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>เมื่อคุณเขียนโค้ด คุณจะสังเกตเห็นว่า บรรณาธิการโมเดล เติมกระสุนฟิลด์อัตโนมัติ (เช่น {{image-field}} ) ให้คุณ
จากนั้นไปที่ส่วน CSS เพื่อเพิ่มสไตล์อย่างง่ายด้วยรหัสต่อไปนี้:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
คุณสามารถปรับแต่งสไตล์เหล่านี้ได้ตามต้องการ
คลิกที่ ประกาศ :
หากต้องการดูบล็อกที่กำหนดเองใหม่ของคุณ ให้กลับไปที่แดชบอร์ดผู้ดูแลระบบ WordPress และสร้างโพสต์ตามปกติ คลิก บวก (+) เพื่อเพิ่มบล็อกใหม่และเลือกบล็อกที่กำหนดเองใหม่ของคุณ ตามที่เราเน้นด้านล่าง
ถัดไป กรอกบล็อกที่คุณกำหนดเองตามต้องการและโพสต์ข้อความของคุณ:
ตอนนี้ ถ้าเราตรวจสอบบล็อก CTA แบบกำหนดเองใหม่ที่ส่วนหน้า นี่คือสิ่งที่เราเห็น
CTA ที่กำหนดเองของเราอยู่ที่นั่นแล้ว! โปรดอย่ากังวลกับความสามารถในการออกแบบของเรา – แน่นอนว่าในสถานการณ์จริง คุณจะต้องใช้เวลาปรับแต่งบล็อกของคุณเพิ่มขึ้นอีกเล็กน้อย แต่เราหวังว่าคุณจะได้เรียนรู้บางสิ่งที่นี่
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
เราขอเชิญคุณมาปรึกษากับ บริการสารสนเทศ ด้านล่างเพื่อเจาะลึกการเริ่มต้นใช้งานและควบคุมเว็บไซต์และบล็อกของคุณ
- 10 Affiliate WordPress Plugins เพื่อสร้างโปรแกรม
- วิธีเพิ่มหลายคอลัมน์ใน WordPress
- วิธีเพิ่มหลายคอลัมน์ใน WordPress
- ใช้ภูมิหลังที่แตกต่างกัน WordPress
- Elementor: วิธีสร้างแอนิเมชั่นบนโฮเวอร์
สรุป
การสร้างบล็อกแบบกำหนดเองไม่ใช่เรื่องง่าย แต่ด้วย ปลั๊กอิน WordPress เช่น Genesis Custom Blocks และ Lazy Blocks ไม่ว่าคุณจะเป็นมือใหม่หรือไม่ก็ตาม คุณจะประสบความสำเร็จในการสร้างพวกมัน จากพื้นฐานที่สุดไปจนถึงซับซ้อนขึ้นอยู่กับความต้องการของคุณ
บทความนี้จะแสดงวิธีเพิ่มแบบอักษรที่กำหนดเองให้กับเว็บไซต์ WordPress เท่านั้น เราขอเชิญคุณมาลอง หากคุณมีข้อกังวลหรือข้อเสนอแนะใด ๆ โปรดแจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
en ผู้ดูแล แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
