วิธีสร้างองค์ประกอบที่กำหนดเองของ WPBakery

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

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

• องค์ประกอบใน WordPress คืออะไร?
• ประโยชน์ขององค์ประกอบที่กำหนดเอง
• วิธีสร้างองค์ประกอบที่กำหนดเองของ WPBakery

องค์ประกอบใน WordPress คืออะไร?

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

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

ประโยชน์ขององค์ประกอบที่กำหนดเอง

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

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

วิธีสร้างองค์ประกอบที่กำหนดเองของ WPBakery

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

นอกจากนี้ องค์ประกอบที่กำหนดเองของ WPBakery เป็นรหัสย่อ นั่นเป็นเหตุผลที่เราต้องมีความรู้เกี่ยวกับรหัสย่อของ WordPress ก่อนที่จะดำเนินการขั้นตอนต่อไป

รหัสย่อใน WordPress คืออะไร?

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

ใน WordPress รหัสย่อจะช่วยคุณพัฒนาเพจของคุณโดยไม่ต้องมีพื้นฐานความรู้ด้านโค้ด

ในกรณีส่วนใหญ่ ฟังก์ชันของรหัสย่อจะปรากฏขึ้นทันที หากคุณต้องการฝังวิดีโอบนไซต์ของคุณ คุณสามารถทำได้โดยใช้โค้ด [ video ] การใส่รหัสย่อลงในหน้า/โพสต์ จะทำการเปลี่ยนแปลงทั้งส่วนหน้าและส่วนหลังของไซต์ของคุณทันที

คุณควรใส่รหัสที่ไหน?

WPBakery Page Builder มาพร้อมกับฟีเจอร์ในตัวชื่อ Shortcode Mapper ฟังก์ชันนี้อนุญาตให้คุณแทรกรหัสย่อของบุคคลที่สามลงในรายการองค์ประกอบเพื่อให้ใช้ซ้ำได้ง่าย คุณสามารถดูตัวอย่างการเพิ่มรหัสย่อภายนอกไปยังส่วนเนื้อหาป้องกันด้วยรหัสผ่านด้วย WPBakery

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

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

คำแนะนำทีละขั้นตอน

#1 สร้างองค์ประกอบที่กำหนดเองของ WPBakery

ขั้นแรก คุณต้องสร้างคลาส VcSodaBlockquote ขยาย WPBakeryShortCode และโครงสร้างขององค์ประกอบ

#2 สร้างรหัสย่อ

ด้วยความช่วยเหลือของ vc_map ฟังก์ชันที่มีให้โดย WPBakery ช่วยให้คุณเพิ่มฟิลด์เพิ่มเติมให้กับองค์ประกอบของคุณได้ คุณสามารถสร้างรหัสย่อได้ที่นี่

#3 Render รหัสย่อ

ด้วยฟังก์ชัน render_shortcode คุณสามารถแยกค่าและวางไว้ในตัวแปรแยกต่างหากสำหรับการใช้งานต่อไป

กลับไปที่แดชบอร์ด WordPress และสนุกกับผลลัพธ์ของคุณ

พารามิเตอร์

คำแนะนำสำหรับ “การแมป” ใน WPBakery จะถูกจัดเก็บไว้ในอาร์เรย์ที่เชื่อมโยงนี้

ประเภทค่า

สร้างองค์ประกอบที่กำหนดเอง WPBakery ของคุณเองวันนี้!

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

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

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