Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

คุณต้องการสร้าง 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

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

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

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

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

ติดตั้ง Genesis Custom Blocks

ลงชื่อเข้าใช้แดชบอร์ดผู้ดูแลระบบ WordPress และไปที่ ส่วนขยาย> เพิ่มดังที่แสดงด้านล่าง

จากนั้นป้อน " Genesis Custom Blocks ในช่องค้นหาคำสำคัญและ คลิก ซูร์ เลอ บูตอง ติดตั้งในขณะนี้

หลังจากนั้น, กระตุ้น ปลั๊กอินที่จะช่วยให้คุณเริ่มต้นได้

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

ในเมนูผู้ดูแลระบบ WordPress ให้ไปที่ บล็อกแบบกำหนดเอง > เพิ่มใหม่ตามที่เราเน้นด้านล่าง

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

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

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

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

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

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

สร้างบล็อกที่กำหนดเอง

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

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

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

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

อ่าน: ปลั๊กอิน 5 WooCommerce เพื่อแก้ไขผลิตภัณฑ์ของคุณเป็นกลุ่ม

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

ในส่วน ช่องบรรณาธิการคลิกที่ เครื่องหมายบวก (+) เพื่อเพิ่มฟิลด์แรกดังแสดงด้านล่าง

สร้างบล็อกปลั๊กอิน WordPress

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

ค้นพบเครื่องมือที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

สร้างบล็อกปลั๊กอิน WordPress

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

สร้างบล็อกปลั๊กอิน WordPress

เปลี่ยนเป็น แก้ไขเทมเพลต > มาร์กอัป

ที่นี่เราจะออกแบบว่าบล็อกแบบกำหนดเองของเราจะมีลักษณะอย่างไรบนเว็บไซต์ของคุณ บรรณาธิการโมเดล ยอมรับ 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

คุณสามารถปรับแต่งสไตล์เหล่านี้ได้ตามต้องการ

คลิกที่ ประกาศ :

สร้างบล็อกปลั๊กอิน WordPress

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

สร้างบล็อกปลั๊กอิน WordPress

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

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

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

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

ดาวน์โหลดเครื่องมือมากกว่า 11 ล้านรายการ

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

เราขอเชิญคุณมาปรึกษากับ บริการสารสนเทศ ด้านล่างเพื่อเจาะลึกการเริ่มต้นใช้งานและควบคุมเว็บไซต์และบล็อกของคุณ

สรุป

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

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

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

en ผู้ดูแล แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.   

...  

%d บล็อกเกอร์ชอบหน้านี้: