CƯỚI HỎI

[Update] สอน WordPress สำหรับผู้เริ่มต้น จนทำเว็บเองได้ [อัพเดท 2021] | theme งาน แต่ง – Sambeauty

theme งาน แต่ง: คุณกำลังดูกระทู้

คุณรู้หรือไม่ 35 % ของเว็บทั้งโลกสร้างเว็บด้วย WordPress ทำไมคนถึง ใช้ WordPress ใน การสร้างเว็บไซต์  มากขนาดนี้ เหตุผลเดียวก็คือ WordPress สร้างโอกาสให้ทุกคนสามารถทำเว็บได้ โดยที่ไม่จำเป็นต้องมีความรู้เรื่อง Code ไม่ต้องเขียนโปรแกรม ไม่ต้องเป็นโปรแกรมเมอร์ เรียกได้ว่าใคร ๆ ก็สามารถทำเว็บได้ รวมถึงผมด้วย ที่ไม่ใช่โปรแกรมเมอร์ และไม่มีความรู้เรื่อง Coding อะไรเลย

 

WordPress

WordPress สถิติ

สำหรับมือใหม่ ไม่ต้องเสียเวลาลองผิดลองถูกเอง คู่มือ WordPress [2021] ชุดนี้ จะเป็นการอธิบายวิธีการใช้งาน WordPress ที่ละขั้นตอนแบบละเอียด ทำตามได้ง่ายๆ

Nội dung bài viết

WordPress คืออะไร

WordPress คือ เครื่องมือที่เป็นตัวช่วยในการสร้างเว็บไซต์ ที่มีระบบจัดการข้อมูล และสร้างเนื้อหา (Content Management System: CMS ) ที่สามารถให้เราเพิ่มเติมบทความ รูปภาพ ได้เองแบบง่ายๆ โดยไม่ต้องมีความรู้เรื่อง Code หรือความรู้ด้านโปรแกรมมิ่งเลย

รู้จักกับ WordPress ใน 3 นาที

ทำไมควรใช้ WordPress

  • ประหยัดค่าใช้จ่าย

    ใคร ๆ ก็สามารถโหลด WordPress มาใช้ได้ฟรี เพราะเป็น Opensource ดังนั้นเราจึงประหยัดค่าใช้จ่ายในการจ้างคนเขียนโปรแกรม เราสามารถเรียนรู้และทำด้วยตนเองได้เลย

  • ไม่ต้องเขียนโค้ดให้ยุ่งยาก

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

  • มีฟังชั่นต่าง ๆ มากมาย

    คุณสามารถเพิ่มเติมฟังชั่นต่าง ๆ ผ่านปลั๊กอินมากมาย เพื่อสนองจินตนาการของคุณได้ไม่รู้จบ เชื่อมต่อกับ Social Media ต่าง ๆได้อย่างรวดเร็ว รองรับการทำงานกับไฟล์ภาพ ไฟล์เสียง คลิบวีดีโอ ได้ทุกอย่าง

  • อัพเดทเนื้อหาต่าง ๆ ได้ง่าย

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

  • มีธีมให้เลือกเยอะ ดีไซน์สวยงาม

    สำหรับคนที่เบื่อง่าย อยากจะเปลี่ยนหน้าตาเว็บไซต์ใหม่ ข่าวดีก็คือ WordPress มีธีมให้ดาวน์โหลดมากมายมหาศาลเลย มีทั้งแบบฟรีและแบบเสียเงิน แถมยังดีไซน์สวยงามสุดๆ

  • Google ชอบ

    Google ระบบ Search Engine ที่ทรงอิทธิพลที่สุดในโลกอินเตอร์เน็ต ให้ความสำคัญกับเว็บไซต์ที่สร้างด้วย WordPress ทั้งยังแนะนำว่าเว็บไซต์ธุรกิจควรสร้างด้วย WordPress จะช่วยให้ติดอับดับ Google ได้ง่ายขึ้น

ใช้ WordPress สร้างเว็บอะไรได้บ้าง

ถ้าพูดตามหลักการ WordPress สามารถสร้างเว็บได้ทุกประเภทบนโลกใบนี้ เช่น สร้างเว็บบริษัทก็ได้ สร้างเว็บร้านค้าปลีกก็ได้ สร้างเว็บเป็น Marketplace เหมือน Lazada ก็ได้ หรือจะสร้างเว็บเป็นคอร์สเรียนออนไลน์ แบบ skilllane ก็ได้

เว็บขายของ

แต่ตอนลงมือทำจริงอาจจะไม่เหมาะกับการทำเว็บบ้างประเภทนะ โดยเฉพาะเว็บที่มีระบบซับซ้อน เช่น Maketplace หรือเว็บพวกประกาศขายบ้าน  ด้วยเหตุผลประมาณนี้ครับ

  • WordPress เหมาะกับเว็บที่เป็นร้านค้าเดี่ยว เป็นสินค้าของเราเอง โพสขายเอง เก็บเงินเอง อันนี้เหมาะกับการสร้างด้วย WordPress
  • เว็บที่เป็น Market place มีความซับซ้อนของระบบมากกว่าหลายเท่า เพราะผู้ขายต้องมีสิทธิเอาสินค้ามาวางขาย และแก้ไขรายละเอียดของตัวเอง เช็คยอดเงิน / การส่งของต่างๆ (ซึ่งต้องกำหนดอีกมากว่า ใครส่ง ด้วยเงื่อนไขไหน ใครรับประกัน
  • WordPress เป็น open source software โดยให้คนทั้งโลกรวมกันพัฒนา โดยการเขียนธีม และปลั๊กอิน ให้มาทำงานร่วมกับ WordPress แต่เมื่อต่างคนต่างๆ เขียน หลายๆ เมื่อเราต่อเติมเว็บให้ซับซ้อนยิ่งขึ้น จะมีโอกาสที่ปลั๊กอิน กับธีม ตีกัน ทำให้ระบบพังได้นั้นเอง

ดังนั้น WordPress เหมาะกับการสร้างเว็บบริษัท ที่มีลักษะเป็น Information และเหมาะสำหรับทำเว็บร้านค้าเดี่ยว มากกว่าการทำเว็บที่มีระบบซับซ้อนโดยเฉพาะ WordPress ไม่เหมาะกับการสร้างเว็บ Market place ครับ

ตามหลักการ WordPress สร้างเว็บได้ทุกประเภทบนโลกใบนี้ แต่การลงมือทำจริง เว็บบางประเภทอาจจะไม่เหมาะกับการสร้างด้วย WordPress

ตัวอย่างเว็บไซต์ WordPress สวยๆ

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

ตัวอย่างเว็บไซต์ต่อไปนี้ เป็นผลงานสร้างเว็บของนักเรียนที่มาเรียนทำเว็บกับผม ซึ่งแต่ละคนไม่ได้มีทักษะไอที ทุกคนเริ่มต้นเรียนรู้จากศูนย์ แต่สามารถสร้างเว็บได้ออกมาสวยและดูดีได้ทุกคน

ความแตกต่างระหว่าง WordPress.com กับ .org

  • WordPress.com ให้บริการบล็อกฟรีเหมือน Blogger หรือ Tumblr มีพื้นที่โฮสติ้งฟรีแต่จะมีข้อจำกัดบางอย่าง เช่น ปรับแต่งหน้าตาเว็บไซต์ได้เพียงเล็กน้อย เหมาะสำหรับผู้ที่ต้องการเขียนบทความเพียงอย่างเดียว คุณสามารถสมัครเพื่อเริ่มต้นสร้างเว็บไซต์ได้เลย
  • WordPress.org สามารถดาวน์โหลด Source code และติดตั้งลงในโฮสติ้งส่วนตัว ปรับแต่งและแก้ไขได้อิสระ มีความยืดหยุ่นมากกว่า เหมาะสำหรับทำเว็บไซต์หลากหลายรูปแบบ สามารถดาวน์โหลดเพื่อเริ่มต้นใช้งาน WordPress กับธุรกิจของคุณได้เลย (เว็บผมเองก็สร้างด้วย WordPress.org เช่นกัน)

ที่มาของคำอธิบายนี้ contentshifu.com

ดูรูปภาพการเปรียบเทียบเพิ่มเติมนะ

WordPress.com กับ .org

ที่มาของรูปภาพ wpexplorer.com

บทความนี้จะรวมความรู้พื้นฐานในการใช้งานเว็บไซต์สร้างด้วย WordPress โดยโฟกัสที่ WordPress.org เป็นหลักครับผม เพราะยืดหยุ่นกว่า และประหยัดกว่าหากเราจะสร้างเว็บไซต์ หลาย ๆ เว็บ

องค์ประกอบของเว็บไซต์ WordPress

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

องค์ประกอบ WordPress

  1. WordPress คือ แพลตฟอร์ม เปรียบเหมือนระบบปฏิบัติการ (OS) บนคอมพิวเตอร์ที่เราจำเป็นต้องติดตั้งก่อน แต่ตัว WordPress เองยังไม่มีความสามารถในการออกแบบความสวยงาม หรือสร้างฟังชั่นที่ซับซ้อน เราต้องทำงานร่วมกับเครื่องมือหรือปลั๊กอินอื่นๆ ด้วย

    องค์ประกอบ WordPress

  2. Woocommerce คือ ปลั๊กอินที่ช่วยแปลงร่างเว็บ WordPress ธรรมดาๆ ของคุณให้กลายเป็นเว็บร้านค้าออนไลน์เต็มรูปแบบ เราสามารถโหลดตัวปลั๊กอินนี้มาใช้ฟรีๆ ได้อีกด้วย และในปัจจุบันจากสถิติเว็บร้านค้าออนไลน์ของทั้งโลก 47% คือเว็บที่สร้างมาจาก Woocommerce

    WordPress ขายของ

  3. Theme คือ เครื่องมือที่ใช้สำหรับออกแบบ และจัดวาง layout หน้าตาเว็บไซต์ WordPress ของเราให้สวยงามในแบบที่เราต้องการ หากเราใช้งานธีมได้เก่งๆ เราจะสามารถออกแบบหน้าเว็บของเราอย่างไรก็ได้ ทุกไอเดีย หรือออกแบบเว็บเลียนแบบหน้าตาของเว็บที่เราชอบก็ได้

    ธีม WordPress

  4. Plugin คือ เครื่องมือเพิ่มฟังชั่นการใช้งานเว็บ WordPress ของคุณ ให้มีประสิทธิภาพมากขึ้น ตอบโจทย์ธุรกิจ หรือในสิ่งที่เราต้องการ เช่น สร้างฟอร์มเก็บข้อมูล ทำระบบ booking หรือระบบ live chat เป็นต้น

    plugin wordpress

แนะนำให้คุณดูคลิปนี้ประกอบครับ

ต้นทุนการสร้างเว็บ WordPress

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

สำหรับต้นทุน (เงิน/เวลา) ในการสร้างเว็บไซต์ ให้มีคุณภาพ มีดังนี้ครับ

  1. ค่าจดโดเมน 400 – 1000 บาท ราคาจะแตกต่างกันตามนามสกุลที่เราเลือกใช้ เช่น
    นามสกุล .com, .net, .in.th จะราคาประมาณ 400-500 บาท
    นามสกุล .co.th จะราคาประมาณ 1000 บาท
  2. ค่าเช่าโฮสติ้ง (ที่ตั้งเว็บไซต์) ราคา 1500 – 3000 บาท
  3. ค่าแพลตฟอร์ม (เครื่องมือสร้างเว็บ) เราจะใช้ WordPress ในการทำ ซึ่งตัว WordPress นั้น ฟรี!
  4. ค่าธีม (สำหรับในการออกแบบเว็บ) ราคา 2,000-2,500 บาท
  5. ค่าจ้างทำกราฟฟิค บางครั้งอยากให้เว็บออกมาสวย ดูเป็นมืออาชีพ เราต้องจ้างคนทำกราฟฟิครูปภาพประกอบเว็บให้เราครับ ราคาโดยเฉลี่ย 15,000 – 20,000 บาท (กรณีที่คุณไม่ได้ทำเองนะ)
  6. ต้นทุนด้านเวลาการทำเว็บหากเราจ้างคนอื่นทำให้เรา ใช้เวลาประมาณ 20-30 วัน
  7. ต้นทุนด้านเวลาหากคุณคิดจะทำเว็บไซต์เอง มีดังนี้
    – เวลาที่ใช้สำหรับการเรียนรู้ 2-3 เดือน
    – เวลาที่ใช้สำหรับการทำเว็บให้ใช้งานจริงๆ ได้ อีก 1-2 เดือน
  8. ค่าแรงของคนที่รับจ้างทำ แต่ละคนจะมีค่าตัวไม่เท่ากัน โดยเฉลี่ย 15,000 – 30,000 บาท (กรณีที่เราไม่ได้ทำเองนะ)

ดังนั้นโดยสรุป ต้นทุนของการสร้างเว็บไซต์ ให้มีคุณภาพดี

  • หากคุณจ้างคนอื่นทำราคาจะประมาณ 30,000 – 50,000 บาท (เป็นราคาขั้นต่ำนะ)
  • หากคุณเรียนรู้ที่จะทำเองต้นทุนที่ใช้จะประมาณ
    4,500 บาท (ไม่รวมค่ากราฟฟิค)
    20,000 บาท (ทำเว็บเอง แต่จ้างกราฟฟิคออกแบบรูป)
  • เวลาที่ใช้ 3-4 เดือน กรณีที่คุณสร้างเว็บด้วยตนเอง เริ่มตั้งแต่ขั้นตอนการเรียนรู้ จนถึงการลงมือทำเว็บให้สำเร็จ

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

แนวทางใช้งาน WordPress ให้มีประสิทธิภาพ

การจะใช้งาน WordPress ให้มีประสิทธิภาพ อันดับแรกเราต้องเข้าใจก่อนว่า WordPress เขาถูกพัฒนามาเพื่อทำสิ่งใด

สิ่งที่เป็นหัวใจของ WordPress คือ ช่วยให้ผู้คนธรรมดาๆ ทั่วไป สร้างเว็บไซต์ด้วยตนเองได้ โดยไม่ต้อง code และไม่ต้องเป็นโปรแกรมเมอร์

WordPress Mission

“WordPress is software designed for everyone, emphasizing accessibility, performance, security, and ease of use.”

wordpress mission

เมื่อ WordPress แก้สิ่งที่เป็น Pain point ของวงการทำเว็บได้สำเร็จ คือ ทำให้การทำเว็บที่เป็นเรื่องยากๆ กลายเป็นเรื่องง่ายๆ ได้ จึงส่งผลให้ WordPress กลายเป็น เครื่องมือที่คนทั้งโลกเลือกใช้ในการทำเว็บมากที่สุด

แต่แน่นอน WordPress นั้น ไม่ใช่เครื่องมือที่เพอร์เฟค แม้ว่าเขาจะสร้างเว็บได้ทุกชนิดบนโลกใบนี้ แต่ก็อาจจะมีบางฟังชั่นที่อาจจะไม่ตอบโจทย์ โมเดลของธุรกิจของคุณบ้าง ในบ้างจุด

เพราะการทำเว็บว่าซับซ้อนแล้ว แต่ความต้องการคนนั้นซับซ้อนยิ่งกว่า

แนวทางการใช้งานที่ถูกต้อง

สิ่งที่ผมอยากจะสื่อสารกับพวกเราคือ โดยส่วนใหญ่ฟังชั่นที่เราต้องการนั้น มันจะมีธีม และปลั๊กอินของ WordPress รองรับอยู่แล้ว แค่เราอาจยังค้นหาไม่เจอเท่านั้น

แต่หากค้นหาแล้วไม่เจอฟังชั่นที่เราต้องการ สิ่งที่ กูรู WordPress อันดับ 1 คุณเม่น Chakkrisn Menn Talawat แนะนำพวกเราคนทำเว็บก็คือ

ให้พยายามปรับโมเดลเรา ให้เข้ากับปลั๊กอิน จะจบงานได้ดีกว่า แต่ถ้าเขียนใหม่ มันจะทั้งแพง ทั้งช้า และอาจทำงานไม่จบ

การพยายามไป custom theme หรือเขียนปลั๊กอินขึ้นมาใหม่เองไม่ใช่เรื่องผิดถ้าคุณเก่งจริงๆ แต่มันจะทำให้คุณเสียทั้งเงินและเวลา ที่ไม่ได้เป็นเครื่องการันตีว่าเมื่อทำทุกอย่างเสร็จ สินค้าหรือบริการของคุณมันจะทำเงินได้

เพราะอย่าลืมว่าแก่น ของ WordPress คือ การสร้างเว็บโดยไม่ต้อง Coding ดังนั้น หากคุณต้องการใช้ WordPress ให้มีประสิทธิภาพ ใช้งานได้จริง เว็บไม่พังในระยะยาว

ก็คือปรับสิ่งที่เราต้องการ ให้เหมาะกับสิ่งที่ WordPress มี แก้ไขโค้ดให้น้อยที่สุด หรือไม่ต้องแก้โค้ดเลยนั้นเอง

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

ควรมีความรู้ SEO ก่อนลงมือสร้างเว็บ

การทำ seo คือ การผลักดันเว็บไซต์ตัวเองให้ติดหน้าแรกเวลาค้นหาบน google ด้วยคีย์เวิร์ดที่ต้องการ โดยไม่ใช้การลงโฆษณา และต้องทำด้วยกระบวนการต่างๆ ในรูปแบบที่ Google ต้องการด้วย ซึ่งคำนี้ย่อมาจากคำภาษาอังกฤษว่า Search engine optimization

 

SEO คือ

โจทย์ยากของการทำ SEO ก็คือเราอยากทำเว็บให้ติดหน้าแรก Google คู่แข่งเรา เขาก็อยากทำเว็บให้ติดหน้าแรกเช่นเดียวกัน แต่เว็บที่จะได้ลูกค้าไปจะมีเพียงแค่ 10 เว็บไซต์เท่านั้น เพราะในหน้าแรกของ Google จะโชว์ผลลัพธ์ได้เพียง 10 เว็บเท่านั้น

  • เว็บที่ติดอันดับ 1 บน Google จะมี Traffic คนเข้าเว็บ มากกว่าเว็บที่อยู่อันดับ 10 มากถึง 10 เท่าเลยนะ
  • จึงเป็นเหตุผลว่าทำไมการทำ SEO ให้เว็บเราติดอันดับต้นๆ จึงเป็นสิ่งที่สำคัญมาก เพราะหากเว็บของคุณ ไม่ติดอันดับหน้าแรก จำนวนคนเข้าเว็บของคุณ แทบจะเป็น 0 เลยกว่าได้

ดังนั้นลำดับขั้นตอนสร้างเว็บที่ถูกต้อง คือ คุณต้องมีความรู้ SEO ก่อน เพราะหลักการทำ SEO คือ การทำเว็บให้มีคุณภาพดีกว่าเว็บที่ติดอันดับมาก่อนเรา

ซึ่งเราจะทำเว็บให้มีคุณภาพดีได้ เราต้องมีความรู้ก่อนว่า Google เขาชอบอะไร ไม่ชอบอะไร ซึ่งเราต้องนำความรู้จุดนี้ไปวางแผนเตรียมข้อมูลเพื่อนำมาใส่ที่เว็บของเรา

ขั้นตอนสร้างเว็บ

ดังนั้นขั้นตอนสร้างเว็บที่ถุกต้อง คุณควรเรียนรู้ SEO ก่อน แล้วนำความรู้ SEO ไปวางแผนสร้างเว็บ แต่คนส่วนใหญ่นั้นมักทำตรงกันข้าม คือ สร้างเว็บไปก่อนแบบไม่มีหลักการ พอได้มาทำ SEO ภายหลัง ส่วนใหญ่ได้รื้อเว็บทำใหม่ทุกคนครับ

หากคุณไม่อยากทำเว็บใหม่หลายรอบ!!

ผมแนะนำให้คุณดูคลิปสอน SEO เบื้องต้นเหล่านี้ให้จบก่อนครับ

ขั้นตอนการสร้างเว็บ WordPress

การสร้างเว็บด้วย WordPress นั้นไม่ยาก แต่มันมีรายละเอียดเยอะ เพื่อให้การเรียนรู้ได้อย่างมีประสิทธิภาพ และไม่หลงทาง ผมแนะนำให้คุณเรียนรู้และลงมือทำทีละขั้นตอน ดังนี้ครับ

  1. จดโดเมน เช่าโฮส
  2. ติดตั้ง WordPress
  3. ฝึกใช้งาน WordPress พื้นฐาน
  4. ออกแบบเว็บให้สวยงามด้วยธีม
  5. สร้างระบบร้านค้า Woocommerce
  6. สร้างฟังชั่นเพิ่มเติมด้วย ปลั๊กอิน
  7. เชื่อมต่อเว็บเข้ากับ Google
  8. ทำ SEO และทำการตลาดออนไลน์

สรุป: คู่มือสอน WordPress 2021

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

บทเรียนถัดไป: การจดโดเมน

เรียนออนไลน์ฟรี คอร์สเรียนสร้างเว็บ WordPress+Woocommerce 

คลิกเข้าเรียนที่นี่


บทเรียนพื้นฐานที่ทุกคนเรียนได้ฟรี มีดังนี้ (คลิกดู)

  • การจดโดเมนและเช่าโฮส
  • การทำ HTTPS
  • การติดตั้ง Wordpress
  • การใช้ WordPress พื้นฐาน
  • การติดตั้งและตั้งค่าพื้นฐาน Woocommerce
  • การลงสินค้าประเภทต่างๆ
  • การตั้งค่าจัดส่งประเภทต่างๆ
  • การตั้งค่าชำระเงิน 3 แบบ
    โอนเงิน paypal และบัตรเครดิต
  • การสร้างหน้าฟอร์มแจ้งชำระเงิน
  • การสร้าง Contact Form
  • การย้ายเว็บและการ backup เว็บ
  • การติดตั้ง Google Analytic
    และ Google Search Console

บทเรียนทั้งหมดนี้ ทุกคนสามารถเข้าเรียนได้ฟรี โดยไม่ต้องสมัครเรียน

ความแตกต่างระหว่าง แค่ทำเว็บได้ กับทำเว็บให้ดี ขึ้นอยู่กับความรู้พื้นฐานนั้นเอง
พื้นฐานต้องแน่นก่อน ถึงจะสามารถต่อยอดทำเว็บให้ดีในอนาคตได้ครับ

[Update] แนวทางปรับแต่ง bootstrap 4 ด้วยการใช้งาน theming อย่างง่าย คอร์สเรียน เรียนฟรี ออนไลน์ บทความ | theme งาน แต่ง – Sambeauty

เนื้อหาต่อไปนี้ จะเป็นแนวทางเกี่ยวกับการปรับหน้าตา หรือการแสดงของ bootstrap 4 โดย

การใช้วิธีปรับค่าของ sass variable ที่ bootstrap กำหนดมาแล้ว มากำหนดค่าใหม่ตามที่เรา

ต้องการ เพื่อสร้าง bootstrap css ไฟล์ใหม่ที่มีการปรับแต่ง

    สำหรับใครที่อาจจะยังไม่รู้จักกับ sass สามารถตามลิ้งค์นี้ไปทำความเข้าใจได้เลย ซึ่งตามความ

เข้าใจอย่างง่าย sass ก็คือรูปแบบการจัดการ css ที่มีการใช้คำสั่งการประมวลผลเข้ามาช่วย ทำให้เรา

ปรับแต่งค่าต่างๆ ของ css ได้อย่างรวดเร็ว สะดวก และยืดหยุ่น

รูปแบบ sass จะสามารถเขียนได้ใน 2 แบบ คือแบบนามสกุล sass และ scss โดยใน bootstrap 

มีการใช้งานในรูปแบบ scss ไฟล์ ซึ่ง scss ไฟล์ ก็จะครอบคลุม การใช้งานต่างๆ ของ css ไฟล์ 

หรือเข้าใจอย่างง่ายก็คือ scss คือ css ที่มีความสามารถเพิ่มเติมเข้ามา ดังนั้น เราสามารถเขียน

scss ไฟล์ ด้วยรุปแบบของ css ไฟล์ ได้นั้นเอง

ก่อนเริ่มต้น จะขอแนะนำการเตรียมเครื่องมือกันก่อน เราจะมีสิ่งต่างๆ ต่อไปนี้

    – nodejs รัน คำสั่ง npm ผ่าน command line ได้ 

    – sass สำหรับ แปลงไฟล์ scss เป็น css ไฟล์

    – live-server สำหรับ รันไฟล์ทดสอบ เพื่อดูผลลัพธ์ แบบ realtime

หลักๆ จะมีเท่านี้ สำหรับเครื่องมือที่แนะนำสำหรับ แก้ไขโค้ดคือ VSCode (Visual Studio Code) 

หมายเหตุ: 

    ในที่นี้จะไม่ใช้วิธีสร้างเป็น package.json แล้วรันคำสั่งผ่าน npm ครั้งเดียว แต่จะใช้วิธี

แยกการทำงานทีละส่วน เพื่อให้เห็นรูปแบบการทำงานชัดเจนขึ้น

ในที่นี้จะสร้างไว้ที่ 

เปิด command line และเข้าไปยัง bootstrap โปรเจ็ค path ที่เราสร้างข้างต้น

แล้วติดตั้ง bootstrap แบบ Package managers โดยใช้ npm 

ด้วยคำสั่งดังนี้

โดย node จะไปทำการดาวน์โหลด bootstrap เวอร์ชั่นล่าสุด ณ ขณะนั้นมา ไว้ในโฟลเดอร์ node_modules
 

ต่อด้วยติดตั้ง sass โดยใช้คำสั่ง 

และสุดท้ายติดตั้ง live-server ด้วยคำสั่ง

ตรวจสอบว่า sass และ live-server พร้อมทำงานแล้วหรือไม่ด้วยคำสั่ง

และ

ถ้าขึ้นเวอร์ชั่น แสดงว่าพร้อมใช้งานแล้ว

ต่อไปให้เราเปิดโปรเจ็คเพื่อใช้งาน โดยพิมพ์ code . ตัวโปรแกรม VSCode ก็จะเปิดโปรเจ็คของเราขึ้นมา

พร้อมสำหรับสร้างไฟล์และเขียนโค้ด

ตอนนี้เราจะมีแค่โฟลเดอร์ node_modules ที่มี bootstrap อยู่ด้านใน ให้เราทำการสร้างไฟล์ และโฟลเดอร์

เพิ่มเติมดังนี้

    – สร้างโฟลเดอร์ css สำหรับเก็บไฟล์ css ที่ compile ด้วยคำสั่ง sass 

    – สร้างโฟลเดอร์ scss และไฟล์ custom.scss สำหรับเขียน scss ที่ปรับแต่งจาก bootstrap

    – สร้างไฟล์ index.html สำหรับทดสอบ การทำงาน

จะได้โครงสร้างเบื้องต้นดังนี้

    ส่วนแรกที่เราจะทดสอบการทำงานก็คือ sass เราจะกำหนดรูปแบบ css เบื้องต้นเข้าไปในไฟล์ custom.scss

ที่อยู่ในโฟลเดอร์ scss แล้วจะทำการแปลงเป็น custom.css ไว้ในโฟลเดอร์ css 

ให้เพิ่มโค้ด ดังนี้ในไฟล์ custom.scss

จากนั้นรันคำสั่ง sass ในรูปแบบ sass [input] [output] ผ่าน command line

หรือก็คือรูปแบบดังนี้

จะได้เป็น 

เราจะได้ไฟล์ custom.css และ cutom.css.map ในโฟลเดอร์ css ดังรูป
 

ถ้าเราต้องการแปลงเป็น css ไฟล์แบบ minify หรือแบบบีดอัดไฟล์ สามารถใช้คำสั่งดังนี้

เราก็จะได้ไฟล์ css ขนาดเล็กลง พร้อมนำไปใช้งานได้

    ต่อไปให้เรากำหนดโค้ดในไฟล์ index.html เบื้องต้นดังนี้

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.1/dist/css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>
 
 <div class="container">
    <div class="my_div">

    </div>
    <button class="btn btn-primary" >This is test primary</button>
    <button class="btn btn-danger" >This is test danger</button>
 </div>   
 
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
     
});
</script>
</body>
</html>


อดีตว่าที่เจ้าบ่าว ร่ำไห้ดราม่าเทงานแต่ง : Khaosod TV


น้ำตาในวันฝนพรำ! อดีตว่าที่เจ้าบ่าว ร่ำไห้ระบาย 9 ปี รักขมตรมทุกข์ ลั่นไม่ได้เทงานแต่ง แค่เลื่อน แต่จากนี้พอแล้ว
ครบทุกรส สดทุกเรื่อง\r
Official Khaosod TV\r
­\r
Website : http://www.khaosod.co.th/default.php\r
Facebook : https://www.facebook.com/khaosod\r
Instagram : https://instagram.com/khaosod\r
Twitter : https://twitter.com/KhaosodOnline

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

อดีตว่าที่เจ้าบ่าว ร่ำไห้ดราม่าเทงานแต่ง : Khaosod TV

HOW TO แต่งหน้าไปงานแต่ง Ver.ไปเต๊าะผู้ในงาน ไปแบบโสดแต่ได้คู่กลับมาชัวร์ โทนน้ำตาล สวยหรูดูแพง!!


วันนี้แก้มจะมาสอนแต่งหน้าลุคไปงานแต่งงานแบบปังๆ เพื่อเป็นการให้เกียรติเจ้าภาพ เราจะไปแบบโทรมๆมันก็ไม่ได้นะแม่!!
ลุคนี้จะมาแต่งให้ดูแบบที่แก้มแต่งไปเป๊ะๆเลย มีคนชมเยอะมากๆว่าดูดี เลยอยากเอามาแชร์ให้ทุกคนได้ไปแต่งตามกัน บอกเลยว่าลุคนี้ให้ 10/10!! ไปดูกันค่ะ
เครื่องสำอางที่แก้มใช้ แปะไว้ให้ด้านล่างน้า 👇🏻
Terry Brightening CC Serum
Jovina Airy Foundation For All Skin Type เบอร์ 02
Hourglass Vanish Airbrush Concealer
Hourglass Veli Translucent Setting Powder
Kenabo Powder Eyebrow
Canmake Color Change Eyebrow
Jovina Desert Eye Palette
Hourglass Ambient Lighting PowderLuminous Light
Mistine Super Black Eyeliner
Lancome Monsieur Big Waterproof Mascara
Laura Mercier Caviar Stick Eye Color
MAC Mineralize Blush สี Warm Soul
Jovina Stay Velvet Liquid Lipstick เบอร์ 02
Becca Shimmering Skin Perfector Pressed Highlighter
ใครชอบลุคนี้ คอมเมนต์มาคุยกันน้าา หรืออยากให้แก้มสอนลุคไหนอีกก็ขอกันมาได้เลย รอคุยกับทุกคนอยู่นะคะ 💕🥰
ติดตามแก้มช่องทางอื่นๆได้ที่…
Facebook Gamgy makeup :
https://www.facebook.com/Gamgymakeup/

Instagram gamkotcha :
https://www.instagram.com/gamkotcha/

Website gamgychannel :
https://www.gamgychannel.com/
Gamgy แก้มกี้ HOWTO

HOW TO แต่งหน้าไปงานแต่ง Ver.ไปเต๊าะผู้ในงาน ไปแบบโสดแต่ได้คู่กลับมาชัวร์ โทนน้ำตาล สวยหรูดูแพง!!

จบรัก9ปี เจ้าสาวสุดช้ำ เจ้าบ่าวเทงานแต่งงาน | HIGHLIGHT | แฉ 23 พ.ย. 64 | GMM25


รายการ \”แฉ\”
นำทัพแฉโดย มดดำ คชาภา
เสริมทัพด้วยทีมพิธีกรฝีปากกล้า เอมี่ มรกต / ดีเจดาด้า / ดีเจบุ๊คโกะ / น็อต วรฤทธิ์ และ ดีเจเชาเชา
LIVE จันทร์ ศุกร์ เวลา 21.30 น. | Rerun จันทร์ ศุกร์ เวลา 14.00น. ทางช่อง GMM25
แฉ GMM25
📌 ติดตามทุกความเคลื่อนไหวของช่อง GMM25 ได้ที่
📌 FB GMM25 | https://www.facebook.com/GMM25Thailand
📌 IG GMM25Thailand | https://instagram.com/GMM25Thailand
📌 Twitter | https://twitter.com/GMM25Thailand
📌 YouTube | https://www.youtube.com/GMM25Thailand
📌 Website | http://www.gmm25.com
📌 TikTok | https://www.tiktok.com/@gmm25official

จบรัก9ปี เจ้าสาวสุดช้ำ เจ้าบ่าวเทงานแต่งงาน | HIGHLIGHT | แฉ 23 พ.ย. 64 | GMM25

ของหมั้นเป็นของขวัญ – ศร สินชัย【OFFICIAL MV】


เพลง : ของหมั้นเป็นของขวัญ
ศิลปิน : ศร สินชัย
อัลบั้ม : ชุด 2 ของหมั้นเป็นของขวัญ
Digital Download : 123 1001374 3
KKBOX : http://kkbox.fm/6c16KN
iTunes : http://goo.gl/oyK0LD
คุณจะไม่พลาดการติดตาม \”Music Video\” ใหม่ๆ และกิจกรรมความเคลื่อนไหวจาก \”แกรมมี่ โกลด์\” ได้ก่อนใคร ที่ YouTube Channel ของ \”GMM GRAMMY GOLD\” กดเลย!!!
วันนี้คุณสามารถติดตามชมมิวสิควีดีโอและความเคลื่อนไหวทุกศิลปินจาก แกรมมี่ โกลด์ ที่คุณชอบได้อย่างจุใจก่อนใครที่ช่อง แฟนทีวี ทางกล่อง GMM Z เคเบิลทีวีไทยทั่วประเทศหรือดาวน์โหลดแอพลิเคชั่น GMM Z เพื่อรับชมได้ทุกที่ทุกเวลาที่คุณต้องการ ได้ฟรีผ่าน iTunes และ Google Play
ติดต่องานแสดงศิลปิน แกรมมี่ โกลด์ โทร.026699159
ติดตามอัพเดทผลงานศิลปินค่ายแกรมมี่ โกลด์ ได้ที่
https://www.facebook.com/prgrammy.gold
https://www.facebook.com/GrammyGoldFAN

ของหมั้นเป็นของขวัญ - ศร สินชัย【OFFICIAL MV】

รวมเพลงหวานงานแต่ง【LONGPLAY】


ไม่ว่าอะไรมันคือเหตุผล ที่ฉันนั้นรักเธอ ให้รู้ว่ารักเธอเท่านั้นพอ…. เพลงสำหรับคนหวานๆ ที่มีรักหวานมากกก ฟังเพลินๆกับคนรู้ใจ คงจะดีไม่ใช่น้อย // ไม่อยากพลาด LONGPLAY ใหม่ๆ ฟังยาวๆแบบจุใจ กด subscribe GMM Grammy Official ตามลิ้งนี้ได้เลย : http://bit.ly/2fTovxP

00:00 แพ้ใจ ใหม่ เจริญปุระ
3:37 นิยามรัก Nuvo
7:13 ที่รัก (ละครเกมร้ายเกมรัก) (feat.แพตตี้) ปราโมทย์ ปาทาน
10:57 ใจกลางความรู้สึกดีดี จิรากร สมพิทักษ์ (เอ๊ะ);วิน Potato
16:18 วันนี้…ฉันมีเธอ สุเมธ \u0026 เดอะปั๋ง
19:52 ไม่ต้องมีคำบรรยาย MR.TEAM
23:45 ขอ PARADOX
27:43 มากกว่ารัก พีท พล
31:13 หนึ่งในไม่กี่คน โบ สุนิตา
35:09 รักเธอที่สุด (YOU’TR THE ONE) อรรถวดี จิรมณีกุล (มิ้นท์)
39:32 คู่แท้เบิร์ด ธงไชย
43:16 เรื่องมหัศจรรย์ SOFA
47:21 เสียงของหัวใจ แอน ธิติมา
51:39 หากันจนเจอ กบ ทรงสิทธิ์ ;กบ เสาวนิตย์
55:59 ยิ่งรู้จัก ยิ่งรักเธอ (โฆษณาTOYOTA) DA endorphine

รวมเพลงหวานงานแต่ง【LONGPLAY】

นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูวิธีอื่นๆWedding

ขอบคุณที่รับชมกระทู้ครับ theme งาน แต่ง

READ  [NEW] Shingeki no Kyojin | snk - Sambeauty

Nguyễn Huệ

Xin chào các bạn mình tên là Nguyễn Huệ, website này do mình tạo ra với mục đích chia sẻ những kiến thức liên quan đến làm đẹp, trang điểm... Rất mong những thông tin do mình cung cấp mang lại nhiều giá trị cho bạn. Xin chân thành cảm ơn

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Back to top button