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

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

U ovom ćemo vam vodiču pokazati kako promijeniti lokaciju bočne trake na WordPressu.

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

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

Stručnjaci za uporabljivost 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še web mjesto na RTL jeziku (desno s lijeve strane).

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

Mnoge web stranice WordPress koriste tipični izgled bloga s 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 WordPressa koja na vašem preferiranom mjestu ima bočnu traku.

Mnogi WordPress teme ponudi 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 stvaranje teme za djecu, Pomoću podređene teme moći ćete ažurirati svoju roditeljsku temu bez gubitka promjena.

Otkrijte Kako prikazati različite sidebar za svaku stavku na WordPress

Drugo, uvijek biste trebali izrađivati ​​sigurnosnu kopiju web lokacije WordPress kada mijenjate aktivnu temu u stvarnom vremenu.

Trebat će vam FTP klijent za uređivanje datoteka teme WordPressa. Posavjetujte se s vodič o tome kako koristiti FTP.

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

 / Yoursite / wp-sadržaja / teme / vaše-tema-mape / 

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

Otkrijte kako upravljati datotekama i mapama WordPress

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 i petnaest Tko 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 promjene i učitajte style.css datoteku na svoju web stranicu pomoću FTP klijenta. Ako posjetite vašu web stranicu, izgledat će ovako:

Demo web promjenu sidebar

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.

web mjesto nove prezentacije premješteno

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

Idite dalje otkrivanjem kako upravljati datotekama i mapama WordPress

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

Upotrijebite alat "Inspector" u pregledniku da biste pogledali izvorni kod. Usmjerite miš na pogođenu regiju u pregledniku, kliknite desnom tipkom i odaberite "Inspector" s izbornika preglednika.

pregledati funkcije preglednik

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.

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

Stoga se CSS koji odgovara označenoj stavci mora prilagoditi.

@media zaslon i (minimalna širina: 59.6875em) {tijelo: prije {background-color: #fff; okvir-sjena: 0 0 1px rgba (0, 0, 0, 0.15); sadržaj: ""; prikaz: blok; visina: 100%; minimalna visina: 100%; položaj: fiksiran; gore: 0; slijeva: 0; širina: 29.4118%; z-indeks: 0; / * Ispravlja treperi bug pomicanjem po Safariju * ​​/}

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 (minimalna širina: 59.6875em) {tijelo: prije {background-color: #fff; okvir-sjena: 0 0 1px rgba (0, 0, 0, 0.15); sadržaj: ""; prikaz: blok; visina: 100%; minimalna visina: 100%; položaj: fiksiran; gore: 0; desno: 0; širina: 29.4118%; z-indeks: 0; / * Ispravlja treperi bug pomicanjem po Safariju * ​​/}

Nakon spremanja i prijenosa tabele stilova na poslužitelj, ovako će izgledati vaše web mjesto.

Novi izgled web stranice sidebar na desnoj strani

Rad s 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, a radi sa svakom WordPress temom.

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

Zxeion je moćan WordPress plugin premium odgovoran za poboljšanje sigurnosti vaše web stranice. Ovaj dodatak sadrži zbirku zaštitnih i sigurnosnih alata koji će zaštititi vašu web stranicu od mogućih napada.Zxeion wordpress dodaci štite web mjesto od napada virusa zlonamjernog softvera

Njegov sustav zaštite u stvarnom vremenu pomoći će vam da identificirate 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 su značajke: zaštita u stvarnom vremenu, izvrsna korisnička podrška, redovita ažuriranja, blokator IP adresa, izvrsna dokumentacija, moderno i profesionalno sučelje, namjenska korisnička podrška i ostalo

Preuzmite | demo | Web hosting

2. Slaido 

Slaido je a WordPress plugin premium koji vam omogućuje odabir između gotovo 320 responzivnih klizačkih predložaka i uvoz jednog od njih na vaše web mjesto u samo nekoliko klikova. To je kompletan paket predložaka, savršen za Slider revolucija. Stoga ćete ga prvo morati instalirati da biste ga u potpunosti mogli koristiti WordPress pluginPaket predložaka Slaido za klizač wordpress

Njegove glavne značajke su: prilagodljiv raspored klizača, jednostavnost uvoza ili izvoza klizača, redovita ažuriranja, korisnička podrška dostupna 24 sata dnevno, 7 dana u danu, fluidne i vrlo cool animacije, dostupnost video vodiči za brzi početak, podrška za Google Fonts i mnogi drugi.

Preuzmite | demo | Web hosting

3. Obratite nam se

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

Obratite nam se 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.

Također vas pozivamo da pročitate: 10 WordPress dodaci za stvaranje i upravljanje web-lokacijom restorana

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

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.

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. slobodno se ovaj članak podijelite 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.

...