Olet päätynyt kilpailijan sivustolle tai vain projektiin, josta pidit, ja ensimmäinen ajatus: "Millä tämä on edes rakennettu? Mikä teema, mitkä lisäosat?" Kuulostaa tutulta.

Konepellin alla WordPress pyörittää yli kolmasosaa koko internetistä, ja lähes jokainen tällä julkaisujärjestelmällä tehty sivusto näyttää ja toimii eri tavalla. Eri teemoja, eri lisäosayhdistelmiä, uniikkeja työkaluyhdistelmiä. Jonkun toisen suunnittelun salaisuuden ei tarvitse pysyä salaisuutena: on kolme tapaa paljastaa se, eikä mikään niistä vaadi rahaa eikä pääsyä kohdesivuston hallintapaneeliin.

Tässä oppaassa kolme testattua menetelmää: hiiren klikkauksesta manuaaliseen koodianalyysiin. Opit paitsi mitkä työkalut voivat auttaa, myös miten niitä käytetään, vaikka et olisi koskaan aiemmin katsonut sivuston lähdekoodia.

💡 Pikaopas:

• Verkkotunnistimet (Scantower, ScanWP, BuiltWith): kopioi URL-osoite, saat teeman nimen ja lisäosalistan sekunnissa.
• Selainlaajennus: julkaisujärjestelmän ja lisäosien tunnistus suoraan sivustoa selatessa, ilman kolmannen osapuolen palvelussa vierailua.
• Manuaalinen tarkistus DevTools-työkaluilla niille, jotka tarvitsevat kokonaiskuvan: kaikki käytetyt teema- ja lisäosatiedostot näkyvät lähdekoodissa.

1. Verkkopohjaiset teema- ja lisäosatunnistimet

Yksinkertaisin ja nopein tapa: liitä kiinnostavan sivuston URL-osoite tunnistinsivuston lomakkeeseen. Palvelu skannaa sivun, vertaa löytämiään tunnisteita tietokantaansa ja antaa tulokset: teeman nimi, versio, tekijä, ostolinkki ja lista havaituista lisäosista.

Tällaisia työkaluja on useita, jokaisella oma painopisteensä. Scantower näyttää teeman ja lisäosat sekä tunnistaa myös hosting-palveluntarjoajan. ScanWP on erikoistunut nimenomaan WordPressiin ja löytää jopa harvoin käytetyt lisäosat; sen tietokanta sisältää tuhansia teemoja ja lisäosia, ja algoritmi hakee WordPressille tyypillisistä poluista, kuten /wp-content/themes/theme-name/style.css.

Jos tunnistin löytää teeman tietokannastaan, saat nimen lisäksi myös kuvauksen, tekijän ja linkin teemasivulle. Huomio: julkisesti jakamattomia räätälöityjä teemoja tunnistin ei tunnista, jolloin nimen sijasta näet virheilmoituksen tai "teemaa ei tunnistettu". Sama koskee muita kuin WordPress-sivustoja: hyvä tunnistin kertoo heti, että kyseessä on eri julkaisujärjestelmä.

Teeman nimen lisäksi ScanWP ja vastaavat työkalut näyttävät yhden tai kaksi näkyvintä lisäosaa. Esimerkiksi WordPress-sivuston kohdalla tunnistin saattaa kertoa, että käytössä on WPBakery Page Builder, sivunrakentaja, jossa on vedä ja pudota -toiminto ja joka jättää koodiin tunnusomaisia jälkiä.

Syvällisempään tekniseen analyysiin on olemassa BuiltWith. Se katsoo paljon laajemmin: se näyttää teeman ja lisäosien lisäksi myös CDN:n, hosting-palveluntarjoajan, analytiikan, mainosverkostot, SSL-varmenteen, widgetit ja kymmeniä muita teknologioita. Tietoa on paljon, ja BuiltWithin käyttöliittymä on monimutkaisempi kuin yksinkertaisten tunnistimien, mutta jos haluat ymmärtää sivuston koko teknologiapinon, tämä työkalu on korvaamaton.

2. Selainlaajennus

Verkkotunnistimet ovat käteviä, mutta ne edellyttävät vierailua kolmannen osapuolen sivustolla ja URL-osoitteen liittämistä joka kerta. Jos tutkit useita sivustoja peräkkäin, on nopeampaa, että tunnistin on suoraan selaimessasi.

ScanWP:llä on Chrome-laajennus, joka on ilmainen, ja sen asennus vie minuutin. Asennuksen jälkeen selaimen oikeaan yläkulmaan ilmestyy kuvake, joka vaihtuu sen mukaan, mikä on kulloisenkin sivuston CMS. WordPress-sivustolla kuvake muuttuu tyylitellyksi W-kirjaimeksi sinisellä taustalla. Klikkaa sitä, ja ponnahdusikkunassa näet teeman ja tärkeimmät lisäosat.

Laajennus toimii paikallisesti: se analysoi avoimen sivun koodin ja vertaa löytämiään tunnisteita tietokantaansa. Vierailtujen sivustojen tietoja ei lähetetä millekään palvelimelle, toisin kuin verkkotunnistimissa, joissa syötät URL-osoitteen jonkun toisen sivuston lomakkeeseen. Kymmenien sivustojen säännölliseen analysointiin laajennus säästää valtavasti aikaa.

Vaihtoehto, Wappalyzer, on yleiskäyttöisempi laajennus, joka tunnistaa teknologioita WordPressin lisäksi myös muilta alustoilta: Shopify, Wix, React, Vue, nginx, Cloudflare ja sadat muut. Se näyttää vähemmän WordPress-lisäosia kuin erikoistuneet tunnistimet, mutta kattaa koko teknologiapinon.

3. Manuaalinen tarkistus kehittäjätyökaluilla

Verkkotunnistimet ja laajennukset näyttävät vain osan kokonaiskuvasta, esimerkiksi kymmenestä lisäosasta ne saattavat havaita vain kaksi tai kolme yleisintä. Jos tarvitset täyden kuvan, sinun on katsottava koodia.

Avaa sivu Chromessa (tai missä tahansa nykyaikaisessa selaimessa), klikkaa hiiren kakkospainikkeella ja valitse "Tutki" tai paina Ctrl+Shift+I. Kehittäjätyökalujen paneeli avautuu, ensi silmäyksellä pelottavan näköisenä, mutta tähän tehtävään tarvitset vain yhden asian.

Paina Ctrl+F ja kirjoita koodihakuun style.css. Tuloksia pitäisi olla vähän, ja yksi niistä on osa URL-osoitetta, joka sisältää polun teemaan: /wp-content/themes/theme-name/style.css. Näin saat selville aktiivisen teeman tarkan nimen, vaikka se olisi räätälöity eikä sitä olisi rekisteröity mihinkään julkiseen luetteloon.

Lisäosien kanssa tilanne on monimutkaisempi. Ne jättävät jälkiä HTML:ään: jokainen lisäosa liittää CSS- ja JS-tiedostonsa polun /wp-content/plugins/plugin-name/ kautta. Siirry DevTools-paneelissa "Sources"-välilehdelle ja laajenna sivuston verkkotunnus, niin näet kansiopuun wp-content/plugins/, jossa jokainen alikansio vastaa yhtä asennettua lisäosaa. Menetelmä on työläs, mutta antaa täydellisimmän listan.

Tämä sama lähestymistapa toimii Firefoxissa ja Safarissa. Jos lisäosia on paljon etkä halua käydä kansioita manuaalisesti läpi, voit käyttää Codeable-palvelua, joka kuvaa yhdistetyn menetelmän: ensin ilmaisin, sitten manuaalinen tarkistus HTML:n tunnusomaisten luokkien perusteella.

Käytännössä nämä kolme menetelmää toimivat parhaiten yhdessä: nopea ilmaisin antaa yleiskuvan sekunnissa, laajennus jokapäiväiseen surffailuun ja DevTools silloin, kun täytyy kaivaa syvemmälle ja löytää se, mikä automaattisilta työkaluilta jäi huomaamatta.

⁉️🤔 Yleisiä kysymyksiä

Miksi tunnistin ei näytä kaikkia lisäosia?

Palvelut kuten ScanWP löytävät lisäosia sivun HTML-koodissa olevien tunnisteiden perusteella. Kaikki lisäosat eivät kuitenkaan jätä ulospäin näkyviä jälkiä: taustajärjestelmän, tietoturvan tai välimuistin lisäosat voivat toimia täysin kulissien takana. Mitä suositumpi lisäosa, sitä todennäköisemmin tunnistin tunnistaa sen. Virallisen WordPress.org-hakemiston lisäosat, joilla on tuhansia asennuksia, havaitaan lähes aina. Erikoistuneet tai räätälöidyt lisäosat taas jäävät lähes aina huomaamatta. Juuri tätä varten on olemassa manuaalinen menetelmä DevToolsin kautta.

Onko mahdollista piilottaa teema ja lisäosat tunnistimilta?

Kyllä, teknisesti se on mahdollista. Voit nimetä teemakansion uudelleen, poistaa style.css-tiedoston standardit WordPress-kommentit ja käyttää polkuja piilottavia lisäosia (kuten Hide My WP). Käytännössä kuitenkin hyvin harva tekee näin: useimmat sivuston omistajat eivät vaivaudu piilottamiseen, koska se ei tarjoa todellista suojaa, ja hämärryslisäosat rikkovat usein sivuston toiminnallisuuden. Täydellistä näkymättömyyttä on lähes mahdotonta varmistaa, sillä epäsuoria merkkejä jää aina: HTML-rakenne, CSS-luokkien nimet, skriptien latausjärjestys. Kokenut kehittäjä tunnistaa teeman ja lisäosat jopa "suojatulta" sivustolta.

Entä jos sivusto ei ole lainkaan WordPress?

Tunnistimet kuten BuiltWith ja Wappalyzer-laajennus määrittävät alustan ennen teeman etsimistä. Shopifyta varten on omat tunnistimensa (Shopify Inspector, Coala), samoin Wixille ja Squarespacelle. Jos sivusto on kirjoitettu puhtaalla HTML:llä ilman CMS:ää, huomaat sen heti: koodissa ei ole tunnusomaisia polkuja kuten /wp-content/, /skin/ tai /assets/themes/. Tarkista siis aina ensin alusta. On turhaa käyttää aikaa WordPress-teeman etsimiseen sivustolta, joka pyörii Tildalla tai räätälöidyllä PHP:lla.

Täytyykö tunnistimista maksaa?

Kaikki artikkelissa mainitut työkalut ovat peruskäytössä ilmaisia. ScanWP, Scantower ja BuiltWith näyttävät teeman ja tärkeimmät lisäosat ilman rekisteröitymistä. BuiltWithillä on maksullisia paketteja massa-analyysiin ja historiatietoihin pääsyyn, mutta kertaluonteiseen teemahakuun niitä ei tarvita. Chrome-laajennukset ovat myös ilmaisia. Manuaalinen menetelmä DevToolsin kautta ei vaadi lainkaan kolmannen osapuolen työkaluja, vain selaimen.

Voiko toisen sivuston ulkoasun kopioida, kun tietää teeman ja lisäosat?

Teknisesti kyllä. Jos sait selville, että sivusto käyttää Astra-teemaa ja Elementor-lisäosaa, voit asentaa ne itsellesi ja saada saman perustan. Tarkka ulkoasun kopiointi vaatii kuitenkin säätämistä: värit, fontit, lohkojen asettelu ja räätälöidyt CSS-hienosäädöt ovat jokaisella sivustolla yksilöllisiä, eivätkä ne kopioidu automaattisesti. Muista lisäksi kuvien ja tekstien tekijänoikeudet. Teema ja lisäosat ovat perusta. Sen päälle rakennettu ulkoasu on suunnittelijan tai sivuston omistajan työn tulos. Artikkelissa kuvatut työkalut auttavat ymmärtämään teknologisen pohjan, mutta eivät tee puolestasi tarkkaa kloonia.

Kannattaako toisten koodia kaivella, vai riittääkö tunnistin?

Verkkotunnistin kattaa valtaosan tarpeista: saat sekunneissa selville teeman, tärkeimmät lisäosat ja hostingin. Jos vain kartoitat markkinaa tai etsit inspiraatiota, se riittää.

Selainlaajennus nopeuttaa prosessia moninkertaisesti, kun sivustoja on paljon, ja se toimii suoraan surffatessa, etkä edes keskeydy selaamisesta.

DevTools on niille, jotka tarvitsevat kokonaiskuvan eivätkä pelkää kurkistaa konepellin alle. Se on ainoa tapa löytää kaikki lisäosat, myös taustajärjestelmän lisäosat, ja ymmärtää sivuston rakenne perusteellisesti.

Aloita tunnistimesta. Jos tulos on puutteellinen, asenna laajennus. Jos sekään ei riitä, avaa DevTools. Kolme työkalua, kolme syvyystasoa, ja kaikki kolme ovat ilmaisia.