Postoji više načina za dodavanje prilagođenog CSS koda na WordPress blog.

Danas ću objasniti snage i slabosti dvije različite metode koje predlažem vama, tako da ste u mogućnosti odabrati onu koja vam najbolje odgovara.

Ali prije, ako nikad niste instalirali WordPress, otkrijte Kako instalirati WordPress blog u koracima 7 et Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu 

Onda se vratimo na pitanje zašto smo ovde.

Kako pronaći stavke koje želite prilagoditi

Jednom kada izolirate dio svoju WordPress temu koju želite promijeniti (na primjer naslov članka), morat ćete odrediti CSS svojstva primijenjena na njega tako da možete izvršiti odgovarajuće promjene. Srećom, ovaj proces nije komplikovan.

CSS koristi selektore za određivanje koji će elementi doživjeti različite specifične promjene. To se obično radi navođenjem " razred "Od elementa (ili DOM element). Međutim, CSS se također može koristiti za definiranje izgleda cijelog elementa (na primjer, oznaka " ") ili pomoću identifikatora oznake.

Srećom, popularni preglednici omogućuju nam da sa samo nekoliko klikova vidimo različite birače i deklaracije koji se primjenjuju na elemente stranice. Na primjer, na Google Chromeu trebate samo označiti određeni dio dokumenta, a zatim desnim klikom kliknuti, kao u sljedećem primjeru.

Klikom na " Pregledajte element Na padajućem izborniku koji se pojavi vidjet ćete HTML kôd stranice u novom prozoru s pregledanom stavkom označenom u prozoru s desne strane (ili niže). Možete videti primer ispod.

Tekstovi ovih elemenata (ili atributa) Crveno istaknuto prikazuju vam različite specifične stilove koji su primjenjivi na stavku koju ste istakli uvidom u kôd.

Pročitajte takođe: Kako dodati padajući meni sa stilovima CSS-a u vašem Visual Editor-u

Na primjer, element " veličina slova Kaže vam da je font prikazan u označenoj stavci veličine 13 piksela. Deskriptori su okruženi zagradama, a ispred njih imaju preklopnike. Naziv odgovarajuće datoteke sa stilovima prikazuje se desno od birača.

Nakon što imate na umu ove informacije, promjena stila postaje jednostavna. Na primjer, ako želite promijeniti font iz 13px u 14px, jednostavno potražite datoteku stilskog lista, selektor koji odgovara onom od označene stavke. Općenito je u ovom obliku: (« # plugin-infos .block-content"). Tada možete mijenjati različite vrijednosti atributa.

Na Firefoxu možete učiniti istu stvar, samo označite određeni dio stranice, desnom tipkom miša kliknite stavku, a zatim odaberite " Pregledajte element U meniju koji se pojavi.

Kako WordPress i CSS zajedno rade

Činjenica je da je WordPress teme nastaju drugačije. Zato imajte na umu da vaš WordPress tema možda neće biti 100% u skladu s onim što ste pročitali u sljedećim odjeljcima.

Pored toga, više je nego vjerovatno da se CSS koji se koristi na vašem WordPress blogu nalazi u datoteci koja se zove " style.css " Ovo je uobičajeni naziv za listu stilova za bilo koju vrstu web stranica, a ne samo za WordPress.

Vidi takođe: Kako promijeniti veličinu slika Gravatar na WordPressu

Sada je vrijeme da prođemo kroz različite procese uređivanja.

Metoda br. 1: Uređivanje datoteke stila teme WordPress

Postoje dva načina za pristup datoteci style.css vaše teme.

Prvi je to učiniti sa svoje WordPress nadzorne ploče. Na lijevom bočnom meniju odaberite izbornik " Apparence "A onda" izdavač ".

Jednom kada ste na stranici urednika, vidjet ćete popis datoteka na vertikalnoj traci s desne strane stranice. Pomaknite se kroz popis datoteka. Vidjet ćete datoteku koja nosi naziv " Stylesheet style.css Pri dnu stranice.

Ako kliknete na ime ove datoteke, učitava se i prikazuje u uređivaču u sredini. Možete koristiti ovaj ekran za uređivanje datoteke.

Drugi način da pronađete tablicu stilova je da pregledate operativni sistem vašeg hosting provajdera i locirate datoteku u WordPress tema (koristeći FTP klijent). Tačna lokacija će se razlikovati ovisno o vašem hosting provajderu. U primjeru prikazanom ispod, naziv web stranice (u našem slučaju zaštita) je fascikla u folderu public_html.

Budući da je WordPress instaliran, mapu wp-sadržaja možete vidjeti u "thecare". Podmapa wp-content je druga mapa nazvana " wp-teme“, gdje je sve WordPress teme su instalirani.

S ove web stranice koristi se tema pod nazivom " Bilten », Datoteka sa stilom« style.css Nalazi se u mapi " roditelja Newsletter ".

Metod # 2: Korištenje dodatka za izmjenu CSS-a

Možda je najprikladniji način za uređivanje CSS-a vašeg WordPress bloga upotreba dodatka.

Jedna od glavnih prednosti upotrebe dodatka slična je onoj za dječje teme. Da ažurirate WordPress temu, vaše promjene neće biti prebrisane, jer će biti pohranjene odvojeno, a ne među datotekama tema. Druga prednost je, naravno, što ne morate kreirati podređenu temu.

Evo nekoliko vrhunskih dodataka koje također možete koristiti za izmjenu vašeg CSS koda WordPress tema :

1. Žuta olovka: Vizualni CSS uređivač stilova

Žuta olovka je uređivač vizuelnog stila koji možete koristiti sa bilo kojom temom za personalizaciju web stranice u nekoliko minuta (fontovi, boje, animacije i još mnogo toga ...).

Ce WordPress dodatak premium će kreirati CSS stilove pozadina dok se igrate bojama kao da je riječ o igri. Dizajniran je i za početnike i za iskusne korisnike.

Otkrijte i naše 5 dodaci WordPress za prikazivanje obavijesti

Nije potrebno znanje kodiranja. Međutim, the WordPress dodatak ima dobar CSS editor za one koji vole da kodiraju. Možete kodirati uživo pomoću ovog uređivača i prilagoditi svoj CSS.

download | Demo | web hosting

2. Custom JS i CSS za Gutenberg

Le WordPress dodatak premium Custom JS i CSS za Gutenberg omogućit će vam da dodate neograničen broj prilagođenih stilova u WYSIWYG editor za vaše WordPress postove i stranice. Potpuno je kompatibilan s Gutenbergovom verzijom WordPressa.

Jednostavno možete stvoriti novi stil pomoću CSS uređivača koji se lako koristi. Ovaj WordPress dodatak proširuje karakteristike prilagođena polja vaše web stranice i pruža vam mogućnost izmjene vaših prilagođenih polja dinamičkim i snažnim modulom personalizacije. i funkcionalnost pregled u stvarnom vremenu ovog WordPress dodatka čini ga vrlo udobnim i jednostavnim za upotrebu.

download | Demo | web hosting

3. CSS SiteOrigin

Daleko je WordPress dodatak koji nudi najviše opcija na ovoj listi. Nevjerovatna stvar kod ovog drugog je da je besplatan. Ovaj WordPress dodatak je jedini koji se ne može naći u prilagoditelju.

Nakon instaliranja i aktivacije dodatka, potrebno je navigirati do sljedeće lokacije “ Izgled> Prilagođeni CSS Da biste pristupili CSS izdanju dodatka. Na ovoj stranici možete vidjeti uređivač teksta koji ne nudi pregled uživo. 

Pročitajte i naš članak o 10 WordPress plugins za povećanje prodaje vašeg web sajta

Da biste pristupili potonjem, morate kliknuti na jedan od dva gumba koji se pojavljuju s lijeve strane, odmah iznad uređivača. Dugme sa ikonom oka otvorit će vizualni CSS editor koda koji će entuzijasti cijeniti. Ikona sa strelicama produžetka prikazivat će uređivač teksta koji podrazumijeva vladanje CSS kodovima.

download | Demo | web hosting

4. Jednostavan Custom CSS

Jednostavna Custom CSS je jedan od najpopularnijih dodataka.

Otkrijte i naše Kako ubrzati svoj blog: upravljanje CSS i JS datotekama.

Instaliran je preko 100 000 puta i dobio je ocjenu pet zvjezdica.

download | Demo | web hosting

5. WP Dodajte Custom CSS

WP Dodajte prilagođeni CSS je dodatak koji vam omogućava promenite izgled WordPress bloga cijeli ili samo pojedinačni članci. Ovo je sjajna opcija ako tražite fleksibilnost u prilagođavanju predmeta.

Dodatak je preuzet više od 10.000 puta i trenutno uživa ocjenu 4,3 zvjezdice.

download | Demo | web hosting

6. Theme Junkie Custom CSS

Ako tražite rješenje koje nudi pregled vaših promjena uživo, možete razmisliti o korištenju Tema Junkie Custom CSS. 

Ovo rješenje dodaje prilagođeni CSS upravitelj na nadzornu ploču gdje možete dodati vlastite stilove. Takođe nudi i alternativu koristeći dječju temu.

download | Demo | web hosting

Ostali preporučeni resursi

Također vas pozivamo da se konzultirate sa resursima u nastavku kako biste otišli dalje u nadzor i kontrolu vaše web stranice i bloga.

• 10 WordPress plugins dijeljenje na društvenim mrežama
• Kako bi se prikazao prilagođenih polja iz petlje na WordPress
• 5 WordPress plugins za monetizaciju vašeg bloga sa oglasima
• Kako zaštititi svoj blog od skraćenica sadržaja

zaključak

Evo! To je sve za ovaj vodič, nadam se da ćete uspjeti dodati prilagođeni CSS kod na svoj WordPress blog na 2 metode, ako ih imate komentari ili prijedloge, ne ustručavajte se reći nam u odjeljku rezerviranom za njih.

Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.

Ako vam se svidio ovaj članak, nne ustručavajte se dijelite na svojim omiljenim društvenim mrežama. 

...