WordPress-teeman mukauttaminen (5 vaiheittaista tapaa)

Jos olet asentanut WordPress-teeman, mutta se ei ole aivan oikea sinulle, saatat tuntea turhautuneisuutta. Sinulla on paljon vaihtoehtoja WordPress-teemojen muokkaamiseen.

Haasteena on löytää oikea tapa tehdä se.

Tässä viestissä ohjaan sinut läpi vaihtoehtoja WordPress-teeman mukauttamiseen, auta päättämään, mikä on sinulle sopiva, ja näyttää, miten se tehdään turvallisesti ja tehokkaasti.

Katsotko mieluummin videoversiomme? Napsauta toistoa alla:

Vaihtoehdot teeman mukauttamiseen

Ennen kuin sukelamme sisään ja aloitamme teemaan muutoksia, kannattaa ymmärtää vaihtoehdot, koska ne sopivat erilaisiin tilanteisiin.

Tässä on yleiskatsaus käytettävissä olevista vaihtoehdoista:

• Jos haluat lisätä teemaasi toimintoja, asenna laajennus.
• Käytä Mukauta WordPress-järjestelmänvalvojanäytöissäsi fontteja, värejä ja ehkä myös asettelua, teemastasi riippuen.
• Jos työskentelet sivunrakennus-teeman kanssa, mukauta sivustosi ulkoasua sen ominaisuuksien avulla.
• Jos olet asentanut kehysteeman, käytä jotakin käytettävissä olevista aliteemoista mukauttamaan sivustoasi sekä mahdollisia mukautusvaihtoehtoja, jotka omistavat omat järjestelmänvalvojanäytöt.
• Jos teema on omalle sivustollesi ja voit tehdä sen mukavasti, muokkaa teeman koodia suoraan.
• Jos haluat muokata kolmannen osapuolen teeman koodia, luo aliteema.

Jos haluat muokata koodia , sinulla on käytettävissä useita vaihtoehtoja, kuten lohkoeditorin käytöstä, mukauttajaan, aina tiedostojen muokkaamiseen. Tarkastelemme niitä kaikkia tässä viestissä, mutta aloitetaan yksinkertaisimmalla vaihtoehdolla: laajennuksen asentaminen.

Täytyykö sinun todella mukauttaa teemasi?

Joskus et ’ Teemaa ei tarvitse mukauttaa ollenkaan: sen sijaan sinun on asennettava laajennus.

Teemat sanelevat sivustosi ulkoasun: ulkoasun ja sisällön näyttötavan. Laajennukset lisäävät toiminnallisuutta.

Jos haluamasi muutokset keskittyvät toiminnallisuuteen suunnittelun sijasta, harkitse laajennuksen asentamista itse. Tämä voi olla kirjoitettava laajennus, yksi ladattava laajennushakemistosta tai ostamasi lisäosa.

Jos huomaat haluavasi muokata teeman funktiot.php -tiedostoa, kysy itseltäsi:

Haluaisin säilyttää tämän toiminnon, jos vaihdan teemaa tulevaisuudessa?

Jos vastaus on kyllä, kyseisen koodin tulee sisältyä laajennukseen, ei teemaan.

Hyviä esimerkkejä siitä, mitä käytät laajennuksella teeman sijaan, kuten widgetien lisääminen, mukautettujen viestityyppien ja taksonomioiden rekisteröinti , luomalla mukautettuja kenttiä ja lisäämällä lisäominaisuuksia, kuten myymälä tai hakukoneoptimoinnin parannuksia.

WordPress-teeman mukauttaminen WordPress-järjestelmänvalvojanäytöillä

Jos haluamasi muutokset ovat suunnittelukeskeisiä ja suhteellisen yksinkertainen, saatat pystyä tekemään ne järjestelmänvalvojanäytöillä. Mukautin antaa sinulle useita vaihtoehtoja teeman muokkaamiseen: mitä käytettävissäsi, riippuu teemastasi. Ja Ulkoasu-valikossa saatat nähdä jotain editoria. Vältä tätä, syistä, jotka kuvaan pian.

Teeman mukauttaminen mukauttimen avulla

Helpoin tapa mukauttaa WordPress-teemaa on käyttää WordPress-mukautinta.

Voit käyttää tätä kahdella tavalla:

• Kun tarkastelet sivustoasi (kun olet kirjautunut sisään), napsauta Mukauta-linkkiä näytön yläreunan hallintapalkissa.
• Napsauta järjestelmänvalvojanäytöissä Ulkoasu > Mukauta.

Tämä vie sinut mukauttajaan.

Yllä olevassa kuvakaappauksessa asensi ilmaisen teeman nimeltä ColorMag, jolla on paljon mukautusvaihtoehtoja. Se on lisännyt mukauttajaan suunnitteluominaisuuksia, kuten otsikkokuvan, sosiaalisen median, luokan värit ja Suunnitteluvaihtoehdot-välilehden, joka vie sinut vielä useampiin välilehtiin, joissa voit tehdä muutoksia sivuston ulkoasuun ja ulkoasuun.

Eri teemoilla on erilaiset mukautusvaihtoehdot, mutta uudemmat teemat näyttävät lisäävän niitä jatkuvasti enemmän. Jos löydät haluamasi teeman, mutta se ei ole oikea valinta sinulle, saatat huomata, että sen mukauttaminen antaa sinulle juuri tarvitsemasi suunnittelun ja asettelun.

Teemaeditori (ja miksi ei käyttää se)

Järjestelmänvalvojanäytöissä saatat huomata vaihtoehdon nimeltä Teemanmuokkausohjelma, jonka teet Ulkoasu > Teemanmuokkausohjelmassa.

Tämä antaa sinulle pääsyn teeman tiedostoihin , mikä tarkoittaa, että voit muokata niitä suoraan.

Älä.

Vaikka olisit mukava kirjoittaa CSS: ää tai PHP: tä, teeman tiedostojen muokkaaminen tällä tavalla on erittäin huono idea kahdesta syystä:

• Jos olet ostanut tai ladannut kolmannen osapuolen teeman, tekemäsi muutokset menetetään, kun seuraavan kerran päivität teeman (ja sinun tulisi pitää teema ajan tasalla turvallisuussyistä).
• Vielä tärkeämpää on, jos teet muutos, joka rikkoo sivustosi, sitä ei seurata eikä tiedoston edellistä versiota muuteta. Voit rikkoa sivuston peruuttamattomasti.

Jos haluat muokata teeman koodia, tee se koodieditorilla (katso parhaat ilmaiset HTML-editorit), ja sinun ei pitäisi Älä muokkaa live-sivustosi tiedostoja, ennen kuin olet testannut sitä lavastussivustolla. Jos haluat muokata kolmannen osapuolen teemaa, tee se lapsiteeman kautta. Lisätietoja molemmista näistä myöhemmin tässä viestissä.

WordPress tietää, kuinka vaarallista on käyttää teemaeditoria: se antaa sinulle jopa varoituksen, kun yrität käyttää sitä.

Ota siis WordPressin neuvo: älä käytä teemaeditoria!

Sivunrakentajien ja kehysten käyttäminen WordPress-teeman mukauttamiseen

Suurella osalla WordPress-teemoja on mukautusvaihtoehtoja, joten voit tehdä muutoksia suunnitteluun ja asetteluun Customizer.

Mutta jotkut teemat vievät tätä pidemmälle ja on suunniteltu laajennettaviksi ja merkittävästi räätälöitäviksi. Näitä teemoja kutsutaan teemakehyksiksi.

Toinen vaihtoehto on käyttää laajennusta, jonka avulla voit suunnitella sivustosi käyttäjäystävällisen käyttöliittymän avulla: niitä kutsutaan sivunrakentajiksi.

Sivun käyttäminen Rakentaja muokata teemaa

Sivunrakentaja-laajennukset on suunniteltu helpottamaan sivustosi ulkoasun asettamista käyttöliittymän avulla, josta näet, mitä saat.

Asennat yhteensopivan teeman sivunrakentajalaajennuksen ja käytät sen tarjoamia vaihtoehtoja suunnitellaksesi sivustosi juuri haluamallasi tavalla.

Yksi tunnetuimmista sivunrakentajista on Elementor, mutta voit tutustua joihinkin vaihtoehtoihin sivujen koontityökaluistamme.

Sivunrakentajat antavat sinun muokata viestejäsi ja sivujasi vedä ja pudota -liittymällä, joten voit nähdä, miltä sisältösi näyttää ja voi tehdä jokaisesta sivusta ainutlaatuisen.

Käytän alla Elementor-sivun rakennustyökalua Hello Elementor -teeman kanssa, joka on sen kanssa yhteensopiva.

Sivunrakentajat tarjoavat sinulle paljon joustavuutta sivujesi asetteluun ja suunnitteluun. Jos olet tottunut verkkosivustojen rakentajaan, kuten Wix, ne voivat auttaa siirtymistä WordPressiin. Ja jos haluat mieluummin WYSIWYG-käyttöliittymän WordPress-sisältöäsi varten, ne voivat auttaa sinua suunnittelemaan sivusi nopeasti.

Teemakehyksen käyttäminen teeman mukauttamiseen

Vaihtoehto sivunrakentajille on teema puitteet. Nämä ovat teemojen sviittejä, jotka on suunniteltu toimimaan yhdessä. Siellä on yksi vanhemateema, joka on kehys, ja valikoima lapsiteemoja, joiden avulla voit mukauttaa pääteemaa ja saada sen näyttämään haluamallasi tavalla.

Esimerkki teemakehyksistä on Divi, jolla on mukautusvaihtoehdot, joiden avulla voit muokata lapsiteeman ulkoasua entisestään, mukaan lukien sivunrakentajien kaltaisen vetämisen ja pudottamisen käyttöliittymä.

WordPress-teeman koodin muokkaaminen

Jos haluat muokata CSS: ää ja / tai PHP: tä, voit muokkaa teemaasi koodia mukauttamaan teemaa.

Tämä antaa sinulle parhaan hallinnan mahdollisuuden.

Jos muokkaat omaa, sivustollesi omaa teemaa ja kehitettiin erityisesti sitä varten, sitten voit muokata teemaa suoraan. Mutta jos työskentelet kolmannen osapuolen teeman kanssa ja haluat muokata sitä, sinun on luotava aliteema, jotta muutoksesi eivät hukkuisi seuraavan kerran, kun päivität teeman.

Teematiedostojen muokkaaminen

Ensimmäinen askel WordPress-teeman muokkaamiseen on ymmärtää, mitkä teematiedostot hallitsevat mitä ja mitä sinun on muokattava.

Tyylitaulukko

Jokaisella WordPress-teemalla on tyylitaulukko, nimeltään style.css. Se sisältää kaiken koodin sivustosi muotoiluun: asettelun, fontit, värit ja paljon muuta.

Jos haluat esimerkiksi muuttaa teeman värejä, teet muokkauksia tyylitaulukkoon. Jos haluat lisätä uuden kirjasimen, käytä tyylitaulukkoa sen soveltamiseen eri elementteihin, kuten leipätekstiin ja otsikoihin.

Kiinnitä huomiota tyylitaulukkoa muokatessasi: spesifisyys tarkoittaa, että elementin koodi ei aina tule sinne, missä olet luulen sen olevan.Elementit perivät tyylin muista elementeistä, jotka ovat niiden yläpuolella sivun hierarkiassa, ellet lisää tyyliä, joka on ominaista alemmalle elementille.

Voit selvittää, mikä CSS vaikuttaa sivun elementteihin, voit käytä selaimesi tarkastajaa CSS: n tarkastelemiseen (tässä esimerkissä Chrome DevTools):

Tämän avulla voit kirjoittaa uuden CSS: n, joka kohdistetaan yksittäisiin elementteihin tai joukkoihin elementteihin tai luokkiin sivulla.

Jos kaikki tämä puhe elementeistä, luokista ja spesifisyydestä on sinulle uusi, sinun kannattaa välttää teeman CSS: n muokkaamista suoraan. Ainakin, kunnes olet oppinut lisää CSS: stä ja sen toiminnasta.

Funktiotiedosto

Toinen tiedosto, joka on melkein jokaisella teemalla, on function-tiedosto (functions.php) . Tämä on tiedosto, joka saa joukon tavaroita toimimaan teemalla. Sen sisällä on koodi, jolla voit rekisteröidä teemaominaisuudet, kuten esitetyt kuvat, widgetit ja paljon muuta.

Jos sinulla on houkutus lisätä teemaasi toiminnallinen koodi, lisäät sen tähän. Mutta ole varovainen: useimmissa tapauksissa sinun pitäisi todella kirjoittaa laajennus. Kysy itseltäsi:

Haluaisin säilyttää tämän toiminnon, jos vaihdan teemaa tulevaisuudessa?

Jos vastaus on kyllä, kirjoita laajennus koodin lisäämisen sijaan funktiotiedostoon. Laajennusten ei tarvitse olla suuria: mikään ei estä sinua luomasta sellaista pari riviä koodia varten.

Funktiotiedosto on kirjoitettu kaikki PHP: ssä, joten sinun on tunnettava että. Älä kopioi sokeasti Google-haun kautta löytämääsi koodia sokeasti: ota aikaa selvittääksesi, mitä koodi tekee, ja ymmärrä se. Tällä tavalla et todennäköisesti lisää koodia, joka ei ole niin hyvä kuin pitäisi.

Teemamallitiedostot

Suurin osa teeman tiedostoista on teemamallitiedostoja . Nämä ovat tiedostoja, jotka määrittävät, mitä sisältöä WordPress tuottaa tietyllä sivulla, ja ne valitaan mallihierarkian mukaan.

Jos haluat muuttaa tapaa, jolla sisältö lähetetään tietyllä postityypillä, sivulla tai arkistossa , joudut joko muokkaamaan yhtä näistä tiedostoista tai luomaan uuden.

Oletetaan esimerkiksi, että teemassasi on archive.php-tiedosto, jota käytetään arkistosivujen tuottamiseen luokille ja tunnisteille. Haluat tehdä muutoksia tagien tulostustapaan. Joten luot tiedoston nimeltä ”tag.php”, joka perustuisi archive.php-tiedostoon tekemiesi muutosten avulla.

Ole vielä kerran varovainen muokkaamalla tiedostoja: ne voivat rikkoa sivustoasi. Testaa aina paikallisella asennus käyttämällä työkalua, kuten DevKinsta, ja / tai vaiheistussivusto ensin.

Minkä tahansa näistä tiedostotyypeistä sinun on muokattava, tee se oikein. Lue alla olevasta parhaista käytännöistä osio, kuinka muokata tiedostoja koodaa tavalla, joka ei riko sivustoasi eikä aiheuta sinulle turvallisuuspäänsärkyä.

Kolmannen osapuolen teeman mukauttaminen lapsiteemalla

Jos valitsemasi teema sivustollasi on kolmannen osapuolen suorittama ja haluat muokata koodia, sinun on luotava aliteema.

Tämä johtuu siitä, että jos muokkaat teemaa suoraan ja päivität sen ( menetät kaikki tekemäsi muutokset.

Aliteeman luominen koostuu neljästä vaiheesta:

1. Luo uusi kansio wp-content / teemat.
2. Luo kyseiseen kansioon tyylitaulukko, puh l WordPress, että tämä on olemassa olevan teeman lapsiteema.
3. Lisää kopioita tiedostoista, joita haluat muokata, lapsiteemaan ja muokkaa niitä siellä.
4. Aktivoi lapsiteema sivustoosi.

WordPress käyttää aina aliteemasta peräisin olevaa tiedostoa sisällön tuottamiseen, ellei vanhemman teeman hierarkiassa ole tiedostoa. Jos samasta tiedostosta on olemassa kaksi versiota, siinä käytetään aliteeman versiota. Tämä tarkoittaa, että uusi aliteemassa oleva tiedosto korvaa vanhempateeman tiedoston.

Parhaat käytännöt WordPress-teemojen mukauttamiseen

Joten aiot mukauttaa teemaa. Ennen kuin teet muutoksia, noudata näitä vinkkejä varmistaaksesi, että teet sen turvallisesti ja ettet riko sivustoasi, tee siitä alttiita hyökkäyksille tai kadota koodiasi.

Jos mahdollista , Mukauta muokkaamatta koodia

Jos voit tehdä mukautuksia Customizerin kautta tai muualla järjestelmänvalvojan näytöissä, se on turvallisempaa kuin koodin muokkaaminen.

Muokkaa koodia vain, jos käyt tuntee CSS: n (tyylitaulukon) ja PHP: n (muut teematiedostot) ja osaat tehdä sen turvallisesti.

Tee muutokset tekemällä paikallisen kehityksen sivusto

Jos muokkaat teemaasi koodia tai luot aliteeman muutosten tekemiseksi, sinun tulee tehdä kehitystyö WordPressin paikallinen asennus asennetun teeman ja sisällön kopioimalla live-sivustoltasi.

Tällä tavalla sinulla on live-sivustosi peili testata muutoksia. Työskentely paikallisella sivustolla ei vaikuta live-sivustoosi ja voi olla nopeampaa.

Vaikka käyttäisit mukauttajaa, voi olla hyödyllistä käyttää sivustosi paikallista versiota testattaessa. voi julkaista tekemäsi muutokset ja testata niitä vaikuttamatta live-sivustoon.

Kun olet testannut teeman muutokset, voit ladata sen live-sivustoosi tai, vielä parempi, voit testata sitä vaiheistussivusto ja työnnä se sitten elämään.

Käytä versionhallintaa

Kun teet muutoksia teemaan, sinun on käytettävä versionhallintaa muutosten seuraamiseen.

Yksinkertaisesti tämä tarkoittaa teeman versionumeron muuttamista ja molempien versioiden kopioiden säilyttämistä. Mutta jos sinun on tehtävä versiohallinta oikein, sinun on käytettävä GitHubin kaltaista palvelua muutosten seuraamiseen.

Tällä tavalla, jos muutos aiheuttaa ongelmia, voit helposti palauttaa sen takaisin tekemättä manuaalista. muokkaukset.

Versiohallinnasta on vielä enemmän hyötyä, jos työskentelet osana tiimiä, koska näet, mitä muut jäsenet tekevät. Muista lukea git vs Github -oppaamme.

Testaa muutoksesi välityssivuston avulla

Jos sinulla on pääsy vaiheistussivustoon (kuten Kinstan ilmainen lavastus, joka tulee kaikkien mukana) suunnitelmat), tämän testaaminen ennen teeman (tai uuden lapsiteeman) uuden version aktivoimista live-sivustossasi on turvallisin tapa edetä.

Tämä johtuu siitä, että kaikilla paikallisilla sivustoilla on joitain eroja live-sivustossasi: se on toisella palvelimella (luotu sivustolla paikalliskoneesi), se saattaa käyttää eri PHP-versiota tai mitä tahansa muuta työkalua, joka ohjaa sivustoasi.

Tee kopio live-sivustostasi vaiheistamispalvelimellesi ja lataa ja aktivoi sitten uusi teema. Testaa sivustosi perusteellisesti varmistaaksesi, että kaikki toimii, ja voit sitten siirtää muutokset live-sivustoosi.

Tee teemastasi reagoiva

Kaikkien aiheeseen tekemiesi muutosten tulisi olla toimi sekä mobiililaitteella että työpöydällä.

Kun yhä useammat ihmiset käyttävät Internetiä matkapuhelimen kautta ja Googlen Mobile-first-hakemisto, on luultavasti tärkeämpää, että teemasi toimii mobiililaitteella kuin se ei työpöydällä. Joten kaikkien teemaan tekemiesi muutosten on oltava mobiililaitteille sopivia tai mieluiten ensin mobiililaitteita.

Tämä koskee lähinnä muutoksia, jotka teet tyyliisi tai asetteluun: tarkista, että uusi asettelu toimii mobiililaitteella ja olet lisännyt mediakyselyjä, jotta asettelu mukautuu eri näyttökokoihin.

Jos teema ei reagoi, se vaikuttaa negatiivisesti hakukoneesi sijoituksiin ja tulosprosentteihin.

Jos sinulla ei ole pääsyä moniin erilaisiin mobiililaitteisiin testattavaksi, voit käyttää BrowserStackin kaltaista työkalua nähdäksesi, miltä sivustosi näyttää eri laitteilla. Voit käyttää myös selaimesi kehittäjätyökaluja ja mukautettuja näkymiä.

Varmista, että mukautuksesi eivät vaikuta esteettömyyteen

Kaikkien teemasi muutosten on oltava myös vammaisten tai aistivammaisten käyttäjien saatavilla .

Tämä ei tarkoita vain sitä, että sivustosi toimii näytönlukuohjelmissa: muut näkökohdat, kuten värimallit ja kirjasinkoko, ovat tärkeitä suurelle joukolle ihmisiä.

Jos muutokset Teemallesi on tarkoitus tehdä väreistä kirkkaampia tai teksti pienempiä. Ajattele uudelleen: tämä saattaa vaikeuttaa ihmisten lukemista tai vuorovaikutusta sivustosi kanssa.

Ennen kuin teet mitään muutoksia, testaa sivustosi esteettömyystarkistimen avulla ja varmista, että se ei sulje pois ihmisiä.

Pidä kiinni WordPress-koodausstandardeista

Jos muokkaat teemaasi koodia tai luot a chi ld-teema, sinun on varmistettava, että koodisi on WordPress-koodausstandardien mukainen.

Nämä standardit ovat olemassa koodin yhtenäisyyden ja laadun varmistamiseksi ja sekaannuksen välttämiseksi. PHP: lle, CSS: lle ja JavaScriptille on standardeja, joten tarkista itsellesi tärkeät ja varmista, että noudatat niitä.

Jos nykyinen WordPress-teemanne on koodattu hyvin ja kirjoitat uusia koodia tavalla, joka on sopusoinnussa sen kanssa, olet varma, että koodi on yhteensopiva. Varmista, että lisäät kommentteja teemaan tehtäviin muutoksiin, jotta sinä tai muut tietäisit, mitä teit, kun palaat myöhemmin työskentelemään koodin parissa.Saatat ajatella, ettet unohda, mutta muutaman kuukauden kuluttua on yllättävän helppo unohtaa, miksi muokkait koodiriviä.

Onko sinun mukautettava #WordPress-teemaa tekemään siitä ainutlaatuinen? Vaihtoehtoja on paljon! Valitse oikea sinulle perusteellisesta oppaastamme! 👚👔Klikkaa napsauttamalla

Yhteenveto

WordPress-teeman mukauttaminen ei ole kovin vaikeaa. Joskus se on yksinkertainen tapaus käyttää mukauttajaa tekemään muutoksia kirjasimiin tai väreihin (muista lukea perusteellinen ohje WordPress-kirjasimista). Muina aikoina sinun on luotava uusi aliteema, jotta voit lisätä uuden mallitiedoston teemaan.

Teeman mukauttamiseen kuuluvat vaihtoehdot ovat laajennuksen tai mukautimen käyttö, WordPress-teeman koodin muokkaaminen suoraan tai luomalla lapsiteeman.

Määritä oikea vaihtoehto sinulle ja tee mukautuksesi turvallisesti rikkomatta sivustoasi.