Kako dodati prilagođeni CSS na web mjesto sa sustavom WordPress – PRAVI način!

Za početnike, dodavanje CSS-a na web mjesto WordPress nije lak zadatak. Međutim, ponekad je to vrlo nužno. Zapravo postoji puno načina za prilagodbu vaše web stranice (s programima za pravljenje stranica, različitim dodacima i postavkama WordPress-a, itd.), Ali ponekad je sve što trebate učiniti promijeniti jedan ili dva vrlo specifična aspekta dizajna – odakle dolazi CSS .Ali kako to učiniti? Gdje u WordPressu počinjete? Ne boj se, imamo odgovore …


Evo što trebate znati:

Kako dodati CSS u WordPress:

– (napomena: video pripisi Topher DeRosiji – tvorcu HeroPressa

Video transkript:

Bok! Ovo je Topher s WinningWP. U ovom ćemo videozapisu pogledati kako dodati prilagođeni CSS na WordPress na pravi način. Zamislite na trenutak da želite malo promijeniti način izgleda vaše web lokacije. Malo preokrenete Google i nađete mali isječak CSS-a i oni kažu, “Samo stavite to na svoju web lokaciju.” Ali gdje ga staviti? I kako znate da je to učinjeno na pravi način? Da ti pokažem. Prvo moramo utvrditi za što se koristi vaš CSS. Doista postoje samo dva područja na koja možda želite primijeniti CSS. Jedan je za opći dizajn web mjesta, koji je izgled, boje i slično. Drugi je dizajn sadržaja i to je način na koji izgleda vaš specifičan sadržaj: obrada slike i veličina bloka, itd. U budućnosti ćete možda htjeti promijeniti dizajn web lokacije. Nabavite potpuno novu temu, a opet zadržite sitne sitnice koje ste napravili kako izgleda vaš sadržaj. Dopustite da vam pokažem na što mislim. Ovdje imamo prilično jednostavnu web lokaciju i lako je opisati izgled. Na vrhu je traka za pretraživanje, traka zaglavlja, područje sadržaja i teško je vidjeti jer je prazna, ali ovdje imam bočnu traku. Pozadina je sva bijela, podnožje je sivo, a traka za pretraživanje crna. To su vrste stvari koje biste promijenili u vezi sa vašom temom. Ovdje imamo svoj sadržaj i imamo određenu količinu paddinga s desne strane slika, a natpisi su u kurzivu. To bi bile promjene vezane uz sadržaj, pa pogledajmo kako i jedno i drugo. Promjene dizajna web stranice vezane su za vašu temu što ima smisla. Ako ubuduće promijenite temu, ne želite zadržati CSS jer se sve odnosi na to kako izgleda. Stoga želimo promijeniti vašu trenutnu temu, a zatim je izgubiti ako se ikada riješite te teme. Imate dva izbora, jedan je Customizer, a drugi uređuje style.css. Nijedna nije vrlo teška, ali Customizer je doista najlakši. Dopustite da vam pokažem na što mislim. Želim promijeniti zaglavlje svoje web lokacije u crveno. Dakle, prvo što ću učiniti je pronaći njegovo ime. U pregledniku Chrome kliknite desnom tipkom miša i pritisnem pregled. A upravo ovdje piše site-header-main. To je ono što želim promijeniti. Sada ovdje na vrhu moje stranice nalazi se gumb Prilagodi. Ako se pomaknem na dno Customizer-a, mogu kliknuti Dodatni CSS. Ovdje je malo upute o tome kako ga koristiti. Ako kliknete zatvorite, dolazi ovdje gore. Tako da ću upisati web-header-u i u kovrčave narukvice staviti u pozadinsku crvenu boju. Sada vam nije nužno znati kako se inspektor koristi kao i ja, a ne morate znati da je f crvena. Možda ste ovaj kôd dobili s web mjesta i to je u redu, ne morate znati kako ga sami pronaći. Samo vam pokazujem kako ste to ovdje stavili. Sad kad je tamo mogu kliknuti objaviti i sada mogu zatvoriti ovu karticu i tamo imam crveno zaglavlje. Ovdje možete staviti onoliko CSS-a. Možete u potpunosti promijeniti cjelokupni dizajn vaše web stranice ako želite. Ali sada vam želim pokazati drugi način uređivanja CSS-a. Uklonit ću kôd koji sam stavila prije i spremiti ga. Sada ćemo urediti datoteku style.css naše teme. Idite na nadzornu ploču, pod nazivom Izgled, Teme. Sada je vaša aktivna tema uvijek u gornjem lijevom kutu. Doista želite raditi ovu određenu metodu samo ako koristite dječju temu. Ovdje možete vidjeti instalacija, ali moja aktivna tema je make – dječja tema. To znači da ako ažuriram ažuriranje, to neće obrisati moja prilagođavanja koja će biti u mom djetetu i moja tema nikada neće dobiti ažuriranje, jer dječje teme ne dobivaju ažuriranja. Ako možete potvrditi da upotrebljavate podređenu temu, u ovdje je prikazanom linku veza za uređivač. I upravo ovdje će vam reći sve što sam upravo rekao o dječjim temama. Dakle, naprijed i kliknite Razumijem ako upotrebljavate podređenu temu. Prva datoteka koja se pojavljuje je vaš style.css. Uvijek će tako biti. I sav ovaj tekst ovdje je informacija o vašoj temi. Ne trebate obratiti nikakvu pažnju na to. Idite desno do dna i vidjet ćete ovdje da moj kaže: “Dodajte svoje prilagođene stilove u nastavku.” Prije nego što napravimo bilo kakvo uređivanje ove datoteke, želim vam preporučiti da izradite sigurnosnu kopiju. A to je stvarno jednostavno. Samo ćemo ih negdje kopirati i zalijepiti u drugu datoteku. Dakle, ako ste u sustavu Windows, možete raditi Control + A ili na Mac računalu, to možete učiniti Command + A. Istaknut će sve, i Control ili Command + C i kopirati ga. A možete je zalijepiti u bilo koju drugu datoteku koja može sadržavati tekst. Ne morate ga stalno trajno čuvati, samo ga uređujete dok uređujete, a ako savršeno ide, onda nakon što to učinite jednostavno izbrišete sigurnosnu kopiju. Ali ako se ovaj pokvari i izgubite se, jednostavno ga možete izbrisati i zalijepiti natrag u ono što ste kopirali. Tako da ću zalijepiti točno isti kôd koji sam učinio s Customizer-om i kliknuti Ažuriraj datoteku. A zatim ponovno učitajte moju web stranicu. A tu smo i crveni. Ako je Customizer tako jednostavan, zašto biste uopće željeli staviti u svoju style.css datoteku? Razlog je taj što se datoteka style.css učitava puno ranije od Customizera. Dakle, ako ste to učinili s Customizer-om, možda ćete dobiti instancu u kojoj se stranica u cijelosti učitava, na bijelu sekundu izgleda bijelo, a zatim bljeska crveno. Ali ako ga stavite u style.css, to ne čini. Još jedna stvar koju sam volio kod Customizera je da možete vidjeti promjene dok ih upisujete. Dakle, uobičajeni tijek rada mi je napisati sve svoje CSS-ove u Customizer-u, a zatim ih kopirati i zalijepiti u style.css. Ne morate to činiti. Sve to možete ostaviti u Customizer-u i to će raditi zauvijek. Ako tek započinjete, moja preporuka je da radite samo Customizer. To je brzo, lako je, bezbolno je, a negativi su vrlo minimalni. Ako želite eksperimentirati i malo se navlažiti sa unutrašnjim radom WordPressa, nastavite i uredite datoteku style.css. Sada je druga vrsta CSS-a s kojom biste možda željeli raditi za upravljanje sadržajem. Sada za ovo ne želite da bude vezan za temu. Želite da se lijepi čak i ako mijenjate teme. Uvijek biste željeli da naslovi slika ne budu kurzivi, bez obzira na temu koju upotrebljavate. U tom slučaju želite koristiti dodatak. Koristim ovaj dodatak koji se zove Simple Custom CSS. Tada ispod Izgleda postoji stavka u prilagođenom CSS izborniku. I omogućuje vam da jednostavno ovdje upišete CSS. Otkriću ime ovog opisa. Kliknite desnom tipkom miša i pregledam. A kaže da se zove wp-caption-text. Dakle ovdje mogu upisati .wp-caption-text, font-style: normal; Kliknite Ažuriraj prilagođeni CSS i tada ćemo ponovno učitati stranicu. I vidite da više nije kurziv. Dakle sada idem promijeniti svoju temu. I vidjet ćete da moj natpis slike još uvijek nije kurzivan, a cijeli koncept crvenog zaglavlja je nestao jer je sav taj kôd bio vezan za drugu temu. Dakle, za pregled, ako želite upravljati temom, upotrijebite Customizer ili pod izgledom, idite na Editor i uredite listu stilova. Ako želite upravljati CSS-om za svoj sadržaj, onda želite dodatak koji drži vaš CSS odvojen od teme. Nešto poput Custom CSS-a. Ako želite saznati više o WordPressu, pogledajte www.winningwp.com.

Pogledajte još videozapisa …

Bilo što dodati?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me