วิธีเพิ่มข้อมูลโค้ดใน WordPress

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

ข้อมูลโค้ดคืออะไร?

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

ข้อมูลโค้ดทำหน้าที่อะไร?

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

ตัวอย่างโค้ด

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

วิธีเพิ่มข้อมูลโค้ดลงใน WordPress ด้วยตนเอง

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

สร้างการสำรองข้อมูลเว็บไซต์ของคุณ

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

สร้างธีมลูก

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

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

เพิ่มไฟล์

หากต้องการสร้างธีมลูก คุณจะต้องมีโปรแกรมแก้ไขโค้ดและการเข้าถึง FTP สำหรับไซต์ WordPress ของคุณ ขั้นแรกให้สร้างโฟลเดอร์ธีมใหม่ภายใต้ wp-content/themes ในการนี้ให้อัปโหลดไฟล์ style.css ซึ่งเป็นสไตล์ชีตของธีมลูกของคุณ (สำหรับการแก้ไขการออกแบบ) และไฟล์ function.php ซึ่งควรมีโค้ดเพื่อจัดคิวสไตล์ชีตจากธีมหลักของคุณ คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับวิธีสร้างธีมลูกและรับโค้ดที่แน่นอนเพื่อเพิ่มลงใน Functions.php ของคุณได้ในคู่มือธีมลูก WordPress ของเรา

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

แก้ไขไฟล์

ตอนนี้คุณสามารถเปิดไฟล์ Functions.php ของธีมลูกของคุณได้ในตัวแก้ไขโค้ด (หรือในลักษณะที่ปรากฏของ WordPress > ตัวแก้ไขไฟล์ธีม) และเพิ่มส่วนย่อยของคุณ ตัวอย่างส่วนใหญ่จะถูกเพิ่มลงในไฟล์ function.php (แม้ว่าจะมีค่าผิดปกติอยู่บ้างก็ตาม)

เพียงทำตามคำแนะนำจากแหล่งตัวอย่างที่คุณใช้เพื่อให้แน่ใจว่าคุณคัดลอก วาง และแก้ไขโค้ดอย่างถูกต้อง ข้อเสนอแนะเดียวของเราคือให้คุณยึดติดกับแหล่งที่เชื่อถือได้ (WPCode, WPMUdev, WPBeginner, Elegant Themes, Tuts+, Elementor ฯลฯ) วิธีนี้ทำให้ข้อมูลโค้ดที่คุณใช้มีแนวโน้มที่จะถูกต้องและปลอดภัยในการใช้งานมากขึ้น

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

แต่เราสามารถแนะนำวิธีที่ดีกว่าและง่ายกว่าได้เมื่อเพิ่มตัวอย่างข้อมูลลงใน WordPress

วิธีเพิ่มข้อมูลโค้ดลงใน WordPress ได้อย่างง่ายดายด้วย WPCode

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

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

ติดตั้งปลั๊กอิน WPCode ฟรี

ในการเริ่มต้น คุณจะต้องติดตั้งปลั๊กอินก่อน นี่เป็นเรื่องง่ายสุด ๆ เนื่องจาก WPCode มีเวอร์ชันฟรีพร้อมให้ใช้งานจากแดชบอร์ด WordPress ของคุณ เพียงไปที่ ปลั๊กอิน > เพิ่มใหม่ และค้นหา “ WPCode ”

คลิกถัดไปเพื่อติดตั้งและเปิดใช้งานปลั๊กอิน ตอนนี้คุณพร้อมที่จะเพิ่มตัวอย่างของคุณแล้ว!

เพิ่มตัวอย่าง

ใต้ส่วน Code Snippet ใหม่ในแดชบอร์ด WordPress ของคุณ ให้คลิกที่รายการเมนู “+ Add Snippet” ซึ่งจะนำคุณไปยังหน้าจอที่คุณสามารถเริ่มต้นด้วยตัวอย่างเปล่าหรือเรียกดูไลบรารีตัวอย่าง WPCode

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

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

ตัวอย่างเช่น สมมติว่าคุณต้องการเปลี่ยน “Howdy, Username” ที่แสดงอยู่ที่มุมขวาบนของแดชบอร์ด WordPress เพื่อให้แสดงสิ่งที่เป็นมืออาชีพมากขึ้น

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

แก้ไขการตั้งค่าตัวอย่าง

การดำเนินการนี้จะเปิดตัวแก้ไขตัวอย่างข้อมูลด้วยรหัสและการตั้งค่าเริ่มต้นที่เพิ่มไว้แล้วสำหรับตัวอย่างข้อมูล ในกรณีนี้ ข้อมูลโค้ดมีคำอธิบาย ชื่อ อยู่แล้ว ประเภทโค้ด ได้รับการตั้งค่าล่วงหน้าเป็น PHP และมีการสร้าง ตัวอย่างโค้ด เพื่อเปลี่ยน "Howdy" เป็น "Welcome" หากคุณต้องการให้ “Howdy” พูดอย่างอื่น เพียงแก้ไขโค้ดในบรรทัดที่ 4

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

ตัวเลือกตำแหน่งอื่นๆ ในเวอร์ชันฟรี ได้แก่:

• ทั่วโลก: ทำงานได้ทุกที่, ส่วนหน้าเท่านั้น, ผู้ดูแลระบบเท่านั้น, ตรรกะแบบมีเงื่อนไขของส่วนหน้า, ส่วนหัวของไซต์, เนื้อหาทั่วทั้งไซต์, ส่วนท้ายของไซต์
• เฉพาะหน้า: ก่อน/หลังโพสต์, ก่อน/หลังเนื้อหา, ก่อน/หลังย่อหน้า, ก่อน/หลังข้อความที่ตัดตอนมา, ระหว่างโพสต์

และเวอร์ชัน Pro จะเพิ่มตำแหน่งอื่น ๆ อีกมากมายสำหรับตัวอย่าง PHP เท่านั้น ทุกที่ (ตัวเลือก CSS), WooCommerce, ดาวน์โหลดดิจิทัลอย่างง่าย และ MemberPress

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

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

สุดท้ายคุณจะเห็นส่วนสำหรับ การแก้ไขโค้ด ซึ่งเป็นคุณลักษณะเฉพาะของ Pro เท่านั้น ตามด้วย ข้อมูลพื้นฐาน สำหรับข้อมูลโค้ดของคุณ ซึ่งรวมถึงแท็กใดๆ ที่คุณต้องการใช้เพื่อจัดระเบียบข้อมูลโค้ด ลำดับความสำคัญ (ซึ่งเป็นตัวกำหนดลำดับในการโหลดข้อมูลโค้ดของคุณ) และหมายเหตุถึงตัวคุณเองเกี่ยวกับวัตถุประสงค์ของโค้ด

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

เปิดใช้งานข้อมูลโค้ดของคุณ

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

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

คุณสมบัติปลั๊กอินอื่น ๆ

ตอนนี้คุณรู้วิธีเพิ่มตัวอย่างลงใน WordPress ด้วยปลั๊กอิน WPCode แล้ว มาดูคุณสมบัติปลั๊กอินอื่น ๆ ที่คุณอาจต้องการใช้โดยย่อ

Global Header & Footer คุณสามารถเพิ่มสคริปต์ลงในไซต์ของคุณได้อย่างรวดเร็ว สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อเปิดใช้งานบริการของบุคคลที่สามหรือเพิ่มการปรับแต่งให้กับไซต์ของคุณ ตัวอย่างเช่น หากคุณต้องการเปิดใช้งาน Google Analytics สำหรับไซต์ที่ขับเคลื่อนด้วย WordPress คุณจะต้องเพิ่มโค้ดติดตามลงในไฟล์ header.php ของคุณ แทนที่จะแก้ไขไฟล์ด้วยตนเอง คุณสามารถวางโค้ดติดตามของคุณที่นี่ได้ง่ายๆ

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

หน้า เครื่องมือ มีตัวเลือกในการนำเข้าตัวอย่างข้อมูลจากแหล่งอื่น (หรือปลั๊กอินตัวอย่างอื่นๆ) รวมทั้งส่งออกตัวอย่างข้อมูลไซต์ปัจจุบันของคุณ

และภายใต้การตั้งค่า คุณจะพบตัวเลือกทั่วไปในการเชื่อมต่อกับไลบรารี WPCode (สำหรับการเข้าถึงตัวอย่างฟรีทั้งหมด 59 รายการ) เปิดใช้งานบันทึกข้อผิดพลาด และเพิ่มรหัสใบอนุญาตของคุณหากคุณตัดสินใจที่จะอัปเกรดเป็น Pro ในอนาคต

WPCode Pro

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

หากคุณอัปเกรด ยังมีส่วนที่เป็นประโยชน์สำหรับพิกเซล Conversion (ซึ่งทำงานร่วมกับโซเชียลมีเดีย) เพื่อเปิดใช้งานการติดตามกิจกรรมอีคอมเมิร์ซ ซึ่งเป็นตัวแก้ไขไฟล์ที่สามารถใช้เพื่ออัปเดตไฟล์จากแดชบอร์ดผู้ดูแลระบบของคุณ (เช่น robots.txt โฆษณาของคุณ ข้อความ ฯลฯ) และการตั้งค่าเพิ่มเติมสำหรับการควบคุมการเข้าถึงเพื่อเลือกบทบาทของผู้ใช้ที่สามารถเข้าถึงคุณลักษณะปลั๊กอินได้

คุณควรอัพเกรดเป็น WPCode Pro หรือไม่?

แผน WPCode Pro เริ่มต้นที่ $49/ปี สำหรับใบอนุญาตไซต์เดียว หากคุณใช้รหัส SAVE50 เมื่อชำระเงิน แต่คุณควรอัพเกรดหรือไม่? ในความเห็นของเรา สำหรับผู้ใช้ส่วนใหญ่ เวอร์ชันฟรีนั้นยอดเยี่ยมมาก คุณสามารถเพิ่มและจัดการตัวอย่างข้อมูลของคุณได้อย่างง่ายดาย ซึ่งเป็นสิ่งที่คุณต้องทำจริงๆ แต่สำหรับไซต์อีคอมเมิร์ซที่จำเป็นต้องใช้พิกเซลการติดตาม หรือสำหรับไซต์ที่มีทีมงานเพิ่มหรือแก้ไขตัวอย่างข้อมูลอย่างสม่ำเสมอ คุณควรพิจารณาอัปเกรด ในกรณีเหล่านี้ Pro จะเพิ่มคุณสมบัติที่จะทำให้ชีวิตของคุณง่ายขึ้นในระยะยาว

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