Cum de a schimba Sidebar Side în WordPress

Recent, unul dintre cititorii noștri ne-a întrebat cum să schimbăm partea sidebar-ului într-o temă WordPress. Obținem această întrebare foarte mult în care utilizatorii doresc să își schimbe bara laterală de la stânga la dreapta sau de la dreapta la stânga. În acest articol, vă vom arăta cum să modificați partea bara laterală în WordPress.

De ce să schimbați bara laterală în WordPress

Experții în utilizare sunt de părere că oamenii scanează paginile de la stânga la dreapta. Ei recomandă plasarea conținutului important pe stânga, astfel încât utilizatorii să vadă primul conținut. Cu toate acestea, acest lucru ar putea fi inversat dacă site-ul dvs. se află într-o limbă scrisă în direcția Dreaptă spre stânga.

Multe site-uri WordPress folosesc aspectul tipic al blogului cu două coloane. Unul pentru conținut și o altă coloană pentru bara laterală.

Dacă tocmai ați început un site web, atunci ar trebui să selectați o temă WordPress care are bara laterală în locația preferată.

Multe teme au opțiuni pentru a comuta pe laturile barei laterale din setările temelor. Cu toate acestea, dacă tema dvs. nu are această opțiune, va trebui să schimbați manual bara laterală.

Acestea fiind spuse, să aruncăm o privire asupra modului în care puteți schimba cu ușurință partea laterală a barei laterale în WordPress folosind un pic de CSS.

Schimbarea Sidebar Side în WordPress folosind CSS

Înainte de a efectua modificări ale temei, ar trebui să vă gândiți mai întâi la crearea unei teme pentru copii. Folosind o temă de copil, vei putea actualiza tema părintelui fără a-ți pierde schimbările.

În al doilea rând, ar trebui întotdeauna să creezi o copie de rezervă a site-ului tău WordPress când faci schimbări directe în tema WordPress activă.

Veți avea nevoie de un client FTP pentru a edita fișierele tematice. Consultați ghidul nostru de începători cu privire la modul de utilizare a FTP pentru a încărca fișiere în WordPress.

Conectați-vă la site-ul dvs. WordPress utilizând clientul FTP și mergeți la dosarul tematic. Acesta este situat, de obicei, la:

/ Yourwebsite / wp-content / teme / dumneavoastră temă-director /

Acum, trebuie să descărcați și să deschideți fișierul principal al temei pentru temă într-un editor de text simplu, cum ar fi Notepad. Acest fișier este apelat style.css, și este localizat în directorul rădăcină al temei.

În acest fișier, găsiți clasa CSS pentru bara laterală. Este de obicei .bara laterală. În acest exemplu, folosim tema WordPress implicită Twenty Fifteen care are acest CSS pentru a defini bara laterală:

 .bara laterală float: left; margin-dreapta: -100%; max-lățime: 413px; poziție: relativă; lățime: 29,4118%;  

După cum puteți vedea, plutește bara laterală spre stânga, cu o marjă de -100% în dreapta. Vom schimba acest lucru pentru a pluti la dreapta și la marginea stângă astfel:

 .bara laterală float: right; marginea stângă: -100%; max-lățime: 413px; poziție: relativă; lățime: 29,4118%;  

Salvați modificările și încărcați fișierul stil.css înapoi pe site-ul dvs. web utilizând un client FTP. Acum, dacă vizitați site-ul dvs., acesta va arăta astfel:

Asta pentru că am mutat bara laterală, dar nu am mutat zona de conținut. Twenty Fifteen folosește acest CSS pentru a defini poziția zonei de conținut.

 .site-content afișare: bloc; plutește la stânga; margin-stânga: 29,4118%; lățime: 70,5882%;  

O vom schimba pentru a muta conținutul spre dreapta. Asa:

 .site-content afișare: bloc; plutește la stânga; margin-dreapta: 29,4118%; lățime: 70,5882%;  

Acesta este modul în care site-ul nostru sa uitat după ce a aplicat acest CSS.

După cum puteți vedea că am schimbat laturile atât pentru zona de conținut, cât și pentru bara laterală. Totuși, există un bloc alb în stânga.

Veți întâlni astfel de lucruri când lucrați cu CSS. Va fi nevoie de o activitate de detectiv pentru a afla ce provoacă acest lucru și cum să îl ajustați.

Utilizați instrumentul "Inspect" al browserului dvs. pentru a examina codul sursă. Punctați mouse-ul în regiunea afectată din browser, faceți clic cu butonul din dreapta și selectați Inspectați din meniul browserului.

Pe măsură ce mutați mouse-ul în vizualizarea codului sursă, veți observa zonele pe care le afectează evidențiate în previzualizarea live. În panoul din dreapta, veți putea vedea CSS-ul folosit pentru acel element selectat.

Am dat seama că acest CSS din foaia de stil trebuie să se adapteze.

 Ecranul @media și (min-width: 59.6875em) body: înainte de background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); conținut: ""; afișare: bloc; înălțime: 100%; min-înălțime: 100%; poziție: fixă; top: 0; stânga: 0; lățime: 29,4118%; z-index: 0; / * Remediază bug-ul intermitent cu deplasarea pe Safari * / 

Acest cod CSS adaugă un bloc de conținut gol de 29,4118% lățime și 100% lățime în partea stângă sus. Iată cum o vom muta la dreapta.

 Ecranul @media și (min-width: 59.6875em) body: înainte de background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); conținut: ""; afișare: bloc; înălțime: 100%; min-înălțime: 100%; poziție: fixă; top: 0; dreapta: 0; lățime: 29,4118%; z-index: 0; / * Remediază bug-ul intermitent cu deplasarea pe Safari * / 

După salvarea și încărcarea foii de stil înapoi la server, acesta este modul în care site-ul nostru a arătat.

Lucrul cu CSS poate fi confuz pentru incepatori. Dacă nu doriți să faceți toate lucrările de cod manual, atunci vă recomandăm să încercați CSS Hero. Acesta vă permite să editați CSS fără a scrie orice cod și funcționează cu fiecare temă WordPress.

Sperăm că acest articol v-a ajutat să schimbați bara laterală în WordPress. Ați putea dori, de asemenea, să vedeți lista noastră de 12 trucuri Sidebar pentru a obține rezultate maxime.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.