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

Danas ću objasniti snage i slabosti dviju različitih metoda koje predlažem vama, tako da možete izabrati onu koja vam najbolje odgovara.

Ali prije, ako nikad niste instalirali WordPress, otkrijte Kako instalirati 7 korake WordPress blog et Kako pronaći, instalirati i aktivirati WordPress temu na svoj blog 

Onda se vratimo zašto smo ovdje.

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 postupak nije kompliciran.

CSS koristi odabire da bi odredio 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 s 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 donjem primjeru.

Klikom na Pregledajte element Na padajućem izborniku koji će se prikazati vidjet ćete HTML kôd stranice u novom prozoru s pregledanom stavkom označenom u prozoru s desne strane (ili ispod). U nastavku možete vidjeti primjer.

Tekstovi ovih elemenata (ili atributa) Crveno istaknuto prikazuju vam različite specifične stilove koji vrijede za stavku koju ste istaknuli uvidom u kôd.

Pročitajte također: Kako dodati padajući izbornik s CSS-u Visual Editor

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 birači. Naziv odgovarajuće datoteke sa stilom prikazuje se desno od birača.

Nakon što imate na umu ove podatke, promjena stila postaje jednostavna. Na primjer, ako želite promijeniti font iz 13px u 14px, jednostavno potražite datoteku stilskog lista, selektor koji odgovara onom istaknutoj stavci. Općenito je u ovom obliku: (« # dodatak .block-sadržaj"). 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 izborniku koji se pojavi.

Kako WordPress i CSS rade zajedno

Činjenica je da WordPress teme stvaraju se drugačije. Stoga 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 blogu za WordPress nalazi u datoteci pod nazivom " style.css ”. Ovo je uobičajeni naziv za listu stilova za bilo koju vrstu web mjesta, a ne samo za WordPress.

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

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

Metoda # 1: Uređivanje Stilske datoteke WordPress teme

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

Prvo je to učiniti s vaše WordPress nadzorne ploče. Na lijevom bočnom izborniku odaberite izbornik " Apparence "A onda" izdavač ".

Jednom kad ste na stranici urednika, vidjet ćete popis datoteka na okomitoj traci s desne strane stranice. Pomaknite se kroz popis datoteka. Vidjet ćete datoteku s nazivom " Stilna tablica 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 zaslon za uređivanje datoteke.

Drugi način pronalaženja stilske tablice jest pregledavanje operativnog sustava vašeg pružatelja usluga hostinga i pronalaženje datoteke u WordPress tema (pomoću FTP klijenta). Točna lokacija ovisit će o vašem pružatelju usluga hostinga. U donjem primjeru, naziv web stranice (U našem slučaju thecare) je mapa ispod mape public_html.

Budući da je WordPress instaliran, mapu wp-content možete vidjeti u "thecare". Podmapa wp-content je druga mapa koja se naziva " wp-teme", gdje su svi WordPress teme su instalirani.

S ove web stranice koristi se tema pod nazivom " Novosti », Datoteka stila« style.css Nalazi se u mapi " roditelj Newsletter ".

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

Možda je najprikladniji način uređivanja 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 se pohraniti odvojeno, a ne među datotekama tema. Druga je prednost, naravno, što ne morate stvarati podređenu temu.

Ovdje su neki premium dodaci koje također možete koristiti za izmjenu CSS koda vašeg WordPress tema :

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

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

Ce WordPress plugin premium će stvoriti CSS stilove prema 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 WordPress plugin ima dobar CSS editor za one koji vole kodirati. Možete kodirati uživo s ovim uređivačem i prilagoditi svoj CSS.

Preuzmite | demo | Web hosting

2. Custom JS i CSS za Gutenberg

Le WordPress plugin premium Custom JS i CSS za Gutenberg omogućit će vam dodavanje neograničenog broja 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 značajke sustava prilagođena polja vaše web stranice i pruža vam mogućnost izmjene vlastitih polja pomoću dinamičnog i moćnog modula personalizacije. i funkcionalnost sustava pregled u stvarnom vremenu ovog WordPress dodatka čini ga vrlo udobnim i jednostavnim za upotrebu.

Preuzmite | demo | Web hosting

3. CSS SiteOrigin

Daleko je dodatak WordPress koji nudi najviše opcija na ovom popisu. Nevjerojatna stvar kod ovog drugog je to što je besplatan. Ovaj WordPress dodatak je jedini koji se ne može pronaći u prilagoditelju.

Nakon instaliranja i aktivacije dodatka, morate otići na sljedeću lokaciju " Izgled> Prilagođeni CSS Za pristup 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 dodataka za povećanje prodaje vaše web stranice

Da biste pristupili potonjem, morate kliknuti na jedan od dva gumba koji se pojavljuju s lijeve strane, odmah iznad uređivača. Gumb s ikonom oka otvorit će vizualni CSS editor koda koji će entuzijasti cijeniti. Ikona sa strelicama proširenja prikazat će uređivač teksta koji će implicirati ovladavanje CSS kodovima.

Preuzmite | demo | Web hosting

4. Jednostavni korisnički CSS

Jednostavna Custom CSS je jedan od najpopularnijih dodataka.

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

Instaliran je više od 100 puta i dobio je ocjenu pet zvjezdica.

Preuzmite | demo | Web hosting

5. WP Dodaj prilagođeni CSS

WP Dodajte prilagođeni CSS je dodatak koji vam omogućuje promijenite izgled bloga WordPress 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 4,3 puta i trenutno uživa ocjenu XNUMX zvjezdice.

Preuzmite | demo | Web hosting

6. Tema 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đer nudi alternativu pomoću dječje teme.

Preuzmite | demo | Web hosting

Ostali preporučeni resursi

Također vas pozivamo da se savjetujete sa donjim izvorima kako biste poboljšali i kontrolirali svoju web stranicu i blog.

• 10 WordPress dijeljenje dodataka na društvenim mrežama
• Kako prikazati prilagođenih polja iz petlje na WordPress
• 5 WordPress dodaci za unovčavanje bloga s oglasima
• Kako bi zaštitili svoj blog sadržaja strugala

Zaključak

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

Međutim, također ćete moći konzultirati naše sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

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

...