Latasin ilmaisen teeman, nimesin sen uudelleen ja sain täysin räätälöidyn kehitystyön. Kuulostaa yksinkertaiselta, mutta kun avaat Shapely-hakemiston editorissa, silmäsi harittavat: kymmeniä tiedostoja, joista jokainen mainitsee vanhan nimen. Funktioita, joissa on shapely_-etuliite, tekstiverkkotunnuksia, resurssipolkuja, kuvauksia style.css:n otsikkotiedoissa. Jos yksikin jää huomaamatta, teema hajoaa.

Colorlibin Shapely on yksi parhaista ilmaisista pohjista räätälöityyn kehitykseen: yli 10 000 aktiivista asennusta, arvosana 4,6 WordPress.orgissa, viimeksi päivitetty huhtikuussa 2025. Yhden sivun teema, jossa on parallaksiosioita ja WooCommerce-tuki, ja joka muuttuu puolen tunnin muokkauksella yksilölliseksi tuotteeksi tietylle asiakkaalle.

Alla on täydellinen työjärjestys Shapely-teeman nimen korvaamiseksi omallasi. Massatiedostojen uudelleennimeämisestä lopulliseen kuvakaappaukseen, ilman väliin jätettyjä kohtia ja testatuilla työkaluilla.

💡 Nopea yleiskatsaus:

• Lataa Shapely viralliselta sivulta ja kopioi teemahakemisto uudella nimellä.
• Nimeä tiedostot ja kansiot massana uudelleen: korvaa vanha shapely-etuliite omallasi pienillä kirjaimilla.
• Etsi ja korvaa kaikki shapely- ja Shapely-esiintymät PHP-, CSS- ja JS-tiedostoista kirjainkoko huomioiden.
• Korjaa function.php, dokumentaatio ja kustomoija, kirjoita style.css uudelleen uudella teemanimellä.
• Valmistele oma screenshot.png ja tarkista teeman aktivointi hallintapaneelissa.

Miksi nimetä Shapely uudelleen sen sijaan, että kirjoittaisit alusta

Teeman kirjoittaminen puhtaalta pöydältä tavalliseen projektiin on budjetin tuhlausta. Shapely tarjoaa valmiin rungon: Bootstrap-pohjaisen asettelun, etusivun widgetit, suosittujen lisäosien tuen suoraan laatikosta. Saat toimivan tuotteen ja muutat vain sen, mitä asiakas tarvitsee: värit, fontit, osioiden rakenteen ja tietysti nimen.

Uudelleennimeäminen ei ole kosmeettista. Nimen vaihtaminen kaikissa tiedostoissa ja funktioissa tekee teemasta omasi: se näkyy hallintapaneelissa omalla brändilläsi, ei ole ristiriidassa alkuperäisen Shapelyn kanssa (voit pitää molempia samalla sivustolla), ja asiakas näkee räätälöidyn kehitystyön, ei "ilmaista teemaa internetistä".

Käytännössä koko sykli vie 30-40 minuuttia. Käydään jokainen vaihe läpi.

Vaihe 1: lataa ja kopioi hakemisto

Lataa Shapely osoitteesta colorlib.com tai WordPress.orgin arkistosta. Pura arkisto.

Luo kopio shapely-hakemistosta ja nimeä se teemasi nimellä. Sääntö: vain pieniä latinalaisia kirjaimia ja yhdysviivoja. Ei välilyöntejä, alaviivoja tai isoja kirjaimia. Esimerkkejä oikeista nimistä: trolleybus, mediadoma-theme tai custom-start.

Miksi pienet kirjaimet: WordPress normalisoi teemojen ja lisäosien nimet pieniksi kirjaimiksi tarkistaessaan päivityksiä ja työskennellessään tekstiverkkotunnusten kanssa. Iso kirjain kansion nimessä on varma tie "valkoiseen kuolemanruutuun" aktivoinnin aikana.

Vaihe 2: tiedostojen massanimeäminen

Ensimmäinen läpikäynti, tiedostojen ja kansioiden nimet. Shapelyssä niitä on useita kymmeniä, ja monet sisältävät shapely-sanan suoraan nimessä: shapely-documentation.php, class-shapely-customize.php ja niin edelleen.

Total Commanderissa: avaa teemahakemisto, Ctrl+B (tasainen lista), Ctrl+A (valitse kaikki), Ctrl+M (eränimeäminen). Kirjoita "Etsi"-kenttään shapely, "Korvaa"-kenttään uusi nimi (pienillä kirjaimilla). Suorita, kaikki tiedostot ja kansiot nimetään uudelleen sekunnissa.

Vaihtoehto ilman Total Commanderia, PowerShell. Avaa pääte teemahakemistossa ja suorita:

1
Get-ChildItem -Recurse | Where-Object { $_.Name -like '*shapely*' } | Rename-Item -NewName { $_.Name -replace 'shapely', 'newname' }

Korvaa newname omalla versiollasi. Tämä menetelmä on ilmainen ja toimii missä tahansa Windowsissa ilman lisäohjelmien asentamista.

Vaihe 3: etsi ja korvaa tiedostojen sisällöistä

Nyt tärkein asia, siivoa shapely-maininnat PHP-, CSS- ja JS-tiedostojen sisältä. Niitä on kymmeniä, eikä manuaalinen etsintä tule kysymykseen.

Notepad++:ssa: Ctrl+Shift+F (etsi tiedostoista), hakemisto, uusi teemakansiosi. Ensimmäinen läpikäynti, korvaa shapely (pienillä kirjaimilla) sanalla newname. Toinen läpikäynti, korvaa Shapely (isolla alkukirjaimella) sanalla Newname. Ota "Match case" -vaihtoehto käyttöön jokaisella kerralla.

Tietyt paikat, joissa teeman nimi taatusti esiintyy:

• function.php, after_setup_theme-koukku, wp_enqueue_style- ja wp_enqueue_script-kutsut, joissa on shapely_-etuliite;
• wp-content/themes/yourtheme/inc/trolleybus-documentation.php, ohjeteksti hallintapaneelissa;
• wp-content/themes/yourtheme/inc/class-customize.php, kustomoijan asetukset.

Huomio: älä muuta vain tekstijonoja, vaan myös funktioiden nimet. shapely_get_option() tulee muuttua muotoon yourtheme_get_option(). Muuten, kun asennat kaksi teemaa samalle sivustolle, PHP heittää kohtalokkaan virheen "Cannot redeclare function."

Vaihe 4: korjaa style.css, teeman metatiedot

Teeman juuressa oleva style.css-tiedosto on "passi": WordPress lukee sen otsikkotiedot ja näyttää tiedot "Ulkoasu → Teemat" -osiossa. Esimerkki:

1
/*
2
Theme Name: Trolleybus
3
Theme URI: https://your-site.com/
4
Author: Your Name / Studio
5
Author URI: https://your-site.com/
6
Description: Custom theme based on Shapely — a one-pager with parallax sections, WooCommerce support, and responsive layout. Optimized for a specific project.
7
Version: 1.0
8
License: GNU General Public License v2 or later
9
License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
Text Domain: themename
11
*/

Kolme kenttää on pakollisia: Theme Name (teeman nimi hallintapaneelissa), Text Domain (täytyy vastata kansion nimeä, WordPress käyttää sitä käännöksiin) ja Version. Loput ovat valinnaisia, mutta Author ja Description luovat ammattimaisen vaikutelman.

Text Domain on kriittinen kenttä. Jos se ei vastaa kansion nimeä, load_theme_textdomain()-funktio ei poimi käännöksiä, ja kaikki hallintapaneelin merkkijonot pysyvät englanniksi.

Vaihe 5: valmistele oma screenshot.png

screenshot.png on teeman juuressa ja näkyy "Ulkoasu → Teemat" -galleriassa. Koko: WordPress.orgin teemaesitysvaatimusten mukaisesti. Formaatti: PNG.

Mitä kuvakaappaukseen laitetaan: studion logo, teeman nimi ja kuvakaappaus muokatusta etusivusta. Älä jätä alkuperäistä Shapelyn kuvakaappausta, asiakas näkee jonkun toisen tuotteen ja kysyy siitä.

Työkalut: Photoshop, Figma tai ilmainen GIMP. Piirrä tausta, lisää teeman nimen teksti, lisää etusivun kuvakaappaus. Tallenna nimellä screenshot.png ja korvaa tiedosto teeman juuressa.

Vaihe 6: lopputarkistus

Ennen asiakkaalle luovuttamista tarkista kolme asiaa:

• Aktivointi ilman virheitä. Mene kohtaan "Ulkoasu → Teemat" ja aktivoi uusi teema. Valkoinen ruutu, palaa vaiheeseen 3, todennäköisesti funktio, jossa on shapely_-etuliite, jäi huomaamatta.
• Nimi hallintapaneelissa. Teemaluettelossa näkyy style.css:n Theme Name -arvo, juuri se, minkä määritit.
• Kustomoijan toimivuus. Avaa "Ulkoasu → Mukauta" ja käy osiot läpi. Jos jokin asetus ei tallennu, tarkista inc/class-customize.php (vaihe 3), ehkä sinne on jäänyt vanha asetustunniste.

Siinä kaikki. Teema on valmis toimimaan ja kantaa nimeäsi. Shapely toimi perustana, mutta tuote on nyt täysin omasi.

Miksi tehdä näin eikä lapsiteeman kautta

Yleinen kysymys: miksi ei luoda lapsiteemaa ja vaihda nimeä siinä? Vastaus riippuu skenaariosta.

Lapsiteema sopii, kun hienosäädät sivustoa itsellesi: muutat CSS:ää, lisäät funktioita functions.php-tiedostoon, mutta alkuperäinen Shapely pysyy pohjana ja vastaanottaa päivityksiä. Tämä on oikea polku sivuston omistajalle.

Toimistolle tai freelancerille, joka toimittaa projektin asiakkaalle, lapsiteema on kompromissi. Asiakas näkee "Shapely"-nimen hallintapaneelissa, ja kun päivität vanhemman teeman, muokkauksesi voivat hajota (kehittäjät muuttivat osion HTML-merkintää, CSS-korjauksesi lakkasi toimimasta). Täydellinen uudelleennimeäminen antaa hallinnan jokaiseen tiedostoon ja poistaa riippuvuuden Colorlibin päivityksistä.

Johtopäätös: itselle tehdessä, lapsiteema. Asiakkaalle tehdessä, haarukointi uudelleennimeämisellä.

⁉️🤔 Yleisiä kysymyksiä

Voinko nimetä teeman uudelleen ilman Total Commanderia?

Kyllä. Windows 10/11:ssä käytä PowerShelliä (komento vaiheesta 2), macOS:ssä Finderia eränimeämisellä tai rename-apuohjelmaa päätteessä. Linuxissa rename 's/shapely/newname/' *. Tärkeintä on olla ohittamatta sisäkkäisiä kansioita: PowerShell -Recurse-lipulla käy läpi koko puun, kun taas Finder korostaa vain nykyisen kansion tiedostot.

Mitä tapahtuu, jos jätän vanhoja shapely-mainintoja koodiin?

Riippuu sijainnista. Jos vanha etuliite jää funktion nimeen, kun asennat kaksi teemaa, joissa on samat funktionimet, PHP heittää kohtalokkaan virheen, sivusto kaatuu. Jos resurssipolussa, kuva tai skripti ei lataudu (404). Jos tekstiverkkotunnuksessa, käännösmerkkijonoja ei poimita. Pahin skenaario: sivusto toimii, toimitat projektin, ja kuukautta myöhemmin asiakas asentaa alkuperäisen Shapelyn uteliaisuudesta ja saa valkoisen ruudun. Kaksi teemaa, joissa on shapely_setup()-funktiot, eivät toimi rinnakkain yhdessä WordPressissä.

Päivittyykö Shapely uudelleennimeämisen jälkeen?

Ei. Haarukoit teeman, Colorlibin päivitykset eivät tavoita sinua. Tämä on tietoinen päätös: uhraat automaattiset päivitykset täyden hallinnan vuoksi. Jos alkuperäiseen Shapelyyn tulee kriittinen tietoturvakorjaus, sovellat sen manuaalisesti, kirurgisesti. Käytännössä vakaus on teemoille tärkeämpää kuin päivitykset: teema ei ole lisäosa, haavoittuvuudet siinä ovat harvinaisia. Vaihtoehto niille, jotka haluavat sekä hallinnan että päivitykset, on lapsiteema, mutta kun toimitat projektin asiakkaalle, haarukointi on luotettavampi.

Onko Shapely teema vain yhden sivun sivustoille?

Suunnittelultaan kyllä. Mutta Bootstrap-pohjainen asettelu ja modulaarinen rakenne mahdollistavat sen käytön myös monisivuisille sivustoille: luo vain lisää sivuja WordPressissä ja määritä valikko. Etusivun widgetit (parallaksi, portfolio) toimivat vain sivulla, joka on asetettu "Etusivuksi" asetuksissa. Käytännössä olemme rakentaneet Shapelyllä blogeja ja tuoteluetteloita, runko on lähtökohtaisesti joustava.

Mitä tehdä kuvakaappaukselle, jos suunnittelijaa ei ole?

Ota kuvakaappaus valmiista etusivusta (Snipping Tool Windowsissa tai Cmd+Shift+4 macOS:ssä), avaa se Canvassa (ilmainen, verkossa), lisää teeman nimi ja studion logo päälle, lataa PNG:nä vaaditussa koossa. 10 minuutissa saat ammattimaisen tuloksen ilman Photoshopia. Tärkeintä on, ettet jätä Shapelyn kuvakaappausta: asiakas näkee juuri tämän valitessaan teemaa hallintapaneelissa, ja jonkun toisen brändi siinä kohdassa heikentää luottamusta työhösi.

Mitä tehdä uudelleennimeämisen jälkeen: seuraava askel

Teema on nimetty uudelleen ja aktivoitu. Seuraavaksi räätälöinti tiettyä projektia varten: värimaailman vaihtaminen kustomoijassa, etusivun widgetien määrittäminen, WooCommercen yhdistäminen, jos tarvitaan verkkokauppa, SEO-optimointi Yoast SEO:n tai Rank Mathin kautta.

Aloita kustomoijasta: "Ulkoasu → Mukauta" ja käy läpi ylhäältä alas. Shapely tulostaa sinne kymmeniä vaihtoehtoja: logosta alatunnisteeseen. Tunnin räätälöinnillä saat yksilöllisen ulkoasun kirjoittamatta riviäkään koodia. Ja jos projekti vaatii syvempää räätälöintiä, sinulla on jo oma haarukkasi, johon voit lisätä mitä tahansa toimintoja katsomatta taaksepäin alkuperäiseen.

Jos sivustosta on tarkoitus tulla monisivuinen, luo ensin mallipohjat sisäisille sivuille teemakansioon. Ja muista: uudelleennimeäminen vapautti sinut ristiriidoista alkuperäisen kanssa, nyt Shapely ja sinun teemasi voivat elää samalla sivustolla itsenäisesti.