</> WPCODE & CUSTOM CODE

เพิ่ม Custom Code ให้ WordPress ด้วย WPCode

เรียนรู้การเพิ่ม HTML, CSS, JavaScript และ PHP อย่างเป็นระบบผ่าน Code Snippets พร้อมเข้าใจ Auto Insert, Shortcode, เงื่อนไขการทำงาน และวิธีทดสอบ Code ก่อนเปิดใช้งานจริง

เริ่มเรียน WPCode → ดู Code Checklist

✓ HTML / CSS ✓ JavaScript ✓ PHP Snippets

wordpress-custom-code

Custom Website Style ACTIVE

1 .onsello-button {

2 background: #1473e6;

3 color: #ffffff;

4 border-radius: 10px;

5 padding: 12px 20px;

6 }

INSERT METHOD

Auto Insert

Shortcode

01 · Code Types HTML / CSS / JS / PHP 02 · Workflow วิธีสร้าง Snippet 03 · Insert Auto / Shortcode 04 · Safety ตรวจก่อน Active

WPCODE 101

WPCode ใช้ทำอะไร?

WPCode ช่วยจัดการ Custom Code แยกเป็น Snippet ทำให้เปิด ปิด แก้ไข และควบคุมตำแหน่งการทำงาน ได้สะดวกกว่าการแก้ไฟล์ Theme โดยตรง

</>

จัดการ Code เป็น Snippet

แยก Code ตามหน้าที่ เช่น CSS Header, Tracking Script หรือ Custom Function เพื่อแก้ไขภายหลังได้ง่าย

เปิดหรือปิดได้

สามารถ Disable Snippet โดยไม่ต้องลบ Code เหมาะกับการทดสอบหรือแก้ปัญหา

LOC

ควบคุมตำแหน่ง

เลือกได้ว่า Code ควรทำงานแบบ Auto Insert, เฉพาะบางตำแหน่ง หรือเรียกด้วย Shortcode

CODE TYPES

Code แต่ละประเภทใช้ต่างกันอย่างไร?

กดเลือกประเภท Code เพื่อดูตัวอย่างและหน้าที่พื้นฐาน

STRUCTURE

HTML

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

example.html HTML

<div class="notice-box"> <strong>WordPress by Onsello</strong> <p>เรียนรู้ WordPress แบบเข้าใจง่าย</p> </div>

DESIGN

CSS

ใช้ควบคุมสี Font, Spacing, Border, Responsive และรูปลักษณ์ขององค์ประกอบ

custom-style.css CSS

.notice-box{ padding:20px; border-radius:12px; background:#eef6ff; color:#172033; }

INTERACTION

JavaScript

ใช้เพิ่มพฤติกรรม และ Interaction เช่นกดปุ่ม เปิดกล่อง เปลี่ยนข้อความ หรือควบคุม UI

interaction.js JS

const button = document.querySelector('.demo-button'); if(button){ button.addEventListener('click', function(){ console.log('Button clicked'); }); }

WORDPRESS LOGIC

PHP

ใช้เพิ่มหรือปรับพฤติกรรมของ WordPress ผ่าน Hook, Filter หรือ Function ต่าง ๆ และควรทดสอบอย่างระมัดระวัง

wordpress-function.php PHP

add_filter('excerpt_length', function($length){ return 25; });

SNIPPET WORKFLOW

สร้าง Snippet ตามลำดับนี้

อย่าเริ่มจากการกด Active ทันที ให้กำหนดประเภทและตำแหน่งการทำงานให้ถูกก่อน

CREATE

สร้าง Snippet ใหม่

เข้า WPCode แล้วสร้าง Custom Snippet พร้อมตั้งชื่อให้รู้ทันทีว่า Code นี้ทำอะไร

→

CODE TYPE

เลือกประเภท Code

ระบุว่าเป็น HTML, CSS, JavaScript หรือ PHP ให้ตรงกับ Code ที่จะใช้งาน

→

CODE

ใส่ Code และตรวจ Syntax

ตรวจวงเล็บ เครื่องหมาย Selector, Function และ Scope ก่อนบันทึก

→

INSERT

เลือก Insert Method

เลือก Auto Insert เมื่อต้องการให้ Code ทำงานอัตโนมัติ หรือ Shortcode เมื่อต้องการเรียกเฉพาะจุด

→

TEST

Save และทดสอบ

ตรวจหน้าเว็บไซต์จริง เปิด Developer Tools เมื่อจำเป็น และตรวจว่าไม่มี Layout หรือ Function อื่นเสีย

→

ACTIVE

เปิดใช้งานจริง

เมื่อทดสอบแล้ว จึงเปิด Snippet และบันทึกว่า Code นี้เกี่ยวข้องกับส่วนใดของเว็บไซต์

✓

INSERT METHOD

Code ควรทำงานตรงไหน?

จุดสำคัญของ WPCode ไม่ได้อยู่แค่การวาง Code แต่คือการกำหนดว่า Code นั้น ควรถูกเรียกใช้งานเมื่อใดและที่ไหน

AUTO

Auto Insert

เหมาะกับ Code ที่ต้องทำงานอัตโนมัติ เช่น CSS หรือ Script ที่ใช้ทั่วเว็บไซต์

[ ]

Shortcode

เหมาะกับเนื้อหาหรือ Function ที่ต้องการเรียกเฉพาะบางหน้า หรือบางตำแหน่ง

Header / Footer

ใช้กับ Script ที่ต้องโหลดในส่วน Head หรือก่อนปิด Body ตามความต้องการของ Script

Conditional Logic

ใช้จำกัดการทำงาน เฉพาะหน้า ผู้ใช้งาน หรือเงื่อนไขที่ต้องการ เมื่อฟีเจอร์รองรับ

SAFE CODING

ก่อนเปิด Code จริง ให้เช็ก 4 เรื่องนี้

Custom Code มีพลังมาก แต่ควรควบคุม Scope และทดสอบทุกครั้งก่อนใช้กับเว็บไซต์จริง

ตั้งชื่อให้ชัด

ชื่อ Snippet ควรบอกว่า Code ทำอะไร และเกี่ยวข้องกับส่วนไหน

จำกัด Scope

ไม่ควรให้ Code ทำงานทั่วเว็บ ถ้าต้องใช้เฉพาะบางตำแหน่ง

PHP ต้องระวัง

ตรวจ Syntax และผลกระทบของ Function ก่อนเปิด Snippet

ทดสอบหลัง Active

เปิดทั้งหน้า Desktop, Mobile และ Function สำคัญ เพื่อยืนยันว่าเว็บไซต์ยังทำงานปกติ

WHEN TO USE

งานแบบไหนเหมาะกับ WPCode?

ไม่ใช่ทุกอย่างต้องเขียน Code ถ้ามี Setting หรือ Widget ที่ทำงานได้อยู่แล้ว ควรเลือกวิธีที่ดูแลง่ายที่สุดก่อน

เหมาะกับ WPCode

ใช้เมื่อ...

ต้องเพิ่ม CSS เล็กน้อยทั่วเว็บไซต์

ต้องเพิ่ม JavaScript สำหรับ Interaction เฉพาะ

ต้องเพิ่ม WordPress Hook หรือ Filter

ต้องวาง Script ใน Header หรือ Footer

พิจารณาก่อน

ไม่ควรรีบใช้เมื่อ...

Elementor มี Widget ที่ทำงานได้อยู่แล้ว

Astra มี Setting สำหรับสิ่งนั้นอยู่แล้ว

Code ยาวและซับซ้อนจนดูแลยาก

ยังไม่รู้ว่า Code จากภายนอกทำอะไร

CODE CHECKLIST

ตรวจ Snippet ก่อนเปิดใช้งาน

ติ๊กสิ่งที่ตรวจสอบแล้ว ระบบจะคำนวณความพร้อมให้ทันที

SNIPPET READINESS

เมื่อ Checklist ครบ Snippet ก็พร้อมสำหรับการทดสอบและใช้งานจริง

✓

ตั้งชื่อ Snippet ชัดเจน รู้ทันทีว่า Code นี้ใช้ทำอะไร

✓

เลือก Code Type ถูกต้อง HTML / CSS / JavaScript / PHP

✓

ตรวจ Syntax แล้ว ไม่มีวงเล็บหรือเครื่องหมายตกหล่น

✓

Scope ไม่กว้างเกินไป Code ทำงานเฉพาะในจุดที่จำเป็น

✓

Insert Method ถูกต้อง Auto Insert หรือ Shortcode ตามการใช้งาน

✓

ทดสอบ Desktop แล้ว Layout และ Function ทำงานปกติ

✓

ทดสอบ Mobile แล้ว ไม่มีส่วนใดล้นหรือใช้งานไม่ได้

✓

ตรวจเว็บไซต์จริงหลัง Active ไม่มี Error หรือผลกระทบกับส่วนอื่น

FAQ

คำถามเกี่ยวกับ WPCode

Custom HTML ของ Elementor เหมาะกับ Code ที่อยู่ในหน้าและตำแหน่งนั้นโดยตรง ส่วน WPCode เหมาะกับการจัดการ Snippet ที่ต้องใช้ซ้ำ ใช้งานทั่วเว็บไซต์ หรือควบคุมการทำงานจากส่วนกลาง

ถ้า CSS ใช้เฉพาะ Section เดียว และต้องการให้อยู่ใกล้กับองค์ประกอบนั้น สามารถใส่ใน Custom HTML ได้ แต่ถ้า Style ใช้หลายหน้า หรือเป็น Global Style การแยกไว้ใน WPCode จะจัดการง่ายกว่าครับ

Auto Insert ใช้เมื่อ Snippet ต้องทำงานอัตโนมัติตามตำแหน่งหรือเงื่อนไขที่กำหนด ส่วน Shortcode เหมาะเมื่อเราต้องการเรียก Snippet เฉพาะในหน้า Widget หรือจุดที่เราเลือกเอง

ควรระวังมากกว่าครับ เพราะ PHP สามารถเปลี่ยนพฤติกรรมของ WordPress ฝั่ง Server ได้โดยตรง จึงควรเข้าใจ Code ที่นำมาใช้ ตรวจ Syntax และทดสอบทีละ Snippet ไม่ควรเปิดหลาย Snippet ใหม่พร้อมกัน

สำหรับ Snippet ขนาดเล็ก การจัดการผ่าน WPCode ช่วยให้เปิด ปิด แยกชื่อ และค้นหา Code ได้ง่ายกว่า รวมถึงไม่ต้องนำ Custom Code ไปผูกไว้กับไฟล์ Theme โดยตรง

NEXT STEP

จัดการ Custom Code ได้แล้ว ต่อไปทำ SEO ให้เว็บไซต์

ขั้นต่อไปเรียนรู้ Rank Math SEO เพื่อจัดการ SEO Title, Meta Description, Sitemap และองค์ประกอบที่ช่วยให้ Search Engine เข้าใจเว็บไซต์ได้ดีขึ้น

Learn Rank Math SEO →