Olete sattunud konkurendi saidile või lihtsalt mõnele projektile, mis teile meeldis, ja esimene mõte: „Millega see üldse tehtud on? Mis teema, mis pluginad?" Tuttav olukord.

Kapoti all käitab WordPress üle kolmandiku kogu internetist ja peaaegu iga teine selle CMS-i sait näeb välja ja töötab erinevalt. Erinevad teemad, erinevad pluginakomplektid, unikaalsed tööriistakombinatsioonid. Kellegi teise disaini saladus ei pea jääma saladuseks: selle paljastamiseks on kolm viisi ja ükski neist ei nõua raha ega juurdepääsu sihtsaidi administraatoripaneelile.

Selles juhendis tutvustame kolme tõestatud meetodit: alates hiireklõpsust kuni käsitsi koodianalüüsini. Saate teada mitte ainult seda, millised tööriistad aitavad, vaid ka seda, kuidas neid kasutada, isegi kui te pole kunagi varem saidi lähtekoodi vaadanud.

💡 Kiirülevaade:

• Veebipõhised detektorid (Scantower, ScanWP, BuiltWith), kopeerige URL ja saage sekundiga teema nimi ning pluginanimekiri.
• Brauseri laiendus, CMS-i ja pluginade tuvastamine otse saidi sirvimise ajal, ilma kolmanda osapoole teenust külastamata.
• Käsitsi kontroll DevToolsi abil, neile, kes vajavad täielikku pilti: kõik ühendatud teema- ja pluginifailid on lähtekoodis nähtavad.

1. Veebipõhised teema- ja pluginadetektorid

Lihtsaim ja kiireim meetod: kleepige teid huvitava saidi URL detektori saidil olevasse vormi. Teenus skannib lehe, võrdleb leitud signatuure oma andmebaasiga ja annab tulemused: teema nimi, versioon, autor, ostulink ja tuvastatud pluginade nimekiri.

Selliseid tööriistu on mitu, igaühel oma fookus. Scantower näitab teemat ja pluginaid ning tuvastab ka majutusteenuse pakkuja. ScanWP on spetsialiseerunud just WordPressile ja suudab leida isegi harva kasutatavaid pluginaid, selle andmebaas sisaldab tuhandeid teemasid ja pluginaid ning algoritm otsib WordPressile iseloomulikke teekondi nagu /wp-content/themes/theme-name/style.css.

Kui detektor leiab teema oma andmebaasist, saate lisaks nimele ka kirjelduse, autori ja lingi teema lehele. Pange tähele: kohandatud teemasid, mida avalikult ei levitata, detektor ära ei tunne, nime asemel näete veateadet või teadet „teemat ei tuvastatud". Sama kehtib ka mitte-WordPressi saitide kohta: hea detektor ütleb teile kohe, et CMS on midagi muud.

Lisaks teema nimele näitavad ScanWP ja sarnased tööriistad üht või kahte silmapaistvamat pistikprogrammi. Näiteks võib tuvastaja WordPressi saidi puhul teatada, et kasutusel on WPBakery Page Builder, leheehitaja, mille pukseerimisfunktsioon jätab koodi iseloomulikke jälgi.

Sügavamaks tehniliseks analüüsiks on olemas BuiltWith. See vaatab palju laiemalt: näitab lisaks teemale ja pistikprogrammidele ka CDNi, majutusteenuse pakkujat, analüütikat, reklaamivõrke, SSL-sertifikaati, vidinaid ja kümneid muid tehnoloogiaid. Infot on palju, BuiltWithi liides on lihtsatest tuvastajatest keerukam, kuid kui on vaja mõista saidi kogu tehnoloogilist pinumudelit, on see tööriist asendamatu.

2. Brauseri laiendus

Veebipõhised tuvastajad on mugavad, kuid nõuavad iga kord kolmanda osapoole saidi külastamist ja URLi kleepimist. Kui uurite järjest paljusid saite, on kiirem, kui tuvastaja on otse brauseris.

ScanWP-l on Chrome'i laiendus, tasuta, paigaldamine võtab minuti. Pärast paigaldamist ilmub brauseri paremasse ülanurka ikoon, mis muutub sõltuvalt praeguse saidi CMS-ist. WordPressi saidil muutub ikoon stiliseeritud W-täheks sinisel taustal. Sellele klõpsates näete hüpikaknas teemat ja peamisi pistikprogramme.

Laiendus töötab lokaalselt: see analüüsib avatud lehe koodi ja võrdleb leitud signatuure oma andmebaasiga. Külastatud saitide kohta ei saadeta serverisse andmeid, erinevalt veebipõhistest tuvastajatest, kus sisestate URLi kellegi teise saidi vormi. Kümnete saitide regulaarseks analüüsimiseks säästab laiendus tohutult aega.

Alternatiiv, Wappalyzer, on universaalsem laiendus, mis tuvastab tehnoloogiaid mitte ainult WordPressis, vaid ka kõigil muudel platvormidel: Shopify, Wix, React, Vue, nginx, Cloudflare ja sadadel teistel. See näitab vähem WordPressi pistikprogramme kui spetsialiseeritud tuvastajad, kuid katab kogu tehnoloogilise pinumudeli.

3. Käsitsi kontrollimine arendaja tööriistade abil

Veebipõhised tuvastajad ja laiendused näitavad ainult osa pildist, näiteks võivad nad tosinast pistikprogrammist tuvastada ainult kaks või kolm kõige levinumat. Kui vajate täit pilti, peate koodi ise vaatama.

Chrome'is (ja igas kaasaegses brauseris) ava leht, tee paremklõps ja vali „Inspect" või vajuta Ctrl+Shift+I. Avaneb arendajatööriistade paneel, mis esmapilgul tundub hirmutav, kuid meie ülesande jaoks pead leidma vaid ühe asja.

Vajuta Ctrl+F ja sisesta koodiotsingu ribale style.css. Tulemusi peaks olema vähe ning üks neist on osa URL-ist, mis sisaldab teema asukohta: /wp-content/themes/theme-name/style.css. Nii saad teada aktiivse teema täpse nime, isegi kui see on eritellimusel valmistatud ja pole üheski avalikus kataloogis registreeritud.

Pluginatega on keerulisem. Need jätavad HTML-i jälgi: iga plugin ühendab oma CSS- ja JS-failid läbi /wp-content/plugins/plugin-name/. Arendajatööriistade paneelis mine vahekaardile „Sources" ja laienda saidi domeeni, näed kaustapuud wp-content/plugins/, kus iga alamkaust vastab ühele paigaldatud pluginale. Meetod on töömahukas, kuid annab kõige täielikuma nimekirja.

Sama lähenemine töötab ka Firefoxis ja Safaris. Kui pluginaid on palju ja sa ei taha käsitsi kaustu läbi sortida, võid kasutada Codeable teenust, mis kirjeldab kombineeritud meetodit: esmalt detektor, seejärel käsitsi kontroll iseloomulike HTML-klasside järgi.

Praktikas töötavad need kolm meetodit kõige paremini koos: kiire detektor annab sekundiga üldpildi, laiendus sobib igapäevaseks surfamiseks ja arendajatööriistad aitavad siis, kui on vaja süvitsi minna ja leida see, mis automaatsetel tööriistadel kahe silma vahele jäi.

⁉️🤔 Levinumad küsimused

Miks detektor ei näita kõiki pluginaid?

Sellised teenused nagu ScanWP tuvastavad pluginaid lehe HTML-koodis leiduvate signatuuride järgi. Kuid iga plugin ei jäta väliselt nähtavaid jälgi: taustatöötlust, turvalisust või vahemällu salvestamist teostavad pluginad võivad töötada täiesti kulisside taga. Mida populaarsem on plugin, seda suurem on tõenäosus, et detektor selle ära tunneb. Ametlikust WordPress.org kataloogist pärit tuhandete paigaldustega pluginad tuvastatakse peaaegu alati. Väga spetsiifilised või eritellimusel valmistatud pluginad aga peaaegu mitte kunagi. Just selleks ongi manuaalne meetod DevToolsi kaudu.

Kas teemat ja pluginaid on võimalik detektorite eest peita?

Jah, tehniliselt on see võimalik. Saate teemakausta ümber nimetada, eemaldada style.css failist standardsed WordPress'i kommentaarid, kasutada teekonna peitmise pluginaid (nagu Hide My WP). Kuid praktikas teevad seda väga vähesed: enamik saidiomanikke ei vaevu peitmisega, sest see ei paku tegelikku kaitset ning hägustamispluginad lõhuvad sageli saidi funktsionaalsust. Täielikku nähtamatust on peaaegu võimatu tagada, kaudsed märgid jäävad alati alles: HTML struktuur, CSS klassi nimed, skriptide laadimise järjekord. Kogenud arendaja tuvastab teema ja pluginad isegi „kaitstud" saidil.

Aga kui sait ei ole üldse WordPressis?

Sellised detektorid nagu BuiltWith ja Wappalyzer laiendus määravad platvormi enne teema otsimist. Shopify jaoks on olemas spetsiaalsed detektorid (Shopify Inspector, Coala), samuti Wixi ja Squarespace'i jaoks. Kui sait on kirjutatud puhtas HTML-is ilma CMS-ita, näete seda kohe: koodis ei ole iseloomulikke teekondi nagu /wp-content/, /skin/ või /assets/themes/. Igal juhul kontrollige alati kõigepealt platvormi. WordPressi teema otsimisele aja kulutamine saidil, mis töötab Tildal või kohandatud PHP-l, on mõttetu.

Kas detektorite eest peab maksma?

Kõik artiklis mainitud tööriistad on põhikasutuseks tasuta. ScanWP, Scantower ja BuiltWith näitavad teemat ja peamisi pluginaid ilma registreerimiseta. BuiltWithil on tasulised paketid hulgianalüüsiks ja ajaloolistele andmetele juurdepääsuks, kuid ühekordseks teemaotsinguks pole neid vaja. Chrome'i laiendused on samuti tasuta. Manuaalne meetod DevToolsi kaudu ei nõua üldse kolmandate osapoolte tööriistu, ainult brauserit.

Kas kellegi teise saidi kujundust saab kopeerida, teades teemat ja pluginaid?

Tehniliselt jah. Kui saite teada, et sait kasutab Astra teemat ja Elementori pluginat, saate need ise paigaldada ja saada sama aluse. Kuid täpne kujunduse kopeerimine nõuab seadistamist: värvid, fondid, plokkide paigutus, kohandatud CSS-i näpunäited, kõik see on iga saidi puhul unikaalne ega kopeeru automaatselt. Lisaks ärge unustage piltide ja tekstide autoriõigusi. Teema ja pluginad on vundament. Selle peal olev kujundus on disaineri või saidiomaniku töö tulemus. Artiklis kirjeldatud tööriistad aitavad teil mõista tehnoloogilist alust, kuid ei tee teie eest täpset klooni.

Kas tasub teise koodi süveneda või piisab detektorist?

Veebipõhine detektor katab valdava enamuse ülesandeid: teema, peamised pluginad ja majutusteenuse saate teada sekunditega. Kui te lihtsalt kaardistate turgu või otsite inspiratsiooni, siis sellest piisab.

Brauserilaiendus kiirendab protsessi kordades, kui saite on palju, ja töötab otse surfamise ajal, teid ei sega isegi lehitsemiselt kõrvale.

DevTools on neile, kes vajavad täielikku pilti ega karda kapoti alla piiluda. See on ainus viis kõigi pluginatega, sealhulgas taustatöötluse omadega, leidmiseks ja saidi struktuuri põhjalikuks mõistmiseks.

Alustage detektorist. Kui tulemus on puudulik, paigaldage laiendus. Kui sellest ei piisa, avage DevTools. Kolm tööriista, kolm sügavustaset ja kõik kolm on tasuta.