วิธีการติดตั้ง WordPress บน localhost (XAMPP)

วิธีการติดตั้ง WordPress บน localhost (XAMPP)

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

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

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

อันนี้เป็นไอเดียเล็กๆ น้อยๆ ว่าบางอย่างเราต้องทดสอบก่อนใช้งานจริง เสียเวลาเล็กน้อย เพื่อแลกกับความพร้อม

…เอาล่ะ เรามาเริ่มติดตั้งกันดีกว่า

 

สรุป step กันก่อนเพื่อความเข้าใจแบบกระชับสัดส่วน แล้วค่อยไปดูรูปลงรายละเอียดกัน

 

วิธีการติดตั้ง WordPress บน localhost (XAMPP)

Step 1 : dowload WordPress ตัวล่าสุดมาก่อนที่ wordpress.org
Step 2 : โยนทุกอย่างเข้าไปที่ XAMPP
Step 3 : start Apache และ MySQL
Step 4 : สร้าง database / collation: utf8_general_ci (ตั้งแต่ WordPress 4.2 ขึ้นไป collation: utf8mb4_unicode_ci)
Step 5 : ตั้งค่าไฟล์ wp-config.php
Step 6 : เรียกหน้า Install WordPress ขึ้นมา
Step 7 : Login เข้า WordPress เป็นอันเสร็จเรียบร้อย :)

 

Step 1 : dowload WordPress ตัวล่าสุดมาก่อนที่ wordpress.org

 

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

install-wordpress-xampp-02-03-border

 

Step 2 : โยนทุกอย่างเข้าไปที่ path: XAMPP/htdocs/yourfolder

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

 

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

install-wordpress-xampp-09-border2

 

Step 3 : start Apache และ MySQL

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

    install-wordpress-xampp-10-border

 

Step 4 : สร้าง database / collation: utf8_general_ci

// ตั้งแต่ WordPress 4.2 ขึ้นไป collation: utf8mb4_unicode_ci

  • ใช้ browser เรียก XAMPP ขึ้นมา โดยพิมพ์ localhost ที่ช่อง url แล้วกด Enter
  • เข้าไปที่ เมนู phpMyAdmin เพื่อเข้าไปสร้าง database

install-wordpress-xampp-11-border

 

  • คลิกที่ tab Database

install-wordpress-xampp-12-border

 

  • ใส่ชื่อ database ที่ต้องการ แล้วเลือก collation เป็น utf8_general_ci
  • // ตั้งแต่ WordPress 4.2 ขึ้นไปเลือก collation เป็น utf8mb4_unicode_ci

  • กด Create แล้วสังเกตที่ด้านซ้าย database ที่เราสร้างเมื่อกี้เข้ามาละ

install-wordpress-xampp-13-border

 

Step 5 : ตั้งค่า wp-config.php

  • ดับเบิ้ลคลิกที่ไฟล์ wp-config-sample.php เพื่อเข้าไปตั้งค่าข้อมูล database ที่เราสร้างมาเมื่อกี้

install-wordpress-xampp-14-border

 

ตรงนี้จะขออธิบายการ config สักหน่อย
  • DB = Database
  • การใส่ค่าต้องอยู่ภายในเครื่องหมาย single quote คือเครื่องหมายนี้ มี 2 อัน เปิด-ปิด เช่น ‘xxxx’
  • ใช้โปรแกรมประเภท text editor ในการแก้ไข เช่น Sublime Text, EditPlus, NotePad, WordPad

     

  • DB_NAME - ให้ใส่ ชื่อของ database ที่เราสร้างมาเมื่อกี้
  • DB_USER -  บน localhost ปกติจะถูกตั้งให้เป็น root
    (ถ้าเป็นการติดตั้ง WordPress บน hosting ส่วนใหญ่จะใช้ชื่อเหมือนกับ DB_NAME
    หรือถ้า hosting ตั้งค่าอย่างอื่นไว้ก็ถามได้จาก admin ที่ดูแล hosting นั้นได้)
  • DB_PASSWORD - ใส่ password ของ database แต่ถ้าเราไม่เคยไปตั้ง password ไว้ที่ XAMPP ก็ปล่อยว่างไว้
  • DB_HOST - ใช้ localhost ไม่ต้องเปลี่ยน

install-wordpress-xampp-15-border

 

ตัวอย่างการตั้งค่า config
  • DB_NAME = wp_yuikdev
  • DB_USER = root
  • DB_PASSWORD = ปล่อยว่าง (ลบ password_here ออกด้วยนะ ระบบใส่มาให้เรารู้ความหมายเฉยๆ)
  • DB_HOST = localhost

install-wordpress-xampp-16-border

 

  • เสร็จแล้ว Save as ตั้งชื่อไฟล์ใหม่เป็น wp-config.php
    ส่วนไฟล์ wp-config-sample.php ระบบไม่ใช้ จะลบออกหรือไม่ลบก็ได้

install-wordpress-xampp-17-border

 

Step 6 : เรียกหน้า Install WordPress ขึ้นมา

  • urlhttp://localhost/yourfolder/wp-admin/install.php (เอา wp-admin/install.php มาต่อท้าย)
  • ตัวอย่าง http://localhost/wp_yuikdev/wp-admin/install.php

install-wordpress-xampp-18-border

 

เข้ามาสู่หน้า Install WordPress

WordPress เค้าภูมิใจกับ “การติดตั้งได้ภายใน 5 นาที ที่มีชื่อเสียงของ WordPress” ของเค้ามาก
เดี๋ยวมาดูกันว่าเร็วปานนั้นจริงหรือ

  • Site Title - ใส่ชื่อเว็บไซต์ (ตรงนี้เดี๋ยวเข้าไปเปลี่ยนทีหลังที่หน้า admin ได้)
  • Username - เป็น username ที่ใช้ Login เข้า WordPress (คนละตัวกับ username ของ database)
  • Password, twice - เป็น password ที่ใช้ Login เข้า WordPress (คนละตัวกับ password ของ database)
  • Your E-Mail - ใส่อีเมลของเรา
  • Privacy - ไม่ต้องติ๊กถูก เนื่องจากเราไม่ได้ online จริง
    (ตรงนี้เป็นการอนุญาตให้ search engine เข้ามาเก็บข้อมูลหรือไม่ เอาไว้ย้ายขึ้น hosting ค่อยไปติ๊กเลือกอนุญาตทีหลังได้)
  • เสร็จแล้วคลิก Install WordPress

install-wordpress-xampp-19-border

 
install-wordpress-xampp-20-border

 

5 นาทีแล้วยัง…

 

Step 7 : Login เข้า WordPress เป็นอันเสร็จเรียบร้อย :)

  • ครั้งต่อไปเวลาเข้าหน้า Login ก็ใช้ url นี้ http://localhost/yourfolder/wp-login.php (เอา wp-login.php มาต่อท้าย)
  • ตัวอย่าง http://localhost/wp_yuikdev/wp-login.php
  • Trick : save ใส่ bookmark ของ browser เอาไว้เลย คราวหน้าจะได้ไม่ต้องพิมพ์ยาวๆ

install-wordpress-xampp-21-border

 

เมื่อเข้ามาที่หน้า Dashboard ได้ ก็แสดงว่าชัวร์!
  • ยินดีด้วยค่ะ :) คุณได้ทำการติดตั้ง WordPress บน localhost (XAMPP) ด้วยตัวเองสำเร็จแล้ว ฮูเล่

install-wordpress-xampp-22-border

 

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

ลองทำแข่งกับเพื่อนเล่นๆ กันดู ใครเร็วกว่าชนะ …จับเวลา!

 

บทความ/รูปภาพ : Webmonster Lab | Yui K Artist

 

ปัญหาการติดตั้ง WordPress บน localhost (XAMPP)
SME Webinar แหล่งความรู้ชั้นดีและฟรี ที่อยากแนะนำ