Kaip pridėti pasirinktinį CSS prie „WordPress“ palaikomos svetainės – TEISINGAS būdas!

Naujokams CSS įtraukti į „WordPress“ svetainę nėra lengva. Tačiau kartais tai labai reikalinga. Iš tikrųjų yra daugybė būdų tinkinti savo svetainę (su puslapių kūrėjais, įvairiais papildiniais ir „WordPress“ temos nustatymais ir t. T.), Tačiau kartais viskas, ką jums reikia padaryti, yra pakeisti vieną ar du labai specifinius dizaino aspektus – būtent čia patenka CSS. Bet kaip tai padaryti? Kur pradedate „WordPress“? Nebijok, mes turime atsakymus …


Štai ką reikia žinoti:

Kaip pridėti CSS prie „WordPress“:

– (pastaba: vaizdo įrašų kreditai „Topher DeRosia“ – „HeroPress“ kūrėjui

Vaizdo įrašo nuorašas:

Sveiki! Tai yra „Topher“ su „WinningWP“. Šiame vaizdo įraše apžvelgsime, kaip teisingai pridėti tinkintą CSS prie „WordPress“. Įsivaizduokite akimirką, kad norite šiek tiek pakeisti jūsų svetainės išvaizdą. Jūs „Google“ po truputį aptinkate CSS fragmentą ir jie sako: „Tiesiog įdėkite tai į savo svetainę“. Bet kur jūs dedate? Ir kaip jūs žinote, kad tai padaryta teisingai? Leiskite man parodyti jums. Pirmiausia turime nustatyti, kam skirta jūsų CSS. Yra tikrai tik dvi sritys, kurias galbūt norėsite pritaikyti CSS. Vienas yra skirtas bendram svetainės dizainui, kuris yra išdėstymas, spalvos ir kt., Kitas yra turinio dizainas, ir būtent taip atrodo jūsų turinys: vaizdo apdorojimas, „blockquote“ dydis ir kt. Ateityje galbūt norėsite pakeisti savo svetainės dizainą. Gauk visiškai naują temą ir vis tiek laikykis savo mažų patarimų, kaip atrodo jūsų turinys. Leisk man parodyti, ką turiu galvoje. Čia turime gana paprastą svetainę ir lengvai apibūdinti išdėstymą. Viršuje yra paieškos juosta, antraštės juosta, turinio sritis. Jį sunku pamatyti, nes ji tuščia, bet aš čia turiu šoninę juostą. Visas fonas yra baltas, poraštė pilka, o paieškos juosta juoda. Tai yra dalykas, kurį galėtumėte pakeisti, atsižvelgdami į jūsų temą. Turime savo turinį ir tam tikrą kiekį įklotų vaizdų dešinėje, o antraštės yra kursyvu. Tai būtų su turiniu susiję pakeitimai, todėl pažvelkime, kaip tai padaryti abu. Svetainės dizaino pakeitimai yra susiję su jūsų tema, kuri yra prasminga. Jei ateityje pakeisite savo temą, nenorėsite išsaugoti CSS, nes viskas susiję su tuo, kaip ji atrodo. Taigi norime pakeisti dabartinę jūsų temą ir ją panaikinti, jei kada nors atsikratysi tos temos. Turite du pasirinkimus: vienas yra tinkinimo priemonė, o kitas – „style.css“ redagavimas. Nei vienas iš jų nėra labai sunkus, tačiau tinkinimo priemonė yra tikrai lengviausia. Leisk man parodyti, ką turiu galvoje. Norėčiau pakeisti savo svetainės antraštę į raudoną. Taigi pirmiausia turiu rasti jos pavadinimą. „Chrome“ aš dešiniuoju pelės mygtuku spustelėkite ir paspauskite „apžiūrėti“. Ir čia sakoma site-head-main. Taigi tai ir noriu pakeisti. Dabar mano svetainės viršuje yra mygtukas Tinkinti. Jei pereinsiu į tinkinimo priemonės apačią, galiu spustelėti „Papildoma CSS“. Čia yra šiek tiek instrukcijų, kaip juo naudotis. Jei spustelėsite uždaryti, tada jis pasirodo čia. Taigi aš ruošiuosi rašyti pagrindinę svetainės antraštę ir garbanotas petnešas, kurių fono spalva yra raudona. Dabar jums nebūtinai reikia žinoti, kaip naudotis inspektoriumi, kaip aš, ir jums nereikia žinoti, kad f yra raudona. Galbūt gavote šį kodą iš kažkurios svetainės ir viskas gerai, jūs neturite žinoti, kaip jį rasti patys. Aš tik parodau, kaip čia įdėjai. Dabar, kai ten esu, galiu spustelėti paskelbti ir dabar galiu uždaryti šį skirtuką, o dabar turiu raudoną antraštę. Čia galite įdėti tiek CSS, kiek norite. Jei norite, galite visiškai pakeisti visą savo svetainės dizainą. Bet dabar noriu parodyti jums kitą būdą redaguoti CSS. Aš pašalinsiu kodą, kurį anksčiau įdėjau, ir išsaugosiu jį. Dabar redaguosime mūsų temos „style.css“ failą. Ketiname eiti į informacijos suvestinę, dalyje Išvaizda, Temos. Dabar jūsų aktyvi tema visada yra viršuje, kairėje. Tikrai norite naudoti šį metodą tik tuo atveju, jei naudojate temą vaikams. Jūs galite pamatyti čia, aš turiu įdiegti, bet mano aktyvi tema yra make-vaikas tema. Tai reiškia, kad jei atliksite atnaujinimą, jis neišnaikins mano tinkinimų, kurie bus skirti mano vaiko temai, ir mano vaiko tema niekada nebus atnaujinama, nes vaikų temos negauna atnaujinimų. Jei galite patvirtinti, kad naudojate vaikų temą, meniu virš šio meniu yra nuoroda į redaktorių. Ir čia jie pasakys jums viską, ką tik pasakiau apie vaikų temas. Taigi eik į priekį ir spustelėkite Aš suprantu, jei naudojate vaikų temą. Pirmasis atsirandantis failas yra „style.css“. Visada bus taip. Ir visas šis tekstas yra informacija apie jūsų temą. Jums nereikia į tai nekreipti jokio dėmesio. Eikite tiesiai į apačią ir pamatysite, kad mano žodžiai sako „žemiau pridėkite pasirinktinius stilius“. Prieš atlikdami bet kokį šio failo redagavimą, norėčiau rekomenduoti atsarginę jo kopiją. Ir tai tikrai paprasta. Mes tiesiog nukopijuosime ir įklijuosime jį į kitą failą. Taigi, jei esate „Windows“, galite tai padaryti naudodami „Control + A“, o „Mac“ sistemoje – „Command + A.“. Tai paryškins viską ir „Control“ arba „Command + C“ ir nukopijuos. Galite įklijuoti į bet kurį kitą failą, kuriame gali būti tekstas. Jums tikrai nereikia jo nuolat laikyti, jūs jį laikote tik taisydami šį redagavimo įrankį, o jei šis pavyks puikiai, tai atlikę tiesiog ištrinkite atsarginę kopiją. Bet jei šis sulūžtų ir pasiklystumėte, galite jį tiesiog ištrinti ir įklijuoti į tai, ką nukopijavote. Taigi įklijuosiu tą patį kodą, kurį padariau naudodamas tinkinimo įrankį, ir spustelėkite „Atnaujinti failą“. Ir tada iš naujo įkelk mano svetainę. Ir mes čia, ji taip pat raudona. Dabar, jei tinkinimo priemonė yra tokia lengva, kodėl jūs kada nors norėtumėte įdėti į failą style.css? Priežastis ta, kad failas style.css įkeliamas daug anksčiau nei tinkinimo priemonė. Taigi, jei tai padarėte naudodami tinkinimo parametrą, galite gauti atvejį, kai puslapis visiškai įkeliamas, sekundės dalį atrodo baltas, o tada mirksi raudonai. Bet jei jūs pateikiate „style.css“, tai to nepadarys. Kitas dalykas, kuris man patiko dėl tinkinimo priemonės, yra tas, kad jūs galite pamatyti pakeitimus juos įvesdami. Taigi, bendra darbo eiga yra visa CSS surašymas tinkinimo priemonėje ir visa tai nukopijuoti ir įklijuoti į style.css. Jūs neprivalote to daryti. Galite palikti visa tai tinkinimo priemonėje ir tai veiks tik surasti amžinai. Jei jūs tik pradedate vykdyti mano rekomendaciją, darykite tik tinkinimo priemonę. Tai greita, lengva, neskausminga, o negatyvų labai mažai. Jei norite eksperimentuoti ir šiek tiek sušlapti kojas su vidiniu „WordPress“ darbu, tada eikite į priekį ir redaguokite failą style.css. Dabar kitas CSS tipas, su kuriuo galbūt norėsite dirbti, yra jūsų turinio valdymas. Dabar nenorite, kad jis būtų susietas su tema. Norite, kad jis išliktų, net jei keičiate temas. Visada galite norėti, kad vaizdo subtitrai nebūtų kursyvuoti, nesvarbu, kokią temą naudojate. Tokiu atveju norite naudoti papildinį. Aš naudoju šį papildinį, pavadintą „Simple Custom CSS“. Po to „Išvaizda“ yra pasirinktinis CSS meniu punktas. Ir tai leidžia jums tiesiog įvesti CSS čia. Taigi aš sužinosiu šios antraštės pavadinimą. Dešiniuoju pelės mygtuku spustelėkite ir apžiūriu. Ir sakoma, kad jis vadinamas wp-caption-text. Taigi čia galiu įvesti .wp-caption-text, font-style: normal; Spusteliu Atnaujinti pasirinktinę CSS ir tada įkeliame mūsų puslapį iš naujo. Ir jūs galite pamatyti, kad jis nebėra kursyvas. Taigi dabar eisiu pakeisti savo temą į. Pamatysite, kad mano paveikslėlio antraštė vis dar nėra kursyvu, tačiau visos raudonos antraštės koncepcijos nebėra, nes visas tas kodas buvo susietas su kita tema. Taigi, jei norite valdyti savo temą, naudokitės tinkinimo priemone arba apsilankymo skyriuje „Išvaizda“ apsilankykite redaktoriuje ir redaguokite savo stiliaus lapą. Jei norite tvarkyti savo turinio CSS, tada reikia papildinio, kuris CSS atskirtų nuo temos. Kažkas panašaus į pasirinktinį CSS. Jei norite sužinoti daugiau apie „WordPress“, apsilankykite www.winningwp.com.

Žiūrėti daugiau vaizdo įrašų …

Bet ką pridėti?

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