WordPress Reverse Engineering: วิธีทำซ้ำไซต์ WordPress
เผยแพร่แล้ว: 2018-05-24เว็บนี้ดูดีมาก ฉันหวังว่าฉันจะมีเว็บไซต์แบบนั้น
ฟังดูคุ้นเคยไหม?
นั่นคือความคิดของบล็อกเกอร์แทบทุกคนเมื่อพวกเขาเห็นเว็บไซต์ แสดงอินเทอร์เฟซผู้ใช้ สี แบบอักษร และอื่นๆ ที่ยอดเยี่ยม
ฉันติดอยู่ในสถานการณ์เดียวกันหลายครั้งและรู้ว่ามีบางอย่างต้องทำ ดังนั้นฉันจึงไปข้างหน้าและทำวิจัยของฉัน
โดยเฉพาะอย่างยิ่ง ฉันพบเครื่องมือที่สามารถถอดรหัสเว็บไซต์ เปิดเผยความลับที่ซ่อนอยู่ทั้งหมด
ในบทความนี้ ฉันกำลังแบ่งปันกลยุทธ์ WordPress Reverse Engineering และรายการเครื่องมือที่คุณสามารถใช้เพื่อจำลองไซต์ WordPress ใดๆ
แต่ Shafi ทำไมต้อง WordPress? คุณอาจถาม
เหตุผลค่อนข้างง่าย WordPress เป็นหนึ่งในระบบจัดการเนื้อหาที่ได้รับความนิยมมากที่สุด และขับเคลื่อน 28.6% ของเว็บไซต์ทั้งหมดบนอินเทอร์เน็ต
น่าแปลกที่ทุกวันมีการเปิดตัวไซต์ WordPress มากกว่า 50,000 ไซต์ ( แหล่งที่มา ) และไซต์ยอดนิยมเช่น TechCrunch, Disney, Sony และอื่น ๆ กำลังใช้ WordPress เพื่อเรียกใช้ไซต์ของพวกเขา ( แหล่งที่มา )
ฉันหวังว่ามันจะตอบคำถามของคุณ
[click_to_tweet tweet=”ทุกๆ วัน มีการเปิดตัวบล็อก WordPress 50,000 บล็อก และการมีการออกแบบและการทำงานที่ยอดเยี่ยมเป็นสิ่งสำคัญ ต่อไปนี้เป็น 5 ขั้นตอนในการคัดลอกบล็อก WordPress #WordPress #OceanWP #WordPressFacts” quote=”คุณทราบหรือไม่ว่าบล็อก WordPress ใหม่เปิดตัวทุกวัน 50,000 บล็อก #WordPressFacts”]
พร้อมที่จะม้วน? มาเริ่มกันเลย.
ขั้นตอนที่ 0: ตรวจสอบว่าไซต์ใช้ WordPress . หรือไม่
คุณเห็นว่ากำลังมาใช่ไหม
แน่นอน สิ่งแรกที่เราต้องทำคือ ตรวจสอบว่าไซต์โปรดของเราใช้ WordPress หรือไม่ หากไม่เป็นเช่นนั้น ก็ไม่มีประโยชน์ในการปฏิบัติตามกลยุทธ์นี้ และคุณจะต้องเกาหัวในขั้นตอนต่อไป
ในการตรวจสอบว่าระบบจัดการเนื้อหา (CMS) ใดขับเคลื่อนเว็บไซต์ เราจะใช้ WhatCMS.org ซึ่งเป็นเครื่องมือออนไลน์ฟรี
การใช้เครื่องมือนี้ตรงไปตรงมา คัดลอกเว็บไซต์ที่จะทดสอบ ป้อนลงในช่องเว็บไซต์ที่ให้ไว้ แล้วกด Enter

เครื่องมือจะเรียกใช้ชุดของอัลกอริทึมและให้ผลลัพธ์ที่แสดงว่าเว็บไซต์ใช้ CMS ใด
ขั้นตอนที่ 1: คัดลอกการออกแบบ
ขั้นตอนต่อไปที่ชัดเจนคือการตรวจสอบว่าไซต์ดังกล่าวใช้ธีม WordPress ใด โปรดทราบว่ามีธีม WordPress ฟรีและพรีเมียมให้เลือกใช้อย่างน้อยหนึ่งหมื่น ซึ่งทำให้เจ้าของเว็บไซต์มีตัวเลือกเพียงพอ
นอกจากนี้ เจ้าของเว็บไซต์จำนวนมากยังใช้ธีมที่พัฒนาขึ้นเองซึ่งอาจเป็นเวอร์ชันของเฟรมเวิร์กที่ปรับแต่งเองหรือธีมที่เขียนโค้ดใหม่ทั้งหมด
หากต้องการตรวจสอบว่ามีการใช้ธีม WordPress ใด คุณสามารถใช้ WPThemeDetector.com ซึ่งเป็นเครื่องมือฟรีอีกตัวหนึ่ง
เครื่องมือนี้ล้ำหน้าและตรวจจับธีมหรือเฟรมเวิร์กพื้นฐานได้อย่างง่ายดาย (แม้ว่าจะซ่อนอยู่) ซึ่งเป็นสิ่งที่ไม่สามารถทำได้กับเครื่องมืออื่นๆ ที่คล้ายคลึงกัน เช่น WhatWPThemeIsThat.com

นอกเหนือจากการตรวจจับธีม เครื่องมือนี้ยังให้ข้อมูลเพิ่มเติมเกี่ยวกับนักพัฒนา จำนวนไซต์อื่นๆ ที่ใช้ธีมนี้ และลิงก์ที่เป็นทางการ
จะทำอย่างไรถ้าไซต์ใช้ธีมที่กำหนดเอง
ดังที่ได้กล่าวไว้ก่อนหน้านี้ เป็นไปได้มากที่บางไซต์อาจใช้ธีมแบบกำหนดเองที่พัฒนาขึ้นใหม่ทั้งหมด ในกรณีเช่นนี้ เครื่องมือข้างต้นไม่ได้ช่วยอะไรมาก
แต่อย่าเพิ่งหมดหวัง คุณสามารถออกแบบเว็บไซต์แบบเดียวกันได้โดยใช้ชุด รูปแบบ OceanWP และตัวสร้างเพจ เช่น Elementor
OceanWP เป็นธีมที่ปรับแต่งได้ง่ายที่สุดที่คุณเคยพบและรวมเข้ากับเครื่องมือสร้างเพจ ที่ใช้งานง่ายและใช้งานง่ายเหมือน Elementor มอบพลังทั้งหมดในมือคุณ
คุณสามารถลากและวางส่วนประกอบที่สร้างไว้ล่วงหน้า ปรับขนาด/สี เพิ่มการปรับแต่ง CSS เล็กน้อย และรับการออกแบบที่ใกล้เคียงกัน
ขั้นตอนที่ 2: รับฟังก์ชันที่ถูกต้อง!
เอาล่ะ คุณออกแบบได้ถูกต้องแล้ว และไซต์ WordPress ที่คุณสร้างใหม่ก็ดูคล้ายคลึงกัน แต่มันไม่มีอะไรเลยหากไม่มีฟังก์ชันที่คล้ายคลึงกันหรือฉันควรพูดว่าปลั๊กอิน
ไซต์ WordPress โดยเฉลี่ยมีปลั๊กอินอย่างน้อย 10 ตัว โดยแต่ละปลั๊กอินมีฟังก์ชันการทำงานเฉพาะ
เว็บไซต์ในอุดมคติของคุณยังใช้ปลั๊กอินหลายตัวเพื่อให้มีการทำงานที่ทันสมัยและประสบการณ์ผู้ใช้ นอกจากนี้ ยังเป็นความคิดที่ดีที่จะรับข้อมูลปลั๊กอิน เนื่องจากพวกเขาจะได้ลองใช้ปลั๊กอินหลายตัวก่อนที่จะตัดสินใจเลือกปลั๊กอินนั้น
แม้ว่าจะเป็นเรื่องยากที่จะได้รับรายการปลั๊กอินที่ใช้ (นักพัฒนาหลายคนซ่อนชื่อและข้อมูลไว้) scanwp.net สามารถดึงข้อมูลได้อย่างมีประสิทธิภาพ


นอกจากนี้ยังพบลิงก์อย่างเป็นทางการสำหรับปลั๊กอินที่มีอยู่ในที่เก็บ WordPress และหากฟรีหรือไม่
ขั้นตอนที่ 3: อย่าลืมประสบการณ์การอ่าน
ตามที่อธิบายไว้ใน ที่ นี้ การใช้แบบอักษรอาจส่งผลต่อการตอบกลับของแต่ละรายการในเนื้อหา
ในการทดสอบข้างต้น คนกลุ่มแรก (ด้วยแบบอักษรที่อ่านง่าย) คาดว่างานจะใช้เวลา 8.2 นาทีจึงจะเสร็จ ในขณะที่กลุ่มที่สอง (ที่มีฟอนต์ที่อ่านยาก) ใช้เวลาประมาณ 15.1 นาที

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

คุณไม่เพียงแค่ได้ฟอนต์ที่แน่นอนเท่านั้น แต่ยังรวมถึงขนาดฟอนต์ สไตล์ น้ำหนัก และลิงก์ไปยังฟอนต์เว็บของ Google เพื่อดาวน์โหลด
ขั้นตอนที่ 4: มีคนพูดว่าสีหรือไม่?
อีกครั้ง สีเป็นสิ่งที่เกี่ยวข้องกับจิตวิทยาของมนุษย์ และผู้เชี่ยวชาญแนะนำให้ใช้จานสีที่เหมาะสมที่สุดตามเฉพาะเว็บไซต์
ตาม Kissmetrics สีส่งผลต่อพฤติกรรมการซื้อและขึ้นอยู่กับประเภทผู้ชม คุณควรเลือกรูปแบบสีที่เหมาะสม

แม้ว่าคุณจะสามารถดูและรับชุดรูปแบบสีที่ใช้โดยเว็บไซต์โปรดของคุณได้ แต่การรับเฉดสีและรหัสฐานสิบหกนั้นเหมาะสมกว่า
ColorCombos.com มีเครื่องมือออนไลน์ที่สามารถหยิบพาเลทสีที่ใช้โดยหน้าเว็บได้ คุณเพียงแค่ต้องป้อน URL ของหน้าและกด Enter
ในไม่กี่วินาที คุณจะได้รับรายการพาเลทสีทั้งหมดที่ใช้บ่อยบนเว็บไซต์พร้อมรหัสฐานสิบหกและตัวเลือกในการดาวน์โหลดชุดสี
ขั้นตอนที่ 5: ความเร็วเว็บไซต์
ฉันค่อนข้างมั่นใจว่าความประทับใจแรกที่คุณได้รับเกี่ยวกับไซต์นั้นเป็นเพราะความเร็วในการโหลด ไม่ว่าการออกแบบหรือส่วนต่อประสานผู้ใช้จะดีเพียงใด หากโหลดภายใน 3-4 วินาทีขึ้นไป แสดงว่าคุณปิดแท็บแล้วไม่กลับมาอีก
เว็บโฮสติ้งเป็นหนึ่งในสาเหตุหลักที่ทำให้โหลดได้เร็ว และคุณอาจสงสัยว่าโฮสติ้งใดที่ใช้ขับเคลื่อนไซต์นี้ หากคุณไม่สามารถหาคำตอบได้จากการท่องเว็บไซต์ (โดยส่วนใหญ่จะเขียนไว้ในส่วนท้าย) คุณสามารถใช้ เครื่องมือของ HostAdvice.com เพื่อรับผู้ให้บริการโฮสติ้ง
ไม่เหมือนกับเครื่องมืออื่นๆ ที่ใช้ Nameserver เพื่อตรวจหาโฮสต์เว็บเท่านั้น เครื่องมือนี้สามารถเปิดเผยโฮสต์ที่ซ่อนอยู่ได้จริงในกรณีที่มีการใช้งาน CDN
หากไม่มีเครื่องมือนี้ ฉันไม่เคยรู้มาก่อนว่า OceanWP.org โฮสต์บน Google Cloud Platform ร่วมกับ CloudFlare CDN (ซึ่งอธิบายเวลาในการโหลดที่เร็วมาก)

นอกจากนี้ คุณสามารถดูแผนการโฮสต์และบทวิจารณ์ของผู้ใช้ได้จากหน้าเดียวกัน
บทสรุป
ไปเลย!
ตอนนี้คุณเป็นนักลอบสังหารที่เป็นความลับซึ่งสามารถ ย้อนกลับวิศวกรรมเว็บไซต์ WordPress ได้อย่างรวดเร็วและทำซ้ำได้ตั้งแต่การออกแบบไปจนถึงฟังก์ชันการทำงานของเว็บไซต์
หากมีสิ่งอื่นที่คุณต้องการบนไซต์ของคุณแต่ไม่สามารถหาวิธีดำเนินการได้ ให้ลองติดต่อเจ้าของไซต์โดยตรง ในกรณีส่วนใหญ่ พวกเขาจะแนะนำคุณถึงแหล่งที่มาของฟังก์ชันการทำงานหรือผู้พัฒนาที่เขียนมัน
คุณมีเครื่องมือลับใด ๆ ที่คุณใช้เพื่อทำซ้ำเว็บไซต์ WordPress หรือไม่? ฉันชอบที่จะได้ยินเกี่ยวกับเรื่องนี้ แสดงความคิดเห็นและเราสามารถพูดคุยได้ อย่าลืมแชร์บทความนี้กับเพื่อนที่รัก WordPress ซึ่งอาจเป็นประโยชน์