Kako prilagoditi CSS vašeg WordPress web mjesta? Saznajte u ovom članku.

Bez obzira koju WordPress temu odaberete za svoju web stranicu, postojaće i druge web stranice koje će je koristiti. Čak i uprkos brojnim opcijama prilagođavanja koje nude mnogi WordPress teme danas svoju web stranicu možete učiniti još jedinstvenijom.

sipati Vraiment Da biste dodirnuli vizualni aspekt vaše WordPress teme, morate ići dalje od standardnog prilagođavanja koje nude opcije ili postavke WordPress teme. CSS prilagođavanje vašeg WordPress bloga će vam omogućiti da modifikujeteizgled vaše web stranice da bude zaista jedinstven.

Ovaj vodič će razmotriti različite metode koje su vam dostupne za prilagođavanje vaše web stranice pomoću CSS-a, kreiranje i prilagođavanje dječjih tema, korištenjem ugrađenih dodataka WordPress Customizer i WordPress plugins of CSS.

Ali prije nego što počnete, odvojite vrijeme i pogledajte Kako instalirati WordPress temu, Kako plugin treba instalirati na WordPress.

Tada zajedno saznajte naš popis.

CSS: Osnove i način na koji ih WordPress koristi

Prije svega: CSS je skraćenica za CSS, što nije jasnije od skraćenice. Pa, hajde da to razbijemo.

Tablica stila je dokument koji opisuje stilove (kao što su font, boje itd..) koji će se koristiti za prezentaciju drugog dokumenta. U našem slučaju imamo posla sa stilom web stranica.

DeokaskadnoIme je dio onoga što ga čini zaista moćnim. Web stranice mogu biti dizajnirane s više tabela stilova, poput kaskadnog vodopada, s tim da donji list dodaje ili zamjenjuje stilove s višeg nivoa. Ovo je važno jer će način na koji dodajete svoje stilove prebrisati izvorne promjene.

Koliko god zvuči jednostavno, CSS se može koristiti za promjenu gotovo svega na web stranici (uključujući izgled, boje, fontove, pa čak i animacije).

Saznajte kako upravljati notifikacijama otkrivanjem Kako upravljati obavijesti e-pošte na WordPress

Najviše WordPress teme koristite CSS kod dostupan u datoteci pod nazivom style.css. Ako otvorite ovu datoteku, vidjet ćete potpuni popis pravila stila za vašu WordPress temu. Šta god radili, nemojte mijenjati ovu datoteku! Ažuriranja će prebrisati vaše izmene.

Postoji nekoliko načina za dodavanje a prilagođeni CSS kod na svoju WordPress temu, tako da vaše promjene preživljavaju ažuriranje WordPress teme.

Kako prilagoditi svoju WordPress web stranicu pomoću CSS-a

Sada kada bolje razumete šta je CSS i kako WordPress teme ako ih koristite, mi ćemo pogledati opcije koje možete koristiti za prilagođavanje vašeg WordPress bloga i razgovarat ćemo o prednostima i nedostacima svake metode.

Na kraju našeg rada moći ćete utvrditi koja metoda odgovara vašoj WordPress temi.

Opcija # 1: Prilagodite CSS pomoću podređene teme

Ako koristite un dječja tema kako biste prilagodili svoj CSS kôd, ažuriranje tema o kojima smo ranije govorili više neće predstavljati problem. Ažuriranje WordPress teme utjecat će na temu "roditelj», Ostavši nepromijenjene promjene teme vašeg djeteta. Mnogi programeri WordPress tema razumiju korisnost podređene teme.

Discover Kada i kako instalirati WordPress u poddirektorijum

Stvaranje dječje teme prilično je jednostavno. Sastoji se od stvaranja mape na vašem web hostingu koja uključuje datoteku style.css koji navodi nadređenu temu kao predložak i uvozi datoteku style.css nadređene teme (sjećate li se značenja 'kaskadnih' stilskih listova?).

WordPress kodeks ima više informacija o kreiranju dječjih tema.

Nakon što stvorite temu djeteta i pravilno je aktivirate, možete započeti prilagođavanje teme WordPress. Najbrži način je uređivanje datoteke style.css, kojem se može pristupiti na dva načina.

Pogledajte ovaj članak kako biste ga otkrili Kako komprimirati CSS, HTML i Javascript datoteke

Prva je upotreba uređivača uključenog u WordPress nadzornu ploču, klikom na Izgled> Urednik. L 'izdavač prikazuje popis datoteka s desne strane dostupne u temi (Prikazane su samo popularne datoteke). Tvoja datoteka style.css bit će na samom dnu popisa i kliknuti na opciju Style Sheet vaš fajl style.css naplatiti.

Možete dodati promjene na ovu lokaciju i spremiti je.

Drugi način pristupa vašoj datoteci style.css (onaj koji preporučujemo) je da biste pregledali datoteke na vašem web hostingu putem a FTP klijent ili upravitelj datoteka. Mapa podređenih tema koju ste kreirali bit će u " wp-content> teme« . Moći ćete koristiti uređivač teksta da biste uredili datoteku style.css.

Opcija br. 2: Prilagodite CSS iz prilagodnika

Od WordPressa 4.7, korisnici mogu dodavati prilagođeni CSS direktno iz WordPress administrativnog područja. Izuzetno je jednostavno i mogli biste vidjeti svoje promjene pomoću pregleda u stvarnom vremenu.

Prvo, morate krenuti na stranicu Teme »Prilagodi.

Ovo će pokrenuti WordPress sučelje za prilagodbu teme.

S desne strane vidjet ćete pregled vaše web stranice u stvarnom vremenu s gomilom opcija na lijevom oknu. Kliknite karticu Dodatni CSS na lijevom oknu.

Kartica će se pomaknuti da bi vam prikazala jednostavno područje u koje možete dodati prilagođeni CSS. Čim dodate važeće CSS pravilo, moći ćete ga vidjeti primijenjeno na oknu za pregled vašeg web mjesta u stvarnom vremenu.

Možete nastaviti dodavati prilagođeni CSS kôd dok ne budete zadovoljni kako on izgleda na vašoj web lokaciji. Ne zaboravite kliknuti na " Spremite i objavite Na vrhu kad završite.

Napomena: Bilo koji prilagođeni CSS koji dodate pomoću programa za prilagođavanje dostupan je samo s tom određenom WordPress temom. Ako ga želite koristiti s drugim temama, morat ćete kopirati i zalijepiti u novu temu istim načinom.

Opcija # 3: Prilagodite CSS pomoću dodatka

Prednost upotrebe dodatka za prilagođavanje CSS-a je u tome što dodatak zadržavate čak i ako napravite WordPress promjenu teme. Ovo ima svojih kompromisa, jer se stilovi ne mogu dobro prikazati na svim WordPress temama.

Evo nekih dodataka:

1. Prilagođeni CSS u Jetpacku (besplatan)

WordPress dodatak Jetpack  je instaliran na preko milion WordPress web stranica, a vjerojatno i na vašoj. Donosi značajke dostupne na WordPress.com za web lokacije sa vlastitim hostingom, a nudi i modul za prilagođavanje CSS-a.

Jednom kada se modul aktivira na Jetpack nadzornoj ploči, biće dostupan prilagođeni CSS uređivač koji vam omogućava da prilagodite svoju WordPress temu bez stvaranja podređene teme. Uređivaču pristupate slijedeći ovaj put " Izgled> Uredi CSS« .

2. Jednostavni prilagođeni CSS (besplatan)

Ako želite samostalnu opciju, Jednostavna Custom CSS je dobar izbor. Ovaj besplatni dodatak koji se koristi na više od 200.000 web stranica sa ocjenom 4,9 zvijezda definitivno će vam pomoći u personalizaciji vašeg CSS WordPress bloga.

Ovaj dodatak ne zahtijeva nikakvu konfiguraciju, samo trebate instalirati i aktivirati dodatak. Da biste izmijenili CSS kod, idite na " Izgled> Prilagođeni CSS«  na WordPress nadzornoj ploči. Primijenite promjene CSS-a u okvir za tekst i nakon završetka spremite postavke.

3. CSS Hero (od 14 USD godišnje)

Posljednja opcija WordPress dodatka koju danas gledamo je premium WordPress dodatak pod nazivom CSS Hero. Od 14 $ godišnje za jednu web lokaciju, ovaj dodatak omogućava vam prilagođavanje svoje WordPress teme koristeći intuitivno sučelje.

Dizajnirani da sa njima najbolje rade desetine kompatibilnih WordPress tema , CSS Hero vam daje potpunu kontrolu nad svim elementima vaše WordPress teme. Za teme koje nisu na njihovom popisu možete koristiti Raketni režim kako biste omogućili CSS Hero prilagodbu.

CSS Hero uklanja potrebu za razumijevanjem CSS sintakse pojednostavljivanjem interakcije s kodom putem sučelja, a to vrijedi za animacije i prijelaze. Također možete pregledati promjene u stvarnom vremenu i vratiti se na prethodnu verziju.

Découvrir Kako premjestiti komentare iz jednog članka u drugi na WordPressu

Ako želite potpuno promijeniti CSS svog WordPress bloga, ali ne želite učiti CSS, CSS Hero je odlična opcija za prilagođavanje vaše web stranice, posebno ako koristite neku od njihovih WordPress tema.

Iako znate da je sadržaj važan, ipak ćete htjeti da se vaša web stranica izdvaja iz mnoštva, čak i ako koristite popularnu WordPress temu. Pomoću CSS-a možete prilagoditi dizajn svoje web stranice tako da bude potpuno jedinstven.

Idite dalje otkrivanjem Kako dozvoliti korisnicima da uređuju određene stranice

Dakle, postoji nekoliko načina za prilagođavanje CSS-a vašoj WordPress temi:

1. dječja tema.
2. Customizer.
3. CSS plugin.

Otkrijte i neke premium WordPress dodatke  

Možete koristiti druge WordPress plugins da date moderan izgled i da optimizujete rukovanje vašim blogom ili web sajtom.

Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.

1. Adning Advertising

WP PRO Advertising Advertising je WordPress dodatak za upravljanje oglašavanjem, koji nudi 18 strateške lokacije za pomoć u prikazivanju oglasa na vašoj web stranici. Ona ima i odjeljak s detaljnom statistikom iz kojeg ćete vidjeti izvedbu svakog oglasa.

Ova je značajka presudna jer će vam pomoći da poboljšate kampanju i povećate profit. Ovaj dodatak za WordPress Adsense takođe dolazi sa jedinstvenom karakteristikom koja se naziva pozadinski oglasi. Omogućava vam prikazivanje oglasa kao pozadine vašeg sadržaja.

Plus, jer je kompatibilan s dodacima kao što su WPBakery et Slider Revolution, svoje oglase možete prikazati u obliku klizača ili ih postaviti bilo gdje na vašoj web lokaciji.

download | Demo | web hosting

2. WP Media File Manager

WP Media File Manager je WordPress dodatak koji olakšava organizaciju biblioteke medija u obliku hijerarhije, koristeći funkciju Povlačenje i ispuštanje. To je jedan od WordPress plugins najmoćniji upravitelj datoteka na CodeCanyonu. Nećete morati čak ni ručno kreirati foldere.

Ovaj dodatak za WordPress omogućava vam da prenosite hiljade datoteka iz upravitelja datoteka vašeg računara na web lokaciju automatskim kopiranjem hijerarhije izvorne mape. Ako želite imati istu datoteku u različitim mapama, znajte da sada imate pravu biblioteku medija koja pruža ovu funkciju.

Oprostite se od problema s preuzimanjem određenih vrsta datoteka, sada morate samo instalirati ovaj WordPress dodatak i dopustiti mu da vam pomogne u upravljanju datotekama.

download | Demo | web hosting

3. Meni Hero

Hero Menu je mega meni WordPress dodatak. I iako ne čini puno heroja, ima sve potrebne funkcije za samo 19 dolara. Nešto poput Mega Main Menu-a, to je dodatak koji sadrži i proizvode predstavljene na CodeCanyon-u, a trenutno ima gotovo 4500 prodaja.

U odjeljku sa značajkama brzo ćete shvatiti da je prilično lako stvoriti a MegaMenu. Proces traje samo nekoliko koraka. Osim toga, primijetit ćete da je dodatak kompatibilan sa WooCommerce, nudi reagirajući dizajn i "povuci i spusti" sučelje za stvaranje menija.

Kreator izbornika poboljšava upotrebu dodatka i uvelike pojednostavljuje posao kupca. Integracija korisničkog sučelja također je sjajan posao i korisničko sučelje se savršeno ponaša s ostalim dodacima.

download | Demo | web hosting

Preporučeni resursi

Saznajte više o drugim preporučenim resursima koji će vam pomoći da izgradite i upravljate svojom web stranicom.

• Kako zaštititi obrazac lozinkom u WordPress-u
• Kako stvoriti prekrasne prelazi stranica na WordPress
• Kako se koristi WordPress REST API
• Kako povezati svoju WordPress web lokaciju s Telegramom
• Kako očistiti WordPress u nekoliko koraka

zaključak

To je to! To je sve za ovaj vodič. Nadamo se da vam je ovaj vodič pokazao kako prilagoditi CSS vaše web stranice WordPress. Ne ustručavajte se dijelite sa svojim prijateljima na svojim omiljenim društvenim mrežama. 

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 WordPress bloga

Ako imate prijedloge ili primjedbe, ostavite ih u našem odjeljku komentari.

...