Home
คำพูดจากวีดีโอ
วิธีแกะรอย Script ธีมเวิร์ดเพรส ที่ขายใน Themeforest
สวัสดีครับ คลิปนี้จะเป็นคลิปที่สอนเทคนิคของการแกะรอยนะครับ ฟังก์ชั่น หรือคำสั่ง หรือเทคนิคต่างๆที่คนธีมฟอเรส( themeforest) ระดับท๊อปๆ เขาใช้กันนะครับ ซึ่งเทคนิคนี้ นะครับ เราจะได้เรียนรู้ก็ต่อเมื่อเราเริ่มเรียนรู้โครงสร้างของเวิร์ดเพรส ได้แล้วนะครับคอร์สเรียนออนไลน์แนะนำ : วิธีสร้างเว็บ ด้วย WordPress โดยนักรบ เริ่มมีความสามารถในการเอา HTML มาใส่ในเวิร์ดเพรส (word press) และก็เริ่มทำ Theme Optionได้แล้ว และเริ่มเรียนรู้ปลั๊กอินบ้าง แล้วค่อยเริ่มเข้าสู่การแกะรอยฟังค์ชั่น หรือการทำงานของคนเก่ง ๆ ใน themeforest นะครับ ตามลำดับนะครับ มิฉะนั้นถ้าเราข้ามเลเวลเราจะไม่สามารถแกะได้ และไม่สามารถเขียนโค้ด (code) แบบเขาได้ แต่วันนี้นะครับ ผมจะอธิบายการแกะรอยโค้ดดังๆ ในธีมฟอเรสนะครับ เป็นการตอบคำถามของคนที่มาถามใน Warriorไปในตัวเลยนะครับ ถ้าเป็นการตอบคำถาม คุณเชาวลิต นะครับ ที่มาถามคำถามประมาณ 4-5 คำถามเลยล่ะ เค้าถามว่า menu dropdown/navigation level ทำอย่างไร คือตัวนี้นะครับคือ menu dropdown ถ้าเราลองได้เล่น bootstrap นะครับ เราจะเห็นว่า มันจะมีสี่เหลี่ยมตรงนี้ ด้านหลังตัวนี้เหมือนกันเลย ตัวนี้คือ bootstrap menu นะครับ เดี๋ยวผมจะสาธิตให้ดูว่าเขาใช้ เขาอามาจากไหนเรียนรู้จากที่ไหนนะครับ อีกอันหนึ่งคือเรื่องของแท็บ Tab เข้าใจว่าน่าจะเป็นแท็บ เดี๋ยวลองกลับไปดูธีมของที่ผมซื้อมานะครับ คือ Orion Press ของคนนี้ ขายได้สี่ร้อยกว่าเปอร์เชส(Purchases) แล้ว สร้างเมื่อเดือนพฤศจิกายน2013 ราวๆสักประมาณ 6เดือนแล้ว น่าจะขายได้สักประมาณ 7 แสน 2-3 แสน 7 แสน ประมาณนี้ล่ะนะครับ แล้วเข้าไปดู live Preview ของเขากัน นี่คือเป็นธีมรูปแบบที่มี Demo ของ Content เรียบร้อยแล้วนะครับ รอสักครู่ครับ ให้โหลดแป๊บนึงครับ นี่คือธีม Orion Press ที่ผมซื้อมาเพราะจะมีบางส่วนตัดออกไป นี้คือเมนู มีเลเวล เมนูแบบนี้เขาเรียกว่า bootstrap menu นะครับ คือดึง bootstrap มาใช้ในเวิร์ดเพรส นะครับ อย่างนี้คือเป็นโมเดล คือป๊อปอัพขึ้นมาเป็นภาพนะครับ เข้าใจว่าคุณเชาวลิตต้องการตัวนี้นะครับ เปิด Popup ขึ้นมาภาพขึ้นมานะครับ แท็บคือตัวนี้ครับ เห็นไหมครับแท็บนี้ สังเกตว่าแท็บนี่ ฟังก์ชั่นอะไรต่างๆ ที่มีการเปลี่ยนแปลงหน้าตาโดยไม่มีการเปลี่ยนหน้าเพจนะครับ เพราะว่าใช้ Javascript ช่วยแน่นอนครับไม่มีวิธีอื่น ตอนนี้ นี่แปลว่าใช้ Javascript ช่วยแน่นอนครับ แต่บางอย่างมีการเคลื่อนไหวนี่อาจจะเป็น css ล้วนๆ ก็ได้นะครับ เดี๋ยวค่อยแก้เป็นแกะรอยให้นะครับ อันนี้ก็เป็นแท็บนะครับ มีอะไรอีก มี model มีการทำเมนูเลื่อนลงมานะครับ เมื่อตัวนี้เลื่อนลงมานะครับ เมนูหลักของเราจะตามเรามาเรื่อยๆ จากหน้าบนสุดเห็นไหมครับ เมนูตามเรามาเรื่อยๆ นะครับ เห็นไหมครับ หมดแล้วนะครับ เดี๋ยวผมไล่ตั้งแต่ navigation level ก่อนเลยนะครับ คือ ถ้าเราลองเล่น bootstrap เราจะรู้ว่านี่คือ bootstrap menu นะครับ เพราะมันจะมีสี่เหลี่ยมๆ ข้างหลังแล้วคลิ๊ก แบบนี้นี่ล่ะ แล้ว bootstrap menu ที่ใช้สำหรับเวิร์ดเพรส เขาจะใช้ตัวที่เรียกว่า wp-bootstrap-navwalker นะครับ ตัวนี้แหละข้ามาใน GitHub ได้ครับ ตาม URL นี้ แล้วเขาจะสอนวิธีใช้นะครับ อ่านการเอาเข้าไปต่างๆ ไม่ว่าจะเป็นการ Installation ดาวโหลดไฟล์ wp-bootstrap-navwalker มาก่อนนะครับเก็บไว้ใน โฟลเดอร์ใส่PHP โค้ดเข้าไปนะครับ ดึงมาใช้นะครับ ตัวนี้เป็นโค้ดการนำมาใส่ในธีมของเรา ตัวนี้เป็นรูปแบบโค้ดที่รูปแบบ Full เป็นรูปแบบเต็มตัวเลย อันนี้อธิบายโค้ดนะครับฟังก์ชั่นการอธิบายโค้ด อันนี้คือเวลาใส่ธีมจะเป็นหน้าตาแบบนี้นะครับ แล้วก็มีรายละเอียด อยากรู้ข้อมูลเพิ่มเติมเกี่ยวกับ navigation ของ bootstrap ก็คลิ๊กเข้าไปได้นะครับ รูปแบบหน้าตาก็จะประมาณแบบนี้นะครับ โอเค ผมข้ามขั้นตอนนี้ไปคร่าวๆ นะครับ ศึกษาหาข้อมูลต่อได้นะครับอันนี้เป็นภาพรวม อันที่ 2 คือดูเรื่องของ TAB แท็บคือตัวนี้ครับ แท็บนี่ผมพูดได้เลยว่าคือเป็นอาวุธลับของคนเขียนคนนี้นะครับ ไม่ค่อยมีใครเขียนแท็บแบบนี้ได้ มีไม่กี่คน ฉะนั้นมันเป็นฝีมือของเขา ฉะนั้น script ของเขาจะยากแน่นอน แต่ถ้าเราอยากจะแกะรอยจริง ๆ อยากจะล้วงเอามาใช้จริงๆ ต้องดูก่อนว่าคุ้มไม่คุ้มนะครับ ถ้าคุ้มนี่ลงแรง ลงเวลาไปแกะรอยเขาแล้วนำมาใช้นะครับ วิธีการแกะรอย ซื้อครับง่ายสุด ซื้อธีมเขามาเลยครับ คือผมก็ซื้อ ซื้อเขามาใช้ ธีมเขาประมาณราวๆ 45 ดอล ซื้อมาแล้วก็แกะรอยซึ่งเป็นวิธีเดียวกับวิธีที่เหมือนกันที่หลายๆคนใน themeforest ทำแน่นอนครับคือการซื้อเขามาเรียนรู้จากเขานะครับ เพราะเราไม่สามารถแกะรอยเขาจาก script ที่อยู่ทางหน้าเว็บไซต์ได้ เราดูได้แต่ css HTML แต่เราดู PHP ไม่ได้นะครับ ฉะนั้นเราต้องซื้อธีมเขามา อันนี้คือธีมที่ผมซื้อมานะครับ Orion พอแกะแล้วก็เข้าไปอ่านโค้ดของเขานะครับ นี่ก็จะเป็นโครงสร้างโค้ดของเขานะครับ ก็แบ่งไว้เรียบร้อยแล้วล่ะ ถ้าเป็นมืออาชีพเขาจะแบ่งไว้เรียบร้อยแล้วล่ะ นี่เป็นฟังก์ชั่นอะไรต่างๆนะครับ ส่วนที่เห็นจะเป็นส่วนที่ widgets เขาจะเรียกว่าส่วน widgets เข้าไปฟังก์ชั่นแล้ว widgets และเป็นส่วนที่แท็บ 2 ตัวนี้ละครับที่เป็นส่วนที่เขาใช้ ตัวนี้ครับ Tabber ดับเบิ้ลคลิ๊กขึ้นมาครับ ผมปิดตัวอื่นก่อน ตัวนี้คือเป็นฟังก์ชั่นที่เขาใช้เขียนเกี่ยวกับเรื่อง tabber นะครับ ฟังก์ชั่นของเขาก็ราวๆ 80 บรรทัด อย่างนี้นะครับ ก็จะได้เป็น orion tabber extends by class นะครับ คือถ้าเป็นคนที่ไม่รู้โค้ดนะครับ ยังไม่เข้าใจ PHP เห็นก็ตึ้บเลยครับ เห็นตึ้บมันทำยังไง มีฟังก์ชั่น construct ไว้ทำอะไร มี extends คืออะไร แต่ถ้าคนเป็นโปรแกรมเมอร์แล้วก็โอเคครับ เขาไล่โค้ดไป ถ้าคุ้มที่จะรู้สึกว่าเรามาใช้แล้วมีประโยชน์ค่อยเรียนนะครับ แต่ถ้ารู้สึกว่ายังไม่รู้ว่าจะไปใช้ทำอะไรอย่าพึ่งไปศึกษามันนะครับ แต่รู้ๆ ว่าจะเรียนแบบนี้ล่ะ นี่คือแท็บที่อยู่ใน widgets แล้วเราก็ไล่โค้ดนะครับอย่างนี้ล่ะ นะครับ แล้วผมก็ไม่ได้ไล่นะครับ เพราะผมยังไม่ได้ใช้มัน เอาละครับ สรุปตอบคำถามข้อที่2 นะครับ แท็บคือต้องไปดูโค้ดเขานะครับเพราะว่าเป็นเทคนิคของเขาจริงๆนะครับ การเอาเม้าท์ไปชี้ที่ภาพแล้วให้ปุ่มวิ่งเข้าไปในภาพนะครับ น่าจะเป็นตัวนี้ ตัวนี้ครับ วิธีแกะโค้ดวิธีหนึ่งคือเราต้องเช็คก่อนว่ามันเป็น javascript หรือใช้เพียงแค่ css ธรรมดา กับ HTML วิธีเช็คง่ายๆ ก็ใช้ google chrome ช่วยนะครับ เรื่องของการใช้ google chrome ผมจะสอนอีกคอร์สนึงเลยนะครับ google chrome แล้วก็เช็คนะครับ ตั้งค่ามัน แล้ว disable javascipt แล้วก็ลองทดสอบการทำงาน ถ้ามันยังสามารถทำงานได้เหมือนปกติ แปลว่าการเอาเม้าท์มาวางตรงนี้ไม่ต้องพึ่ง javascript ครับ ถ้าคนเริ่มเขียนศึกษา css มากเรื่อง แบบนี้ทำได้ ฉันเคยทำได้แล้ว วิธีการไปดูว่าเขาทำอย่างไง ก็แว่นขยายคลิ๊กครับ ไล่ไปก่อนครับ มันก็จะอธิบายอธิบายโค้ดมานะครับ มันก็จะขยายที่บาร์โค้ด ตัวนี้ภาพตัวอิมเมจ อิมเมจที่ขยายครับ เช็คว่าใช่ไม่ใช่ คลิ๊กต่อครับ เราคลิ๊กไล่ดูครับ มีเดีย โฮเดอร์ mediaholder: hover image ลองคลิ๊กไล่ดูครับ เห็นไหมครับ แปลว่าอิมเมจตัวนี้ล่ะ เห็นไหมครับพอผมเอา css ออกแล้ว การทำงานเพี้ยนเลย แปลว่าตัวที่ผมติ๊กมันออกนี่ แปลว่าเป็นตัวที่มันทำงานอยู่ ผมเอา webkit-transform ใส่เข้าไป scale นะครับ เป็นเรื่องของ animation คือจากดู css ก็พอจะเดาออกนะครับ ว่า mediaholder เป็นสคริปที่ครอบอิมเมจอยู่ เวลาตัวที่ครอบอิมเมจอยู่ถ้าเกิดเอาเม้าท์ไปวาง เอาเม้าท์ไปโฉบ มันจะฟ้องให้อิมเมจที่อยู่ข้างในตัวที่ครอบอยู่นี่นะ สเกลใหญ่ขึ้น 1.15 เท่า นี่คือ css นะครับ แต่ยังไม่หมดนะครับเพราะคำสั่งพวกนี้มันอยู่ใน Web Flow ด้วยผมก็สอนเรื่องของการanimationใน Web Flow ด้วยต่างกันที่ว่า Web Flow อาจจะทำได้ระดับหนึ่ง เขียนโค้ดด้วยมือก็ยืดหยุ่นได้มากกว่านะครับ เดี๋ยวค่อยลงในรายละเอียดอีกทีใน Web Flow อันนี้เราก็รู้แล้วว่านะครับว่า นี่คือนี่ ฉะนั้นเรามาดูmedia holder คือ อันนี้ครับ เอาเม้าท์ไปวางตรงนี้ทำให้อิมเมจตัวนี้ขยายสเกล นี่เจอเทคนิคนึงครับ โอเวอร์คลับ ขยายสเกล โอเค แล้วมาดูที่media holder ครับ มาดูว่าตั้งอะไรบ้าง ตั้ง hiddenไว้นะครับ ตั้ง Holder hidden ไว้แปลว่าอะไรครับ มันมีความหมายของมัน เพราะว่ามันขยายสเกลขึ้นมาใหญ่ ตั้ง over hidden ไว้เพราะว่าถ้ามันขยายเกินกรอบมันก็มองไม่เห็น เทคนิคสี่เหลี่ยมนี่ก็เหมือนกันครับ คือเราตั้งให้สี่เหลี่ยมนี้มันคือ นี่ครับ เห็นไหมครับที่ผมคลิ๊กแล้วมันมีสี่เหลี่ยมขึ้นนิดนึงสีฟ้า สีฟ้าที่อยู่ตรงกลางหน้าจอนะครับ คือเราตั้งให้สี่เหลี่ยม ค่า default มัน opacity ค่ามันคือศูนย์ หรือว่าhidden มันว่าอะไรซ่อนมันไปก่อน แต่พอเอาเม้าท์ไปวางบนกรอบภาพแล้วมันค่อยฟ้องมัน ค่อยบังคับมันให้ปุ่มสี่เหลี่ยมปรากฏ ออกมา แล้วก็ใส่ animation ให้หน่อย ก็ปรากฏแล้วครับ แบบนี้ เท่านั้นเองครับ นี่คือปุ่ม ปุ่มเป็นลิ้งค์ต่างๆ ที่อยู่ในภาพนะครับเพราะว่าค่า default มันจะดูopacity ค่าปกติก็ได้นะครับ เห็นไหมครับค่า opacity คือ 0 มองไม่เห็นครับ พอเอาเม้าท์ไปวาง media holder นะครับ แล้วปรับ opacity ให้เป็น 100 ให้เป็น 0.5 ก็จะเห็นแล้ว นี่เป็นเทคนิคที่เขาใช้นะครับ ลิ้งค์พวกนี้ก็จะรับค่ามาจาก database นะครับ น่าจะตอบโจทย์ในเรื่องการเขียน css แบบเม้าท์โอเวอร์ ได้นะครับ คือถ้าเป็นคน เหมือนที่บอกว่าถ้าเป็นคนที่ไม่รู้ css มา ไม่รู้การทำงานของมัน ฟังผมก็งง นะครับ แต่ผมอธิบายคร่าวๆ อย่างนี้ละกันนะครับ ต่อไปเรื่องของการคลิ๊กขยายนะครับ เรื่องของโมเดลอิมเมจ เรื่องของการคลิ๊กแล้วขยายภาพออกมาครับ แบบนี้เห็นไหมครับ วิธีการแกะรอยก็ต้องดูโค้ดก่อน สังเกตนะครับลองคลิ๊กขยายดูแล้วก็สังเกตว่าอะไรเปลี่ยนแปลงบ้างนะครับ ส่วนใหญ่โค้ดที่เขาจะใช้ก็จะอยู่ในส่วนของ head นะครับ javascript ก็จะอยู่ในส่วนของ footer นะครับ คราวนี้ก็คือต้องมาไล่สังเกตเอาเองนะครับ คราวนี้ต้องไล่สังเกตโค้ด อย่างที่ผมเห็นก็คือว่าลองปิดแล้วเปิดใหม่ สังเกตว่ามีอะไรเปลี่ยนแปลงครับ สังเกตว่าจะมีโค้ดบางส่วนเปลี่ยนแปลงอยู่ เห็นไหมครับมันจะมีตรงช่องบริเวณนี้จะกระพริบ เห็นไหมครับว่าโค้ดตรงด้านมุมซ้ายนี่จะเกิดมีการเปลี่ยนแปลงอยู่ ลองอีกรอบนึงนะครับ เห็นไหมครับด้านมุมซ้าย ถ้าสังเกตดีๆ จะมีclass ที่ชื่อว่า mfp-zoom-out-cur เพิ่มเข้ามา เดี๋ยวผมปิดออกนะครับ เห็นไหมครับว่าหายไป อันนี้เป็นการแกะรอยโค้ดครับ เราก็เลยรู้ว่า จริงๆแล้วธีมนี้มีการทำงานแบบนี้เองนะ เอานะครับผมคลิ๊กอีกทีเพิ่มเข้ามา นะครับ ผมก็จะได้ผมก็จะได้คล้ายๆ เหมือนว่าแกะรอยข้อแรกล่ะ เรื่องของ class ที่เพิ่มเข้ามาใน body คือตัวนี้ mfp-zoom-out-cur นะครับ ผมก็เอา class นี้ไป search ไปค้นหาต่อในธีม Orion Press ที่ผมซื้อมาครับ search มันอยู่ใน โฟลเดอร์ในธีมของผม แล้วก็ Find all สังเกตว่าจะปรากฏว่า ส่วนนี้ของcss มีปกติอยู่แล้ว ส่วนที่น่าสนใจจะอยู่ใน java script ครับ javascript.js มีคำว่า class นี้ปรากฏอยู่ ดับเบิ้ลคลิ๊กเข้าไปครับ คราวนี้เราจะเจอสาเหตุ java script แล้ว java script ที่ใช้การทำงานเรียก แต่เนื่องจาก java script ที่เขาใช้ เขาก็จะ optimize เขาเรียกว่าลบ space มันออกครับ ให้ไฟล์มันเล็กและโหลดเร็วเห็นไหมครับ แต่เราจะอ่านโค้ดเขาไม่รู้เรื่องหรอกครับ เราก็ต้องก๊อปโค้ดเขาไปแล้วก็ ไปเข้าเว็บที่เรียงโค้ดใหม่ให้สวยงาม อย่างเช่น เขาจะ search คำว่า javascipt code beauty อย่างนี้ครับ ก๊อบเขามา ก๊อบเข้าไปนี่ครับ วาง ส่วนใหม่จะเละๆ แบบนี้ แล้วก็กด control enter เขาก็จะเรียงโค้ด java script ให้ใหม่เสร็จแล้วก็เอามาจัดในไฟล์ของDreamweaver ของเราอีกทีก็ได้ครับ เพื่อจะได้จำโค้ด java script ที่เรียงสวยงาม เห็นไหมครับ เราก็จะได้โค้ด java script ที่เรียงสวยงามแล้ว เสร็จแล้วคราวนี้ก็ search หาคำของเราต่อ คำนี้แหละ แต่ search หาในไฟล์นี้ว่ามันอยู่ในบรรทัดไหน เจอแล้วอยู่ในบรรทัดที่ 1,124 คือถึงขั้นตอนนี้แล้ว java script เป็นพันบรรทัด light box ถ้าเราไม่มีความสามารถทางด้าน java script เราก็จะมึนอีกแล้ว ก็แกะรอยต่อไม่ได้อีกนะครับ ซึ่งหลักสูตรในการอ่านโค้ดของคนเก่งๆ ใน themeforest นะครับที่เป็นพันๆ บรรทัด หรือเป็นหลักหลายๆ พันบรรทัด มันเป็นทักษะที่ผมจะสอนอีก สอนเพิ่มเติมแล้วกันนะครับ ซึ่งผมจะไม่สามารถจะสอนรวบเดียวทีเดียวได้หมดทุกอย่างเลยจริงๆ แต่ผมสอนวิธีการแกะรอยคร่าวๆ ให้นะครับ หลังจากที่เราได้โค้ดมาเป็นพันๆ บรรทัดแล้วนะครับ วิธีการแกะรอยเราก็คือ เราหุบโค้ดมันนะครับ หุบโค้ดมัน จุดประสงค์มันก็คือเพื่ออ่านcomment ครับ ก็โค้ดเขาเขียนดี comment เขาจะเขียนดี แต่ถ้าโค้ดเขาเขียนไม่ดี โค้ดไม่เขียน comment มายังไงก็แกะรอยไม่ติดครับ ต้องล้มเลิกไปเพราะว่าเขาไม่เขียนcomment มาให้ ครับ นี่เราก็หุบโค้ด เวลาเห็นโค้ดเป็นพันๆ บรรทัด อย่าพึ่งตกใจครับ หุบแล้วเหลือแค่นี้ คราวนี้ เขาจะมี comment ว่า Retina.js พอได้ไอเดียไหมครับ Retina ก็คือ 2 เท่าไง ภาพใหญ่ๆ 2 เท่าที่ใช้ใน Ipad ไง Resolution 2 เท่าไง พอหุบเสร็จเราก็จะมา search ต่อนะครับว่าอยู่ตรงไหน มันอยู่ในสีน้ำเงินตรงนี้นะครับ คือเราจะตามว่ามันมีอยู่ในโค้ดที่เราจับกลุ่มมันไว้ตรงไหน โค้ดมันยาวมากเลยครับ เห็นไหมครับ นี่ครับอยู่ในนี้ แปลว่าอยู่ในก้อนนี้ อยู่ใน Magnific Popup version 9.8 Dmitry คือถ้าเจอแบบนี้ถือว่าโชคดีครับแปลว่าเขาหยิบ script ที่คนอื่นเขียนมาใช้ในธีมของเขานะครับ คือถ้าเขาเขียนว่า By ใคร ให้เครดิตใครนี่โชคดีครับ เอานี่ไปsearch ต่อครับ อันนี้เรื่องของ popup light box นะครับ เอาไป search ต่อครับ คือผม search แล้วล่ะ ก็เจอคนนี้ เจอคนนี้ครับ นี่ครับ Magnific Popup Dmitry เราก็เจอสาเหตุของการ ต้นตอ ต้นตอนะครับของการใช้ light box ตัวนี้ คือคนพัฒนาก็คือคนนี้นี่เอง เห็นไหมครับเขามี light box ของเขา นี่คือ light box ของเขาประเด็นที่เราจะหยิบมาใช้ได้นะครับเราต้องดู license ของเขานะครับ นี่คือเขาทำ light box ขึ้นมา คือคนที่ทำ Theme orion press ที่หยิบสคริป light box ของคนนี้มาใช้ได้นะครับเพราะว่า ด้วยเหตุผลเดียวที่ใช้ได้ก็คือ เขาเขียน license ว่า under MIT นะครับ MIT คือใช้เพื่อการค้าได้นะครับ เขาก็เลยหยิบไปใช้ในธีมได้ ไม่ใช่ว่าหยิบมามั่วๆ ซั่วๆ นะครับ ไม่ได้นะครับผิดกฎนะครับ อันนี้พอจะเห็นแล้วใช่ไหมครับว่า แท็กการตามlight box คือไล่มาตั้งแต่ script ไล่มาตั้งแต่โค้ดมัน ไล่มาตั้งแต่โค้ด css มาไล่มาถึง java script นะครับ แล้วก็ไล่มาถึงคนพัฒนานะครับ ที่ชื่อว่าคนนี้นะครับ เช็คก่อน model box ไปแล้วนะครับ เรื่องของ fixe menu ด้านบนเลื่อนลงมา ถ้าเรากลับไปดูไฟล์ที่เรา java script ของเขาจะมีอยู่อันหนึ่งที่ว่า คือว่าคำว่า sticky ครับ sticky ตัวนี้นะครับ เห็นไหมครับ sticky menu เป็นคำใบ้ เป็นตัวคำนวณถึงเรื่องของการที่ทำให้เมนูอยู่หรือเลื่อนตามเราลงมา ซึ่งเป็นฟังก์ชั่นนี้เอง แล้วก็อาจจะทำงานควบคู่กับ css คือเช็คระยะ แล้วก็อาจจะใส่ css ไปตัวหนึ่งตรงนี้นะครับ เพื่อให้มันทำงาน ประเด็นคือเปลี่ยน position ของมันนะครับ เลื่อน css ให้เปลี่ยน position ของมันให้เป็นแบบ fixe ไปแทนที่จะเป็นแบบเดิมนะครับ อันนี้อยู่ที่ไอเดียของการทำ sticky menu นะครับซึ่งมันก็มีหลายวิธีนะครับ คนนี้ก็ทำวิธีนี้นะครับ โอเค น่าจะหมดแล้ว menu dropdown นะครับ สรุปนะครับ ใช้ wordpress bootstrap navwalker นะครับ Tab แท็บนี้ตึ้บเลยครับ คือถ้าจะแกะจริงๆก็ไปแกะโค้ดเขาได้นะครับ อันนี้ผมยังไม่แกะนะครับ อันนี้เป็นแท็บเขาครับต้องซื้อธีมเขามา เพราะผมว่ามันเป็นเทคนิคส่วนตัวของเขานะครับ เอาเม้าท์ไปชี้แล้วภาพขยายนะครับ เมื่อกี้อธิบายไปแล้วเรื่องของการใช้ css นะครับ การทำ model ภาพนะครับไล่มาแล้ว เขาใช้ปลั๊กอินตัวนี้นะครับ ในการทำโมเดลภาพนะครับ ตัวนี้แหละ แล้วเขาอาจจะเปลี่ยน animation อะไรของเขานะครับ เปลี่ยนแปลง การทำ fixe menu นะครับ เขาก็ใช้ java script ช่วยนะครับ เรื่องของ sticky menu ท่อนนี้ช่วย โอเค ส่วนคอร์สทั้งหมดไม่ได้อยู่ในWeb Flow นะครับ Web Flow สอนเรื่องการออกแบบหน้าตาแล้วมาใช้ในเวิร์ดเพรสนะครับ ซึ่งเป็นพื้นฐานที่ควรรู้ก่อนที่เราจะไปแกะโค้ดชาวบ้านเขาที่เก่งนะครับ เอามาใช้นะครับ ซึ่งการแกะโค้ดชาวบ้านนี้เป็นอันดับสุดท้าย สุดๆ เลยจริงๆนะครับที่เราจะได้รู้และได้ใช้นะครับผม สำหรับคลิปนี้ 20 นาที นานมาก ก็เท่านี้ก่อนนะครับ สวัสดีครับ