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

ตรวจสอบว่าไซต์ใช้ WordPress . อยู่หรือไม่

เครื่องมือจะเรียกใช้ชุดของอัลกอริทึมและให้ผลลัพธ์ที่แสดงว่าเว็บไซต์ใช้ 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 (อยู่ที่มุมบนขวาของหน้าจอ) แล้ววางเมาส์เหนือข้อความ

วิธีค้นหาเว็บไซต์ Font

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

ขั้นตอนที่ 4: มีคนพูดว่าสีหรือไม่?

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

ตาม Kissmetrics สีส่งผลต่อพฤติกรรมการซื้อและขึ้นอยู่กับประเภทผู้ชม คุณควรเลือกรูปแบบสีที่เหมาะสม

โครงร่างสีของเว็บไซต์

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

ColorCombos.com มีเครื่องมือออนไลน์ที่สามารถหยิบพาเลทสีที่ใช้โดยหน้าเว็บได้ คุณเพียงแค่ต้องป้อน URL ของหน้าและกด Enter

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

ขั้นตอนที่ 5: ความเร็วเว็บไซต์

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

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

ไม่เหมือนกับเครื่องมืออื่นๆ ที่ใช้ Nameserver เพื่อตรวจหาโฮสต์เว็บเท่านั้น เครื่องมือนี้สามารถเปิดเผยโฮสต์ที่ซ่อนอยู่ได้จริงในกรณีที่มีการใช้งาน CDN

หากไม่มีเครื่องมือนี้ ฉันไม่เคยรู้มาก่อนว่า OceanWP.org โฮสต์บน Google Cloud Platform ร่วมกับ CloudFlare CDN (ซึ่งอธิบายเวลาในการโหลดที่เร็วมาก)

วิธีค้นหาโฮสต์เว็บไซต์โดยใช้ชื่อโดเมน

นอกจากนี้ คุณสามารถดูแผนการโฮสต์และบทวิจารณ์ของผู้ใช้ได้จากหน้าเดียวกัน

บทสรุป

ไปเลย!

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

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

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