วิธีใช้บล็อกโค้ด WordPress

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

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

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

วิธีเพิ่ม Code Block ในโพสต์หรือเพจของคุณ

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

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

ตอนนี้คุณมี Code Block ภายในเนื้อหาของคุณ ซึ่งคุณสามารถเพิ่มรหัสประเภทใดก็ได้ที่คุณต้องการแสดง รหัสจะถูกทำเครื่องหมายด้วยแท็กรหัสโดยอัตโนมัติ ดังนั้นจึงแสดงเป็นรหัสอย่างถูกต้อง ซึ่งจะช่วยในการยกตัวอย่างให้ผู้อ่านได้เรียนรู้หรือใช้ในโครงการของตนเอง ในตัวอย่างนี้ ฉันใช้รหัสหลอกจากหน้าสนับสนุน WordPress (เพราะ) lazy.level = ขั้นสูง

การตั้งค่าและตัวเลือกการบล็อกโค้ด

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

แถบเครื่องมือบล็อกโค้ด

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

เปลี่ยนรหัสบล็อกประเภทหรือรูปแบบ

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

ลาก

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

เมื่อคุณวางบล็อก บล็อกจะถูกวางในตำแหน่งใหม่

เคลื่อนไหว

ลูกศรขึ้นและลงจะย้ายบล็อกขึ้นหรือลงหนึ่งบล็อกภายในบล็อกเนื้อหาทุกครั้งที่คุณคลิก

ตัวหนาและตัวเอียง

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

ลิงค์

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

การตั้งค่าเพิ่มเติม

การตั้งค่าเพิ่มเติมของ Code Block จะเปิดกล่องดรอปดาวน์พร้อมตัวเลือกมากมาย ฉันได้ใช้แต่ละตัวเลือกในตัวอย่างนี้

รหัสอินไลน์ – แสดงข้อความที่จัดรูปแบบเป็นรหัส มันวางข้อความบนบรรทัดด้วยตัวเอง เนื่องจากทุกอย่างถูกจัดรูปแบบเป็นโค้ด ฟอนต์จึงดูเหมือนกัน

รูปภาพอินไลน์ – วางรูปภาพภายในข้อความที่คุณวางเมาส์ จะเปิด Media Library ซึ่งคุณสามารถเลือกรูปภาพได้ หากคุณคลิกที่รูปภาพ คุณจะเห็นกล่องดรอปดาวน์ที่คุณสามารถเปลี่ยนความกว้างได้

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

ขีดทับ – เพิ่มบรรทัดผ่านโค้ดที่คุณไฮไลต์ไว้

ตัวห้อย - จัดรูปแบบรหัสเป็นตัวห้อย

Superscript – จัดรูปแบบโค้ดเป็นตัวยก คุณสามารถใช้ตัวห้อยและตัวยกร่วมกันได้ ซึ่งจะช่วยลดขนาดของแบบอักษรและจัดกึ่งกลางโค้ดในแนวนอน

สีข้อความ – เปลี่ยนสีของโค้ดที่คุณไฮไลต์ไว้ เลือกจากสีที่สร้างไว้ล่วงหน้า เลือกสีในเครื่องมือเลือกสี หรือป้อนค่าเป็น HEX, RBG หรือ HSL

ตัวเลือก

ตัวเลือก Code Block จะอยู่ภายในจุดสามจุดที่ด้านขวาสุดของแถบเครื่องมือ ตัวเลือกได้แก่:

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

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

ซ้ำ - ทำซ้ำบล็อกและวางไว้ใต้ต้นฉบับ

แทรกก่อน – เพิ่มพื้นที่เนื้อหาเหนือบล็อกโค้ด

แทรกหลัง – เพิ่มพื้นที่เนื้อหาด้านล่างบล็อกโค้ด

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

แก้ไขเป็น HTML – เปลี่ยนเป็นตัวแก้ไขโค้ดสำหรับบล็อกซึ่งคุณสามารถแก้ไขโค้ดเป็น HTML ได้ เลือกแก้ไขด้วยสายตาเพื่อเปลี่ยนบล็อกกลับเป็นโหมดภาพ

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

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

Remove Block – ลบ Code Block

การตั้งค่าการบล็อกรหัส

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

วิชาการพิมพ์

Typography ให้คุณเลือกขนาดของฟอนต์สำหรับทั้งบล็อก เลือกขนาดฟอนต์จากกล่องดรอปดาวน์ที่มี 7 ขนาด หรือป้อนขนาดที่กำหนดเองลงในฟิลด์ คลิกรีเซ็ตเพื่อเปลี่ยนกลับเป็นขนาดฟอนต์เริ่มต้น

ขั้นสูง

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

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

ใช้บล็อกนี้เมื่อใดก็ได้ที่คุณต้องการแสดงโค้ดภายในเนื้อหาของคุณ ตัวโค้ดเองไม่มีผลใดๆ ต่อบล็อก

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

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

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

จุดประสงค์ของบล็อกโค้ด WordPress คืออะไร?

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

Code Block เรียกใช้รหัสหรือไม่

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

รหัสชนิดใดที่สามารถแสดงได้?

มันจะแสดงรหัสใด ๆ จากภาษาการเขียนโปรแกรมหรือภาษาสคริปต์ ภาษาไม่ได้สร้างความแตกต่างใดๆ

มันจัดรูปแบบรหัสหรือไม่

ไม่ มันใช้งานไม่ได้เป็นเครื่องมือแก้ไขโค้ด ดังนั้นจึงไม่เปลี่ยนการเว้นวรรค สี เพิ่มตัวเลข ฯลฯ เพียงแสดงโค้ดตามวิธีที่คุณพิมพ์

Code Block แตกต่างจาก HTML Block อย่างไร

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

ต่างจาก Preformated Block อย่างไร?

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

บทสรุป

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

เราต้องการได้ยินจากคุณ คุณเคยใช้บล็อกโค้ด WordPress หรือไม่? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

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