วิธีใช้บล็อก HTML ที่กำหนดเองของ WordPress

Custom HTML Block ให้คุณเพิ่มเนื้อหา HTML และแก้ไขได้โดยไม่ต้องดูหน้าหรือโพสต์เป็น HTML คุณสามารถฝัง HTML และใช้เพื่อทำเครื่องหมายข้อความของคุณแล้วแปลงเป็นบล็อกย่อหน้าด้วยข้อความที่มีสไตล์ได้หากต้องการ บล็อกนี้เหมาะสำหรับผู้ที่ต้องการทำงานใน HTML และเป็นหนึ่งในวิธีที่ดีที่สุดในการฝังโค้ดบางประเภท เช่น Google Maps

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

สมัครสมาชิกช่อง Youtube ของเรา

วิธีเพิ่มบล็อก HTML ที่กำหนดเองในโพสต์หรือหน้าของคุณ

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

อีกวิธีหนึ่ง คุณสามารถพิมพ์ /html ใน ตำแหน่งที่คุณต้องการให้บล็อกปรากฏ แล้วกด Enter หรือเลือกจากตัวเลือกด้านบนพื้นที่บล็อก

ขณะนี้คุณมีบล็อก HTML ที่กำหนดเองภายในเนื้อหาของคุณ ซึ่งคุณสามารถเพิ่ม HTML ได้ เราจะดูตัวอย่างพร้อมโค้ดเมื่อเราดำเนินการตั้งค่าต่างๆ

การตั้งค่าและตัวเลือกบล็อก HTML ที่กำหนดเอง

ไม่เหมือนกับบล็อกส่วนใหญ่ บล็อก HTML ที่กำหนดเองไม่มีตัวเลือกในแถบด้านข้างตัวแก้ไข คุณจะพบตัวเลือกทั้งหมดที่คุณต้องการในแถบเครื่องมือ

แถบเครื่องมือบล็อก HTML ที่กำหนดเอง

คลิกที่ใดก็ได้ภายในบล็อกเพื่อดูเครื่องมือ หากคุณไม่เห็นทั้งหมด ให้คลิกใต้บล็อกในพื้นที่ใหม่ จากนั้นเครื่องมือที่เหลือจะปรากฏขึ้นเมื่อคุณเลือกบล็อกอีกครั้ง

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

มาดูการตั้งค่าแต่ละอย่างอย่างละเอียดกัน

บล็อกหรือสไตล์การเปลี่ยนแปลง HTML ที่กำหนดเอง

การเลือก HTML ในตัวเลือกจะเปิดกล่องดรอปดาวน์ซึ่งคุณสามารถเปลี่ยนบล็อกเป็นบล็อกประเภทอื่นได้ ตัวเลือกรวมถึงโค้ด คอลัมน์ หรือกลุ่ม

โค้ด – แปลงบล็อก HTML ที่กำหนดเองเป็นบล็อกโค้ด เพื่อให้คุณสามารถแสดงโค้ดประเภทต่างๆ ได้

คอลัมน์ – วางบล็อกไว้ภายในคอลัมน์

กลุ่ม – เพิ่มบล็อกในกลุ่มเพื่อให้คุณสามารถปรับเปลี่ยนเป็นบล็อกเดียว

เครื่องมือลากบล็อก HTML แบบกำหนดเอง

เครื่องมือลากมีจุดหกจุดที่คุณสามารถจับเมาส์เพื่อเคลื่อนย้ายได้

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

เมื่อคุณเห็นเส้นสีน้ำเงินปรากฏขึ้นในตำแหน่งที่คุณต้องการบล็อก ให้ปล่อยปุ่มเมาส์และบล็อกของคุณจะถูกวางในตำแหน่งใหม่

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

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

HTML บล็อก HTML ที่กำหนดเองและการแสดงตัวอย่าง

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

การเลือกแสดงตัวอย่างจะแสดงลักษณะของ HTML ที่ส่วนหน้าเมื่อดำเนินการภายในเบราว์เซอร์ ง่ายต่อการสลับไปมาระหว่างมุมมองเพื่อแก้ไข HTML และดูว่าผู้ใช้ปลายทางจะมีลักษณะอย่างไร นี่เป็นวิธีที่ยอดเยี่ยมในการแก้ไขและดูผลลัพธ์อย่างรวดเร็ว ตัวอย่างนี้แสดง Google Map แบบฝังตามที่ปรากฏในเนื้อหา

อีกตัวอย่างหนึ่ง ต่อไปนี้คือ HTML บางส่วนเพื่อเพิ่มสไตล์ให้กับบรรทัดข้อความ นี่คือมุมมอง HTML ที่ฉันสามารถสร้างและแก้ไข HTML ได้

นี่คือโหมดดูตัวอย่างที่แสดงลักษณะที่ปรากฏที่ส่วนหน้า

ตัวเลือกบล็อก HTML ที่กำหนดเอง

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

นี่คือสิ่งที่ตัวเลือกบล็อก HTML ที่กำหนดเองสามารถทำได้:

ซ่อนการตั้งค่าเพิ่มเติม – สิ่งนี้จะซ่อนแถบด้านข้างขวา ขยายพื้นที่ทำงานของคุณ

แปลงเป็นบล็อก – สิ่งนี้จะแปลงเนื้อหาเป็นบล็อกอื่นๆ ที่เหมาะสม ข้อความจะถูกแปลงเป็นบล็อกย่อหน้า รูปภาพเป็นบล็อกรูปภาพ ฯลฯ โค้ดที่ฝังไว้ เช่น รหัส Google Map ที่ฉันใช้ในตัวอย่าง จะยังคงเป็นบล็อก HTML ที่กำหนดเอง หากสามารถแปลง HTML อื่นภายในบล็อกได้ จะถูกลบออกจากบล็อกที่วางไว้ในบล็อกอื่น

คัดลอก – คัดลอก บล็อกไปยังคลิปบอร์ดของคุณ เพื่อให้คุณสามารถวางบล็อกไว้ที่ใดก็ได้ภายในตัวแก้ไข

ทำซ้ำ – วางบล็อกที่ซ้ำกันภายใต้ต้นฉบับ

แทรกก่อน – เพิ่มพื้นที่บล็อกก่อนบล็อก HTML ที่กำหนดเอง เพื่อให้คุณสามารถวางบล็อกอื่นได้

แทรกหลัง – เพิ่มพื้นที่หลังบล็อกซึ่งคุณสามารถวางบล็อกอื่นได้

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

เพิ่มในบล็อกที่นำกลับมาใช้ใหม่ได้ – เพิ่มบล็อก HTML ที่กำหนดเองลงในบล็อกที่นำกลับมาใช้ใหม่ได้ เพื่อให้คุณสามารถใช้งานได้อีกครั้งบนหน้าหรือโพสต์ใดๆ

กลุ่ม – เพิ่มบล็อกในกลุ่มเพื่อให้คุณปรับบล็อกเป็นหน่วยเดียวได้

ลบบล็อก - จะเป็นการลบบล็อก

เคล็ดลับและแนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้บล็อก HTML ที่กำหนดเองอย่างมีประสิทธิภาพ

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

ใช้บล็อกนี้สำหรับแผนที่แบบฝัง โฆษณา วิดีโอ ฯลฯ ซึ่งช่วยให้คุณไม่ต้องเปลี่ยนไปใช้มุมมองตัวแก้ไขโค้ดและเพิ่มโค้ดลงในบล็อกประเภทอื่นๆ เช่น บล็อกย่อหน้า

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

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

อย่าใช้แท็กสคริปต์ในบล็อก อาจถูกลบออกแล้วรหัสของคุณจะไม่ทำงาน

คำถามที่พบบ่อยเกี่ยวกับ Custom HTML Block

Custom HTML Block ทำอะไร?

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

ฉันจะใช้บล็อก HTML ที่กำหนดเองได้อย่างไร

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

มันจะกำหนดรหัสสีให้กับมาร์กอัปหรือไม่?

ไม่ มาร์กอัปในบล็อกดูเหมือนโปรแกรมแก้ไขข้อความใดๆ

Custom HTML Block เรียกใช้ HTML หรือไม่

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

รองรับแท็ก HTML ทั้งหมดหรือไม่

ไม่ได้ คุณสามารถดูรายการแท็ก HTML ที่ได้รับการสนับสนุนในหน้ารหัสที่รองรับของ WordPress

บทสรุป

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

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

ภาพเด่นผ่าน enterlinedesign / shutterstock.com