Nedavno nas je jedan od naših čitatelja pitao kako promijeniti bočnu traku WordPress teme?

Obično dobivamo ovo pitanje od korisnika koji žele promijeniti lokaciju svoje bočne trake s lijeva na desno ili s desna na lijevo.

U ovom će vam vodiču pokazati kako možete promijeniti lokaciju bočne trake na WordPressu.

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 promijeniti mjesto bočne trake na wordpressu e1568058176266

Zašto mijenjati mjesto bočne trake na WordPressu?

Stručnjaci za upotrebljivost vjeruju da ljudi skeniraju stranice slijeva udesno. Preporučuju stavljanje važnog sadržaja s lijeve strane kako bi ga korisnici prvo vidjeli. Međutim, ovo bi se moglo poništiti ako je vaša web lokacija na RTL jeziku (desno s lijeve strane).

Saznajte ako ako vaš WordPress blog ima bočne trake

Mnoge WordPress web stranice koriste tipičan izgled bloga sa dva stupca. Jedan za sadržaj, a drugi stupac za bočnu traku.

tipični demo sadržaj WordPress bočne trake

Ako ste novi na web stranicama, trebali biste odabrati temu WordPress-a koja na vašoj željenoj lokaciji ima bočnu traku.

mnogi WordPress teme nudi opcije za promjenu strane bočne trake u postavkama bočne trake. Međutim, ako vaša WordPress tema nema ovu opciju, morat ćete ručno promijeniti stranu bočne trake. Idite dalje otkrivanjem kako ukloniti bočnu traku na WordPressu

U skladu s tim, pogledajmo metodu koju trebate koristiti da biste lako promijenili stranu WordPress-a bočne trake pomoću CSS-a.

Promjena bočne trake pomoću CSS-a

Prije bilo kakvih promjena na WordPress temi, prvo trebate razmotriti kreiranje dječje teme. Korištenjem dječje teme moći ćete ažurirati svoju roditeljsku temu bez gubitka promjena.

Discover Kako prikazati drugu bočnu traku za svaki članak na WordPressu

Drugo, uvijek biste trebali stvarati sigurnosnu kopiju svoje WordPress web stranice kada mijenjate aktivnu temu u stvarnom vremenu.

Za uređivanje datoteka teme WordPress trebat će vam FTP klijent. Posavjetujte se sa vodič o tome kako koristiti FTP.

Prijavite se na svoju WordPress web stranicu pomoću FTP klijenta i pomaknite se do mape tema. Obično se nalazi na:

 / Yoursite / wp-content / themes / vaše-theme-folder / 

Sada morate preuzeti i otvoriti glavnu datoteku tabele stilova vaše WordPress teme u uređivaču teksta kao što je Notepad. Ova datoteka se zove style.css, i nalazi se u korijenskom direktoriju vaše WordPress teme.

Discover kako upravljati WordPress datotekama i mapama

U ovoj datoteci pronađite CSS klasu svoje bočne trake. Općenito ovaj razred je " sidebar ". U ovom primjeru koristimo zadanu WordPress temu " dvadeset petnaest Ko ima ovu klasu za bočnu traku:

.sidebar {float: lijevo; margina-desno: -100%; max-width: 413px; položaj: relativan; širina: 29.4118%; }

Kao što vidite, bočna traka lebdi ulijevo s marginom od -100%. Promijenit ćemo plovak udesno:

.sidebar {float: desno; margina-lijevo: -100%; max-width: 413px; položaj: relativan; širina: 29.4118%; }

Spremite svoje izmjene i prenesite style.css datoteku na svoju web lokaciju pomoću FTP klijenta. Ako posjetite vašu web stranicu, izgledat će ovako:

demo webbar modifikacija

Zaista smo premjestili bočnu traku, ali nismo pomaknuli područje sadržaja. " dvadeset Petnaest Koristi ovaj CSS za definiranje položaja područja sadržaja.

.site-content {prikaz: blok; plovak: lijevo; margina-lijevo: 29.4118%; širina: 70.5882%; }

Promijenit ćemo ga kako bismo sadržaj premjestili udesno. Kako slijedi:

.site-content {prikaz: blok; plovak: lijevo; margina-desno: 29.4118%; širina: 70.5882%; }

Evo kako će izgledati vaša web stranica nakon primjene ovog CSS koda.

novo web mjesto prezentacije premješteno

Kao što vidite, promijenili smo lokaciju područja sadržaja i bočne trake. Međutim, na lijevoj strani je još uvijek bijeli blok.

Idite dalje otkrivanjem kako upravljati WordPress datotekama i mapama

Često ćete naići na ove greške tokom rada sa CSS-om. Trebat će neki detektivski rad da biste shvatili što je uzrok tome i kako to riješiti.

Upotrijebite alat "Inspector" u pregledniku za pregled izvornog koda. Usmjerite miš na pogođenu regiju u pregledniku, kliknite desnom tipkom miša i odaberite "Inspector" u izborniku preglednika.

pregledač alata pregledača

Dok pomičete mišem oko prikaza izvornog koda, primijetit ćete područja na koja utječe istaknuta u pregledu uživo. U desnom oknu moći ćete vidjeti CSS koji se koristi za taj odabrani element.

Discover our 5 WordPress plugins za vizualno uređivanje CSS-a na vašem blogu

Dakle, CSS koji odgovara označenoj stavci mora se prilagoditi.

@media zaslon i (min. širina: 59.6875em) {body: prije {background-color: #fff; okvir-sjena: 0 0 1px rgba (0, 0, 0, 0.15); sadržaj: ""; displej: blok; visina: 100%; minimalna visina: 100%; položaj: fiksna; gore: 0; lijevo: 0; širina: 29.4118%; z-indeks: 0; / * Ispravlja treperi bug pomicanjem na Safari * /}

Ovaj CSS kôd dodaje prazan blok širine 29,4118% i širine 100% u gornjem lijevom kutu. Evo kako ćemo to pomaknuti udesno.

@media zaslon i (min. širina: 59.6875em) {body: prije {background-color: #fff; okvir-sjena: 0 0 1px rgba (0, 0, 0, 0.15); sadržaj: ""; displej: blok; visina: 100%; minimalna visina: 100%; položaj: fiksna; gore: 0; desno: 0; širina: 29.4118%; z-indeks: 0; / * Ispravlja treperi bug pomicanjem na Safari * /}

Nakon spremanja i učitavanja tabele stilova na server, ovako će izgledati vaša web stranica.

nova stranica bočne stranice na desnoj strani

Rad sa CSS-om može biti zbunjujući za početnike. Ako ne želite raditi sve ručne radove, možete isprobati WordPress CSS Hero dodatak. Omogućuje vam uređivanje CSS-a bez pisanja koda i radi sa svakom WordPress temom.

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. Zxeion

Zxeion je moćan WordPress dodatak premium odgovoran za poboljšanje sigurnosti vaše web stranice. Ovaj dodatak sadrži kolekciju zaštitnih i sigurnosnih alata koji će zaštititi vašu web stranicu od mogućih napada.Zxeion wordpress dodaci štite web lokaciju od napada virusa malware-a

Njegov sistem zaštite u stvarnom vremenu pomoći će vam da prepoznate prijetnje vašoj web stranici i blokirate ih, a da pritom ne morate ništa učiniti.

Otkrijte i naše 7 dodataka za poboljšanje bočnih traka na WordPressu

Njegove značajke su: zaštita u stvarnom vremenu, izvrsna korisnička podrška, redovna ažuriranja, blokator IP adresa, izvrsna dokumentacija, moderno i profesionalno sučelje, namjenska korisnička podrška i ostalo

download | Demo | web hosting

2. Slaido 

Slaido je a WordPress dodatak premium koji vam omogućava da odaberete između gotovo 320 responzivnih šablona klizača i uvezete jedan od njih na svoju web stranicu u samo nekoliko klikova. To je kompletan paket šablona, ​​savršen za Slider Revolution. Dakle, prvo ćete ga morati instalirati da biste ga u potpunosti iskoristili WordPress dodatakPaket predložaka Slaido za klizač wordpress

Njegove glavne karakteristike su: prilagodljiv raspored klizača, jednostavnost uvoza ili izvoza klizača, redovna ažuriranja, korisnička podrška dostupna 24/7, fluidne i vrlo cool animacije, dostupnost video vodiči za brzi početak, podrška za Google fontove i mnogi drugi.

download | Demo | web hosting

3. Obratite nam se

Obrazac za kontaktiranje vrhunski je dodatak za WordPress koji reagira i jednostavan alat, ali bogat opcijama prilagođavanja koji vam omogućava prikaz jasnog i ohrabrujućeg obrasca na kojem vas posjetitelji mogu kontaktirati ostavljajući svoju poruku.

Kontaktirajte nas putem WordPress dodatka za kontakt obrasce

Moći ćete definirati potrebna polja, odabrati najbolji izgled polja i potpuno ga prilagoditi kako biste potaknuli svoje kupce ili posjetitelje da ostave svoje prijedloge ili poruke.

Pozivamo vas i da pročitate: 10 WordPress plugins za kreiranje i upravljanje web stranicama restorana

Jednostavno postavite adresu e-pošte na koju želite primati poruke i koristite je za rast vašeg poslovanja u najprofitabilnijem smjeru.

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.

zaključak

To je to! To je sve za ovaj vodič. Nadamo se da će vam pomoći da promijenite stranu bočne trake vašeg WordPress bloga. osjećaj se slobodno da ovaj članak podijelite 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.

...