Recent, unul dintre cititorii noștri ne-a întrebat cum să schimbăm partea laterală a unei teme WordPress?
De obicei, primim această întrebare de la utilizatorii care doresc să schimbe locația barei lor laterale de la stânga la dreapta sau de la dreapta la stânga.
În acest tutorial, vă vom arăta cum puteți schimba locația barei laterale pe WordPress.
Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs.
Apoi înapoi la motivul pentru care suntem aici.
De ce să schimbați locația barei laterale pe WordPress?
Experții în utilizare sunt de părere că oamenii scanează paginile de la stânga la dreapta. Recomandăm să puneți conținut important în stânga, astfel încât utilizatorii să vadă acest conținut mai întâi. Cu toate acestea, acest lucru ar putea fi inversat dacă site-ul dvs. web este într-o limbă RTL (dreapta în stânga).
Aflați dacă ar trebui ca blogul dvs. WordPress să aibă bare laterale
Multe site-uri web WordPress folosesc aspectul tipic al blogului cu două coloane. Una pentru conținut și cealaltă coloană pentru bara laterală.
Dacă sunteți nou pe site-urile web, atunci ar trebui să selectați o temă WordPress care are o bară laterală pe locația preferată.
multe Teme WordPress oferă opțiuni pentru a schimba partea laterală a barei laterale în setările barei laterale. Cu toate acestea, dacă tema dvs. WordPress nu are această opțiune, va trebui să schimbați manual partea laterală. Mergeți mai departe descoperind cum să eliminați bara laterală de pe WordPress
Acestea fiind spuse, să aruncăm o privire la metoda pe care trebuie să o utilizați pentru a schimba cu ușurință partea laterală a WordPress folosind CSS.
Modificarea barei laterale cu CSS
Înainte de a aduce modificări temei dvs. WordPress, ar trebui să luați în considerare mai întâi crearea unei teme pentru copii. Folosind o temă pentru copii, veți putea actualiza tema părintească fără a vă pierde modificările.
Descopera Cum de a afișa o bară laterală diferit pentru fiecare articol de pe WordPress
În al doilea rând, ar trebui să creezi întotdeauna o copie de rezervă a site-ului tău WordPress atunci când faci modificări în timp real la tema activă.
Veți avea nevoie de un client FTP pentru a edita fișierele tematice WordPress. Consultați ghid privind modul de utilizare a FTP.
Conectați-vă la site-ul dvs. WordPress folosind clientul FTP și navigați la folderul cu teme. Acesta este de obicei situat la:
/ Yoursite / wp-content / teme / dumneavoastră temă-director /
Acum trebuie să descărcați și să deschideți fișierul principal al foii de stil a temei dvs. WordPress într-un editor de text precum Notepad. Acest fișier se numește style.cssși se află în directorul rădăcină al temei dvs. WordPress.
Descopera cum să gestionați fișiere și foldere WordPress
În acest fișier, găsiți clasa CSS din bara laterală. În general această clasă este " bara laterală “. În acest exemplu, folosim tema implicită WordPress " douăzeci și cincisprezece Cine are această clasă pentru bara laterală:
.sidebar {float: stânga; margine-dreapta: -100%; lățime maximă: 413px; poziție: relativă; latime: 29.4118%; }
După cum puteți vedea bara laterală plutește spre stânga cu o marjă de -100%. Vom schimba plutirea spre dreapta:
.sidebar {float: right; margine-stânga: -100%; lățime maximă: 413px; poziție: relativă; latime: 29.4118%; }
Salvați-vă modificările și încărcați fișierul style.css pe site-ul dvs. web utilizând un client FTP. Acum, dacă vizitați site-ul dvs. web, acesta va arăta astfel:
Într-adevăr, am mutat bara laterală, dar nu am mutat zona de conținut. " douăzeci și Cincisprezece Utilizează acest CSS pentru a defini poziția zonei de conținut.
.site-content {display: bloc; float: stânga; margine-stânga: 29.4118%; latime: 70.5882%; }
Îl vom schimba pentru a muta conținutul spre dreapta. După cum urmează:
.site-content {display: bloc; float: stânga; margine-dreapta: 29.4118%; latime: 70.5882%; }
Iată cum va arăta site-ul dvs. web după aplicarea acestui cod CSS.
După cum vedeți, am schimbat locația zonei de conținut și a barei laterale. Cu toate acestea, mai există un bloc alb în stânga.
Mergeți mai departe descoperind cum să gestionați fișiere și foldere WordPress
De multe ori veți întâlni aceste erori atunci când lucrați cu CSS. Va fi nevoie de unele lucrări de detectivi pentru a înțelege ce provoacă acest lucru și cum să îl rezolvi.
Utilizați instrumentul „Inspector” al browserului pentru a vedea codul sursă. Îndreptați mouse-ul spre regiunea afectată din browser, faceți clic dreapta și selectați „Inspector” din meniul browserului.
Pe măsură ce deplasați mouse-ul în jurul vizualizării 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.
Descoperiți-ne Pluginurile 5 WordPress pentru a edita vizual CSS pe blogul dvs.
Deci CSS corespunzător articolului evidențiat trebuie reajustat.
ecran @media și (min-lățime: 59.6875em) {body: înainte {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); continut: ""; afișare: bloc; inaltime: 100%; inaltime minima: 100%; poziție: fix; partea de sus: 0; la stânga: 0; latime: 29.4118%; index z: 0; / * Remediază erorile intermitente cu derularea pe Safari * /}
Acest cod CSS adaugă un bloc gol de 29,4118% lățime și o lățime de 100% în stânga sus. Iată cum o vom muta la dreapta.
ecran @media și (min-lățime: 59.6875em) {body: înainte {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); continut: ""; afișare: bloc; inaltime: 100%; inaltime minima: 100%; poziție: fix; partea de sus: 0; dreapta: 0; latime: 29.4118%; index z: 0; / * Remediază erorile intermitente cu derularea pe Safari * /}
După ce ați salvat și încărcat foaia de stil pe server, așa va arăta site-ul dvs. web.
Lucrul cu CSS poate fi confuz pentru începători. Dacă nu doriți să faceți toate lucrările manuale, atunci puteți încerca Pluginul WordPress CSS Hero. Vă permite să editați CSS fără a scrie cod și funcționează cu fiecare temă WordPress.
Descoperiți și câteva plugin-uri premium WordPress
Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.
Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.
1. Zxeion
Zxeion este un puternic WordPress plug-in premium responsabil pentru îmbunătățirea securității site-ului dvs. Acest plugin conține o colecție de instrumente de protecție și securitate care vă vor proteja site-ul împotriva posibilelor atacuri.
Sistemul său de protecție în timp real vă va ajuta să identificați amenințările la adresa site-ului dvs. web și să le blocați, fără a fi necesar să faceți nimic.
Descoperiți și noi 7 plugin-uri pentru a-ți îmbunătăți barele laterale pe WordPress
Caracteristicile sale sunt: protecție în timp real, asistență excelentă pentru clienți, actualizări regulate, blocator de adrese IP, documentație excelentă, interfață modernă și profesională, asistență dedicată pentru clienți și altele
Descarca | Demo | web hosting
2. Slaido
Slaido este un WordPress plug-in premium care vă permite să alegeți dintre aproape 320 de șabloane de glisare receptive și să importați unul dintre ele pe site-ul dvs. în doar câteva clicuri. Este un pachet complet de șabloane, perfect pentru Revoluția Slider. Deci, va trebui să-l instalați mai întâi pentru a utiliza acest lucru pe deplin WordPress plug-in
Principalele sale caracteristici sunt: un aspect receptiv al glisoarelor sale, ușurința de a importa sau exporta glisoare, actualizări regulate, asistență pentru clienți disponibilă 24/7, animații fluide și foarte interesante, tutoriale video pentru un început rapid, asistență pentru Google Fonts și multe altele.
Descarca | Demo | web hosting
3. Contactați-ne Formularul
Contact Us Form este un plugin WordPress receptiv premium și un instrument simplu, dar bogat în opțiuni de personalizare, care vă permite să afișați un formular clar și încurajator, pe care vizitatorii dvs. vă pot contacta lăsând mesajul lor.
Vei putea defini câmpurile necesare, alege cea mai bună dispunere a câmpurilor și personalizează-l complet pentru a încuraja clienții sau vizitatorii să-și lase sugestiile sau mesajele.
De asemenea, vă invităm să citiți: Pluginurile 10 WordPress pentru a crea și administra un site web al restaurantului
Setați doar adresa de e-mail unde doriți să primiți mesajele și folosiți-o pentru a vă dezvolta afacerea în cea mai profitabilă direcție.
Descarca | Demo | web hosting
Resurse recomandate
Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.
- Cum puteți găsi adresa URL de conectare a blogului dvs. WordPress
- Cum se creează o zonă de super-erou cu text animat
- Cum să personalizați CSS-ul site-ului dvs. WordPress
- Cum de a adăuga categorii în meniul de blog-ul dvs. WordPress
Concluzie
Acolo! Gata pentru acest tutorial. Sperăm că vă va ajuta să schimbați latura laterală a blogului dvs. WordPress. simte-te liber sa împărtășește acest articol cu prietenii de pe rețelele de socializare preferate.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.
Dacă aveți sugestii sau observații, lăsați-le în secțiunea noastră comentarii.
...
