Kako prilagoditi CSS svoje web stranice WordPress? Saznajte u ovom članku.

Bez obzira koju WordPress temu odabrali za svoju web stranicu, bit će drugih web stranica koje će je koristiti. Čak i unatoč brojnim mogućnostima prilagodbe koje nude mnogi WordPress teme danas svoju web stranicu možete učiniti još jedinstvenijom.

Sipati vraiment Da biste dodirnuli vizualni aspekt svoje WordPress teme, morate ići dalje od standardne prilagodbe koju nude opcije ili postavke WordPress teme. CSS prilagodba vašeg WordPress bloga omogućit će vam izmjenuizgled vaše web stranice da bude uistinu jedinstven.

Ovaj vodič će pogledati različite metode koje su vam dostupne za prilagodbu vaše web stranice pomoću CSS-a, stvaranje i prilagodbu podređenih tema, korištenje ugrađenih dodataka WordPress Customizer i WordPress plugins CSS-a.

Ali prije nego što započnete, odvojite vrijeme i pogledajte Kako instalirati WordPress temu, Koliko dodaci bih trebao instalirati na WordPress.

Tada zajedno saznajte naš popis.

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

Prije svega: CSS je kratica Cascading Style Sheets, što nije jasnije od skraćenice. Pa, hajde da to razbijemo.

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

DiokaskadnoIme je dio onoga što ga čini uistinu moćnim. Web stranice mogu se dizajnirati s više stilskih listova, poput kaskadnog slapa, s donjim listom koji dodaje ili zamjenjuje stilove s više razine. To je važno jer će način na koji dodajete svoje stilove prebrisati izvorne promjene.

Koliko god jednostavno zvučalo, 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 obavijestima otkrivanjem Kako upravljati e-mail obavijesti o WordPress

većina 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. Što god učinite, nemojte mijenjati ovu datoteku! Ažuriranja će prebrisati vaše promjene.

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 s CSS-om

Sada kada bolje razumijete što je CSS i kako WordPress teme upotrijebite ih, pogledat ćemo opcije koje možete upotrijebiti za prilagodbu svog WordPress bloga i razgovarat ćemo o prednostima i manama svake metode.

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

Opcija br. 1: prilagodite CSS pomoću podređene teme

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

Otkrijte Kada i kako instalirati WordPress u poddirektorij

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?).

Codex WordPress ima više informacija o stvaranju dječjih tema.

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

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

Prvo je korištenje uređivača koji je uključen 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). Vaša datoteka style.css bit će na samom dnu popisa i kliknuti na opciju stylesheet svoju datoteku style.css naplatit će se.

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

Drugi način pristupa vašoj datoteci style.css (jedan preporučamo) je za pregledavanje datoteka na vašem web hostingu putem a FTP klijent ili upravitelj datoteka. Mapa podređene teme koju ste stvorili bit će u " wp-content> teme« , Moći ćete koristiti uređivač teksta za uređivanje datoteke style.css.

Opcija br. 2: prilagodite CSS iz prilagoditelja

Od WordPressa 4.7 korisnici mogu dodavati prilagođeni CSS izravno iz administrativnog područja WordPressa. To je vrlo jednostavno, a svoje ćete promjene moći vidjeti pomoću pregleda u stvarnom vremenu.

Prvo, morate krenuti na stranicu Teme »Prilagodi.

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

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

Kartica će se izvući kako bi vam pokazala jednostavno područje u koje možete dodati svoj prilagođeni CSS. Čim dodate valjano CSS pravilo, moći ćete ga primijeniti na oknu za pregled stvarnog vremena vaše web stranice.

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

Napomena: Bilo koji prilagođeni CSS koji dodate pomoću alata 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 istom metodom.

Opcija # 3: Prilagodite CSS pomoću dodatka

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

Evo nekoliko dodataka:

1. Prilagođeni CSS u Jetpacku (besplatan)

Dodatak WordPress Jetpack  je instaliran na preko milijun WordPress web stranica, a vjerojatno i na vašoj. Donosi značajke dostupne na WordPress.com za web lokacije sa vlastitim hostingom, a također nudi i modul za CSS prilagodbu.

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

2. Jednostavni prilagođeni CSS (besplatan)

Ako umjesto toga želite opciju samostalan, Jednostavna Custom CSS je dobar izbor. Ovaj besplatni dodatak, koji se koristi na više od 200.000 web stranica s 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 svoj CSS kôd, idite na " Izgled> Prilagođeni CSS«  na WordPress nadzornoj ploči. Primijenite svoje CSS promjene u tekstualnom okviru i nakon što spremite spremite postavke.

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

Konačna opcija WordPress dodatka koju danas gledamo je premium WordPress dodatak pod nazivom CSS heroj, Iz 14 $ godišnje za jedno web mjesto ovaj dodatak omogućuje vam prilagođavanje svoje WordPress teme koristeći intuitivno sučelje.

Dizajniran da najbolje funkcionira 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 upotrijebiti Način rakete 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.

otkriti Kako premjestiti komentare iz jednog članka u drugi na WordPressu

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

Iako znate da je sadržaj važan, ipak ćete htjeti da se vaše web mjesto 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 bi se omogućilo korisnicima za uređivanje određenih stranica

Dakle, postoji nekoliko načina za prilagodbu CSS-a vaše WordPress teme:

1. dječja tema.
2. za prilagodbu.
3. CSS čep.

Otkrijte i neke premium WordPress dodatke  

Možete koristiti druge WordPress plugins dati moderan izgled i optimizirati rukovanje vašim blogom ili web stranicom.

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

1. Oglašavanje

WP PRO Advertising Advertising sustav je WordPress dodatak za upravljanje oglašavanjem, koji nudi 18 strateške lokacije za pomoć u prikazivanju oglasa na vašoj web stranici. Ona također sadrž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đer dolazi s jedinstvenom značajkom koja se naziva pozadinski oglasi. Omogućuje vam prikazivanje oglasa kao pozadine vašeg sadržaja.

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

Preuzmite | demo | Web hosting

2. WP Media File Manager

WP Media File Manager je WordPress dodatak koji olakšava organiziranje medijske biblioteke u obliku hijerarhije, koristeći funkciju povlačenja i ispuštanja. To je jedan od WordPress plugins najmoćniji upravitelj datoteka na CodeCanyon. Nećete čak ni morati ručno stvarati mape.

Ovaj dodatak za WordPress omogućuje vam prijenos tisuća datoteka iz upravitelja datoteka računala na web mjesto 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.

Preuzmite | demo | Web hosting

3. Izbornik junaka

Hero Menu je mega izbornik WordPress dodatak. I premda ne čini puno heroja, ima sve potrebne značajke za samo 19 dolara. Nešto poput Mega glavnog izbornika, to je dodatak koji također sadrži proizvode predstavljene na CodeCanyonu, a trenutno ima gotovo 4500 prodaja.

U odjeljku sa značajkama brzo ćete shvatiti da je vrlo jednostavno stvoriti megamenu, Postupak traje samo nekoliko koraka. Ali osim toga, primijetit ćete da je dodatak kompatibilan sa WooCommerce, nudi responzivan dizajn i "povuci i spusti" sučelje za stvaranje izbornika.

Graditelj 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 savršeno se ponaša s ostalim dodacima.

Preuzmite | demo | Web hosting

Preporučeni resursi

Saznajte više o drugim preporučenim resursima koji će vam pomoći u izgradnji i upravljanju web mjesta.

• Kako zaštititi obrazac lozinkom u WordPressu
• Kako izraditi lijepe prijelaze stranica na WordPress
• Kako se koristi WordPress REST API
• Kako povezati svoju web stranicu WordPress 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 svoje web stranice WordPress. Ne ustručavajte se dijelite sa svojim prijateljima na svojim omiljenim društvenim mrežama. 

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.

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

...