Maintenance Mode WordPress Under Construction

เคยเจอปัญหาไหมว่า ขณะที่กำลังอัพเดท WordPress Core, ติดตั้ง Plugin ใหม่ หรือเปลี่ยน Theme ลูกค้าก็เข้ามาเจอหน้าเว็บที่แสดงผลผิดพลาด หรือข้อความ Error น่าเกลียดที่ไม่ได้ตั้งใจให้เห็น? นั่นคือสัญญาณว่าคุณยังไม่ได้ตั้งค่า Maintenance Mode ให้ถูกต้อง

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

ทำไม Maintenance Mode ถึงสำคัญสำหรับ SEO: ถ้าเว็บตอบกลับด้วย HTTP 200 OK บนหน้า "Under Construction" Google จะ Index เนื้อหาหน้า Under Construction แทนเนื้อหาจริง ทำให้ Ranking พัง ต้องใช้ HTTP 503 Service Unavailable พร้อม Retry-After header เพื่อบอก Bot ว่าหยุดชั่วคราวเท่านั้น

WordPress Maintenance Mode ทำงานอย่างไร?

เมื่อ WordPress อยู่ในโหมด Maintenance ระบบจะสร้างไฟล์ชื่อ .maintenance ขึ้นที่โฟลเดอร์ root ของ WordPress โดยอัตโนมัติ ไฟล์นี้มี PHP code ง่ายๆ ที่บอก WordPress ว่าให้แสดงหน้า Maintenance แทนเนื้อหาจริง และตอบกลับทุก Request ด้วย HTTP 503

WordPress มี Built-in Maintenance Mode อยู่แล้วสำหรับ Core Update — เมื่อกด Update ใน Dashboard WordPress จะสร้างไฟล์ .maintenance ทันที ทำให้ผู้เยี่ยมชมเห็นหน้าปิดปรับปรุง และจะลบไฟล์นี้ออกเมื่ออัพเดทสำเร็จ แต่ปัญหาคือ Built-in Maintenance Page ของ WordPress นั้น น่าเกลียดมาก ไม่มีข้อมูลที่เพียงพอ และไม่สามารถปรับแต่งได้เลย

วิธีตรวจสอบว่าเว็บอยู่ใน Maintenance Mode หรือไม่

มีหลายวิธีตรวจสอบ:

วิธีที่ 1: ใช้ Plugin WP Maintenance Mode (แนะนำสำหรับมือใหม่)

Plugin ที่ดีที่สุดสำหรับมือใหม่คือ WP Maintenance Mode & Coming Soon (ติดตั้งฟรีจาก WordPress.org มีผู้ใช้กว่า 900,000 เว็บ) เพราะตั้งค่าง่าย มีตัวเลือกครบ และตอบกลับ HTTP 503 อย่างถูกต้อง

ขั้นตอนติดตั้งและตั้งค่า

  1. ไปที่ WordPress Admin → Plugins → Add New
  2. ค้นหา "WP Maintenance Mode" แล้วกด Install Now และ Activate
  3. ไปที่เมนู Settings → WP Maintenance Mode
  4. ในแท็บ General ตั้ง Status เป็น Activated
  5. เลือก Bypass for search engines หรือตั้งค่า HTTP Status 503 (สำคัญมาก)
  6. ปรับแต่ง Design, Text และสีของหน้า Maintenance ตามต้องการ
  7. กด Save Settings

สำคัญมาก: ก่อนเปิด Maintenance Mode ต้องแน่ใจว่า Login เป็น Admin ไว้แล้ว เพราะหลังเปิด Maintenance Mode ลิงก์เข้า /wp-admin จะยังใช้งานได้ แต่หน้าอื่นๆ จะแสดง Maintenance Page แก่ผู้เยี่ยมชมทั่วไป

ตัวเลือก Plugin อื่นที่แนะนำ

วิธีที่ 2: ตั้ง Maintenance Mode ด้วย Code (ไม่ต้องใช้ Plugin)

ถ้าต้องการควบคุมได้เต็มที่หรือไม่อยากติดตั้ง Plugin เพิ่ม สามารถเพิ่มโค้ดใน functions.php ของ Child Theme ได้เลย วิธีนี้ทำงานอย่างถูกต้องตามมาตรฐาน WordPress

เพิ่มใน functions.php ของ Child Theme

/**
 * Maintenance Mode — ใส่ใน functions.php ของ Child Theme เท่านั้น
 * Admin และผู้ใช้ที่ Login จะยังเข้าถึงได้ปกติ
 */
function asiagb_maintenance_mode() {
    // ข้าม Admin Dashboard และ Login Page
    if ( is_admin() || current_user_can('edit_themes') ) {
        return;
    }

    // ข้าม Login Page
    global $pagenow;
    if ( $pagenow === 'wp-login.php' ) {
        return;
    }

    // ตอบกลับด้วย 503 + Retry-After (กัน SEO ผลกระทบ)
    header( 'HTTP/1.1 503 Service Unavailable' );
    header( 'Retry-After: 3600' ); // บอก Bot ให้กลับมาใหม่ใน 1 ชั่วโมง
    header( 'Content-Type: text/html; charset=UTF-8' );

    // หน้า Maintenance
    echo '<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>กำลังปรับปรุงระบบ — กลับมาเร็วๆ นี้</title>
<style>
body{font-family:sans-serif;background:#f0fdf4;display:flex;
     align-items:center;justify-content:center;min-height:100vh;margin:0;}
.box{text-align:center;padding:40px;background:#fff;border-radius:12px;
     box-shadow:0 4px 24px rgba(0,0,0,0.08);max-width:480px;}
h1{font-size:28px;color:#0f172a;margin-bottom:12px;}
p{color:#64748b;line-height:1.7;}
</style>
</head>
<body>
<div class="box">
  <h1>กำลังปรับปรุงระบบ 🔧</h1>
  <p>เว็บไซต์ของเราอยู่ในระหว่างการปรับปรุง<br>
  กรุณากลับมาใหม่ในอีกสักครู่ ขอบคุณที่ให้ความเข้าใจครับ</p>
</div>
</body>
</html>';
    exit;
}
add_action( 'wp', 'asiagb_maintenance_mode' );

เหตุผลที่ใช้ add_action('wp', ...) แทน add_action('init', ...): Hook wp ทำงานหลังจาก WordPress โหลด user authentication เสร็จแล้ว ทำให้ฟังก์ชัน current_user_can() ทำงานได้ถูกต้อง ถ้าใช้ init จะยังตรวจสอบ Permission ไม่ได้ทำให้ Admin ก็ถูก Block ด้วย

วิธีที่ 3: ใช้ไฟล์ .maintenance (วิธีที่เร็วที่สุด)

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

วิธีสร้างไฟล์ .maintenance

เข้า FTP หรือ File Manager ใน DirectAdmin แล้วสร้างไฟล์ชื่อ .maintenance (ขึ้นต้นด้วยจุด) ที่โฟลเดอร์ root ของ WordPress แล้วใส่เนื้อหา:

<?php $upgrading = time(); ?>

เพียงแค่นี้ WordPress จะแสดงหน้า Maintenance ทันที เมื่อต้องการยกเลิก ให้ลบไฟล์ .maintenance ออก เว็บจะกลับมาปกติทันที

ข้อควรระวัง: ค่าของตัวแปร $upgrading ต้องเป็น Unix Timestamp ปัจจุบัน WordPress ตรวจว่าถ้า time() - $upgrading > 600 (10 นาที) จะถือว่าเป็น Stale และไม่แสดง Maintenance อีกต่อไป ดังนั้นถ้าต้องการ Maintenance นานกว่า 10 นาที ให้ใช้วิธีอื่นแทน

การตั้งค่า Coming Soon Page vs Maintenance Mode — ต่างกันอย่างไร?

หลายคนสับสนระหว่าง Coming Soon Page กับ Maintenance Mode แม้จะดูคล้ายกันแต่มีวัตถุประสงค์และผลต่อ SEO ที่ต่างกันอย่างมีนัยสำคัญ

ด้าน Coming Soon Page Maintenance Mode
วัตถุประสงค์เว็บใหม่ที่ยังสร้างไม่เสร็จ รอ Launchเว็บที่มีอยู่แล้ว หยุดชั่วคราวเพื่อ Maintenance
HTTP Status200 OK (เว็บใหม่ยังไม่มี Ranking)503 Service Unavailable + Retry-After
ผลต่อ SEOGoogle Index หน้า Coming Soon ได้ (ยอมรับได้)Google รู้ว่าหยุดชั่วคราว ไม่ลด Ranking
ระยะเวลาเปิดได้นานหลายสัปดาห์/เดือนควรเปิดไม่เกิน 24-48 ชั่วโมง
Plugin แนะนำSeedProd, UnderConstructionPageWP Maintenance Mode, Maintenance

ออกแบบหน้า Maintenance ให้ดูดีและสร้าง Trust

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

องค์ประกอบที่ควรมีในหน้า Maintenance

ตัวอย่างการออกแบบหน้า Maintenance ด้วย CSS สวยงาม

/* หน้า Maintenance สวยงาม — Light Green Theme */
body {
    font-family:'Noto Sans Thai','Noto Sans',sans-serif;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
}

.maintenance-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 52px 44px;
    text-align: center;
    max-width: 520px;
    box-shadow: 0 8px 40px rgba(5,150,105,0.12);
    border: 1px solid rgba(5,150,105,0.15);
}

.maintenance-icon {
    font-size: 56px;
    margin-bottom: 24px;
    display: block;
}

.maintenance-card h1 {
    font-size: 28px;
    color: #0f172a;
    margin-bottom: 12px;
    font-weight: 700;
}

.maintenance-card p {
    color: #64748b;
    line-height: 1.75;
    font-size: 16px;
    margin-bottom: 20px;
}

.eta-badge {
    display: inline-block;
    background: rgba(5,150,105,0.10);
    color: #059669;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 28px;
}

.contact-link {
    color: #059669;
    text-decoration: none;
    font-weight: 600;
}
.contact-link:hover {
    text-decoration: underline;
}

ตั้งค่า Maintenance Mode ใน DirectAdmin (ระดับ Server)

นอกจากการใช้ WordPress Plugin แล้ว คุณยังสามารถตั้ง Maintenance Mode ในระดับ Server ผ่าน DirectAdmin หรือ .htaccess ได้ด้วย วิธีนี้มีประโยชน์เมื่อต้องการปิดเว็บก่อนที่ WordPress จะโหลดขึ้นมาได้เลย เหมาะกับกรณีที่ต้องทำ Database Migration หรืออัพเดทไฟล์จำนวนมาก

วิธีตั้งผ่าน .htaccess

# ใส่ไว้ใน .htaccess ของ WordPress root
# แทนที่ YOUR_IP ด้วย IP จริงของคุณ (ตรวจสอบได้ที่ whatismyip.com)

ErrorDocument 503 /maintenance.html

<IfModule mod_rewrite.c>
  RewriteEngine On

  # อนุญาต IP ของ Admin เข้าได้ตามปกติ
  RewriteCond %{REMOTE_ADDR} !^YOUR_IP$

  # Block ทุก Request ยกเว้นหน้า maintenance.html เอง
  RewriteCond %{REQUEST_URI} !/maintenance.html$
  RewriteCond %{REQUEST_URI} !/wp-content/.*\.(css|js|jpg|png|gif|svg|webp|woff2?)$

  # Redirect ไปหน้า maintenance
  RewriteRule ^(.*)$ /maintenance.html [R=503,L]
</IfModule>

# ตอบกลับ 503 พร้อม Retry-After 1 ชั่วโมง
<Files "maintenance.html">
  Header always set Retry-After "3600"
</Files>

เมื่อใช้วิธี .htaccess: ให้สร้างไฟล์ maintenance.html ไว้ที่ WordPress root ด้วย เพราะ WordPress จะ Redirect ไปยังไฟล์นี้ อย่าลืม Allow CSS, JS และรูปภาพที่ใช้ในหน้า Maintenance เพื่อให้หน้าแสดงผลได้ถูกต้อง

ปัญหาที่พบบ่อยและวิธีแก้

1. Admin ถูก Block ออกจากเว็บด้วย

สาเหตุ: โค้ดในหน้า Maintenance ไม่ได้ตรวจสอบว่า User Login เป็น Admin หรือไม่ หรือมีการตั้ง Maintenance Mode ผ่าน .htaccess โดยไม่ Whitelist IP ของ Admin ไว้

แก้ไข: ถ้าใช้ Plugin ให้ตรวจสอบในการตั้งค่าว่ามีตัวเลือก "Bypass for logged-in users" หรือ "Bypass for Admins" แล้ว Enable ไว้ ถ้าใช้ .htaccess ให้ Whitelist IP ของคุณเพิ่ม

2. หน้า Maintenance แสดงผลแต่ไม่ได้ตอบ HTTP 503

สาเหตุ: Plugin บางตัวหรือโค้ดที่เพิ่มเองไม่ได้ตั้งค่า HTTP Header ให้ถูกต้อง ตอบกลับด้วย 200 OK ซึ่งทำให้ Google Index หน้า Maintenance แทน

แก้ไข: ตรวจสอบด้วย Browser DevTools → Network Tab → กด F5 แล้วดูว่า Status Code เป็น 503 หรือไม่ ถ้าไม่ใช่ให้ตรวจสอบโค้ดที่ใช้ส่ง Header

3. Google Cache ยังแสดงหน้า Maintenance หลังจากเปิดเว็บแล้ว

สาเหตุ: Googlebot มา Crawl ระหว่างที่เปิด Maintenance Mode แล้ว Cache เนื้อหานั้นไว้ ปกติ Google จะอัพเดท Cache ภายใน 1-3 วัน

แก้ไข: เข้า Google Search Console → URL Inspection → กด Request Indexing สำหรับ URL หลักๆ ของเว็บ จะช่วยเร่งการอัพเดทได้

4. เว็บค้างใน Maintenance Mode หลังอัพเดทเสร็จ

สาเหตุที่พบบ่อยที่สุดคือ WordPress อัพเดทไม่สำเร็จแต่ไม่ลบไฟล์ .maintenance ออก ทำให้เว็บค้างอยู่ในโหมด Maintenance

แก้ไข: เข้า FTP หรือ File Manager แล้วลบไฟล์ .maintenance ที่ WordPress root ออกด้วยตนเอง เว็บจะกลับมาทันที

ถ้าลบ .maintenance แล้วยังค้างอยู่: อาจมี Plugin Maintenance Mode ที่ยังเปิดอยู่ ให้เข้า WordPress Admin แล้วปิด Plugin นั้น หรือถ้าเข้า Admin ไม่ได้ให้ Rename โฟลเดอร์ Plugin ชั่วคราวผ่าน FTP เพื่อ Deactivate ทุก Plugin แล้วค่อยเปิดทีละตัว

แนวทาง Maintenance ที่ถูกต้อง: ทดสอบก่อน แก้บน Staging

แนวทางที่ดีที่สุดสำหรับงาน Maintenance ขนาดใหญ่คือการทำบน Staging Environment ก่อน เพื่อทดสอบว่าการอัพเดทหรือการเปลี่ยนแปลงที่วางแผนไว้ไม่ทำให้เว็บพัง แล้วค่อย Deploy ขึ้น Production ซึ่งจะใช้เวลา Maintenance น้อยลงมาก ลด Risk และผลกระทบต่อผู้ใช้

สำหรับรายละเอียดการตั้ง Staging Environment ดูได้ที่บทความ WordPress Staging Workflow ทดสอบก่อน Deploy

Checklist ก่อนเปิดและหลังปิด Maintenance Mode

#รายการก่อน / หลัง
1Backup ฐานข้อมูลและไฟล์ทั้งหมดก่อนเริ่มก่อน
2ตรวจสอบว่า Admin Login ได้ปกติหลังเปิด Maintenanceก่อน
3ยืนยันว่า HTTP Status เป็น 503 ด้วย DevToolsก่อน
4แจ้งลูกค้าล่วงหน้าผ่าน Email หรือ Social Mediaก่อน
5ทำ Maintenance ที่วางแผนไว้ให้เสร็จระหว่าง
6ทดสอบเว็บใน Browser หลายตัวหลังอัพเดทหลัง
7ปิด Maintenance Mode และลบ .maintenance ออกหลัง
8ตรวจว่าหน้าเว็บกลับมาแสดง Content จริงแล้ว (ไม่ใช่ Maintenance)หลัง
9ตรวจ Google Search Console ว่ามี 503 Error ค้างไหมหลัง
10Request Indexing สำหรับ URL สำคัญใน Search Consoleหลัง

ควรเปิด Maintenance Mode นานแค่ไหนถึงไม่กระทบ SEO?

Google Bot มีความเข้าใจเรื่อง HTTP 503 ดี — เมื่อเจอ 503 พร้อม Retry-After header Bot จะบันทึกว่า URL นี้ "ไม่พร้อมให้บริการชั่วคราว" และจะกลับมา Crawl ใหม่ตามเวลาที่ระบุใน Retry-After โดยไม่ลด Ranking

สิ่งสำคัญที่สุดคือ ห้ามใช้ HTTP 200 OK สำหรับหน้า Maintenance เพราะ Google จะ Index เนื้อหา Under Construction เป็นเนื้อหาหลักของหน้า ซึ่งจะทำให้ Ranking ลดลงทันที และกู้คืนยาก

เชื่อมต่อ Maintenance Mode กับ Email แจ้งเตือนลูกค้า

สำหรับเว็บ E-Commerce หรือเว็บที่มีสมาชิก การแจ้งเตือนล่วงหน้าก่อนเปิด Maintenance Mode เป็นสิ่งสำคัญมาก เพราะช่วยรักษาความเชื่อมั่นของลูกค้าและลดโอกาสที่ลูกค้าจะคิดว่าเว็บมีปัญหาถาวร

AsiaGB Hosting รวม SSL ฟรี DirectAdmin

รองรับ WordPress ทุกเวอร์ชัน ติดตั้งด้วย Softaculous 1 คลิก Backup อัตโนมัติ และ Uptime 99% เริ่มต้น 500 บาท/ปี

ดูแพ็กเกจ Hosting →