ขออภัย

คู่มือนี้เป็นเพียงตัวอย่าง Cloning เท่านั้น เนื่องจากสินค้ายังไม่เสร็จสมบูรณ์ 

เอาล่ะ..

พร้อมที่จะเริ่มทำเว็ปไซต์กันแล้วใช่มั้ย? งั้นก็ทำตามคู่มือด้านล่างนี่ได้เลย แต่ถ้าใครทำตามด้านล่างแล้วยัง งงๆ และต้องการคู่มือแบบมีภาพประกอบทุกขั้นตอน ต้องไป Download “คู่มือ DEMO” เอาเองนะค้าบ 

สำหรับหัวข้อหลักๆ ของการทำเว็ปไซต์จากไฟล์ DEMO DEMO.wpress มีดังต่อไปนี้

    1. เริ่มต้น Cloning
    2. เปลี่ยน Admin
    3. เมนู Setting
    4. เปลี่ยนส่วน Footer
    5. Contact Form & Newsletter  
    6. วิธีเอารูปโลโก้เว็ปไซต์มาใส่ที่หัวจดหมาย Newsletter 

ขั้นตอนการ Cloning และตั้งค่าต่างๆ

เริ่มต้น Cloning

1. โหลดไฟล์ DEMO DEMO.wpress (ไฟล์ต้นแบบสำหรับโคลนนิ่งเว็ป) เอาไว้ในเครื่องก่อน

2. เตรียมเว็ปเปล่า พร้อม install wordpress และติดตั้ง All-in-One WP Migration กับ All-in-One WP Migration File Extension ให้เรียบร้อย

3. ไปที่หน้า dashboard (หลังเว็ป) เข้าเมนู All-in-One WP Migration > Import > Import from File > แล้วเลือกไฟล์ DEMO DEMO.wpress ที่โหลดเก็บไว้แล้ว

4. รอจนโหลดเสร็จ คลิก Proceed แล้วคลิก Save permalinks structure. (open a new window)

5. Log in เข้าเว็ปอีกครั้ง ด้วย Username: admin2 และ Password: password

6. Permalink Settings > เช็คดูว่าเลือก “Post name”, “Custom base” ถูกต้องหรือยัง ถ้าถูกแล้วก็คลิก Save Changes (คลิกซ้ำ 2 ครั้ง)

เปลี่ยน Admin

7. Users > Add New (เพิ่มตัวเราเองเข้าไป เพื่อเป็น admin ตัวจริง) จากนั้นให้ใส่รายละเอียดต่างๆ ตามหัวข้อต่อไปนี้

    • Username > admin
    • Email > email ที่จะใช้จริง
    • First Name, Last Name > ชื่อ, นามสกุล
    • Website > ชื่อเว็ปไซต์แบบเต็ม (https://xxxx.com)
    • Password > Show password > ตั้งพาสเวิร์ดใหม่
    • Role (Dropdown) > เลือกเป็น Administrator (เพื่อให้จัดการหลังเว็ปได้)

8. Log out ออกจากเว็ปไซต์ แล้ว Log In เข้าไปใหม่ด้วย Username และ password ที่เพิ่งสร้างใหม่เมื่อสักครู่

9. Users > All Users > ลบ admin2 (หรือจะไม่ลบก็ได้ เผื่อลืม Password)  แต่ถ้าลบ admin2 ต้องโอนข้อมูลทั้งหมดมาที่ admin ใหม่ด้วย

เมนู Setting

10. เข้าเมนู Setting > General ตั้งค่าเว็ปไซต์ตามข้อมูลจริง

    • Site Title > ชื่อเว็ปไซต์ (พิมพ์แบบอ่านง่าย ไม่ต้องพิมพ์ติดกันก็ได้)
    • Tagline > คำอธิบายเว็ปไซต์, สโลแกน ฯลฯ
    • WordPress Address, Site Adress (URL) > ถ้าเป็นเว็ปจริงก็เปลี่ยนได้เลย แต่ถ้าเป็นเว็ป demo ยังเปลี่ยนไม่ได้ ให้คงเดิมไว้ก่อน (https://xxxx.com)
    • Email Address > อีเมลใหม่ที่จะใช้สำหรับเว็ป (ไม่ควรซ้ำกับ login email)

11. ไปเช็คในอีเมล (อาจอยู่ในสแปม) > เปิดอีเมลที่แจ้งเปลี่ยน email admin แล้วคลิกลิงค์ในอีเมลเพื่อเปิดใช้ email ใหม่ >>> Save Changes

12. กลับไปที่หน้า dashboard เข้าไปที่เมนู Setting > Reading แล้วติ๊กช่อง Search Engine Visibility ไว้ด้วย เพราะเว็ปไซต์เรายังไม่เสร็จเรียบร้อย (แต่ถ้าทำเสร็จแล้วอย่าลืมมาเอาออก)

เปลี่ยนส่วน Footer

13. UX Blocks > Footer – About us + Follow Icons > Edit with UX Builder >

    • Text > Option > Open Text Editor >> ใส่ข้อมูล, แก้ link แผนที่ (URL)
    • Follow Icons > Option >> ใส่ลิงค์สำหรับติดต่อ, เบอร์โทร ฯลฯ

**** ก่อนจะคลิก Enter ให้คลิกที่รูปเฟือง แล้วไปติ๊กช่อง Open link in a new tab เพื่อเวลาคลิกดูแผนที่ จะได้เปิดหน้าใหม่

  • ส่วนข้อมูลติดต่อ ให้เข้าไปที่ Follow Icons > Option > แล้วใส่ลิงค์เท่าที่เรามีให้ลูกค้าติดต่อ

14. UX Blocks > Footer – Instagram > Edit with UX Builder > Instagram Feed > Option > เปลี่ยน user name เป็นของเว็ปไซต์ (หรือถ้าไม่มี IG จะใส่เป็น keyword ก็ได้) >> apply

15. Appearance > Widgets > Footer 1 > Visual Editor : Twitter > Text > เปลี่ยนเป็นทวิตเตอรของเว็ปไซต์ (ใส่ชื่อทวิตเตอร์หลัง @xxxx แทนไฮไลท์สีเหลือง) >>> save > done

<a class=”twitter-timeline” href=”https://twitter.com/Twitter?ref_src=twsrc%5Etfw” data-width=”300″ data-height=”360″ data-link-color=”#981CEB”>Tweets by Twitter</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

16. Appearance > Widgets > Footer 2 > Custom HTML : Facebook > เปลี่ยนเป็น Facebook Fanpage ของเว็ปไซต์ (แบบ iframe) โดยเข้าไปที่เว็ปเพจปลั๊กอินของ Facebook https://developers.facebook.com/docs/plugins/page-plugin/ แล้วใส่ลิงค์เพจเฟสบุ้คในช่อง URL เพจบน Facebook Width=300, Hight=360 เลือก ใช้ส่วนหัวขนาดเล็ก, ซ่อนรูปภาพหน้าปก, แสดงใบหน้าของเพื่อน ฯลฯ (หรือปรับให้พอดีกับส่วน Footer ของคุณอง) แล้วคลิก รับรหัส เลือก IFRAME แล้วคัดลอกมาใส่แทนในส่วน Content >>> Save > Done

แต่พอเอาโค้ดมาใส่แล้ว จะมีกาบาทสีแดง ฟ้องว่ามี error อยู่ ไม่ต้องตกใจ ให้เปลี่ยนตัวอักษร T ในคำว่า allowTransparency จากตัวพิมพ์ใหญ่ T ให้เป็นตัวพิมพ์เล็ก t แล้ว error จะหายไปเอง

17. Appearance > Widgets > Footer 2 > เปลี่ยนลิงค์ URL Youtube (IFRAME เหมือน Facebook) แล้วลบคำว่า autoplay; ออก เพื่อป้องกันไม่ให้วีดีโอเล่นอัตโนมัติ

<iframe width=”300″ height=”150″ src=”https://www.youtube.com/embed/VZZv5spLaw0” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

18. จากนั้นก็ไปแก้ไขส่วน Header และโลโก้ของเว็ปไซต์ โดยเข้าไปที่หน้าเว็ป แล้วเลื่อนเมาส์ไปที่ Flatsome > Theme Option > Header

    • Logo & Site Identity > เปลี่ยนรูปโลโก้ใน Header, ใส่รูป Site Icon
      Logo Image > Select File > Select > Save
    • HTML > เปลี่ยน HTML 1 (บนสุด) ตามต้องการ (หรือเอาออกเลยก็ได้)
    • Contact > เปลี่ยนเวลาทำการ Open Hours, ใส่เบอร์โทร ฯลฯ > Publish
    • Social Icons > ใส่ลิงค์ Social URL > Publish

19. Flatsome > Theme Option > Footer > เลือก Absolute Footer (ด้านล่างสุด) > เปลี่ยน “Demo Website” ให้เป็นชื่อเว็ปไซต์จริง >>>> Publish

20. Page > All Page > Contact > Edit with UX Builder > เปลี่ยนลิงค์แผนที่ (iframe) (เลือก Row2 > dropdown > column > Text > Option > ใส่โค้ดแทน Iframe เดิม > Apply > Update

<p> <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3874.071111 9251346!2d100.54726017781348!3d13.83476837508367!2m3!1f0!2f0!3f0!3m2!1i1024 !2i768!4 f13.1!3m3!1m2!1s0x30e29c8ddc183ecd%3A0xe03d c2d710de22e8!2zMzg0IOC5gOC4l-C4qO C4muC4suC4peC4meC4tOC4oeC4tO C4leC5g-C4leC5iSDguIvguK3guKIgMjQg4LmB4LiC4Lin 4LiHIOC4peC4suC4lOC 4ouC4suC4pyDguYDguILguJUg4LiI4LiV4Li44LiI4Lix4LiB4LijIOC4ge C4o-C4uOC 4h-C5gOC4l-C4nuC4oeC4q-C4suC4meC4hOC4oyAxMDkwMA!5e0!3m2!1sth !2 sth!4v 1556795230768!5m2!1sth!2sth” width=”1400″ height=”450″ frameborder=  “0” style= “bor der:0″allowfullscreen></iframe> </p>

วิธีเอาโค้ดของแผนที่ เข้าไปที่ Google Map > มาร์คจุดบนแผนที่ > Share > Embed (ฝังแผนที่)  แก้ไขตัวเลขในส่วนความกว้างและความสูงของแผนที่ตามที่เห็นเหมาะสม
เรียบร้อยแล้วก็กด Apply > Update

Contact Form & Newsletter

21. Contact (เมนูซ้ายมือ) > Contact Form ต้องเข้าไปแก้ไขอีเมลและชื่อเว็ปไซต์ ทุก form Contact Form 1,2 > Mail เปลี่ยน 3 จุด

    • To >> เปลี่ยน [email protected] เป็นอีเมลที่เอาไว้รับเมลจากลูกค้า ควรเป็นอีเมลเดียวกับที่ใส่ใน Setting > General
    • From >> เปลี่ยน DEMO WEBSITE [email protected]
    • Message Body >>> เปลี่ยน DEMO WEBSITE บรรทัดล่างสุด

ส่วน Contact Form 3 และ 4
Contact Form 3,4 > Mail เปลี่ยน 4 จุด (ใน Mail 3 จุด และใน Form 1 จุด)

    • To >> เปลี่ยน [email protected] เป็นอีเมลที่เอาไว้รับเมลจากลูกค้า ควรเป็นอีเมลเดียวกับที่ใส่ใน Setting > General
    • From >> เปลี่ยนคำว่า DEMO WEBSITE เป็นชื่อเว็ป
    • Message Body >>> เปลี่ยน DEMO WEBSITE บรรทัดล่างสุดเป็นชื่อเว็ป
    • ใน tab Form >>> เปลี่ยนข้อความ dropdown ตามข้างล่างนี้

Form > ส่วนของ dropdown subject (ให้ลูกค้าเลือกหัวข้อเรื่องที่จะแจ้ง) ให้เข้าไปเปลี่ยนชื่อหัวข้อใน tab Form ตามตัวอย่างที่แถบสีไว้ ให้เป็นชื่อหัวข้อที่ต้องการ สามารถลดหรือเพิ่มได้ โดยใส่เครื่องหมายคำพูด “…” ครอบไว้ด้วย (แต่ส่วนอื่นใน Form ไม่ต้องแก้ไข)

[select* Subject include_”*Subject” “Product Description” “Cancel Request” “Return Request” “Others“] </p>

แก้ไขเสร็จเรียบร้อยก็กด >>>>> Save

22. Contact (เมนูซ้ายมือ) > Newsletter เป็นแบบฟอร์มอีเมลตอบกลับลูกค้า มีแบบ Vertical และ Horizontal (แนวตั้งและแนวนอน ต่างกันที่ปุ่ม Send อยู่ด้านล่าง กับอยู่บรรทัดเดียวกัน) ให้เข้าไปแก้ไขที่ tab Mail (>>>> แล้ว Save ทุกครั้ง)

    • From >>> เปลี่ยน Demo Website <[email protected]> เป็นชื่อเว็ปไซต์ (อีเมลด้านหลังไม่ต้องเปลี่ยน)
    • Message Body >> เปลี่ยนชื่อเว็ปไซต์ที่พิมพ์ตัวใหญ่ไว้ DEMO WEBSITE

23. WooCommerce > Setting (ตั้งค่า WooCommerce)

    • General > ชื่อเว็ปไซต์
    • Shipping > ตั้งค่า Shipping Zones ใหม่
    • Payment > เพิ่มบัญชีที่จะรับโอนเงิน, และอีเมล PayPal
    • Email >
      • 1. เปลี่ยนอีเมล 3 บรรทัดบน เป็นอีเมลใหม่ของแอดมิน
      • 2. From name > ชื่อเว็ปไซต์
      • 3. From address > อีเมลของเว็ปไซต์
      • 4. เติม URL ของ Header image (URL โลโก้ของเว็ปไซต์)
      • 5. เปลี่ยนสีของอีเมล >>> Save Change
      • 6. Preview your email template เช็คดูตัวอย่างสีที่ตั้งค่าใหม่
  • แล้วอย่าลืมเข้าไปเปลี่ยน Category 1-9 ให้เป็นหมวดหมู่ของเว็ปตัวเองกันด้วยนะ  Product > Category > เลือกหมวดหมู่ที่จะเปลี่ยน > Edit > Save

  กลับขึ้นไปด้านบน  

วิธีเอาลิงค์ URL ของโลโก้เว็ปไซต์มาใส่หัวจดหมาย

เป็นยังไงกันบ้างคับ?  หวังว่าคงจะช่วยให้ทำเว็ปไซต์กันได้ง่ายขึ้นบ้างไม่มากก็น้อยนะคับ  แต่ถ้าใครยัง งงๆ หรืออยากจะได้คู่มือแบบที่มีภาพประกอบในทุกขั้นตอน  ก็สามารถดาวน์โหลดกันไปลองใช้ได้เลย รออยู่ในหน้า Download เรียบร้อยแล้วคับ

สำหรับภาพประกอบที่จะเพิ่มให้  หน้าตาก็จะเหมือนกับ วิธีเอาโลโก้เว็ปไซต์มาใส่ส่วนหัวจดหมาย Newsletter” ประมาณนั้นเลยนะคับ  จะมีทั้งภาพ และลูกศรชี้พร้อมทั้งคำแนะนำกำกับให้ตลอด  รับรองว่าถ้าเข้าหน้านั้นถูกก็ไม่หลงทางแน่นอน  ขอให้สนุกกับการทำเว็ปไซต์นะคับ…

– – – Good Luck – – –

ขออภัย! คู่มือนี้เป็นเพียงตัวอย่างเท่านั้น เนื่องจากสินค้ายังไม่เสร็จสมบูรณ์ 

เอาล่ะ..

พร้อมที่จะเริ่มทำเว็ปไซต์กันแล้วใช่มั้ย? งั้นก็ทำตามคู่มือด้านล่างนี่ได้เลย แต่ถ้าใครทำตามด้านล่างแล้วยัง งงๆ และต้องการคู่มือแบบมีภาพประกอบทุกขั้นตอน ต้องไป Download “คู่มือ DEMO” เอาเองนะค้าบ 

สำหรับหัวข้อหลักๆ ของการทำเว็ปไซต์จากไฟล์ DEMO DEMO.wpress มีดังต่อไปนี้

เริ่มต้น Cloning

เปลี่ยน Admin

เมนู Setting

เปลี่ยนส่วน Footer

Contact Form & Newsletter  

วิธีเอารูปโลโก้เว็ปไซต์มาใส่ที่หัวจดหมาย Newsletter 

Advance Setting

ขั้นตอนการ Cloning และตั้งค่าต่างๆ

เริ่มต้น Cloning

1. โหลดไฟล์ DEMO DEMO.wpress (ไฟล์ต้นแบบสำหรับโคลนนิ่งเว็ป) เอาไว้ในเครื่องก่อน

2. เตรียมเว็ปเปล่า พร้อม install wordpress และติดตั้ง All-in-One WP Migration กับ All-in-One WP Migration File Extension ให้เรียบร้อย

3. ไปที่หน้า dashboard (หลังเว็ป) เข้าเมนู All-in-One WP Migration > Import > Import from File > แล้วเลือกไฟล์ DEMO DEMO.wpress ที่โหลดเก็บไว้แล้ว

4. รอจนโหลดเสร็จ คลิก Proceed แล้วคลิก Save permalinks structure. (open a new window)

5. Log in เข้าเว็ปอีกครั้ง ด้วย Username: admin2 และ Password: password

6. Permalink Settings > เช็คดูว่าเลือก “Post name”, “Custom base” ถูกต้องหรือยัง ถ้าถูกแล้วก็คลิก Save Changes (คลิกซ้ำ 2 ครั้ง)

เปลี่ยน Admin

7. Users > Add New (เพิ่มตัวเราเองเข้าไป เพื่อเป็น admin ตัวจริง) จากนั้นให้ใส่รายละเอียดต่างๆ ตามหัวข้อต่อไปนี้

  • Username > admin
  • Email > email ที่จะใช้จริง
  • First Name, Last Name > ชื่อ, นามสกุล
  • Website > ชื่อเว็ปไซต์แบบเต็ม (https://xxxx.com)
  • Password > Show password > ตั้งพาสเวิร์ดใหม่
  • Role (Dropdown) > เลือกเป็น Administrator (เพื่อให้จัดการหลังเว็ปได้)

8. Log out ออกจากเว็ปไซต์ แล้ว Log In เข้าไปใหม่ด้วย Username และ password ที่เพิ่งสร้างใหม่เมื่อสักครู่

9. Users > All Users > ลบ admin2 (หรือจะไม่ลบก็ได้ เผื่อลืม Password)  แต่ถ้าลบ admin2 ต้องโอนข้อมูลทั้งหมดมาที่ admin ใหม่ด้วย

เมนู Setting

10. เข้าเมนู Setting > General ตั้งค่าเว็ปไซต์ตามข้อมูลจริง

  • Site Title > ชื่อเว็ปไซต์ (พิมพ์แบบอ่านง่าย ไม่ต้องพิมพ์ติดกันก็ได้)
  • Tagline > คำอธิบายเว็ปไซต์, สโลแกน ฯลฯ
  • WordPress Address, Site Adress (URL) > ถ้าเป็นเว็ปจริงก็เปลี่ยนได้เลย แต่ถ้าเป็นเว็ป demo ยังเปลี่ยนไม่ได้ ให้คงเดิมไว้ก่อน (https://xxxx.com)
  • Email Address > อีเมลใหม่ที่จะใช้สำหรับเว็ป (ไม่ควรซ้ำกับ login email)

11. ไปเช็คในอีเมล (อาจอยู่ในสแปม) > เปิดอีเมลที่แจ้งเปลี่ยน email admin แล้วคลิกลิงค์ในอีเมลเพื่อเปิดใช้ email ใหม่ >>> Save Changes

12. กลับไปที่หน้า dashboard เข้าไปที่เมนู Setting > Reading แล้วติ๊กช่อง Search Engine Visibility ไว้ด้วย เพราะเว็ปไซต์เรายังไม่เสร็จเรียบร้อย (แต่ถ้าทำเสร็จแล้วอย่าลืมมาเอาออก)

เปลี่ยนส่วน Footer

13. UX Blocks > Footer – About us + Follow Icons > Edit with UX Builder >

  • Text > Option > Open Text Editor >> ใส่ข้อมูล, แก้ link แผนที่ (URL)
  • Follow Icons > Option >> ใส่ลิงค์สำหรับติดต่อ, เบอร์โทร ฯลฯ

**** ก่อนจะคลิก Enter ให้คลิกที่รูปเฟือง แล้วไปติ๊กช่อง Open link in a new tab เพื่อเวลาคลิกดูแผนที่ จะได้เปิดหน้าใหม่

  • ส่วนข้อมูลติดต่อ ให้เข้าไปที่ Follow Icons > Option > แล้วใส่ลิงค์เท่าที่เรามีให้ลูกค้าติดต่อ

14. UX Blocks > Footer – Instagram > Edit with UX Builder > Instagram Feed > Option > เปลี่ยน user name เป็นของเว็ปไซต์ (หรือถ้าไม่มี IG จะใส่เป็น keyword ก็ได้) >> apply

15. Appearance > Widgets > Footer 1 > Visual Editor : Twitter > Text > เปลี่ยนเป็นทวิตเตอรของเว็ปไซต์ (ใส่ชื่อทวิตเตอร์หลัง @xxxx แทนไฮไลท์สีเหลือง) >>> save > done

<a class=”twitter-timeline” href=”https://twitter.com/Twitter?ref_src=twsrc%5Etfw” data-width=”300″ data-height=”360″ data-link-color=”#981CEB”>Tweets by Twitter</a> <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

16. Appearance > Widgets > Footer 2 > Custom HTML : Facebook > เปลี่ยนเป็น Facebook Fanpage ของเว็ปไซต์ (แบบ iframe) โดยเข้าไปที่เว็ปเพจปลั๊กอินของ Facebook https://developers.facebook.com/docs/plugins/page-plugin/ แล้วใส่ลิงค์เพจเฟสบุ้คในช่อง URL เพจบน Facebook Width=300, Hight=360 เลือก ใช้ส่วนหัวขนาดเล็ก, ซ่อนรูปภาพหน้าปก, แสดงใบหน้าของเพื่อน ฯลฯ (หรือปรับให้พอดีกับส่วน Footer ของคุณอง) แล้วคลิก รับรหัส เลือก IFRAME แล้วคัดลอกมาใส่แทนในส่วน Content >>> Save > Done

แต่พอเอาโค้ดมาใส่แล้ว จะมีกาบาทสีแดง ฟ้องว่ามี error อยู่ ไม่ต้องตกใจ ให้เปลี่ยนตัวอักษร T ในคำว่า allowTransparency จากตัวพิมพ์ใหญ่ T ให้เป็นตัวพิมพ์เล็ก t แล้ว error จะหายไปเอง

17. Appearance > Widgets > Footer 2 > เปลี่ยนลิงค์ URL Youtube (IFRAME เหมือน Facebook) แล้วลบคำว่า autoplay; ออก เพื่อป้องกันไม่ให้วีดีโอเล่นอัตโนมัติ

<iframe width=”300″ height=”150″ src= “https://www.youtube.com /embed/VZZv5sp Law0” frameborder=”0″ allow= “accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

18. จากนั้นก็ไปแก้ไขส่วน Header และโลโก้ของเว็ปไซต์ โดยเข้าไปที่หน้าเว็ป แล้วเลื่อนเมาส์ไปที่ Flatsome > Theme Option > Header

  • Logo & Site Identity > เปลี่ยนรูปโลโก้ใน Header, ใส่รูป Site Icon
    Logo Image > Select File > Select > Save
  • HTML > เปลี่ยน HTML 1 (บนสุด) ตามต้องการ (หรือเอาออกเลยก็ได้)
  • Contact > เปลี่ยนเวลาทำการ Open Hours, ใส่เบอร์โทร ฯลฯ > Publish
  • Social Icons > ใส่ลิงค์ Social URL > Publish

19. Flatsome > Theme Option > Footer > เลือก Absolute Footer (ด้านล่างสุด) > เปลี่ยน “Demo Website” ให้เป็นชื่อเว็ปไซต์จริง >>>> Publish

20. Page > All Page > Contact > Edit with UX Builder > เปลี่ยนลิงค์แผนที่ (iframe) (เลือก Row2 > dropdown > column > Text > Option > ใส่โค้ดแทน Iframe เดิม > Apply > Update

<p> <iframe src=”https://www.google. com/maps/embed?pb=!1m18!1m12! 1m3!1d3874.071111 9251346!2d100. 54726017781348!3d13.83476837508367 !2m3!1f0!2f0!3f0!3m2!1i1024 !2i768!4 f13.1!3m3!1 m2!1s0x30e29c8ddc183e cd%3A0xe03d c DkwMA!5e0!3m2!1sth !2 sth!4v 15567952 30768!5m2!1sth!2sth” width=”1400″ height=”450″ frameborder=  “0” style= “bor der:0″allowfullscreen></iframe> </p>

วิธีเอาโค้ดของแผนที่ เข้าไปที่ Google Map > มาร์คจุดบนแผนที่ > Share > Embed (ฝังแผนที่)  แก้ไขตัวเลขในส่วนความกว้างและความสูงของแผนที่ตามที่เห็นเหมาะสม
เรียบร้อยแล้วก็กด Apply > Update

Contact Form & Newsletter

21. Contact (เมนูซ้ายมือ) > Contact Form ต้องเข้าไปแก้ไขอีเมลและชื่อเว็ปไซต์ ทุก form Contact Form 1,2 > Mail เปลี่ยน 3 จุด

  • To >> เปลี่ยน [email protected] เป็นอีเมลที่เอาไว้รับเมลจากลูกค้า ควรเป็นอีเมลเดียวกับที่ใส่ใน Setting > General
  • From >> เปลี่ยน DEMO WEBSITE [email protected]
  • Message Body >>> เปลี่ยน DEMO WEBSITE บรรทัดล่างสุด

ส่วน Contact Form 3 และ 4
Contact Form 3,4 > Mail เปลี่ยน 4 จุด (ใน Mail 3 จุด และใน Form 1 จุด)

  • To >> เปลี่ยน [email protected] เป็นอีเมลที่เอาไว้รับเมลจากลูกค้า ควรเป็นอีเมลเดียวกับที่ใส่ใน Setting > General
  • From >> เปลี่ยนคำว่า DEMO WEBSITE เป็นชื่อเว็ป
  • Message Body >>> เปลี่ยน DEMO WEBSITE บรรทัดล่างสุดเป็นชื่อเว็ป
  • ใน tab Form >>> เปลี่ยนข้อความ dropdown ตามข้างล่างนี้

Form > ส่วนของ dropdown subject (ให้ลูกค้าเลือกหัวข้อเรื่องที่จะแจ้ง) ให้เข้าไปเปลี่ยนชื่อหัวข้อใน tab Form ตามตัวอย่างที่แถบสีไว้ ให้เป็นชื่อหัวข้อที่ต้องการ สามารถลดหรือเพิ่มได้ โดยใส่เครื่องหมายคำพูด “…” ครอบไว้ด้วย (แต่ส่วนอื่นใน Form ไม่ต้องแก้ไข)

[select* Subject include_”*Subject” “Product Description” “Cancel Request” “Return Request” “Others“] </p> 

แก้ไขเสร็จเรียบร้อยก็กด >>>>> Save

22. Contact (เมนูซ้ายมือ) > Newsletter เป็นแบบฟอร์มอีเมลตอบกลับลูกค้า มีแบบ Vertical และ Horizontal (แนวตั้งและแนวนอน ต่างกันที่ปุ่ม Send อยู่ด้านล่าง กับอยู่บรรทัดเดียวกัน) ให้เข้าไปแก้ไขที่ tab Mail (>>>> แล้ว Save ทุกครั้ง)

  • From >>> เปลี่ยน Demo Website <[email protected]> เป็นชื่อเว็ปไซต์ (อีเมลด้านหลังไม่ต้องเปลี่ยน)
  • Message Body >> เปลี่ยนชื่อเว็ปไซต์ที่พิมพ์ตัวใหญ่ไว้ DEMO WEBSITE

23. WooCommerce > Setting (ตั้งค่า WooCommerce)

  • General > ชื่อเว็ปไซต์
  • Shipping > ตั้งค่า Shipping Zones ใหม่
  • Payment > เพิ่มบัญชีที่จะรับโอนเงิน, และอีเมล PayPal
  • Email >
    • 1. เปลี่ยนอีเมล 3 บรรทัดบน เป็นอีเมลใหม่ของแอดมิน
    • 2. From name > ชื่อเว็ปไซต์
    • 3. From address > อีเมลของเว็ปไซต์
    • 4. เติม URL ของ Header image (URL โลโก้ของเว็ปไซต์)
    • 5. เปลี่ยนสีของอีเมล >>> Save Change
    • 6. Preview your email template เช็คดูตัวอย่างสีที่ตั้งค่าใหม่
  • แล้วอย่าลืมเข้าไปเปลี่ยน Category 1-9 ให้เป็นหมวดหมู่ของเว็ปตัวเองกันด้วยนะ  Product > Category > เลือกหมวดหมู่ที่จะเปลี่ยน > Edit > Save

วิธีเอาลิงค์ URL ของโลโก้เว็ปไซต์มาใส่หัวจดหมาย

Advance Setting

1. Homepage > Edit Page > Edit with UX Builder > เปลี่ยนส่วนต่างๆของหน้า Homepage (ข้อความ, รูป ฯลฯ)

2. Product > Categories > เปลี่ยนชื่อหมวดหมู่สินค้า, รูปภาพของหมวดหมู่ (Featured Image)

3. Product > All Products > ลบสินค้าตัวอย่างทิ้ง แล้วเพิ่มสินค้าใหม่, Featured Image

4. Post > All Posts > ลบโพสต์ตัวอย่างทิ้ง แล้วเพิ่มโพสต์ใหม่, ใส่ Featured Image

5. Portfolio > เปลี่ยน Portfolio เดิม เป็นอันใหม่, เปลี่ยน Featured Image
Edit Portfolio – Portfolio > Edit with UX Editor > กดที่รูปเฟืองด้านบนข้างซ้าย (Gear Icon)

6. Flatsome > Theme Option > Style > Color > เปลี่ยนสีธีมของเว็ปไซต์

หมายเหตุ: ไม่ต้องตั้งค่า Post SMTP และ Really Simple SSL

1. จดหมายที่ส่งอัตโนมัติจากเว็ปไซต์ จะถูกส่งในชื่อ Customer Service จากอีเมล customer.services.mes[email protected] (ถ้าอยากให้ส่งในชื่ออื่น เช่น Admin, Auto Message, Support Team ฯลฯ สามารถเปลี่ยนชื่อได้ที่ Post SMTP > Show All Settings (อยู่ใต้ปุ่ม Start the Wizard) > Message > Name เปลี่ยนชื่อตรงช่อง Name ให้เป็นชื่อตามต้องการ (แต่ห้ามเปลี่ยนอีเมล เพราะจะทำให้อีเมลส่งไม่ผ่าน ถ้าเปลี่ยนอีเมลจะต้อง Start the Wizard ใหม่ และตั้งค่าใหม่เองทั้งหมด)

2. ติดตั้ง Plugin ที่จำเป็นอื่นๆ เช่น Yoast, Whatshelp ฯลฯ มาให้แล้ว แต่ยังไม่ได้ activate

3. มี Plugin แปลภาษา Gtranslate ตั้งค่าให้แสดงผลที่ Top Bar Menu ปรับภาษาที่ Setting > Gtranslate >>> Save Change

เป็นยังไงกันบ้างคับ?  หวังว่าคงจะช่วยให้ทำเว็ปไซต์กันได้ง่ายขึ้นบ้างไม่มากก็น้อยนะคับ  แต่ถ้าใครยัง งงๆ หรืออยากจะได้คู่มือแบบที่มีภาพประกอบในทุกขั้นตอน  ก็สามารถดาวน์โหลดกันไปลองใช้ได้เลย รออยู่ในหน้า Download เรียบร้อยแล้วคับ

สำหรับภาพประกอบที่จะเพิ่มให้  หน้าตาก็จะเหมือนกับ “วิธีเอาโลโก้เว็ปไซต์มาใส่ส่วนหัวจดหมาย Newsletter” ประมาณนั้นเลยนะคับ  จะมีทั้งภาพ และลูกศรชี้พร้อมทั้งคำแนะนำกำกับให้ตลอด  รับรองว่าถ้าเข้าหน้านั้นถูกก็ไม่หลงทางแน่นอน  ขอให้สนุกกับการทำเว็ปไซต์นะคับ…

– – – Good Luck – – –

Make-a-Website