วิธีใส่ Popup บน WordPress สำหรับมือใหม่

Popup คือกล่องข้อความที่ปรากฏขึ้นบนหน้าเว็บ ใช้บอกโปรโมชั่น รับสมัครสมาชิก หรือแจ้งข่าวสำคัญ หลายคนมองว่า Popup น่ารำคาญ แต่ถ้าตั้งค่าถูกต้อง ช่วยเพิ่มยอด Email subscriber และ Conversion ได้มาก บทความนี้จะสอนการติดตั้งและตั้งค่า Popup Plugin บน WordPress ทีละขั้นตอน สำหรับมือใหม่ที่ไม่มีความรู้เรื่องโค้ดเลย

Popup Plugin ที่นิยมใช้บน WordPress

ก่อนเริ่มติดตั้ง ควรรู้จัก Plugin ยอดนิยมที่ใช้งานง่ายและฟรีก่อน:

• Popup Maker — ฟรี ปรับแต่งได้เยอะ รองรับ Shortcode และ Trigger หลากหลาย
• Sumo (List Builder) — เน้นรับ Email subscriber โดยเฉพาะ ฟรีสำหรับเว็บขนาดเล็ก
• WP Popups — ใช้ง่าย มี Template สำเร็จรูปหลายแบบ
• Hustle — ของ WPMU DEV ฟรีแผน Basic ทำ Popup, Slide-in, Embed ได้
• OptinMonster — เสียเงิน แต่มี A/B Test และ Targeting ขั้นสูง เหมาะธุรกิจโต

สำหรับมือใหม่แนะนำ Popup Maker เพราะฟรี ตั้งค่าครบ และมีผู้ใช้กว่า 700,000 เว็บไซต์ทั่วโลก

ขั้นตอนที่ 1 — ติดตั้ง Popup Maker Plugin

1. เข้า WordPress Admin → เมนู ปลั๊กอิน → เพิ่มปลั๊กอินใหม่
2. ค้นหา Popup Maker ในช่องค้นหา
3. กด ติดตั้งทันที แล้วกด เปิดใช้งาน
4. ระบบจะเพิ่มเมนู Popup Maker ใน WordPress Admin ด้านซ้าย

ขั้นตอนที่ 2 — สร้าง Popup ใหม่

1. ไปที่ Popup Maker → เพิ่ม Popup ใหม่
2. ตั้งชื่อ Popup เช่น โปรโมชั่นพิเศษเดือนนี้
3. ในส่วน Content Editor ใส่เนื้อหาที่ต้องการแสดงใน Popup เช่น:
   • ข้อความโปรโมชั่น
   • ฟอร์มรับ Email (ถ้าใช้ร่วมกับ Contact Form 7 หรือ Mailchimp)
   • รูปภาพหรือปุ่ม CTA
4. เลื่อนลงมาดูส่วน Popup Settings ด้านล่าง

ขั้นตอนที่ 3 — ตั้งค่า Trigger (เงื่อนไขการแสดง)

Trigger คือเงื่อนไขที่ทำให้ Popup ปรากฏขึ้น มีให้เลือกหลายแบบ:

• Time Delay — แสดงหลังผู้ใช้อยู่บนหน้านาน X วินาที (แนะนำ 5–10 วินาที)
• Scroll Trigger — แสดงเมื่อเลื่อนหน้าลงมาถึง % ที่กำหนด
• Click Open — แสดงเมื่อคลิกปุ่มหรือลิงก์ที่กำหนด
• Exit Intent — แสดงเมื่อเมาส์พุ่งไปที่แถบด้านบน (กำลังจะออก)
• Auto Open — เปิดทันทีที่โหลดหน้า

ขั้นตอนตั้งค่า Trigger:

1. ในหน้า Edit Popup เลื่อนลงมาที่แท็บ Triggers
2. กด Add New Trigger
3. เลือกประเภท เช่น Time Delay / Auto Open
4. ตั้ง Delay เป็น 5000 (มิลลิวินาที = 5 วินาที)
5. กด Done แล้ว Save

ขั้นตอนที่ 4 — ตั้งค่า Display Conditions (หน้าที่จะแสดง Popup)

คุณสามารถเลือกได้ว่า Popup จะแสดงที่หน้าไหนบ้าง:

1. ในหน้า Edit Popup ไปที่แท็บ Display Conditions
2. กด Add Condition
3. เลือกเงื่อนไข เช่น:
   • All Pages — แสดงทุกหน้า
   • Front Page — แสดงเฉพาะหน้าแรก
   • Single Post — แสดงเฉพาะหน้าบทความ
   • Specific Page — เลือกหน้าเฉพาะเจาะจง
4. กด Done และ Publish Popup

ขั้นตอนที่ 5 — ออกแบบหน้าตา Popup ให้สวยงาม

Popup Maker มี Theme Editor ให้ปรับแต่งดีไซน์ได้:

1. ไปที่ Popup Maker → Popup Themes
2. แก้ไข Default Theme หรือสร้าง Theme ใหม่
3. ปรับแต่งได้:
   • Overlay — สีพื้นหลังด้านหลัง Popup (แนะนำ สีดำ opacity 70%)
   • Container — สีพื้น Popup, ขนาด, ขอบมุม
   • Title — ฟอนต์และขนาดหัวข้อ
   • Close Button — ตำแหน่งและสไตล์ปุ่มปิด
4. กด Save Theme
5. กลับไปที่ Popup → เลือก Theme ที่เพิ่งสร้างในช่อง Popup Theme

ขั้นตอนที่ 6 — Popup รับ Email ร่วมกับ Contact Form 7

วิธียอดนิยมคือใส่ฟอร์มรับ Email ภายใน Popup:

1. ติดตั้ง Contact Form 7 และสร้างฟอร์ม Email subscription
2. Copy Shortcode ของฟอร์ม เช่น [contact-form-7 id="123" title="Subscribe"]
3. กลับมาที่ Popup Editor วางรหัส Shortcode ในส่วน Content
4. จะได้ Popup ที่มีฟอร์มกรอก Email สมบูรณ์

<!-- ตัวอย่างเนื้อหาใน Popup Content -->
<h3>รับข่าวสารก่อนใคร!</h3>
<p>กรอก Email รับโปรโมชั่นพิเศษและบทความใหม่ทุกสัปดาห์</p>
[contact-form-7 id="123" title="Subscribe Form"]
<p style="font-size:12px;color:#888;">ยกเลิกได้ตลอดเวลา ไม่มีสแปม</p>

ตรวจสอบว่า Popup ทำงานถูกต้อง

หลังสร้าง Popup แล้ว ควรทดสอบก่อน Publish จริง:

# วิธีตรวจสอบ Popup ทำงาน
1. เปิดเว็บในโหมด Incognito / Private Browsing
   (เพราะ Popup ถูกซ่อนเมื่อเคยปิดไปแล้ว)

2. ไปที่หน้าที่ตั้งค่าให้แสดง Popup

3. รอตามเวลา Delay ที่ตั้งไว้ (เช่น 5 วินาที)

4. ตรวจสอบว่า Popup ปรากฏและปิดได้ปกติ

5. บน Mobile: ทดสอบด้วย Chrome DevTools
   (F12 → Toggle Device Toolbar → เลือก Mobile)

แก้ปัญหาที่พบบ่อย

Error: "Popup ไม่แสดงขึ้นมาเลย"

สาเหตุที่พบบ่อย: เคยปิด Popup ไปแล้วและ Cookie ยังอยู่ หรือ Display Condition ตั้งผิด

• เปิดเว็บใน Incognito Mode
• ตรวจ Display Conditions ว่าครอบคลุมหน้าที่ทดสอบ
• ตรวจ Trigger ว่าตั้ง Delay ถูกต้อง
• ตรวจว่า Popup Status เป็น Published ไม่ใช่ Draft

Error: "Popup แสดงบนมือถือแล้วดูไม่สวย"

Popup ไม่ Responsive ทำให้บนมือถือดูผิดสัดส่วน

• ไปที่ Popup Theme → Container → ตั้ง Max Width เป็น 90%
• เพิ่ม CSS Custom ใน Popup Theme: max-width: 90vw !important;
• หรือปิด Popup บนมือถือ: ไปที่ Popup Settings → Disable on Mobile

Error: "Popup ทำให้เว็บช้าลง"

Plugin โหลด Script ทุกหน้าทำให้ช้า

• ใช้ Plugin Asset CleanUp เพื่อ Disable Script ของ Popup Maker ในหน้าที่ไม่มี Popup
• ตั้ง Trigger เป็น Click แทน Auto Open จะลด Impact ได้มาก
• ลดขนาดรูปภาพใน Popup ให้เหลือไม่เกิน 100KB

Error: "Popup ขึ้นทุกครั้งที่ Refresh ไม่หยุด"

Cookie ไม่ถูก Set ทำให้ไม่จำว่าเคยปิดแล้ว

• ตรวจว่าเว็บมี Cookie Consent Banner ที่บล็อก Cookie ของ Popup
• ไปที่ Popup Settings → Cookie → ตั้ง Cookie Duration เป็น 30 วัน
• ตรวจสอบว่า JavaScript ทำงานปกติ (ไม่มี Error ใน Console)

Error: "Close Button ไม่ทำงาน"

CSS ของ Theme อื่นทับปุ่มปิด Popup

• ตรวจ Console (F12) ว่ามี JavaScript Error หรือไม่
• ลอง Deactivate Plugin อื่นทีละตัวเพื่อหาตัวที่ Conflict
• เพิ่ม CSS ใน Popup Theme: .pum-close { z-index: 9999 !important; }

คำถามที่พบบ่อย (FAQ)

Q: Popup ทำให้ Google ลงโทษเว็บหรือเปล่า?

A: Google ลงโทษ Popup ที่บัง Content หลักบนมือถือ (Intrusive Interstitials) โดยเฉพาะ Popup ที่ขึ้นทันทีที่เปิดหน้า วิธีแก้คือตั้ง Delay อย่างน้อย 5 วินาที หรือให้ขึ้นเฉพาะบน Desktop ปิดบนมือถือ และต้องมีปุ่มปิดที่กดได้ง่าย

Q: ใช้ Popup Maker ฟรีได้แค่ไหน?

A: เวอร์ชันฟรีทำ Popup พื้นฐานได้ครบ: สร้าง Popup ไม่จำกัด, Trigger หลายแบบ, Display Conditions ครบ แต่ฟีเจอร์พรีเมียมเช่น Analytics, A/B Testing, Exit Intent ต้องซื้อ Add-on เพิ่มเติม ราคาเริ่มต้น $87/ปี

Q: จะทำ Popup แบบ Slide-in จากมุมหน้าจอได้ไหม?

A: Popup Maker รองรับ Animation หลายแบบรวมถึง Slide-in โดยไปที่ Popup Theme → Container → Animation เลือก Slide Down, Slide Up, Slide Left, Slide Right ได้เลย ไม่ต้องลง Plugin เพิ่ม