Kuidas WordPressi teemat CSS-iga kohandada

Kas teate, et saate oma WordPressi saidiga katsetada ja CSS-iga selle välimust muuta? Saate lisada väikeseid esteetilisi muudatusi, lisada värve, muuta paigutust või isegi oma WordPressi teemat täielikult muuta.

Oma veebisaidi välimuse üle kontrolli omamine annab teile võimaluse luua see teile meelepärasel viisil.

Saate lisada oma brändi veebisaidile oma isikupära, muutes selle palju erinevaks teistest sama WordPressi teemat kasutavatest inimestest või ettevõtetest!

Selles postituses vaatame lähemalt, kuidas saate CSS-iga WordPressi teemat kohandada.

Mis on CSS?

CSS ehk Cascading Style Sheets on veebikeel, mida kasutatakse veebilehtede esitamiseks. CSS-i abil saate määrata paigutuse, värvid, fondi, tausta ja muud elemendid, mis muudavad meie veebilehed kasutajatele esinduslikuks. Seetõttu kutsume CSS-i esiserva kliendipoolseks keeleks, kuna see käivitatakse kasutaja lõpus. CSS-i kasutatakse koos HTML-i ja Javascriptiga, et muuta veebisaidid tundlikuks. Kui arvate, et CSS-i õppimiseks ja rakendamiseks peate olema hardcore programmeerija, pole see tõsi. Saate hõlpsasti õppida CSS-i ja kasutada seda oma saidi esitluse muutmiseks, isegi kui teil pole varem programmeerimisest teadmisi.

Mis on WordPress?

WordPress on kõige populaarsem ja lihtsaim viis veebisaidi või ajaveebi käivitamiseks. Tehniliselt rääkides on WordPress avatud lähtekoodiga sisuhaldussüsteem. See käsitleb kõiki veebisaidi olulisi aspekte, nagu sisu, paigutus, turvalisus jne. WordPressi abil saate luua mis tahes veebisaite. Näiteks ettevõtete veebisaidid, e-kaubanduse veebisaidid, portfellid, CV-d, suhtlusvõrgustikud jne. WordPressi kasutamine on tasuta ning sellel on erinevad teemad ja pistikprogrammid. CSS-i abil saab muuta oma WordPressi saidi välimust ja tunnet.

CSS ja WordPress

WordPressi teema redigeerimise alustamiseks peate esmalt mõistma mõnda asja – mallifaile, mallisilte ja CSS-laaditabelit. Mallfailid juhivad teie WordPressi teemat. Võite näha erinevaid faile, nagu header.php, arhiiv.php. Need on mallifailid, mis juhivad teie WordPressi teemat. Nende failide ja muude andmebaasielementide juhtimiseks kasutatakse mallisilte. CSS-laaditabel või style.css on fail, mida peate oma veebisaidi välimuse muutmiseks otsima. WordPressi teema kohandamiseks redigeerite koodi saidil style.css.

Kuidas WordPressi teemat CSS-iga kohandada

Esiteks peate mõistma, et kui soovite oma WordPressi teemat CSS-iga kohandada, peate sellele kas lisama teatud koodi või redigeerima juba kirjutatud koodi. Enne teema muutmise alustamist soovitaksin teil vähemalt mõned CSS-i, HTML-i, JavaScripti ja PHP põhitõed selgeks teha.

Veel üks asi, mida tuleb arvesse võtta, on see, et kui kavatsete oma WordPressi teema stiilitabelit muuta, eemaldatakse need muudatused pärast teema värskendamist. Seega peate õppima tundma alamteemasid ja kasutama alamteemat, et teha muudatusi style.css-i, functions.php- või muude teemamallifailide abil. Olen rääkinud lasteteemadest selles artiklis hiljem.

Teema CSS-i muutmiseks või lisamiseks on kaks võimalust

1 Armatuurlaua kasutamine

See võimaldab teil oma WordPressi teemat otse redigeerida, kasutades oma WordPressi juhtpaneelil olevat CSS-laaditabelit. Kuid peate arvestama, et siin tehtud suuri muudatusi võib olla raske tagasi pöörata. Seega soovitaksin teha oma WordPressi teema algse CSS-i varukoopia ja seejärel teha muudatusi. Samuti soovitaksin teil luua oma saidile lapseteema. Kui te ei tea, mis see on, lugege lihtsalt järgmist jaotist ja tulge tagasi.

Looge lapseteema ja seejärel avage selle lapseteema jaotis Välimus ja seejärel Teemaredaktor. Kui kasutate lapseteema, ilmub hüpikaken, kuid selle pärast pole põhjust muretseda. Lihtsalt klõpsake "Ma saan aru" ja sisenete laaditabelisse. Kui soovite teha muudatusi mallifailides, nagu header.php, functions.php jne, peate esmalt õppima PHP ja seejärel proovima oma kodeerimisoskusi. Vastasel juhul jääge lihtsalt stiilitabeli redigeerimise juurde.

Mis on WordPressis lapseteema?

Alamteema on originaalteema (tuntud ka kui vanemteema) koopia. Lapseteema hõlmab vanemateema funktsionaalsust ja stiili. Soovitatav on kasutada alamteemat, kui soovite oma saidi kujunduses muudatusi tehes originaalkoodi puutumata jätta. Nii saate luua uusi paremaid kujundusi alamteemal ja säilitada emateema funktsionaalsust. Lapseteema kasutamise eelised on järgmised:

• Te ei pea muretsema algkoodiga segamise pärast, kuna vanemteema on turvaline ja muutmata.
• Kodeerimise abil saate põhiteema funktsionaalsust laiendada, sellega katsetada ja midagi uut luua.
• Te ei pea teemat nullist looma. Kui unustate juhuslikult mõne funktsiooni või funktsiooni, on vanemteema kood teie jaoks olemas.

Lapseteemade kasutamisel peate siiski olema väga ettevaatlik. Üks põhjusi on see, et see nõuaks kodeerimisoskust ja -kogemust. Kui te alles alustate CSS-i, HTML-i, JavaScripti ja PHP-ga, andke endale aega, et saada esmalt eksperdiks. Vastasel juhul võib õppimiskõver olla üsna kõrge.

Teine asi, mille eest tuleb lapseteema kasutamisel hoolitseda, on see, et peate esmalt värskendusi kontrollima. Kui teie vanemteema on värskendatud funktsiooniga, mida te ei soovi, ei tohi te oma WordPressi teemat värskendada, kuna see kajastuks teie lapse teemas. Mõnikord, kui mõni funktsioon põhiteemast välja jäetakse ja seda värskendate, võib see mõjutada teie lapseteema. Seega suurendate oma kodeerimistööd.

2 FTP-serveri kasutamine

Võib juhtuda, et te ei pääse oma teema armatuurlauale otse juurde. Mõnikord keelab pistikprogrammide kasutamine selle funktsiooni. Seega peate oma saidi failidele kaugjuurdepääsuks kasutama FTP-d või failiedastusprotokolli. Alustage mis tahes FTP-kliendirakenduse allalaadimisega. Võtke ühendust oma hostiga ja küsige oma FTP-mandaate.

Mandaatide sisestamisel lubatakse teil juurdepääs saidile style.css. Nüüd tehke failis muudatused, salvestage muudatused ja laadige need serverisse tagasi. See võib olla üsna kirglik meetod CSS-i saidile lisamiseks, nii et kasutage seda ainult siis, kui teil pole juurdepääsu oma armatuurlauale.

Lihtsad viisid CSS-i lisamiseks oma WordPressi saidile

CSS-i lisamiseks oma WordPressi saidile on kaks lihtsat meetodit. Nende hulka kuuluvad WordPressi kohandaja või pistikprogrammi kasutamine. Nende meetodite abil on CSS-koodi lisamine palju lihtsam. CSS-i lisamine WordPressi kohandaja või pistikprogrammi abil ei kaoks ka teie koodi pärast teema värskendamist. Siiski soovitan teil siiski teha oma veebisaidi algse koodi varukoopia juhuks, kui midagi peaks tahtmatult juhtuma. Nüüd kontrollime kahte lihtsat viisi CSS-i lisamiseks oma WordPressi saidile.

1 Redigeerimine WordPressi kohandaja kaudu

Logige lihtsalt oma WordPressi taustaprogrammi sisse. Klõpsake valikul Välimus ja seejärel nuppu Kohanda. See avab kohandamiskuva. Sellel ekraanil kuvatakse teie veebisaidi eelvaade sel hetkel ja ekraani vasakus servas on mõned valikud, et kohandada elemente, nagu värvid, menüüd või muud vidinad.

Ekraani vasakus servas näete valikut Täiendav CSS. See on koht, kus peate oma maagiat piserdama. Kui klõpsate valikul Täiendav CSS, avaneb uus leht, millel on teie veebisaidi kood. Nüüd saate koodis muudatusi teha ja kui olete selle õigesti kirjutanud (vigu pole!), näete muudatusi eelvaates.

Siia kirjutatud CSS-kood ei muutu ega kao pärast teie teema värskendamist! Kui aga liigute uuele teemale, kustutatakse siia kirjutatud kood. Seetõttu on soovitatav enne teema muutmist oma CSS-i varundada.

2 Kasutage pistikprogrammi

Selles jaotises käsitlen nelja erinevat pistikprogrammi, mida saate oma WordPressi teema CSS-i redigeerimiseks kasutada – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS ja CSS Hero. Kui te ei tea, on WordPressi pistikprogrammid väikesed tarkvaratükid, mille saab WordPressiga selle funktsionaalsuse laiendamiseks lisada. Mõned pistikprogrammid on saadaval tasuta, samas kui mõne jaoks peate nende WordPressi saidile lisamise eest veidi raha maksma. Pistikprogrammid aitavad teil oma WordPressi saidile CSS-i muuta või lisada seda vaid mõne klõpsuga!

Täpsema CSS-i redigeerija plugina kasutamine

Esimene plugin, mida ma soovitaksin, on Advanced CSS Editor. See pistikprogramm võimaldab teil lisada CSS-i, et näha, kuidas teie veebisait lauaarvutis, tahvelarvutis ja mobiiltelefonis välja näeb. Nii saate oma veebisaiti iga seadme jaoks täpselt häälestada. Redigeerimise alustamiseks installige pistikprogramm. Minge oma WordPressi armatuurlauale, klõpsake valikul Välimus ja seejärel Kohandaja. Näete uut valikut nimega Advanced CSS Editor. Lisage sellele soovitud kohandatud CSS ja salvestage muudatused.

Selle pistikprogrammi kasutamise suur eelis on see, et saate kontrollida, kuidas teie veebisait erinevates seadmetes välja näeb. Lisaks saate oma WordPressi teema muutmiseks siiski kasutada tehnikat, mida ma punktis 1 rääkisin. Mõnele inimesele, kes pole aga kodeerimisega harjunud, võib igat tüüpi seadmete puhul muudatuste tegemine olla palju tööd. Kõigepealt peaksid nad õppima, kuidas kirjutada CSS-i iga seadmetüübi jaoks.

Modulaarse kohandatud CSS-i pistikprogrammi kasutamine

Teine plugin, mida ma soovitaksin, on modulaarne kohandatud CSS. See pistikprogramm aitab teil oma WordPressi saidil teemapõhiseid muudatusi teha. Näiteks kui kasutate praegu ühte teemat ja teete selles teemas muudatusi modulaarse kohandatud CSS-i abil. Seejärel otsustate valida oma saidile mõne muu teema. Seega ei kustutata esimeses teemas tehtud muudatusi. Need jäävad selles pistikprogrammis puutumatuks. Selle pistikprogrammi abil saate lisada ka globaalset CSS-i. See CSS jääb vaatamata teemamuutustele samaks.

Selle pistikprogrammi kasutamiseks laadige esmalt alla pistikprogramm ja lisage see oma WordPressi saidile. Seejärel klõpsake valikul Välimus -> Kohandaja -> Täiendav CSS. Ainus puudus, mida selle meetodi kohta leida, on see, et globaalse CSS-i lisamine ei pruugi alati olla parim idee. Mõnikord ei pruugi globaalne CSS mõne teemaga töötada ja see võib olla segadus.

SiteOrigini CSS-i pistikprogrammi kasutamine

Kolmas pistikprogramm, mida soovitan, on tuntud kui SiteOrigin CSS. See pistikprogramm pakub visuaalseid juhtelemente, mis võimaldavad teil oma saidi välimust ja olemust reaalajas muuta. See pistikprogramm sobib nii algajatele kui ka edasijõudnutele CSS-i kasutajatele. Reaalajas eelvaade ja visuaalsed juhtnupud aitavad algajaid, samas kui edasijõudnud kasutajad saavad selle pistikprogrammi koodi automaatse täitmise funktsiooni abil kiiresti kodeerida.

See pistikprogramm avab WordPressi jaoks eraldiseisva CSS-i redaktori. Sellele pistikprogrammile juurdepääsuks laadige esmalt alla pistikprogramm ja lisage see oma WordPressi saidile. Seejärel klõpsake valikul Välimus -> Kohandatud CSS. Selle pistikprogrammi suurepärane omadus on see, et saate redigeerida oma veebisaidi mis tahes elementi, klõpsates sellel. Saate mõnda lihtsat teema elementi muuta ilma CSS-i kasutamata. Sellise funktsionaalsuse üks puudus võib aga olla see, et kui teete muudatusi teema paljudes erinevates elementides, võib nende jälgimine olla keeruline.

CSS Hero plugina kasutamine

Nüüd on see midagi huvitavat. Minu kolmas pistikprogrammi soovitus sisaldab pistikprogrammi, mis aitab teil WordPressi saidil CSS-i redigeerida, kasutades pukseerimist. Seda tuntakse kui CSS Hero. CSS-i redigeerimiseks selle pistikprogrammi abil peate lihtsalt viima hiirekursori üle elemendi, mida soovite muuta, ja klõpsama sellel. Seejärel saate seda vastavalt soovile reguleerida. Siin on selle pistikprogrammi mõned hämmastavad funktsioonid:

• See pistikprogramm sisaldab lihtsat kirjastiilide ja topograafia redigeerimist. Pistikprogramm toetab Google Fontsi ja TypeKiti fonte.
• Võite kasutada ka värvivalijat ja katsetada reaalajas värvi ja tausta muutmist. Leiate hõlpsalt oma viimased kasutatud värvid.
• Saate lihtsalt lohistada liugurit ja vaadata, kuidas veerised välja näevad.
• Pistikprogramm toetab ka saidielemente, nagu gradient, kastivarjud, tekstivarjud ja muud kaasaegsed CSS-i atribuudid.
• Selle pistikprogrammiga saate oma muudatustest hetktõmmiseid salvestada. Nii et te ei pea kõike elama panema. Jätkake tööd ja avaldage lõplik versioon.
• See pistikprogramm ei mõjuta teie teemafaile. Nii et te ei pea muretsema, et värskendused teie muudatused rikuvad.

WordPressi teema kohandamise erinevate viiside võrdlemine CSS-iga

Täna õppisime 4 erinevat viisi WordPressi saidi kohandamiseks CSS-i abil. Saate redigeerida või lisada oma WordPressi teemale CSS-i juhtpaneeli abil või kasutada FTP-rakendust. Saate kasutada WordPressi kohandajat CSS-i lisamiseks või muutmiseks või lõpuks võite kasutada mõnda pistikprogrammi, et kohandada oma WordPressi teemat CSS-iga.

• Kui olete WordPressi ja CSS-i uus kasutaja, soovitan teil CSS-i muutmiseks või lisamiseks kasutada WordPressi kohandajat. Nii saate muudatusi eelvaates kontrollida ega pea muretsema, et pärast teema värskendamist muudatused eemaldatakse.
• Kui teil on CSS-i ja WordPressiga kogemusi ning olete varem pluginatega töötanud, soovitan teil valida üks neljast pistikprogrammist, mida täna teiega jagasin. Pistikprogrammid pakuvad teie saidi täiustamiseks paremaid võimalusi ja ulatust.
• Kui olete CSS-i veteran. Olete loonud veebisaite ja oskusteave CSS töötab põhjalikult. Seejärel soovitaksin teil otse WordPressi stiililehel muudatuste tegemiseks kasutada juhtpaneeli või FTP-d.

On oluline, kuidas teie veebisait välja näeb

Teie veebisaidi kujundus, paigutus, värvid, fondid või teema on üsna olulised. See aitab edasi anda tunnet, mida soovite, et kasutaja teie ettevõtte kohta tunneks. See võib luua ainulaadse kaubamärgi kuvandi ja määratleda teie identiteedi.

Teie veebisaidi kujundus ja paigutus mängivad samuti suurt rolli kasutajakogemuse parandamisel. Kui teie kujundus pole nii hea, olete paigutanud reklaamid valedele kohtadele, on teie veebisaidi värvid üsna häirivad, kõik see võib mõjutada kasutajakogemust.

Suurepärane disain ja paigutus aitavad teil kontrollida, kuidas sõnum kasutajatele edastatakse. Saate nende tähelepanu õigel ajal haarata ja juhtida nad teele, mis täidab teie eesmärke. Seega on teie WordPressi saidi CSS-i muutmine, lisamine või redigeerimine vastutustundlik. Vastutus oma veebisaidi kasutajate jaoks paremaks muutmise eest.

Loodetavasti aitavad need näpunäited ja näpunäited WordPressi teema kohandamiseks CSS-iga teil oma veebisaidile isikupärastada. Kui kasutate mõnda neist või olete neid varem kasutanud, jagage oma kogemusi kommentaaride jaotises ja levitage sõna!