Embed Size (px)
DESCRIPTION
คู่มือการใช้งาน WordPress กับ WooCommerce ทั้งการ Add Product การจัดการหมวดหมู่สินค้าและรูปแบบ Post กับ Page แตกต่างกันอย่างไร
Citation preview
พระนครซอฟต
PhranakornSoft.com
คมอการใชงานระบบ E-Commerce
โดย พระนครซอฟต
พระนครซอฟต
PhranakornSoft.com
สารบญ
1. เกยวกบระบบเวบไซต WordPress 2. หนาหลกของระบบ WordPress 3. การเขาใชงานผดแลระบบเวบไซต WordPress 4. การจดการเนอหาโดย Post 5. การจดการเนอหาโดย Page 6. การจดการสนคาใน WooCommerce 7. การจดการ Coupon
พระนครซอฟต
PhranakornSoft.com
ระบบเวบไซตโดย CMS WordPress
WordPress เปนระบบเวบไซตทไดรบความนยมสงสดปจจบน โดยระบบโครงสรางของตวระบบ
เวบไซต CMS WordPress นนจดท าขนมาเพอใชในการสรางบลอก จดการเนอหาบทความบนเวบไซต
และ ไดรบการพนนามาอยางตอเนอง โดย ไดมการพนนา Plugin ในการท าระบบ E-Commerce และ
ระบบอนๆเขามาตอเพมเตม ท าใหการนยมในการใชงานตวระบบ WordPress สงขนไปอก พรอมทงการ
รองรบระบบ SEO (Search Engine Optimization)
พระนครซอฟต
PhranakornSoft.com
หนาหลกระบบ WordPress
หนาระบบหลกของการจดการเนอหาโดยระบบ WordPress นนจะแสดงผลรายละเอยดตางๆของตวเวบไซตเพอใหผดแลระบบตรวจสอบอยางเชน จ านวนการโพส บทความ จ านวนของหนา จ านวนของการคอมเมน และ ถาทานตดตงระบบ Plugin WooCommerceไวดวยแลวหนาระบบหลกจะแสดงเนอหาของจ านวนสนคาใหเราไดรบทราพอกดวยครบ ดงภาพตวอยางท 1
ภาพท 1 หนาหลกการแสดงผลรายละเอยดระบบเวบไซตโดยรวม
การเขาใชงานผดแลระบบ
การเขาสระบบผดแลระบบเวบไซตดวย WordPress นนสามารถท าไดโดยการพมพ URL ไดดงนเชน
http://example.com/wp-admin
การพมพเขา wp-admin ตอทาย URL นนสามารถเขาไปหนา ผดแลระบบไดโดยถาผดแลลระบบเขาใชงานระบบอยแลว กสามารถจดการระบบไดเลย แตถายงไมได Login เขาระบบหนาเวบไซตจะท าการเปลยนหนาเวบเปนหนา Login เวบไซต
พระนครซอฟต
PhranakornSoft.com
รปแบบการจดการเนอใน WordPress
ระบบการจดการเนอหาของเวบไซตของ WordPress นนสามารถแบงไดเปน 2 รปแบบคอ รปแบบ Post และ รปแบบ Page
1. รปแบบ Post คอ รปแบบเนอหาทเปนบทความ หรอ ขาวสารประกาศตางๆนนทสามารถอพเดทและท าการแบงออกเปนหมวดหมได
2. รปแบบ Page คอ รปแบบเนอหาขอมลทแบงออกมาเปนหนา รายละเอยดเนอความหรอขอความทนง ไมมการอพเดทมากนก
รปแบบการจดการเนอหาแบบ Post
การจดการเนอหาดวยรปแบบ Post นนสามารถท าไดโดยการเลอกเมน Post > All ผดแลระบบเวบไซตจะสามารถเขาจดบทความ แกไขบทความ หรอ เขาดบทความทงหมดทมอยในเวบไซตได ดงภาพท 2
ภาพท 2 แสดงหนาจดการบทความ หรอ เนอหาขาวทงหมดในเวบไซต
เมอผดแลระบบนนตองการทจะเพมเนอหาใหมของเวบไซต สามารถเขาไปเพมเนอหาหรอบทความไดทเมน Post > Add New ดงภาพท 3
พระนครซอฟต
PhranakornSoft.com
ภาพท 3 แสดงเมน Post เพอเพมบทความใหมของเวบไซต
ระบบการจดการบทความหรอเนอหาขาวสารในเวบไซตนนสามารถเพมไดจากเมนนทงหมด เชน การเพมไฟลสอรปภาพ การเพมวดโอ การใส Link เพอเชอมโยงไปทเวบอนๆ หรอแมกระทงการเพมไฟลเอกสารกสามารถท าได ดงภาพตวอยางท 4
ภาพท 4 แสดงหนาการเพมบทความหรอเนอหาขาวใหม
การเพมเนอหาขาวสารใหมนน จะตองท าการกรอกเนอหาทจ าเปนดงน
1. หวขอเรอง สามารถเขยนไดทชอง Enter title here 2. เนอหา ผดแลระบบสามารถพมพเนอหาลงในชองของกรอบขอความ 3. เลอกหมวดหม เนอหาหรอบทความขาวสารนนจะตองมหมวดหมของเนอหาเสมอ โดย
สามารถเลอกหมวดหมเนอหาขาวสารไดท Category 4. การเพมสอหรอไฟลเอกสาร ทานสามารถใสไฟลเอกสารหรอใสไฟลรปภาพประกอบเนอหา
ขาวสารได การเมน Add Media
พระนครซอฟต
PhranakornSoft.com
หลกจากการกรอกเนอหาบทความทจ าเปนตอบทความขาวสารเสรจเรยบรอยแลว ใหท าการกด Publish เพอท าการเผยแพรเนอหาขาวสารออกทางหนาเวบไซต
หมวดหมของ Post
หมวดหมของ Post มหนาทส าหรบการแบงเนอหาบทความ หรอ ขาวสารตางๆทไดถกเผยแพรออกไป ใหแสดงออกไดเปนหมวดหมและงายตอการเขาถงของบทความนนเอง เชน ขาวประกาศ , ขาวโปรโมชน , บทความสาระความร เปนตน โดยทผดแลระบบนนสามารถเขาไปเพมหมวดหมหรอแกไขหมวดหมไดทเมน Category โดยการเขาไปท Post > Category ดงภาพท 5
ภาพท 5 แสดงถงหนาจดการหมวดหม Post
พระนครซอฟต
PhranakornSoft.com
รปแบบการจดการเนอหาแบบ Page
การท างานของการจดการเนอหาแบบ Page นนจะเปนการจดการเนอหาทถกสรางขนมาเพอรองรบเนอหาทอยนง มากกวา เชน หนาเกยวกบบรษท หนาตดตอกลบ หนาแสดงสนคาทงหมด เปนตน ดงรปตวอยางท 6
ภาพท 6 แสดงหนาทงหมดทมอยในเวบไซต
หลกการเพมหนา Page ในเวบไซตนน จะมรปแบบๆเดยวกนกบ Post โดยการเพมจากเมน Add New ได และเมอท าการกด Publish สามารถใชงานหนานนๆไดเลยโดยไมตองท าการเลอกหมวดหมของหนาขนตอนการเพมหนาสามารถท าไดดงน
1. เลอกเมน Page 2. ท าการเลอกทเมน Add New 3. ใสชอของหนานนทชอง Enter title here 4. ใสเนอหาหรอรปประกอบทชองของเนอหา 5. ท าการกดปม Publish
พระนครซอฟต
PhranakornSoft.com
การจดการสนคาใน WooCommerce
ระบบสนคาของระบบ WooCommerce นนมสามารถจดการสนคาไดดงน
1. การเพม แกไข ลบ สนคา 2. การจดหมวดหมสนคา 3. การก าหนด Tag หรอ ปายชอของสนคานนๆ 4. ก าหนดรปแบบการสงสนคา 5. การจดการ Order สนคา 6. การจดการ Coupons
การจดการสนคาในระบบ E-Commerce ของ WooCommerce ใน WordPress นนงายมากๆ โดยรปแบบของการกรอกรายละเอยดของสนคานนจะเหมอนกนกบระบบจดการขอมลในรปแบบ Post และ Page ดงรปตวอยางท 7
รปท 7 แสดงถงหนาเพมสนคาใหม
พระนครซอฟต
PhranakornSoft.com
ขนตอนการเพมสนคาสามารถท าไดดงขนตอนตอไปน
1. เลอกเมน Product 2. เลอกเมน Add Product 3. ใสชอสนคาท ชอสนคา 4. ใสชองรายละเอยดสนคา 5. ใสราคาสนทชอง Regular Price 6. ถาตองการลดราคาสนคาสามารถใสราคาลดไดทชอง Sale Price 7. เลอกหมวดหมสนคา 8. ใสรป Featured Image เพอแสดงรปแนะน าสนคา
ภาพท 8 ชองกรอกชอสนคาและรายละเอยดสนคา
ภาพท 9 ชองกรอกจ านวนสนคา ราคาสนคา และ ราคา Sale
พระนครซอฟต
PhranakornSoft.com
ภาพท 10 หนาเพมสนคา แสดงถงหมวดหมสนคา Product Tags รป Featured Image แสดงภาพแนะน าสนคา และ Product Gallery
พระนครซอฟต
PhranakornSoft.com
การจดการ Order สนคา
การจดการ Order สนคาจากทลกคานนท าการสงซอมาแลวนนสามารถจดการไดทเมน Order ของเมนหลกท WooCommerce ไดดงขนตอนตอไปน
1. เลอกเมน WooCommerce 2. เลอกเมน Order จะแสดงหนารายการ Order ทงหมด
ภาพท 11 หนาแสดงรายการ Order ทงหมดของการสงซอจากลกคา
การจดการกบ Order สามารถเลอกดรายละเอยดจากแตละ Order ไดโดยการเลอกท Order number ท าการคลกท Order #XXXX ระบบจะท าการแสดงหนารายละเอยดของการสงซอจากลกคาดงรปท 12
พระนครซอฟต
PhranakornSoft.com
ภาพท 12 แสดงหนารายละเอยดของการสงซอของลกคา
รายละเอยดขอมล Billing Details ขอมลทอยการสง Shipping Details วนและเวลาทท าการสงซอ และการเลอกก าหนด Order Status ของสนคาเพอใหลกคาไดรบทราบเกยวกบการด าเนนการของ Order ทลกคาท าการสงซอมานนเอง ดงรปท 13
ภาพท 13 แสดงรายละเอยดการสงสนคา Status ของ Order
พระนครซอฟต
PhranakornSoft.com
ภาพท 14 แสดงรายการสนคาทลกคาสงซอ
ภาพท 15 จากหนาแสดงรายละเอยดของ Order สนคานนสามารถตงคา Order Action และ แสดงยอดรวมการสงซอ พรอมสามารถลดหรอเพมราคาสงสนคาไดจากเมนน
พระนครซอฟต
PhranakornSoft.com
การจดการ Coupon
การจดการคปองสวนลดของสนคาสามารถท าสวนลดของสนคา โดยสามารถก าหนดสวนลดของสนคาไดหลายรปแบบเชน Cart Discount , Cart % Discount , Product Discount และ Product % Discount ดงขนตอนการ Add Coupon ตอไปน
1. เขาทเมน WooCommerce 2. เลอกเมน Coupon 3. คลกปม Add Coupon
ภาพท 16 หนา Add Coupon
รายละเอยดของหนา Add Coupon สามารถแบงออกเปนรายละเอยดขนตอนดงตอไปน
1. Coupon code ชองกรอกชอของ Coupon 2. Discount type เลอกรปแบบของสวนลด 3. Enable free shipping สามารถเลอกรปแบบการสงแบบฟรได 4. สนคา เลอกสนคาทตองการลด 5. หมวดหมสนคา เลอกลดตามหมวดหมสนคา 6. Usage limit ก าหนดการใชของ Coupon 7. Expiry date ก าหนดวนหมดอายของ Coupon ได 8. กดท Publish เพอเรมใชงาน
พระนครซอฟต
PhranakornSoft.com
//Digital studio and Advertising
Address : 155/88 หมท 5 ต.บางไผ อ.เมองนนทบร นนทบร 11000
Phone : 089-016-9712 , 085-542-2420
Email : [email protected]
Website : PhranakornSoft.com
