WordPress SEO

วิธีแกะรอย Script ธีมเวิร์ดเพรส (theme wordpress) ที่ขายใน Themeforest

Posted on by Nukrob Pradubjan
premium theme
05
เม.ย.

คำพูดจากวีดีโอ

วิธีแกะรอย Script ธีมเวิร์ดเพรส ที่ขายใน Themeforest

บทความนี้เป็นคำแนะนำเชิงเทคนิคสำหรับผู้ที่ต้องการเจาะลึกการทำงานของธีม WordPress ระดับพรีเมียม โดยเฉพาะที่ขายใน Themeforest. เป้าหมายคือการเข้าใจว่านักพัฒนาธีมเก่งๆ ใช้เทคนิคอะไรในการสร้างฟังก์ชันต่างๆ เช่น เมนูเลื่อนลง (Dropdown), แท็บ (Tab), หรือเอฟเฟกต์ภาพ.

สิ่งที่ควรรู้ก่อนเริ่มแกะรอย (Prerequisites):
การแกะรอย Script เหล่านี้จำเป็นต้องมีพื้นฐานความรู้เกี่ยวกับโครงสร้าง WordPress, การใช้ HTML ใน WordPress, การสร้าง Theme Option และมีความรู้พื้นฐานเกี่ยวกับปลั๊กอิน. หากไม่มีพื้นฐานเหล่านี้ การแกะรอยอาจทำได้ยาก.

ฟังก์ชันเด่นๆ ที่มีการพูดถึงและวิธีแกะรอย (พร้อมกรณีศึกษาจากธีม Orion Press):

  1. เมนูเลื่อนลง (Dropdown Menu / Navigation Level):
    • การสังเกต: เมนูที่มีสัญลักษณ์สี่เหลี่ยมด้านหลังและคลิกแล้วมีรายการย่อยเลื่อนลงมา.
    • วิธีแกะรอย: ผู้เขียนชี้ว่าธีมส่วนใหญ่ใช้ wp-bootstrap-navwalker ซึ่งเป็นไลบรารีที่ช่วยดึง Bootstrap มาใช้กับเมนู WordPress. สามารถหาข้อมูลเพิ่มเติมและวิธีการใช้งานได้จาก GitHub.
  2. แท็บ (Tab):
    • การสังเกต: ฟังก์ชันที่เปลี่ยนเนื้อหาในหน้าโดยไม่มีการโหลดหน้าใหม่ มักใช้ JavaScript เข้ามาช่วย.
    • วิธีแกะรอย: ผู้เขียนระบุว่านี่เป็น “อาวุธลับ” ของนักพัฒนาบางคนและค่อนข้างซับซ้อน. วิธีที่ดีที่สุดในการแกะรอยโค้ด PHP/JavaScript ที่เป็นส่วนสำคัญนี้คือ การซื้อธีมนั้นมาโดยตรง เพื่อเข้าถึงไฟล์โค้ดทั้งหมด (เพราะไม่สามารถดูโค้ด PHP ได้จากหน้าเว็บ). เมื่อซื้อมาแล้ว สามารถเข้าไปตรวจสอบโค้ดในส่วน Widgets หรือไฟล์ tabber ที่เกี่ยวข้อง.
  3. การเอาเมาส์ไปชี้ที่ภาพแล้วมีปุ่มวิ่ง/ภาพขยาย (Image Hover Effects):
    • การสังเกต: เมื่อเลื่อนเมาส์ไปบนภาพ แล้วมีองค์ประกอบอื่นปรากฏขึ้นหรือภาพขยาย.
    • วิธีแกะรอย:
      • ตรวจสอบว่าเป็น JavaScript หรือ CSS: ใช้ Google Chrome Developer Tools (Inspect Element) และลอง “Disable JavaScript” เพื่อดูว่าเอฟเฟกต์ยังทำงานอยู่หรือไม่.
      • ถ้าเป็น CSS: ใช้เครื่องมือตรวจสอบโค้ด (แว่นขยาย) ไล่ดูโค้ด CSS ที่เกี่ยวข้องกับการเปลี่ยนแปลง transform (เช่น scale) หรือ opacity ขององค์ประกอบเมื่อมีการ hover. มักจะพบว่ามีการตั้งค่าเริ่มต้นให้ opacity เป็น 0 และเปลี่ยนเป็นค่าอื่นเมื่อเมาส์ชี้ไป.
  4. การคลิกที่ภาพแล้วมี Pop-up/Modal ขยายขึ้นมา (Model Image / Lightbox):
    • การสังเกต: เมื่อคลิกที่รูปภาพแล้วมี Pop-up ขนาดใหญ่ปรากฏขึ้นพร้อมรูปภาพ.
    • วิธีแกะรอย:
      • ใช้ Chrome Developer Tools: คลิกที่ภาพแล้วสังเกตว่ามี Class ใหม่ปรากฏขึ้นในแท็ก <body> (เช่น mfp-zoom-out-cur).
      • ค้นหา Class ในไฟล์ธีม: นำ Class ที่พบไปค้นหาในไฟล์โค้ดของธีม (หลังจากซื้อมาแล้ว). มักจะพบในไฟล์ JavaScript.
      • De-minify JavaScript: ไฟล์ JavaScript ส่วนใหญ่มักจะถูกย่อขนาด (minified) เพื่อให้โหลดเร็ว. ต้องนำโค้ดที่ได้ไปใช้เครื่องมือ “JavaScript Code Beautifier” ออนไลน์ เพื่อจัดเรียงโค้ดให้อ่านง่าย.
      • อ่าน Comment และค้นหาต้นตอ: ในโค้ดที่จัดเรียงแล้ว ให้มองหา comment (ข้อความอธิบายในโค้ด) ที่มักจะระบุชื่อไลบรารีหรือนักพัฒนา (เช่น “Magnific Popup by Dmitry”). จากนั้นนำชื่อไลบรารีไปค้นหาต่อเพื่อดูรายละเอียดและ ตรวจสอบ License (เช่น MIT license ที่อนุญาตให้ใช้เชิงพาณิชย์) ก่อนนำมาใช้.
  5. เมนูที่เลื่อนตามหน้าจอ (Sticky/Fixed Menu):
    • การสังเกต: เมนูหลักที่ยังคงปรากฏอยู่ที่ด้านบนของหน้าจอเมื่อเราเลื่อนหน้าเว็บลงมา.
    • วิธีแกะรอย:
      • ค้นหาคำว่า “sticky” ในไฟล์ JavaScript: มักจะเป็นคำใบ้ถึงฟังก์ชันที่ทำให้เมนูติดอยู่กับที่.
      • ตรวจสอบ CSS: ฟังก์ชันนี้มักทำงานร่วมกับ CSS โดยเปลี่ยน position ของเมนูให้เป็น fixed เมื่อเลื่อนถึงจุดที่กำหนด.

ข้อคิดและข้อควรระวังในการแกะรอย:

  • ความคุ้มค่า: ก่อนลงทุนเวลาแกะรอย ควรพิจารณาว่าเทคนิคที่ได้มานั้นคุ้มค่าหรือไม่.
  • โค้ดที่ซับซ้อน: โค้ดของนักพัฒนามืออาชีพอาจมีความซับซ้อนมาก และบางส่วนอาจต้องซื้อธีมมาเพื่อเข้าถึงโค้ด PHP ที่ไม่สามารถดูได้จากหน้าเว็บ.
  • พื้นฐานสำคัญ: การแกะรอยเป็นทักษะขั้นสูง การมีพื้นฐานที่แข็งแกร่งในการเขียนโค้ด (เช่น PHP, JavaScript, CSS) เป็นสิ่งสำคัญมาก.
  • License: ต้องตรวจสอบ License ของ Script หรือไลบรารีที่เจอทุกครั้ง เพื่อให้แน่ใจว่าสามารถนำมาใช้ได้อย่างถูกกฎหมาย.

สรุป:
การแกะรอย Script ธีม WordPress เป็นกระบวนการที่ต้องใช้ความรู้ทางเทคนิคและทักษะในการวิเคราะห์โค้ดอย่างละเอียด. เป็นหนึ่งในวิธีที่ดีที่สุดในการเรียนรู้เทคนิคการเขียนโค้ดจากนักพัฒนาที่เชี่ยวชาญ แต่ก็เป็นอันดับสุดท้ายของการเรียนรู้หลังจากที่เข้าใจพื้นฐานทั้งหมดแล้ว.

กังวลใช่ไหม? ให้มืออาชีพช่วยดูแลเว็บไซต์ของคุณ

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

  1. บริการตรวจสอบและแก้ไขครบวงจร: หากคุณต้องการให้เราตรวจสอบปัญหาทั้งหมด ตั้งแต่สคริปต์ที่ซ่อนอยู่ไปจนถึงปัญหา SEO เชิงเทคนิคอื่นๆ และจัดการแก้ไขให้เรียบร้อย บริการรับทำ SEO ของเราคือคำตอบ
  2. บริการให้คำปรึกษาเพื่อแก้ไขด้วยตนเอง: หากคุณอยากลองแก้ไขด้วยตนเองแต่ต้องการผู้เชี่ยวชาญคอยชี้แนะ สามารถใช้ บริการที่ปรึกษา SEO เพื่อวิเคราะห์ปัญหาและวางแผนการแก้ไขร่วมกัน และหากอยากทราบว่า ที่ปรึกษา SEO คือ ใครและช่วยอะไรได้บ้าง สามารถอ่านเพิ่มเติมได้ที่นี่
  3. เรียนรู้เพื่อป้องกันปัญหาในระยะยาว: วิธีที่ดีที่สุดคือการป้องกันไม่ให้เกิดปัญหาตั้งแต่แรก เรียนรู้วิธีการเลือกธีมที่ปลอดภัยและหลักการทำ Technical SEO ที่ถูกต้องใน คอร์สเรียน SEO ของเรา