วิธีการติดตั้ง WordPress บน Windows Localhost (XAMPP) สอนละเอียดมาก

• Facebook
• Twitter
• Line

Q : ทำไมติดตั้ง WordPress บน localhost / ไม่ติดตั้งที่ hosting เลย เร็วดี ทำงานครั้งเดียว

A : เพราะว่าเราจะใช้ “ทดสอบ” หรือ “เพิ่งเริ่มสร้างเว็บไซต์ใหม่ ก็จะทำเว็บไซต์จำลองเหมือนจริงขึ้นมา” เพื่อตรวจสอบความเรียบร้อยก่อนที่จะอัพโหลดขึ้น hosting ค่ะ จะได้ไม่ต้องเปิดโหมดซ่อมบำรุง (maintenance) แบบลากยาวที่เว็บไซต์ (เราก็ทดสอบของเราได้ชิลๆ ผู้ชมก็ยังเข้าเว็บไซต์ได้ปกติ)

• บทความนี้ยุ้ยเขียนให้สำหรับ มือใหม่ที่พอมีพื้นฐานนะคะ (ส่วนใหญ่เป็น dev) เพราะการทำเว็บไซต์บน localhost มีขั้นตอนซับซ้อนกว่าทำบนโฮสจริง ลึกเกินสำหรับบุคคลทั่วไป/เจ้าธุรกิจ
• บุคคลทั่วไป/เจ้าธุรกิจ ทำเว็บไซต์เอง ยุ้ยแนะนำทำบนโฮสติ้งจริง โดยใช้ Staging เพื่อทดสอบเว็บ ใช้ app ช่วยติดตั้งนะคะ ง่ายกว่ามากๆ จ้า (มีสอนใน คอร์ส WordPress มือใหม่สร้างเว็บไซต์ ค่ะ)
• บทความนี้เผยแพร่ครั้งแรก ปี 2014 และเข้ามาอัปเดตอยู่เรื่อยๆ ล่าสุดเดือน 04/2024 ค่ะ

ข้ามไปดู : สรุปวิธีการติดตั้ง (สอนลง WordPress ทีละขั้นตอน)

Localhost คืออะไร (สำหรับมือใหม่ใสกิ๊ก)

• Localhost เป็นการจำลองเครื่องคอมพิวเตอร์ของเราให้เป็น server หรือ hosting ค่ะ
• เป็นระบบปิด ต้องเปิดดูจากคอมเราเท่านั้น
• ส่ง link ให้คนอื่นเข้ามาดูไม่ได้ / ส่ง link ให้ตัวเองแก้ไขเว็บจากมือถือไม่ได้
• ไม่ต่อเน็ต ก็ใช้งานได้ค่ะ แก้ไขเว็บไซต์ WordPress ใช้งาน Elementor ได้ปกติค่ะ (แต่ถ้าดาวน์โหลด Plugin ต้องต่อเน็ตนะ อิอิ)

ไอเดีย : เมื่อไหร่ที่เราควรใช้ localhost

• เช่น ซ้อม อัพเดทเวอร์ชั่นใหม่ของ WordPress
• อยากเปลี่ยน theme แล้ว modify แก้ไข css ด้วย
• ทดสอบ plugin บางตัว อย่างพวก WordPress E-Commerce Plugins
• เพิ่งเริ่มต้นสร้างเว็บไซต์ใหม่ เว็บไซต์ยังไม่พร้อมใช้งาน เป็นต้นค่ะ

ฮาวทูนี้ สามารถใช้ลง WordPress ได้ทุกเวอร์ชั่น

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

สำหรับคนที่ต้องการเวอร์ชั่นล่าสุด เช็คพวกนี้ก่อนนาจ๊ะ

• ตรวจสอบความต้องการของระบบที่ WordPress แนะนำได้ที่ WordPress Requirements
• XAMPP เครื่องเรารองรับ support กันไหม กับเวอร์ชั่น WordPress ที่เราใช้
• แนะนำให้ศึกษาก่อนอัพเดทเวอร์ชั่น XAMPP นะฮะ

…เอาล่ะ เรามาเริ่มลง WordPress ที่เครื่องคอม PC ของเรากันดีกว่า

สรุปขั้นตอนการติดตั้ง WordPress บน Windows Localhost (XAMPP)

ขั้นตอน 1 : dowload WordPress ตัวล่าสุดลงมาที่เครื่องเราก่อน
ขั้นตอน 2 : copy ทุกอย่างเข้าไปที่ XAMPP
ขั้นตอน 3 : start Apache และ MySQL
ขั้นตอน 4 : สร้าง database / collation: utf8mb4_unicode_ci
ขั้นตอน 5 : เรียกหน้า Install WordPress ขึ้นมา
ขั้นตอน 6 : Login เข้า WordPress เป็นอันเสร็จเรียบร้อย :)

 ขั้นตอน 1 : dowload WordPress ตัวล่าสุดลงมาที่เครื่องเราก่อนที่

wordpress.org

แตก zip ไฟล์ออกมาจะได้ folder ทั้งหมดลักษณะนี้

 

กลับไปที่: สรุปขั้นตอนการติดตั้ง WordPress (XAMPP)

ขั้นตอน 2 : copy ทุกอย่างเข้าไปที่ path: xampp/htdocs/yourfolder

• สร้าง folder ที่เราจะติดตั้ง WordPress ขึ้นมา (ตั้งชื่อได้เองตามใจชอบค่ะ – ส่วนใหญ่ก็จะตั้งตามชื่อเว็บไซต์ หรือชื่อโปรเจค)
• ตามตัวอย่าง yourfolder คือ kwebmonsterlab

copy ทุกอย่าง เอาเฉพาะที่อยู่ข้างใน ไม่ต้องเอา folder wordpress มาด้วยนะคะ

• ให้ดับเบิ้ลคลิกเข้าไปข้างใน folder WordPress ที่เราแตก zip แล้ว
• แล้ว select all หรือ Ctrl+A  จับไฟล์ และ folder ที่อยู่ข้างในทั้งหมดมาใส่ตาม path: xampp/htdocs/kwebmonsterlab
• ที่ XAMPP หน้าตาก็จะเหมือนกับ WordPress ที่เราดาวน์โหลดมาเป๊ะเลย

 

กลับไปที่: สรุปขั้นตอนการติดตั้ง WordPress (XAMPP)

ขั้นตอน 3 : start Apache และ MySQL

• เปิด XAMPP Control Panel ขึ้นมา แล้ว Start อย่างรวดเร็ว / เสร็จแล้วก็ย่อหน้าต่างลงไป
• Apache และ MySQL ต้องเปิดตลอดเวลาที่เรามีการติดต่อกับ Database
  หมายความว่าตลอดเวลาที่เรากำลังทำเว็บไซต์ WordPress ที่รันบน localhost เครื่องคอมพิวเตอร์ของเราอยู่ ห้ามปิดนะ! ไม่งั้นจะถูกตัดการเชื่อมต่อ แล้วจะเข้า WordPress ไม่ได้อ่ะค่ะ
• เราจะปิด Apache และ MySQL ต่อเมื่อเราใช้งาน WordPress บน localhost ของเราเสร็จแล้ว
• เช่น ทำงานเสร็จแล้วสำหรับวันนี้ ไปเล่น Facebook ดีกว่า ก็ปิดไป แล้วค่อยกลับมาเปิดใหม่เมื่อเราจะใช้งานค่ะ
• รวมถึงการเข้าไปแก้ไขเว็บไซต์ภายหลังด้วยนะคะ ไม่ใช่แค่เฉพาะติดตั้ง WordPress
  
  

กลับไปที่: สรุปขั้นตอนการติดตั้ง WordPress (XAMPP)

ขั้นตอน 4 : สร้าง database / utf8mb4_unicode_ci

• ใช้เบราว์เซอร์ เช่น Chrome เรียก XAMPP ขึ้นมา โดยพิมพ์ localhost ที่ช่อง url แล้วกด Enter
• มันจะ auto link พาไปหน้า Dashboard ของ XAMPP
• ให้เราเข้าไปที่ เมนู phpMyAdmin เพื่อสร้าง Database

 

ที่ phpMyAdmin

1. กดไอคอน “บ้าน”
2. คลิกที่ tab Database
3. ใส่ชื่อ Database ที่ต้องการ (ถ้าชื่อยาวเกินไป เราจะสร้างไม่ได้นะ)
4. เลือก collation: utf8mb4_unicode_ci (กด dropdown จะอยู่ล่างๆ ค่ะ)
5. กด Create แล้วสังเกตที่ด้านซ้าย Database ที่เราสร้างเมื่อกี้ ก็จะเข้ามาแล้วค่ะ

 

ระบบจะพามาที่หน้าติดตั้ง WordPress หน้าตาแบบนี้

ขั้นแรก เลือกภาษาของระบบหลังบ้าน WordPress (มีภาษาไทยด้วยนะ อยู่ล่างๆ)

ตรงนี้จะขออธิบายการตั้งค่า config สักเล็กน้อยนะคะ
เพื่อให้มือใหม่ ได้รู้ว่าอะไรเชื่อมโยงกับอะไรค่ะ

• Database Name : ให้ใส่ ชื่อของ database (ตัวที่เราสร้างขึ้นมาเมื่อกี้ใน phpMyAdmin)
• Username :  บน localhost ปกติจะถูกตั้งให้เป็น root
  (ถ้าเป็นการติดตั้ง WordPress ที่ hosting ส่วนใหญ่จะใช้ชื่อเหมือนกับ Database Name
  หรือถ้า hosting ตั้งค่าอย่างอื่นไว้ก็ถามได้จาก admin ที่ดูแล hosting นั้นได้จ้า)
• Password : ปกติคือ ปล่อยว่างๆ ไว้ ไม่ต้องใส่อะไรค่ะ (แต่ถ้าเครื่องที่มีการตั้ง password เอาไว้ที่ XAMPP ก็ใส่ password อันนั้นค่ะ)
• Database Host : ใช้ localhost ไม่ต้องเปลี่ยนนะ
• Table Prefix : ตัวอักษรภาษาอังกฤษ ตามด้วยขีดล่าง _

ตัวอย่างการตั้งค่า config (ที่สอนในบทความนี้)

• Database Name = lab01
• Username = root 
  
• Password = ปล่อยว่าง
• Database Host = localhost
• Table Prefix = lab_

Bonus!
เฉลยการตั้งค่า config ใน ขั้นตอน 5 : ตั้งเสร็จแล้ว น้อนไปอยู่ที่ไหน

• อยู่ที่ไฟล์ wp-config.php จ้า
• พอเรา config เสร็จแล้ว ระบบ WordPress จะสร้างไฟล์ wp-config.php ขึ้นมาให้
• ตอนแรกจะไม่มีนะ มีแต่ไฟล์ wp-config-sample.php
• ใช้โปรแกรมประเภท text editor เปิดขึ้นมาดู หรือแก้ไขเพิ่มเองก็ได้นะคะ ในรูปยุ้ยใช้  Sublime Text

WordPress เวอร์ชั่นใหม่ๆ สบายมากเลย ไม่ต้องเข้าไปทำเองในไฟล์แล้ว

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

คอร์สเรียน ตัวต่อตัว (สอนทำบนโฮสจริง)
WordPress Elementor สำหรับมือใหม่

 

• Facebook
• Twitter
• Line