วิธีการติดตั้ง 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 : เพิ่ม folder “uploads” และ “upgrade” ที่ wp-content
Step 3 : โยนทุกอย่างเข้าไปที่ XAMPP
Step 4 : start Apache และ MySQL
Step 5 : สร้าง database / collation: utf8_general_ci
Step 6 : แก้ไฟล์ wp-config.php
Step 7 : เรียกหน้า Install WordPress ขึ้นมา
Step 8 : Login เข้า WordPress เป็นอันเสร็จเรียบร้อย :)
 

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

 
install-wordpress-xampp-01-border

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

install-wordpress-xampp-02-03-border

 

Step 2 : เพิ่ม folder “uploads” และ “upgrade” ที่ wp-content

ไม่รู้ทำไม WordPress เวอร์ชั่นหลังๆ ไม่ใส่ folder 2 อันนี้มาให้

  • folder “uploads” ใช้เก็บไฟล์ media ต่างๆ ที่เราอัพขึ้นไปเอง เช่น รูปภาพที่ใช้ใน post
    หรือ plugin บางตัวก็ต้องการแทรกตัวเข้ามาที่ folder นี้
  • folder “upgrade” ไม่แน่ใจว่าใช้สำหรับอัพเดทเวอร์ชั่น WordPress ผ่านหน้า Dashboard หรือเปล่า
    แต่เวอร์ชั่นแรกๆ มันมีก็เลยใส่ให้ด้วย

แต่ก็เอาล่ะ เมื่อรู้อย่างนี้แล้วเราก็จัดการใส่ซะเอง โดยเข้าไปที่ folder “wp-content” แล้วเพิ่มเองเลย อย่าลังเล

 

Step 3 : โยนทุกอย่างเข้าไปที่ 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 4 : start Apache และ MySQL

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

 

Step 5 : สร้าง database / collation: utf8_general_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
  • กด Create แล้วสังเกตที่ด้านซ้าย database ที่เราสร้างเมื่อกี้เข้ามาละ

install-wordpress-xampp-13-border

 

Step 6 : แก้ไฟล์ wp-config.php

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

install-wordpress-xampp-14-border
 

ตรงนี้จะขออธิบายการ config สักหน่อย
  • DB = Database
  • การใส่ค่าต้องอยู่ภายในเครื่องหมาย single quote คือเครื่องหมายนี้ ‘ ‘ มี 2 อัน เปิด-ปิด เช่น ‘xxxx’
  • ใช้โปรแกรมประเภท text editor ในการแก้ไข เช่น WordPad, NotePad, EditPlus
  • 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 7 : เรียกหน้า 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 เข้ามาเก็บข้อมูลหรือไม่)
  • เสร็จแล้วคลิก Install WordPress

install-wordpress-xampp-19-border

install-wordpress-xampp-20-border
 

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

 

Step 8 : 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 Dev

 

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

Comments

comments