Kuinka lisätä mukautettuja CSS-tiedostoja WordPress-pohjaiseen verkkosivustoon – OIKEA tapa!

Aloittelijoille CSS: n lisääminen WordPress-verkkosivustoon ei ole helppoa. Se on kuitenkin joskus erittäin välttämätön. Sivustosi räätälöintiä on tosiasiassa paljon (sivunrakentajien, erilaisten laajennusten ja WordPress-teema-asetusten jne. Kanssa), mutta joskus sinun tarvitsee vain muuttaa yhtä tai kahta suunnittelun erityistä osaa – CSS: n kohdalla Mutta miten teet tämän? Mistä WordPressissä aloitat? Älä pelkää, meillä on vastauksia …


Tässä on mitä sinun täytyy tietää:

Kuinka lisätä CSS WordPressiin:

– (huomautus: videohyvitykset Topher DeRosialle – HeroPressin luojalle

Videon transkriptio:

Hei! Tämä on Topher WinningWP: n kanssa. Tässä videossa tarkastellaan kuinka lisätä mukautettuja CSS-tiedostoja WordPressiin oikealla tavalla. Kuvittele hetkeksi, että haluat tehdä pienen muutoksen sivustosi ulkoasuun. Sinä Google noin hiukan, löydät pienen katkelman CSS: stä ja he sanovat: “Laita tämä vain sivustoosi.” Mutta mihin laitat sen? Ja mistä tiedät, että se on tehty oikein? Anna kun näytän sinulle. Ensin meidän on määritettävä, mikä CSS on. CSS: tä kannattaa ehkä käyttää vain kahdella alueella. Yksi on tarkoitettu yleiseen sivustosuunnitteluun, joka on asettelua, värejä jne. Toinen on sisällön suunnittelu ja se on, kuinka erityinen sisältösi näyttää: kuvankäsittely ja korttikoodikoko jne. Tulevaisuudessa saatat haluta muuttaa sivustosuunnitteluasi. Hanki kokonaan uusi teema ja pidä silti tekemäsi pienet huomautukset sisällön ulkoasusta. Anna minun näyttää sinulle mitä tarkoitan. Meillä on melko yksinkertainen sivusto ja asettelun kuvaus on helppoa. Yläosassa on hakupalkki, otsikkopalkki, sisältöalue, ja sitä on vaikea nähdä, koska se on tyhjä, mutta minulla on täällä sivupalkki. Tausta on kaikki valkoinen, alatunniste on harmaa ja hakupalkki on musta. Nämä ovat sellaisia ​​asioita, joita voit muuttaa teemaasi liittyen. Täällä meillä on sisältömme, ja meillä on tietty määrä pehmusteita kuvien oikealla puolella ja tekstitykset on kursivoitu. Ne olisivat sisältöön liittyviä muutoksia, joten katsotaanpa kuinka tehdä molemmat. Sivuston suunnittelun muutokset on sidottu teemasi, mikä on järkevää. Jos muutat teemaasi tulevaisuudessa, et halua pitää CSS: tä, koska kyse on siitä, miltä se näyttää. Joten haluamme muuttaa nykyisen teemasi ja antaa sen sitten mennä pois, jos koskaan pääsee eroon tuosta teemasta. Sinulla on kaksi vaihtoehtoa, yksi on räätälöijä ja toinen muokkaaminen style.css. Kumpikaan niistä ei ole kovin vaikea, mutta räätälöintilaite on todellakin helpoin. Anna minun näyttää sinulle mitä tarkoitan. Haluan muuttaa sivustoni otsikon punaiseksi. Joten ensimmäinen asia, jonka teen, on löytää sen nimi. Chromessa napsautin hiiren kakkospainikkeella ja napsautin tarkistaa. Ja täällä sanotaan site-header-main. Joten juuri sitä haluan muuttaa. Nyt täällä sivustoni yläosassa on Mukauta-painike. Jos siirryn Mukauttajan alaosaan, voin napsauttaa Lisä CSS. Täällä on vähän ohjeita sen käyttämiseen. Jos napsautat sulje, se tulee tänne. Joten aion kirjoittaa site-header-main ja kiharoissa, jotka on asetettu taustaväri punaiseksi. Nyt sinun ei tarvitse välttämättä osata käyttää tarkastajaa kuten minäkin, eikä sinun tarvitse tietää, että f on punainen. Olet saattanut saada tämän koodin jostakin verkkosivustosta, ja se on hieno, sinun ei tarvitse tietää, kuinka löytää se itse. Näytän sinulle vain kuinka laittaa sen tänne. Nyt kun se on siellä, voin napsauttaa julkaisua ja voin nyt sulkea tämän välilehden ja siellä on nyt punainen otsikko. Voit laittaa sinne niin paljon CSS: ää kuin haluat. Voit muuttaa kokonaan sivustosi ulkoasua halutessasi. Mutta nyt haluan näyttää sinulle toisen tavan muokata CSS: ää. Aion poistaa aiemmin lisäämäni koodin ja tallentaa sen. Nyt muokkaamme teeman style.css-tiedostoa. Siirrytään hallintapaneeliin, kohdasta Ulkonäkö, teemat. Nyt aktiivinen teema on aina täällä vasemmassa yläkulmassa. Haluat todella tehdä tämän tietyn menetelmän vain, jos käytät lapsitemaa. Voit nähdä täällä, että minulla on asennus, mutta aktiivinen teema on make-child-teema. Tämä tekee siitä, että jos päivitys tehdään, se ei pyyhi lapsille suunnattuja mukautuksiani, eikä lapsiteema koskaan saa päivitystä, koska lapsitemat eivät saa päivityksiä. Jos voit vahvistaa, että käytät lasten teemaa, tässä olevassa valikossa on linkki Editorille. Ja täällä he kertovat kaiken, mitä juuri sanoin lapsiteemoista. Joten mene eteenpäin ja napsauta ymmärrän, jos käytät lapsitemaa. Ensimmäinen esiintyvä tiedosto on style.css. Se tulee aina olemaan niin. Ja kaikki tämä teksti on tietoa aiheestasi. Sinun ei tarvitse kiinnittää siihen huomiota. Mene suoraan alareunaan ja näet täällä, että minun sanotaan: “Lisää mukautetut tyylit alla”. Ennen kuin muokaamme tiedostoa, haluan suositella sen varmuuskopiointia. Ja se on todella yksinkertaista. Aiomme vain kopioida ja liittää sen johonkin toiseen tiedostoon. Joten jos olet Windowsissa, voit tehdä Control + A: n tai Mac-tietokoneessa Command + A. Se korostaa kaiken ja joko Control tai Command + C ja kopioi sen. Ja voit liittää mihin tahansa muuhun tiedostoon, joka voi pitää tekstiä. Sinun ei todellakaan tarvitse pitää sitä pysyvästi, säilytät sitä vain muokkaamalla tätä ja jos tämä sujuu täydellisesti, poista kaikki varmuuskopio, kun olet valmis. Mutta jos tämä rikkoutuu ja kadotat, voit yksinkertaisesti poistaa tämän ja liittää takaisin kopioituasi. Joten aion liittää täsmälleen saman koodin, jonka tein Customizerilla, ja napsauttaa Päivitä tiedosto. Ja sitten lataa sivustoni uudelleen. Ja siinä me olemme, se on myös punainen. Nyt jos Customizer on niin helppoa, miksi haluat koskaan laittaa style.css-tiedostoasi? Syynä on, että style.css-tiedosto latautuu paljon aikaisemmin kuin Customizer. Joten jos teit sen Customizerilla, saatat saada esiintymän, jossa sivu latautuu kokonaan, näyttää valkoiselta sekunnin ajan ja vilkkuu sitten punaisena. Mutta jos laitat sen tyyliin.css, se ei tee sitä. Toinen niistä asioista, joita rakastin Customizerissa, on se, että voit nähdä muutokset kirjoittaessasi niitä. Joten minulle yleinen työnkulku on kirjoittaa kaikki CSS-tiedostot Customizeriin ja kopioida ja liittää se kokonaan style.css-tiedostoon. Sinun ei tarvitse tehdä sitä. Voit jättää kaiken Customizeriin ja se toimii vain löytää ikuisesti. Jos olet vasta aloittamassa, suosittelen, että teet vain räätälöinnin. Se on nopea, helppo, kivuton ja negatiivit ovat hyvin vähäisiä. Jos haluat kokeilla ja kasvattaa jalat hiukan märkäksi WordPressin sisäisen toiminnan kanssa, siirry eteenpäin ja muokkaa style.css-tiedostoa. Nyt toisen tyyppinen CSS, jonka kanssa haluat ehkä työskennellä, on sisällön hallinta. Nyt et halua, että se sidotaan aiheeseen. Haluat sen pysyvän, vaikka vaihtaisit teemoja. Voit aina haluta, että kuvan kuvateksteitä ei kursivoida käytetystä teemasta riippumatta. Tässä tapauksessa haluat käyttää laajennusta. Käytän tätä laajennusta nimeltään Yksinkertainen mukautettu CSS. Sitten Ulkonäkö -kohdassa on mukautettu CSS-valikkokohta. Ja sen avulla voit kirjoittaa CSS: n täällä. Joten aion selvittää tämän kuvatekstin nimen. Napsauta hiiren kakkospainikkeella ja tarkasta. Ja sanotaan, että sitä kutsutaan wp-caption-text. Joten täällä voin kirjoittaa .wp-tekstitysteksti, fonttityyli: normaali; Napsautin Päivitä mukautettu CSS ja sitten lataamme sivumme uudelleen. Ja voit nähdä, että sitä ei enää kursivoida. Joten nyt aion vaihtaa teemaani. Ja huomaat, että kuvatekstiäni ei vieläkään kursivoida ja silti koko punaisen otsikon käsite on kadonnut, koska kaikki tuo koodi oli sidottu toiseen teemaan. Joten tarkistamiseksi, jos haluat hallita teemaasi, käytä joko Mukautusohjelmaa tai Siirry kohtaan Ulkoasu Muokkaa ja muokkaa tyylisivua. Jos haluat hallita sisällön CSS: ää, haluat laajennuksen, joka pitää CSS: n erillään teemasta. Jotain Custom CSS: n kaltaista. Jos haluat lisätietoja WordPressistä, tutustu osoitteeseen www.winningwp.com.

Näytä lisää videoita …

Mitään lisättävää?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map